Skip to content

Inline Commenting: Avoid querying comments on editor load #66670

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Mamaduka merged 1 commit into from
Nov 4, 2024
Merged

Inline Commenting: Avoid querying comments on editor load #66670

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 17 additions & 20 deletions packages/editor/src/components/collab-sidebar/add-comment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Copy link
Member Author

@Mamaduka Mamaduka Nov 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure why this prop was passed around in mapSelect. It shouldn't be required.

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 ]
Expand All @@ -69,7 +66,7 @@ export function AddComment( {
setInputComment( '' );
};

if ( ! showAddCommentBoard || ! clientId || undefined !== blockCommentId ) {
if ( ! showCommentBoard || ! clientId || undefined !== blockCommentId ) {
return null;
}

Expand Down
123 changes: 66 additions & 57 deletions packages/editor/src/components/collab-sidebar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) => {
Expand All @@ -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', {
Expand All @@ -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 );
Copy link
Member Author

@Mamaduka Mamaduka Nov 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The clientId is now only used in event callback; we can use the static getter.

const { updateBlockAttributes } = useDispatch( blockEditorStore );

// Process comments to build the tree structure
Expand All @@ -98,7 +76,7 @@ export default function CollabSidebar() {
const compare = {};
const result = [];

const filteredComments = threads.filter(
const filteredComments = ( threads ?? [] ).filter(
Copy link
Member Author

@Mamaduka Mamaduka Nov 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A suggestion from previous refactoring - #66592 (comment).

( comment ) => comment.status !== 'trash'
);

Expand All @@ -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 = {
Expand All @@ -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,
} );
}
Expand Down Expand Up @@ -232,7 +205,7 @@ export default function CollabSidebar() {
await deleteEntityRecord( 'root', 'comment', commentId );

if ( childComment && ! childComment.parent ) {
updateBlockAttributes( clientId, {
updateBlockAttributes( getSelectedBlockClientId(), {
blockCommentId: undefined,
} );
}
Expand All @@ -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;
Comment on lines +278 to +280
Copy link
Member Author

@Mamaduka Mamaduka Nov 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Personal nit and simplification 😅


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 }
Copy link
Member Author

@Mamaduka Mamaduka Nov 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This value was never used, so I've removed it above.

onSubmit={ addNewComment }
showCommentBoard={ showCommentBoard }
setShowCommentBoard={ setShowCommentBoard }
/>
<Comments
threads={ resultComments }
onEditComment={ onEditComment }
onAddReply={ addNewComment }
onCommentDelete={ onCommentDelete }
onCommentResolve={ onCommentResolve }
/>
</div>
<CollabSidebarContent
showCommentBoard={ showCommentBoard }
setShowCommentBoard={ setShowCommentBoard }
/>
</PluginSidebar>
</>
);
Expand Down