Inline Commenting: Avoid querying comments on editor load (WordPress#…

…66670) Co-authored-by: Mamaduka <[email protected]> Co-authored-by: ellatrix <[email protected]> Co-authored-by: mtias <[email protected]>
up1512001 · Nov 4, 2024 · 5445afc · 5445afc
1 parent 7c7c206
commit 5445afc
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 77 deletions.
diff --git a/packages/editor/src/components/collab-sidebar/add-comment.js b/packages/editor/src/components/collab-sidebar/add-comment.js
@@ -35,25 +35,22 @@ export function AddComment( {
 	// State to manage the comment thread.
 	const [ inputComment, setInputComment ] = useState( '' );
 
-	const {
-		defaultAvatar,
-		clientId,
-		blockCommentId,
-		showAddCommentBoard,
-		currentUser,
-	} = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const { __experimentalDiscussionSettings } = getSettings();
-		const selectedBlock = select( blockEditorStore ).getSelectedBlock();
-		const userData = select( coreStore ).getCurrentUser();
-		return {
-			defaultAvatar: __experimentalDiscussionSettings?.avatarURL,
-			clientId: selectedBlock?.clientId,
-			blockCommentId: selectedBlock?.attributes?.blockCommentId,
-			showAddCommentBoard: showCommentBoard,
-			currentUser: userData,
-		};
-	} );
+	const { defaultAvatar, clientId, blockCommentId, currentUser } = useSelect(
+		( select ) => {
+			const { getSettings, getSelectedBlock } =
+				select( blockEditorStore );
+			const { __experimentalDiscussionSettings } = getSettings();
+			const selectedBlock = getSelectedBlock();
+			const userData = select( coreStore ).getCurrentUser();
+			return {
+				defaultAvatar: __experimentalDiscussionSettings?.avatarURL,
+				clientId: selectedBlock?.clientId,
+				blockCommentId: selectedBlock?.attributes?.blockCommentId,
+				currentUser: userData,
+			};
+		},
+		[]
+	);
 
 	const userAvatar =
 		currentUser && currentUser.avatar_urls && currentUser.avatar_urls[ 48 ]
