ADD functional edit post feature

AnubisLMS · Aug 23, 2023 · e1c7478 · e1c7478
1 parent fd4aff7
commit e1c7478
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 30 deletions.
diff --git a/web/src/components/forums/CreateDialog/CreateDialog.jsx b/web/src/components/forums/CreateDialog/CreateDialog.jsx
@@ -11,19 +11,26 @@ export const useStyles = makeStyles((theme) => ({
 export default function CreateDialog({
   mode = 'post',
   open = false,
+  title = '',
+  content = null,
   setOpen,
   handleCreatePost,
 }) {
   // MUI theme-based css styles
   const classes = useStyles();
-
   return (
     <Dialog
       open={open}
       classes={{paper: classes.root}}
       onClose={() => setOpen(false)}
     >
-      <Publisher mode={mode} setOpen={setOpen} handlePublish={handleCreatePost}/>
+      <Publisher
+        mode={mode}
+        initalTitle={title}
+        initialContent={content}
+        setOpen={setOpen}
+        handlePublish={handleCreatePost}
+      />
     </Dialog>
   );
 }

diff --git a/web/src/components/forums/Editor/RichTextEditor.jsx b/web/src/components/forums/Editor/RichTextEditor.jsx
@@ -1,5 +1,5 @@
-import React, {useEffect, useRef, useState} from 'react';
-import {convertFromRaw, convertToRaw, EditorState, RichUtils} from 'draft-js';
+import React, {useState, useRef, useEffect} from 'react';
+import {EditorState, RichUtils, convertFromRaw, convertToRaw} from 'draft-js';
 import Editor, {composeDecorators} from '@draft-js-plugins/editor';
 import createResizablePlugin from '@draft-js-plugins/resizeable';
 import EditorToolbar from './Toolbar/EditorToolbar';
@@ -34,29 +34,31 @@ const useStyles = makeStyles((theme) => ({
 
 /**
  * Rich text editor used to display and publish data
- * @param {Object} content - the content of the editor, use this when we need to solely display data
+ * @param {Object} content - the content of the editor, use this when we need to display data or set data prior to edit
  * @param {Function} setContent - the function to set the content of the editor, use this when we need to publish data
  * @param {Function} setOpen - the function to set the open state of the editor, called when close button clicked
  * @param {Boolean} readOnly - whether or not the editor is read only
  * @param {Boolean} enableToolbar - whether or not to show the toolbar
  * @returns {JSX.Element} - the rich text editor
  */
-export default function RichTextEditor({
-  content = null, setContent = null, setOpen = null, readOnly = false,
-  enableToolbar = true,
-}) {
+export default function RichTextEditor({content = null, setContent = null, setOpen = null, readOnly = false,
+  enableToolbar = true}) {
   const [editorState, setEditorState] = useState(EditorState.createEmpty());
   const editor = useRef(null);
   const classes = useStyles();
 
-  if (!readOnly && setContent) {
+  if (setContent && !readOnly) {
     useEffect(() => {
+      // If setContent is passed in, make sure to call the callback on each editor state change
       setContent(JSON.stringify(convertToRaw(editorState.getCurrentContent())));
     }, [editorState]);
-  } else if (content) {
+  }
+
+  if (content) {
     useEffect(() => {
+      // If content is passed in, set the editor state to the content initially
       setEditorState(EditorState.createWithContent(convertFromRaw(content)));
-    }, []);
+    }, [content]);
   }
 
   const handleKeyCommand = (command) => {
@@ -70,15 +72,15 @@ export default function RichTextEditor({
   return (
     <>
       {enableToolbar &&
-        <Box className={classes.toolbarContainer}>
-          <EditorToolbar editorState={editorState} setEditorState={setEditorState} imagePlugin={imagePlugin}/>
-          {
-            setOpen &&
-            <IconButton onClick={() => setOpen(false)}>
-              <CloseIcon/>
-            </IconButton>
-          }
-        </Box>
+      <Box className={classes.toolbarContainer}>
+        <EditorToolbar editorState={editorState} setEditorState={setEditorState} imagePlugin={imagePlugin} />
+        {
+          setOpen &&
+          <IconButton onClick={() => setOpen(false)}>
+            <CloseIcon />
+          </IconButton>
+        }
+      </Box>
       }
       <Editor
         ref={editor}

diff --git a/web/src/components/forums/Post/Post.jsx b/web/src/components/forums/Post/Post.jsx
@@ -15,7 +15,7 @@ import Publisher from '../Publisher/Publisher';
 import AuthContext from '../../../context/AuthContext';
 import EditIcon from '@mui/icons-material/Edit';
 import AddIcon from '@mui/icons-material/Add';
-
+import CreateDialog from '../CreateDialog/CreateDialog';
 
 export default function Post({
   id,
@@ -28,11 +28,12 @@ export default function Post({
   updatedDate,
   comments,
   handleCreateComment,
+  handleEditPost,
 }) {
   const classes = useStyles();
   const [commentPressed, setCommentPressed] = React.useState(false);
-
-  console.log({user});
+  const [isDialogOpen, setIsDialogOpen] = React.useState(false);
+  // console.log({user});
 
   const closePublisher = () => {
     setCommentPressed(false);
@@ -43,6 +44,13 @@ export default function Post({
       <AuthContext.Consumer>
         {(currentUser) => (
           <React.Fragment>
+            <CreateDialog
+              open={isDialogOpen}
+              setOpen={setIsDialogOpen}
+              title={title}
+              content={content}
+              handleCreatePost={handleEditPost}
+            />
             <Box className={classes.postInfoContainer}>
               <Box className={classes.profilePic}>
                 <Typography>
@@ -84,7 +92,7 @@ export default function Post({
                     color={'primary'}
                     sx={{mr: 1}}
                     startIcon={<EditIcon/>}
-                    // onClick={() => setCommentPressed(true)}
+                    onClick={() => setIsDialogOpen(true)}
                   >
                     Edit
                   </Button>

diff --git a/web/src/components/forums/Publisher/Publisher.jsx b/web/src/components/forums/Publisher/Publisher.jsx
@@ -7,15 +7,17 @@ import {useSnackbar} from 'notistack';
 
 export default function Publisher({
   mode = 'post',
+  initalTitle = '',
+  initialContent = null,
   setOpen,
   onClose,
   handlePublish,
 }) {
   // MUI theme-based css styles
   const classes = useStyles();
   // Form Data
-  const [title, setTitle] = useState('');
-  const [content, setContent] = useState({});
+  const [title, setTitle] = useState(initalTitle);
+  const [content, setContent] = useState(initialContent ? initialContent : {});
   const [isVisibleToStudents, setIsVisisbleToStudents] = useState(true);
   const [isAnonymous, setIsAnonymous] = useState(false);
   const {enqueueSnackbar} = useSnackbar();
@@ -61,8 +63,8 @@ export default function Publisher({
             value={title} onChange={(e) => setTitle(e.target.value)} placeholder={'Put Title Here'}/>
         }
         {isPost ?
-          <RichTextEditor setContent={setContent}/> :
-          <RichTextEditor setContent={setContent} setOpen={setOpen}/>
+          <RichTextEditor setContent={setContent} content={initialContent} /> :
+          <RichTextEditor setContent={setContent} content={initialContent} setOpen={setOpen}/>
         }
         <Box display="flex" alignItems="center" justifyContent="flex-start" gap="20px" padding="0px 10px">
           <div className={classes.switchContainer}>

diff --git a/web/src/pages/core/public/Forum/Forum.jsx b/web/src/pages/core/public/Forum/Forum.jsx
@@ -156,7 +156,6 @@ export default function Forum() {
         setOpen={setIsDialogOpen}
         handleCreatePost={handleCreatePost}
       />
-
       <Box sx={{
         display: 'flex',
         alignItems: 'center',
@@ -258,6 +257,7 @@ export default function Forum() {
               updatedDate={selectedPost.last_updated}
               comments={selectedPost.comments}
               handleCreateComment={handleCreateComment}
+              handleEditPost={handleCreatePost}
             />
           )}
         </Grid>