ADD commenting with richtexteditor

AnubisLMS · Jul 20, 2023 · c2ad04d · c2ad04d
1 parent 69542d7
commit c2ad04d
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 24 deletions.
diff --git a/web/src/components/forums/Post/Post.jsx b/web/src/components/forums/Post/Post.jsx
@@ -1,16 +1,17 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import CommentIcon from '@mui/icons-material/Comment';
-import CreateIcon from '@mui/icons-material/Create';
+import Button from '@mui/material/Button';
 
 import Divider from '../../shared/Divider/Divider';
 import CommentsList from '../CommentsList/CommentsList';
 import {toRelativeDate} from '../../../utils/datetime';
-
+import RichTextEditor from '../Editor/RichTextEditor';
 import {useStyles} from './Post.styles';
+import Publisher from '../Publisher/Publisher';
 
 export default function Post({
   title,
@@ -20,8 +21,14 @@ export default function Post({
   createdDate,
   updatedDate,
   comments,
+  handleCreateComment,
 }) {
   const classes = useStyles();
+  const [commentPressed, setCommentPressed] = React.useState(false);
+
+  const closePublisher = () => {
+    setCommentPressed(false);
+  };
 
   return (
     <Box className={classes.root}>
@@ -35,38 +42,40 @@ export default function Post({
           {user}
         </Typography>
         <Typography className={classes.whenPosted}>
-          posted on {toRelativeDate(new Date(createdDate))}
+          posted {toRelativeDate(new Date(createdDate))}
         </Typography>
       </Box>
       <Typography className={classes.title}>
         {title}
       </Typography>
       <Typography className={classes.content}>
-        {content}
+        <RichTextEditor content={content} readOnly={true} enableToolbar={false}/>
       </Typography>
       <Box className={classes.extraInfo}>
-        <Box className={classes.infoContainer}>
-          <VisibilityIcon className={classes.icon} />
-          <Typography>
-            {seenCount}
-          </Typography>
-        </Box>
-        <Box className={classes.infoContainer}>
-          <CommentIcon className={classes.icon} />
-          <Typography>
-            {comments.length}
-          </Typography>
-        </Box>
-        <Box className={classes.infoContainer}>
-          <CreateIcon className={classes.icon} />
-          <Typography>
-            {toRelativeDate(new Date(updatedDate))}
-          </Typography>
+        <Box className={classes.infoToolbar}>
+          <Box className={classes.infoContainer}>
+            <VisibilityIcon className={classes.icon} />
+            <Typography>
+              {seenCount}
+            </Typography>
+          </Box>
+          <Box className={classes.infoContainer}>
+            <CommentIcon className={classes.icon} />
+            <Typography>
+              {comments.length}
+            </Typography>
+          </Box>
         </Box>
+        {commentPressed ||
+        <Button className={classes.addComment} onClick={() => setCommentPressed(true)}>
+          Add Comment
+        </Button>
+        }
       </Box>
       <Divider />
+      {commentPressed && <Publisher mode='comment' handlePublish={handleCreateComment} setOpen={closePublisher}/>}
       <Box className={classes.commentListContainer}>
-        <CommentsList comments={comments}/>
+        <CommentsList comments={comments} handleCreateComment={handleCreateComment}/>
       </Box>
     </Box>
   );

diff --git a/web/src/components/forums/Post/Post.styles.jsx b/web/src/components/forums/Post/Post.styles.jsx
@@ -38,18 +38,24 @@ export const useStyles = makeStyles((theme) => ({
   content: {
     width: '100%',
   },
+  infoToolbar: {
+    display: 'flex',
+    gap: theme.spacing(3),
+    alignItems: 'center',
+  },
   extraInfo: {
     marginTop: theme.spacing(2),
     width: '100%',
     display: 'flex',
     gap: theme.spacing(3),
     alignItems: 'center',
-    opacity: '.8',
+    justifyContent: 'space-between',
   },
   infoContainer: {
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(1),
+    opacity: '.8',
   },
   icon: {
     fontSize: '14px',
@@ -58,5 +64,21 @@ export const useStyles = makeStyles((theme) => ({
     paddingTop: theme.spacing(2),
     width: '100%',
   },
+  addComment: {
+    height: '100%',
+    backgroundColor: theme.palette.primary.main,
+    paddingRight: theme.spacing(2),
+    paddingLeft: theme.spacing(2),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    borderRadius: '15px',
+    color: theme.palette.white,
+    '&:hover': {
+      color: theme.palette.primary.main,
+    },
+  },
+  commentEditor: {
+    width: '500px',
+  },
 }));