{ __( @@ -238,6 +498,48 @@ export default function CollabSidebar() {
+ { __( + 'Are you sure you want to delete this thread?' + ) } +
+|<\/p>$/g, - '' - ); + if (threadID) { + const editedComment = newEditedComment.replace(/^
|<\/p>$/g, '');
- apiFetch( {
+ apiFetch({
path: '/wp/v2/comments/' + threadID,
method: 'POST',
data: {
content: editedComment,
- },
- } ).then( ( response ) => {
+ }
+ })
+ .then((response) => {
if ( 'trash' !== response.status && '' !== response.id ) {
setCommentEdit( false );
setCommentEditedMessage( true );
}
- } );
+ })
}
};
const confirmDeleteComment = ( threadID ) => {
setDeleteCommentShowConfirmation( false );
- if ( threadID ) {
- apiFetch( {
+ if (threadID) {
+ apiFetch({
path: '/wp/v2/comments/' + threadID,
method: 'DELETE',
- } ).then( ( response ) => {
+ })
+ .then((response) => {
if ( 'trash' === response.status && '' !== response.id ) {
setCommentDeleteMessage( true );
}
- } );
+ })
}
};
@@ -156,11 +186,210 @@ export default function CollabSidebar() {
}
};
- const confirmReplyComment = () => {};
+ const confirmReplyComment = ( threadID ) => {
+ if (threadID) {
+
+ const newComment = generateReplyComment( commentReply );
+ const commentId = newComment?.commentId;
+ const updatedComments = getUpdatedComments( newComment, commentId );
+
+ apiFetch({
+ path: '/wp/v2/comments/',
+ method: 'POST',
+ data: {
+ parent: threadID,
+ post: postID,
+ content: newComment.comment,
+ comment_date: newComment.createdAt,
+ comment_type: 'block_comment',
+ comment_author: currentUser,
+ comment_approved: 0,
+ }
+ })
+ .then((response) => {
+ if ( 'trash' !== response.status && '' !== response.id ) {
+ setReplyMessage( true );
+ }
+ })
+ }
+ }
+
+ // Helper function to get updated comments structure
+ const getUpdatedComments = ( newComment, threadKey ) => ( {
+ ...threads,
+ [ threadKey ]: {
+ isResolved: false,
+ createdAt:
+ threads?.threadKey?.createdAt || new Date().toISOString(),
+ createdBy: currentUser,
+ comments: {
+ 0: newComment,
+ },
+ },
+ } );
+
+ const generateReplyComment = (comment) => ( {
+ commentId: Date.now(),
+ createdBy: currentUser,
+ comment,
+ createdAt: new Date().toISOString(),
+ } );
+
+ const generateNewComment = () => ( {
+ commentId: Date.now(),
+ createdBy: currentUser,
+ comment: inputComment,
+ createdAt: new Date().toISOString(),
+ } );
// Get the date time format from WordPress settings.
const dateTimeFormat = 'h:i A';
- const resultThreads = selectedThreads.map( ( thread ) => thread ).reverse();
+ const resultThreads = selectedThreads.map(thread => thread).reverse();
+
+ // State to manage the comment thread.
+ const [ inputComment, setInputComment ] = useState( '' );
+ const [ isResolved, setIsResolved ] = useState( false );
+ const [ isEditing, setIsEditing ] = useState( null );
+ const curruntUserData = useSelect( ( select ) => {
+ // eslint-disable-next-line @wordpress/data-no-store-string-literals
+ return select( 'core' ).getCurrentUser();
+ }, [] );
+
+ let userAvatar = 'https://secure.gravatar.com/avatar/92929292929292929292929292929292?s=48&d=mm&r=g';
+ if( curruntUserData?.avatar_urls ) {
+ userAvatar = curruntUserData?.avatar_urls[ 48 ];
+ }
+
+ //const userAvatar = curruntUserData?.avatar_urls[ 48 ] ? curruntUserData?.avatar_urls[ 48 ] : null;
+
+ const currentUser = curruntUserData?.name || null;
+
+ const allThreads = [];
+ const threadId = 0;
+ const currentThread = allThreads[ threadId ] ?? {};
+ const isCurrentThreadResolved = currentThread.threadIsResolved || false;
+ const commentsCount = isCurrentThreadResolved
+ ? 0
+ : currentThread.comments?.length || 0;
+ // eslint-disable-next-line @wordpress/data-no-store-string-literals
+ const postID = useSelect( ( select ) => {
+ // eslint-disable-next-line @wordpress/data-no-store-string-literals
+ return select( 'core/editor' ).getCurrentPostId();
+ }, [] );
+
+ const clientId = useSelect((select) => {
+ // eslint-disable-next-line @wordpress/data-no-store-string-literals
+ const { getSelectedBlockClientId } = select('core/block-editor');
+ return getSelectedBlockClientId();
+ }, []);
+
+ const blockClassName = useSelect((select) => {
+ // eslint-disable-next-line @wordpress/data-no-store-string-literals
+ return select( 'core/block-editor' ).getBlock( select('core/block-editor').getSelectedBlockClientId() )?.attributes?.className;
+ }, []);
+
+ // Get the dispatch functions to save the comment and update the block attributes.
+ // eslint-disable-next-line @wordpress/data-no-store-string-literals
+ const { updateBlockAttributes } = useDispatch( 'core/block-editor' );
+
+ // // Function to add a border class to the content reference.
+ const setAttributes = () => {
+ updateBlockAttributes( clientId, {
+ className: `block-editor-collab__${ threadId }`,
+ } );
+ };
+
+ // Function to save the comment.
+ const saveComment = () => {
+ const newComment = generateNewComment();
+ apiFetch( {
+ path: '/wp/v2/comments',
+ method: 'POST',
+ data: {
+ post: postID,
+ content: newComment.comment,
+ comment_date: newComment.createdAt,
+ comment_type: 'block_comment',
+ comment_author: currentUser,
+ comment_approved: 0,
+ },
+ } ).then( (response) => {
+ const threadId = response?.id;
+ setAttributes( clientId, threadId );
+ setInputComment('');
+ //onClose();
+ } );
+ };
+
+ // Function to edit the comment.
+ const editComment = ( commentId ) => {
+ const editedComments = { ...allThreads };
+
+ if (
+ editedComments[ threadId ] &&
+ editedComments[ threadId ].comments
+ ) {
+ editedComments[ threadId ].comments.map( ( comment ) => {
+ if ( comment.commentId === commentId ) {
+ comment.comment = inputComment;
+ comment.date = new Date().toISOString();
+ }
+ return comment;
+ } );
+ }
+
+ setInputComment( '' );
+ setIsEditing( null );
+ };
+
+ // Function to mark thread as resolved
+ const markThreadAsResolved = () => {
+ setIsResolved( true );
+
+ const updatedComments = { ...allThreads };
+
+ updatedComments[ threadId ] = {
+ ...updatedComments[ threadId ],
+ isResolved: true,
+ resolvedBy: currentUser,
+ resolvedAt: new Date().toISOString(),
+ };
+
+ onClose();
+ };
+
+ // Function to delete a comment.
+ const deleteComment = ( commentId ) => {
+ // Filter out the comment to be deleted.
+ const currentComments = allThreads[ threadId ].comments.filter(
+ ( comment ) => comment.commentId !== commentId
+ );
+
+ const updatedComments = { ...allThreads };
+
+ // If there are no comments, delete the thread.
+ if ( currentComments.length === 0 ) {
+ delete updatedComments[ threadId ];
+ } else {
+ updatedComments[ threadId ] = {
+ ...allThreads[ threadId ],
+ comments: currentComments,
+ };
+ }
+ };
+
+ // Function to show the confirmation overlay.
+ const showConfirmationOverlay = () => setShowConfirmation( true );
+
+ // Function to hide the confirmation overlay.
+ const hideConfirmationOverlay = () => setShowConfirmation( false );
+
+
+ // On cancel, remove the border if no comments are present.
+ const handleCancel = () => {
+ //onClose();
+ };
+
return (
+ { comment }
+
- { __(
- 'Are you sure you want to mark this thread as resolved?'
- ) }
-
+ { __(
+ 'Are you sure you want to mark this thread as resolved?'
+ ) }
+
+ { __(
+ 'Are you sure you want to delete this thread?'
+ ) }
+
- { __(
- 'Are you sure you want to delete this thread?'
- ) }
-
+ { __(
+ 'Are you sure you want to mark this thread as resolved?'
+ ) }
+
+ { __(
+ 'Are you sure you want to delete this thread?'
+ ) }
+
+ { comment }
+ |<\/p>$/g,
+ ''
+ );
+
+ apiFetch( {
+ path: '/wp/v2/comments/' + threadID,
+ method: 'POST',
+ data: {
+ content: editedComment,
+ },
+ } ).then( ( response ) => {
+ if ( 'trash' !== response.status && '' !== response.id ) {
+ setCommentEdit( false );
+ setCommentEditedMessage( true );
+ }
+ } );
+ }
+ };
+
+ const confirmDeleteComment = ( threadID ) => {
+ setDeleteCommentShowConfirmation( false );
+ if ( threadID ) {
+ apiFetch( {
+ path: '/wp/v2/comments/' + threadID,
+ method: 'DELETE',
+ } ).then( ( response ) => {
+ if ( 'trash' === response.status && '' !== response.id ) {
+ setCommentDeleteMessage( true );
+ }
+ } );
+ }
+ };
+
+ const onReplyComment = ( threadID ) => {
+ if ( threadID ) {
+ setCommentEdit( false );
+ setHasCommentReply( true );
+ }
+ };
+
+ // Helper function to get updated comments structure
+ const getUpdatedComments = ( newComment, threadKey ) => ( {
+ ...threads,
+ [ threadKey ]: {
+ isResolved: false,
+ createdAt:
+ threads?.threadKey?.createdAt || new Date().toISOString(),
+ createdBy: currentUser,
+ comments: {
+ 0: newComment,
+ },
+ },
+ } );
+
+
+ const generateReplyComment = (comment) => ( {
+ commentId: Date.now(),
+ createdBy: currentUser,
+ comment,
+ createdAt: new Date().toISOString(),
+ } );
+
+
+ const confirmReplyComment = ( threadID ) => {
+ if (threadID) {
+
+ const newComment = generateReplyComment( commentReply );
+ const commentId = newComment?.commentId;
+ const updatedComments = getUpdatedComments( newComment, commentId );
+
+ apiFetch({
+ path: '/wp/v2/comments/',
+ method: 'POST',
+ data: {
+ parent: threadID,
+ post: postID,
+ content: newComment.comment,
+ comment_date: newComment.createdAt,
+ comment_type: 'block_comment',
+ comment_author: currentUser,
+ comment_approved: 0,
+ }
+ })
+ .then((response) => {
+ if ( 'trash' !== response.status && '' !== response.id ) {
+ setReplyMessage( true );
+ }
+ })
+ }
+ }
+
+ return (
+ <>
+ {
+ // If there are no threads, show a message indicating no threads are available.
+ ( ! Array.isArray( threads ) || threads.length === 0 ) && (
+
+ { __(
+ 'Are you sure you want to mark this thread as resolved?'
+ ) }
+
+ { __(
+ 'Are you sure you want to delete this thread?'
+ ) }
+ |<\/p>$/g,
- ''
- );
-
- apiFetch( {
- path: '/wp/v2/comments/' + threadID,
- method: 'POST',
- data: {
- content: editedComment,
- },
- } ).then( ( response ) => {
- if ( 'trash' !== response.status && '' !== response.id ) {
- setCommentEdit( false );
- setCommentEditedMessage( true );
- }
- } );
- }
- };
-
- const confirmDeleteComment = ( threadID ) => {
- setDeleteCommentShowConfirmation( false );
- if ( threadID ) {
- apiFetch( {
- path: '/wp/v2/comments/' + threadID,
- method: 'DELETE',
- } ).then( ( response ) => {
- if ( 'trash' === response.status && '' !== response.id ) {
- setCommentDeleteMessage( true );
- }
- } );
- }
- };
-
- const onReplyComment = ( threadID ) => {
- if ( threadID ) {
- setCommentEdit( false );
- setHasCommentReply( true );
- }
- };
-
- const confirmReplyComment = () => {};
-
- // Get the date time format from WordPress settings.
- const dateTimeFormat = 'h:i A';
const resultThreads = selectedThreads.map( ( thread ) => thread ).reverse();
return (
@@ -170,379 +74,8 @@ export default function CollabSidebar() {
icon={ commentIcon }
>
- { __(
- 'Are you sure you want to mark this thread as resolved?'
- ) }
-
- { __(
- 'Are you sure you want to delete this thread?'
- ) }
-
+
+ { currentUser }
+
+
-
+
+ { currentUser }
+
+
+
-
- { comment } -
-+ { comment } +
++ { __( + 'Are you sure you want to mark this thread as resolved?' + ) } +
++ { __( + 'Are you sure you want to delete this thread?' + ) } +
+
- { __(
- 'Are you sure you want to mark this thread as resolved?'
+
+
+ { __( + 'Are you sure you want to mark this thread as resolved?' + ) } +
+- { __( - 'Are you sure you want to delete this thread?' - ) } -
-+ { __( + 'Are you sure you want to delete this thread?' + ) } +
+- { comment } -
-- { __( - 'Are you sure you want to mark this thread as resolved?' - ) } -
- - -- { comment } -
-- { comment } -
- - ) } - - ) - ) } - ++ { comment } +
++ { cofirmMessage ?? __( 'Are you sure?' ) } +
+- { comment } -
-+ { comment } +
+- { cofirmMessage ?? __( 'Are you sure?' ) } -
+{ cofirmMessage ?? __( 'Are you sure?' ) }
- { comment } -
-|<\/p>$/g, - '' - ); + const confirmEditComment = ( threadID, comment ) => { + if ( threadID && comment.length > 0 ) { + const editedComment = comment.replace( /^
|<\/p>$/g, '' );
apiFetch( {
path: '/wp/v2/comments/' + threadID,
@@ -93,7 +91,14 @@ export function Comments( { threads } ) {
} ).then( ( response ) => {
if ( 'trash' !== response.status && '' !== response.id ) {
setCommentEdit( false );
- setCommentEditedMessage( true );
+ createNotice(
+ 'snackbar',
+ __( 'Thread edited successfully.' ),
+ {
+ type: 'snackbar',
+ isDismissible: true,
+ }
+ );
}
} );
}
@@ -107,19 +112,19 @@ export function Comments( { threads } ) {
method: 'DELETE',
} ).then( ( response ) => {
if ( 'trash' === response.status && '' !== response.id ) {
- setCommentDeleteMessage( true );
+ createNotice(
+ 'snackbar',
+ __( 'Thread deleted successfully.' ),
+ {
+ type: 'snackbar',
+ isDismissible: true,
+ }
+ );
}
} );
}
};
- const onReplyComment = ( threadID ) => {
- if ( threadID ) {
- setCommentEdit( false );
- setHasCommentReply( true );
- }
- };
-
const generateReplyComment = ( comment ) => ( {
commentId: Date.now(),
createdBy: currentUser,
@@ -127,9 +132,9 @@ export function Comments( { threads } ) {
createdAt: new Date().toISOString(),
} );
- const confirmReplyComment = ( threadID ) => {
+ const confirmReplyComment = ( threadID, comment ) => {
if ( threadID ) {
- const newComment = generateReplyComment( commentReply );
+ const newComment = generateReplyComment( comment );
apiFetch( {
path: '/wp/v2/comments/',
method: 'POST',
@@ -144,7 +149,14 @@ export function Comments( { threads } ) {
},
} ).then( ( response ) => {
if ( 'trash' !== response.status && '' !== response.id ) {
- setReplyMessage( true );
+ createNotice(
+ 'snackbar',
+ __( 'Reply added successfully.' ),
+ {
+ type: 'snackbar',
+ isDismissible: true,
+ }
+ );
}
} );
}
@@ -161,6 +173,12 @@ export function Comments( { threads } ) {
);
}, [] );
+ const onCancel = () => {
+ setHasCommentReply( false );
+ setCommentEdit( false );
+ setShowConfirmation( false );
+ }
+
return (
<>
{
@@ -196,13 +214,13 @@ export function Comments( { threads } ) {
|<\/p>$/g, '' );
+ const editedComment = removep( comment );
apiFetch( {
path: '/wp/v2/comments/' + threadID,
@@ -120,7 +121,7 @@ export default function CollabSidebar() {
content: editedComment,
},
} ).then( ( response ) => {
- if ( 'trash' !== response.status && '' !== response.id ) {
+ if ( response ) {
createNotice(
'snackbar',
__( 'Thread edited successfully.' ),
@@ -150,7 +151,7 @@ export default function CollabSidebar() {
comment_approved: 0,
},
} ).then( ( response ) => {
- if ( 'trash' !== response.status && '' !== response.id ) {
+ if ( response ) {
createNotice(
'snackbar',
__( 'Reply added successfully.' ),
@@ -171,7 +172,7 @@ export default function CollabSidebar() {
path: '/wp/v2/comments/' + threadID,
method: 'DELETE',
} ).then( ( response ) => {
- if ( 'trash' === response.status && '' !== response.id ) {
+ if ( response ) {
updateBlockAttributes( clientId, {
blockCommentId: undefined,
showCommentBoard: undefined,
@@ -240,17 +241,21 @@ export default function CollabSidebar() {
// eslint-disable-next-line @wordpress/data-no-store-string-literals
return select( 'core/block-editor' ).getBlocks();
}, [] );
-
- const filteredBlocks = allBlocks?.filter(block =>
- block.attributes.blockCommentId !== 0
+
+ const filteredBlocks = allBlocks?.filter(
+ ( block ) => block.attributes.blockCommentId !== 0
);
- const blockCommentIds = filteredBlocks?.map(block => block.attributes.blockCommentId);
+ const blockCommentIds = filteredBlocks?.map(
+ ( block ) => block.attributes.blockCommentId
+ );
const resultThreads = threads?.slice().reverse();
- const threadIdMap = new Map(resultThreads?.map(thread => [thread.id, thread]));
+ const threadIdMap = new Map(
+ resultThreads?.map( ( thread ) => [ thread.id, thread ] )
+ );
const sortedThreads = blockCommentIds
- .map(id => threadIdMap.get(id))
- .filter(thread => thread !== undefined);
+ .map( ( id ) => threadIdMap.get( id ) )
+ .filter( ( thread ) => thread !== undefined );
// Check if the experimental flag is enabled.
if ( ! isBlockCommentExperimentEnabled ) {
From 8a54986e2b5bc2c9cd7d28d425c00b750c52ef06 Mon Sep 17 00:00:00 2001
From: minaldiwan <77973388+minaldiwan@users.noreply.github.com>
Date: Wed, 4 Sep 2024 15:55:07 +0530
Subject: [PATCH 086/159] Update classes name and remove unwanted classes
---
.../components/collab-sidebar/add-comment.js | 11 ++---
.../src/components/collab-sidebar/comments.js | 34 +++++++-------
.../src/components/collab-sidebar/index.js | 2 +-
.../src/components/collab-sidebar/style.scss | 45 +++++++++----------
4 files changed, 42 insertions(+), 50 deletions(-)
diff --git a/packages/editor/src/components/collab-sidebar/add-comment.js b/packages/editor/src/components/collab-sidebar/add-comment.js
index 2ebe169e40e483..6a43adbb4510e5 100644
--- a/packages/editor/src/components/collab-sidebar/add-comment.js
+++ b/packages/editor/src/components/collab-sidebar/add-comment.js
@@ -82,17 +82,17 @@ export function AddComment( { onSubmit } ) {
return (
-
+
{ currentUser }