ADD comment editing

AnubisLMS · Aug 25, 2023 · 4629b79 · 4629b79
1 parent b9b79bc
commit 4629b79
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 18 deletions.
diff --git a/web/src/components/forums/Comment/Comment.jsx b/web/src/components/forums/Comment/Comment.jsx
@@ -4,11 +4,13 @@ import {useSnackbar} from 'notistack';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import ReplyIcon from '@mui/icons-material/Reply';
+import EditIcon from '@mui/icons-material/Edit';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 import {useStyles} from './Comment.styles';
 import {toRelativeDate} from '../../../utils/datetime';
+import Publisher from '../Publisher/Publisher';
 import RichTextEditor from '../Editor/RichTextEditor';
 
 export default function Comment({
@@ -18,30 +20,46 @@ export default function Comment({
   content,
   createdDate,
   hasReplies,
+  ownedByMe,
   handleCollapse,
   isCollapsed,
   replyCount,
   handleReply,
+  handleEditComment,
 }) {
   const classes = useStyles();
   const enqueueSnackbar = useSnackbar();
-
   const [children, setChildren] = useState(undefined);
+  const [openEditor, setOpenEditor] = useState(false);
 
   return (
     <Box className={classes.root}>
-      <Box className={classes.header}>
-        <Box className={classes.profilePic}>
-          <Typography className={classes.profilePicText}> {user[0]} </Typography>
-        </Box>
-        <Typography>{user}</Typography>
-        <Typography className={classes.commentedWhen}>
-          {toRelativeDate(new Date(createdDate))}
-        </Typography>
-      </Box>
-      <Box className={classes.content}>
-        <RichTextEditor content={content} readOnly={true} enableToolbar={false}/>
-      </Box>
+      {!openEditor ? (
+        <>
+          <Box className={classes.header}>
+            <Box className={classes.profilePic}>
+              <Typography className={classes.profilePicText}> {user[0]} </Typography>
+            </Box>
+            <Typography>{user}</Typography>
+            <Typography className={classes.commentedWhen}>
+              {toRelativeDate(new Date(createdDate))}
+            </Typography>
+          </Box>
+          <Box className={classes.content}>
+            <RichTextEditor content={content} readOnly={true} enableToolbar={false} />
+          </Box>
+        </>
+      ) :
+        (
+          <Publisher
+            mode="edit_comment"
+            initialContent={content}
+            setOpen={setOpenEditor}
+            onClose={() => {}}
+            handlePublish={(content) => handleEditComment(id, content)}
+          />
+        )
+      }
       <Box className={classes.replyActions}>
         {hasReplies &&
           <Box
@@ -57,10 +75,19 @@ export default function Comment({
             onClick={handleReply}
             className={classes.action}
           >
-            <ReplyIcon className={classes.icon}/>
+            <ReplyIcon className={classes.icon} />
             <Typography className={classes.actionItem}>Reply</Typography>
           </Box>
         }
+        {ownedByMe &&
+          <Box
+            onClick={() => setOpenEditor(true)}
+            className={classes.action}
+          >
+            <EditIcon className={classes.icon}/>
+            <Typography className={classes.actionItem}>Edit</Typography>
+          </Box>
+        }
       </Box>
     </Box>
   );

diff --git a/web/src/components/forums/CommentsList/CommentsList.jsx b/web/src/components/forums/CommentsList/CommentsList.jsx
@@ -5,9 +5,8 @@ import Comment from '../Comment/Comment';
 import Publisher from '../Publisher/Publisher';
 import {useStyles} from './CommentsList.styles';
 
-export default function CommentsList({comments, handleCreateComment}) {
+export default function CommentsList({comments, handleCreateComment, handleEditComment}) {
   const classes = useStyles();
-
   const Thread = ({hasChildren, comment}) => {
     const [isReplying, setIsReplying] = useState(false);
     const [collapsed, setCollapsed] = useState(false);
@@ -22,13 +21,15 @@ export default function CommentsList({comments, handleCreateComment}) {
           createdDate={comment.created}
           hasReplies={comment.children.length > 0}
           replyCount={comment.children.length}
+          ownedByMe={comment.owned_by_me}
           handleCollapse={() => setCollapsed(false)}
           isCollapsed={collapsed}
           handleReply={() => {
             console.log(isReplying, collapsed);
             setCollapsed(false);
             setIsReplying(true);
           }}
+          handleEditComment={handleEditComment}
         />
         <Box className={classes.replies}>
           {(hasChildren && !collapsed) && comment.children.length > 0 && comment.children.map((childComment, index) => (

diff --git a/web/src/components/forums/Post/Post.jsx b/web/src/components/forums/Post/Post.jsx
@@ -28,6 +28,7 @@ export default function Post({
   updatedDate,
   comments,
   handleCreateComment,
+  handleEditComment,
   handleEditPost,
 }) {
   const classes = useStyles();
@@ -49,6 +50,7 @@ export default function Post({
         {(currentUser) => (
           <React.Fragment>
             <CreateDialog
+              mode={'edit_post'}
               open={isDialogOpen}
               setOpen={setIsDialogOpen}
               initalTitle={title}
@@ -125,7 +127,11 @@ export default function Post({
               />
             )}
             <Box className={classes.commentListContainer}>
-              <CommentsList comments={comments} handleCreateComment={handleCreateComment}/>
+              <CommentsList
+                comments={comments}
+                handleCreateComment={handleCreateComment}
+                handleEditComment={handleEditComment}
+              />
             </Box>
           </React.Fragment>
         )}

diff --git a/web/src/pages/core/public/Forum/Forum.jsx b/web/src/pages/core/public/Forum/Forum.jsx
@@ -133,7 +133,7 @@ export default function Forum() {
   const handleEditPost = React.useCallback((post) => {
     axios.patch(`/api/public/forum/post/${selectedPost.id}`, {...post})
       .then(() => {
-        refreshSelectedPost(false);
+        refreshSelectedPost();
         setIsDialogOpen(false);
       })
       .catch(standardErrorHandler(enqueueSnackbar));
@@ -157,6 +157,18 @@ export default function Forum() {
       .catch(standardErrorHandler(enqueueSnackbar));
   }, []);
 
+  const handleEditComment = React.useCallback((id, comment) => {
+    axios.patch(`/api/public/forum/post/comment/${id}`, {
+      content: comment?.content,
+      anonymous: comment?.anonymous,
+    })
+      .then((r) => {
+        standardStatusHandler(r, enqueueSnackbar);
+        refreshSelectedPost();
+      })
+      .catch(standardErrorHandler(enqueueSnackbar));
+  }, []);
+
   return (
     <StandardLayout>
       <CreateDialog
@@ -265,6 +277,7 @@ export default function Forum() {
               updatedDate={selectedPost.last_updated}
               comments={selectedPost.comments}
               handleCreateComment={handleCreateComment}
+              handleEditComment={handleEditComment}
               handleEditPost={handleEditPost}
             />
           )}