diff --git a/packages/block-editor/src/components/collab/collab-board/index.js b/packages/block-editor/src/components/collab/collab-board/index.js deleted file mode 100644 index 2057456691a38..0000000000000 --- a/packages/block-editor/src/components/collab/collab-board/index.js +++ /dev/null @@ -1,442 +0,0 @@ -/** - * WordPress dependencies - */ -// eslint-disable-next-line no-restricted-imports -import apiFetch from '@wordpress/api-fetch'; -import { __ } from '@wordpress/i18n'; -import { useState } from '@wordpress/element'; -import { - TextControl, - Button, - CheckboxControl, - __experimentalHStack as HStack, - __experimentalVStack as VStack, - Modal, -} from '@wordpress/components'; -import { dateI18n, format, getSettings } from '@wordpress/date'; -import { - commentAuthorAvatar as userIcon, - Icon, - trash as deleteIcon, - edit as editIcon, -} from '@wordpress/icons'; - -import { useSelect, useDispatch } from '@wordpress/data'; -//import { store as coreStore } from '@wordpress/core-data'; -//import { useEntityProp } from '@wordpress/core-data'; - -export default function BlockCommentModal( { clientId, onClose, threadId } ) { - // State to manage the comment thread. - const [ inputComment, setInputComment ] = useState( '' ); - const [ isResolved, setIsResolved ] = useState( false ); - const [ isEditing, setIsEditing ] = useState( null ); - const [ showConfirmation, setShowConfirmation ] = useState( false ); - const curruntUserData = useSelect( ( select ) => { - // eslint-disable-next-line @wordpress/data-no-store-string-literals - return select( 'core' ).getCurrentUser(); - }, [] ); - - const userAvatar = curruntUserData.avatar_urls[ 48 ] || null; - const currentUser = curruntUserData?.name || null; - - const allThreads = []; - 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(); - }, [] ); - - // 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' ); - // Helper function to generate a new comment. - const generateNewComment = () => ( { - commentId: Date.now(), - createdBy: currentUser, - comment: inputComment, - createdAt: new Date().toISOString(), - } ); - - // // Function to add a border class to the content reference. - const setAttributes = () => { - updateBlockAttributes( clientId, { - className: `block-editor-collab__${ threadId }`, - } ); - }; - - // Helper function to get updated comments structure - const getUpdatedComments = ( newComment, threadKey ) => ( { - ...allThreads, - [ threadKey ]: { - isResolved, - createdAt: - allThreads?.threadKey?.createdAt || new Date().toISOString(), - createdBy: currentUser, - comments: [ - ...( allThreads[ threadKey ]?.comments || [] ), - newComment, - ], - }, - } ); - - // Function to save the comment. - const saveComment = () => { - const newComment = generateNewComment(); - threadId = newComment?.commentId; - const updatedComments = getUpdatedComments( newComment, threadId ); - - apiFetch( { - path: '/wp/v2/comments', - method: 'POST', - data: { - post: postID, - content: newComment.comment, - comment_date: newComment.createdAt, - comment_type: 'block_comment', - meta: updatedComments, - comment_author: currentUser, - comment_approved: 0, - }, - } ).then( ( response ) => { - threadId = response?.id; - setAttributes( clientId, threadId ); - 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 ); - - // Function to confirm and mark thread as resolved. - const confirmAndMarkThreadAsResolved = () => { - markThreadAsResolved(); - hideConfirmationOverlay(); - }; - - // On cancel, remove the border if no comments are present. - const handleCancel = () => { - onClose(); - }; - - // Get the date time format from WordPress settings. - const dateTimeFormat = getSettings().formats.datetime; - return ( - <> - - - { 0 < commentsCount && ! isCurrentThreadResolved && ( - <> - { currentThread.comments.map( - ( - { - createdBy, - comment, - timestamp, - commentId, - }, - index - ) => ( - <> - { isEditing === commentId && ( - - - - - { currentUser } - - - - setInputComment( val ) - } - placeholder={ __( - 'Add comment' - ) } - className="block-editor-format-toolbar__comment-input" - /> - - - - - ) } - - ); -}