@@ -69,7 +66,7 @@ export function AddComment( {
 		setInputComment( '' );
 	};
 
-	if ( ! showAddCommentBoard || ! clientId || undefined !== blockCommentId ) {
+	if ( ! showCommentBoard || ! clientId || undefined !== blockCommentId ) {
 		return null;
 	}
 

diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js
@@ -22,8 +22,6 @@ import { store as editorStore } from '../../store';
 import AddCommentButton from './comment-button';
 import AddCommentToolbarButton from './comment-button-toolbar';
 
-const EMPTY_ARRAY = [];
-
 const isBlockCommentExperimentEnabled =
 	window?.__experimentalEnableBlockComment;
 const modifyBlockCommentAttributes = ( settings ) => {
@@ -46,19 +44,13 @@ addFilter(
 	modifyBlockCommentAttributes
 );
 
-/**
- * Renders the Collab sidebar.
- */
-export default function CollabSidebar() {
+function CollabSidebarContent( { showCommentBoard, setShowCommentBoard } ) {
 	const { createNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord, deleteEntityRecord } = useDispatch( coreStore );
 	const { getEntityRecord } = resolveSelect( coreStore );
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
-	const [ showCommentBoard, setShowCommentBoard ] = useState( false );
 
-	const { postId, postStatus, threads } = useSelect( ( select ) => {
-		const { getCurrentPostId, getEditedPostAttribute } =
-			select( editorStore );
+	const { postId, threads } = useSelect( ( select ) => {
+		const { getCurrentPostId } = select( editorStore );
 		const _postId = getCurrentPostId();
 		const data = !! _postId
 			? select( coreStore ).getEntityRecords( 'root', 'comment', {
@@ -71,25 +63,11 @@ export default function CollabSidebar() {
 
 		return {
 			postId: _postId,
-			postStatus: getEditedPostAttribute( 'status' ),
-			threads: data ?? EMPTY_ARRAY,
-		};
-	}, [] );
-
-	const { clientId, blockCommentId } = useSelect( ( select ) => {
-		const { getBlockAttributes, getSelectedBlockClientId } =
-			select( blockEditorStore );
-		const _clientId = getSelectedBlockClientId();
-
-		return {
-			clientId: _clientId,
-			blockCommentId: _clientId
-				? getBlockAttributes( _clientId )?.blockCommentId
-				: null,
+			threads: data,
 		};
 	}, [] );
 
-	// Get the dispatch functions to save the comment and update the block attributes.
+	const { getSelectedBlockClientId } = useSelect( blockEditorStore );
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	// Process comments to build the tree structure
@@ -98,7 +76,7 @@ export default function CollabSidebar() {
 		const compare = {};
 		const result = [];
 
-		const filteredComments = threads.filter(
+		const filteredComments = ( threads ?? [] ).filter(
 			( comment ) => comment.status !== 'trash'
 		);
 
@@ -121,11 +99,6 @@ export default function CollabSidebar() {
 		return result;
 	}, [ threads ] );
 
-	const openCollabBoard = () => {
-		setShowCommentBoard( true );
-		enableComplementaryArea( 'core', 'edit-post/collab-sidebar' );
-	};
-
 	// Function to save the comment.
 	const addNewComment = async ( comment, parentCommentId ) => {
 		const args = {
@@ -150,7 +123,7 @@ export default function CollabSidebar() {
 		if ( savedRecord ) {
 			// If it's a main comment, update the block attributes with the comment id.
 			if ( ! parentCommentId ) {
-				updateBlockAttributes( clientId, {
+				updateBlockAttributes( getSelectedBlockClientId(), {
 					blockCommentId: savedRecord?.id,
 				} );
 			}
@@ -232,7 +205,7 @@ export default function CollabSidebar() {
 		await deleteEntityRecord( 'root', 'comment', commentId );
 
 		if ( childComment && ! childComment.parent ) {
-			updateBlockAttributes( clientId, {
+			updateBlockAttributes( getSelectedBlockClientId(), {
 				blockCommentId: undefined,
 			} );
 		}
@@ -248,41 +221,77 @@ export default function CollabSidebar() {
 		);
 	};
 
+	return (
+		<div className="editor-collab-sidebar-panel">
+			<AddComment
+				onSubmit={ addNewComment }
+				showCommentBoard={ showCommentBoard }
+				setShowCommentBoard={ setShowCommentBoard }
+			/>
+			<Comments
+				threads={ resultComments }
+				onEditComment={ onEditComment }
+				onAddReply={ addNewComment }
+				onCommentDelete={ onCommentDelete }
+				onCommentResolve={ onCommentResolve }
+			/>
+		</div>
+	);
+}
+
+/**
+ * Renders the Collab sidebar.
+ */
+export default function CollabSidebar() {
+	const [ showCommentBoard, setShowCommentBoard ] = useState( false );
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
+
+	const { postStatus } = useSelect( ( select ) => {
+		return {
+			postStatus:
+				select( editorStore ).getEditedPostAttribute( 'status' ),
+		};
+	}, [] );
+
+	const { blockCommentId } = useSelect( ( select ) => {
+		const { getBlockAttributes, getSelectedBlockClientId } =
+			select( blockEditorStore );
+		const _clientId = getSelectedBlockClientId();
+
+		return {
+			blockCommentId: _clientId
+				? getBlockAttributes( _clientId )?.blockCommentId
+				: null,
+		};
+	}, [] );
+
+	const openCollabBoard = () => {
+		setShowCommentBoard( true );
+		enableComplementaryArea( 'core', 'edit-post/collab-sidebar' );
+	};
+
 	// Check if the experimental flag is enabled.
 	if ( ! isBlockCommentExperimentEnabled || postStatus === 'publish' ) {
 		return null; // or maybe return some message indicating no threads are available.
 	}
 
+	const AddCommentComponent = blockCommentId
+		? AddCommentToolbarButton
+		: AddCommentButton;
+
 	return (
 		<>
-			{ ! blockCommentId && (
-				<AddCommentButton onClick={ openCollabBoard } />
-			) }
-
-			{ blockCommentId > 0 && (
-				<AddCommentToolbarButton onClick={ openCollabBoard } />
-			) }
+			<AddCommentComponent onClick={ openCollabBoard } />
 			<PluginSidebar
 				identifier={ collabSidebarName }
 				// translators: Comments sidebar title
 				title={ __( 'Comments' ) }
 				icon={ commentIcon }
 			>
-				<div className="editor-collab-sidebar-panel">
-					<AddComment
-						threads={ resultComments }
-						onSubmit={ addNewComment }
-						showCommentBoard={ showCommentBoard }
-						setShowCommentBoard={ setShowCommentBoard }
-					/>
-					<Comments
-						threads={ resultComments }
-						onEditComment={ onEditComment }
-						onAddReply={ addNewComment }
-						onCommentDelete={ onCommentDelete }
-						onCommentResolve={ onCommentResolve }
-					/>
-				</div>
+				<CollabSidebarContent
+					showCommentBoard={ showCommentBoard }
+					setShowCommentBoard={ setShowCommentBoard }
+				/>
 			</PluginSidebar>
 		</>
 	);