FIX spacing and editing button for posts

AnubisLMS · Aug 18, 2023 · b1de9de · b1de9de
1 parent fd0d8f0
commit b1de9de
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 59 deletions.
diff --git a/api/anubis/models/__init__.py b/api/anubis/models/__init__.py
@@ -1081,12 +1081,14 @@ class ForumPost(db.Model):
     @property
     def meta_data(self):
         from anubis.lms.forum import get_post_comments_data
+        from anubis.utils.auth.user import current_user
         return {
             "id":                  self.id,
             "title":               self.title,
             "content":             self.content,
             "categories":          [],  # TODO
             "anonymous":           self.anonymous,
+            "owned_by_me":         self.owner_id == current_user.id,
             "display_name":        "Anonymous" if self.anonymous else self.owner.name,
             "course_id":           self.course_id,
             "visible_to_students": self.visible_to_students,

diff --git a/web/src/components/forums/Post/Post.jsx b/web/src/components/forums/Post/Post.jsx
@@ -12,12 +12,17 @@ import {toRelativeDate} from '../../../utils/datetime';
 import RichTextEditor from '../Editor/RichTextEditor';
 import {useStyles} from './Post.styles';
 import Publisher from '../Publisher/Publisher';
+import AuthContext from '../../../context/AuthContext';
+import EditIcon from '@mui/icons-material/Edit';
+import AddIcon from '@mui/icons-material/Add';
+
 
 export default function Post({
   id,
   title,
   content,
   user,
+  ownedByMe,
   seenCount,
   createdDate,
   updatedDate,
@@ -27,66 +32,90 @@ export default function Post({
   const classes = useStyles();
   const [commentPressed, setCommentPressed] = React.useState(false);
 
-  console.log({content});
+  console.log({user});
 
   const closePublisher = () => {
     setCommentPressed(false);
   };
 
   return (
     <Box className={classes.root} key={id}>
-      <Box className={classes.postInfoContainer}>
-        <Box className={classes.profilePic}>
-          <Typography>
-            {user[0]}
-          </Typography>
-        </Box>
-        <Typography className={classes.User}>
-          {user}
-        </Typography>
-        <Typography className={classes.whenPosted}>
-          posted {toRelativeDate(new Date(createdDate))}
-        </Typography>
-      </Box>
-      <Typography className={classes.Title}>
-        {title}
-      </Typography>
-      <Box className={classes.content}>
-        <RichTextEditor content={content} readOnly={true} enableToolbar={false}/>
-      </Box>
-      <Box className={classes.extraInfo}>
-        <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}
+      <AuthContext.Consumer>
+        {(currentUser) => (
+          <React.Fragment>
+            <Box className={classes.postInfoContainer}>
+              <Box className={classes.profilePic}>
+                <Typography>
+                  {user[0]}
+                </Typography>
+              </Box>
+              <Typography className={classes.User}>
+                {user}
+              </Typography>
+              <Typography className={classes.whenPosted}>
+                posted {toRelativeDate(new Date(createdDate))} (updated {toRelativeDate(new Date(updatedDate))})
+              </Typography>
+            </Box>
+            <Typography className={classes.Title}>
+              {title}
             </Typography>
-          </Box>
-        </Box>
-        {commentPressed ||
-          <Button className={classes.addComment} onClick={() => setCommentPressed(true)}>
-            Add Comment
-          </Button>
-        }
-      </Box>
-      <Divider/>
-      {commentPressed && (
-        <Publisher
-          mode='comment'
-          handlePublish={handleCreateComment}
-          setOpen={closePublisher}
-          onClose={() => setCommentPressed(false)}
-        />
-      )}
-      <Box className={classes.commentListContainer}>
-        <CommentsList comments={comments} handleCreateComment={handleCreateComment}/>
-      </Box>
+            <Box className={classes.content}>
+              <RichTextEditor content={content} readOnly={true} enableToolbar={false}/>
+            </Box>
+            <Box className={classes.extraInfo}>
+              <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>
+              <Box>
+                {ownedByMe &&
+                  <Button
+                    variant={'contained'}
+                    color={'primary'}
+                    sx={{mr: 1}}
+                    startIcon={<EditIcon/>}
+                    // onClick={() => setCommentPressed(true)}
+                  >
+                    Edit
+                  </Button>
+                }
+                {commentPressed ||
+                  <Button
+                    variant={'contained'}
+                    color={'primary'}
+                    startIcon={<AddIcon/>}
+                    onClick={() => setCommentPressed(true)}
+                  >
+                    Add Comment
+                  </Button>
+                }
+              </Box>
+            </Box>
+            <Divider/>
+            {commentPressed && (
+              <Publisher
+                mode='comment'
+                handlePublish={handleCreateComment}
+                setOpen={closePublisher}
+                onClose={() => setCommentPressed(false)}
+              />
+            )}
+            <Box className={classes.commentListContainer}>
+              <CommentsList comments={comments} handleCreateComment={handleCreateComment}/>
+            </Box>
+          </React.Fragment>
+        )}
+      </AuthContext.Consumer>
     </Box>
   );
 };

diff --git a/web/src/components/forums/Publisher/Publisher.jsx b/web/src/components/forums/Publisher/Publisher.jsx
@@ -27,15 +27,15 @@ export default function Publisher({
       handlePublish({
         title: title,
         content: content,
-        // visible_to_students: isVisibleToStudents,
+        visible_to_students: isVisibleToStudents,
         anonymous: isAnonymous,
       });
       if (onClose) onClose();
     } else if (content && !isPost) {
       handlePublish({
         content: content,
         anonymous: isAnonymous,
-        // visible_to_students: isVisibleToStudents,
+        visible_to_students: isVisibleToStudents,
       });
       if (onClose) onClose();
     } else {
@@ -65,10 +65,10 @@ export default function Publisher({
           <RichTextEditor setContent={setContent} setOpen={setOpen}/>
         }
         <Box display="flex" alignItems="center" justifyContent="flex-start" gap="20px" padding="0px 10px">
-          {/* <div className={classes.switchContainer}>*/}
-          {/*  <Typography>Visible to Students?</Typography>*/}
-          {/*  <Switch checked={isVisibleToStudents} onChange={() => setIsVisisbleToStudents(!isVisibleToStudents)}/>*/}
-          {/* </div>*/}
+          <div className={classes.switchContainer}>
+            <Typography>Visible to Students?</Typography>
+            <Switch checked={isVisibleToStudents} onChange={() => setIsVisisbleToStudents(!isVisibleToStudents)}/>
+          </div>
           <div className={classes.switchContainer}>
             <Typography>Anonymous?</Typography>
             <Switch checked={isAnonymous} onChange={() => setIsAnonymous(!isAnonymous)}/>

diff --git a/web/src/pages/core/public/Forum/Forum.jsx b/web/src/pages/core/public/Forum/Forum.jsx
@@ -133,7 +133,11 @@ export default function Forum() {
 
   const handleCreateComment = (comment) => {
     const {parent_id = null} = comment;
-    const endpoint = parent_id ? `/api/public/forum/post/${selectedPost.id}/comment/${parent_id}` : `/api/public/forum/post/${selectedPost.id}/comment`;
+    const endpoint = (
+      parent_id ?
+        `/api/public/forum/post/${selectedPost.id}/comment/${parent_id}` :
+        `/api/public/forum/post/${selectedPost.id}/comment`
+    );
     axios.post(endpoint, {
       content: comment?.content,
       anonymous: comment?.anonymous,
@@ -248,6 +252,7 @@ export default function Forum() {
               title={selectedPost.title}
               content={selectedPost.content}
               user={selectedPost.display_name}
+              ownedByMe={selectedPost.owned_by_me}
               seenCount={selectedPost.seen_count}
               createdDate={selectedPost.created}
               updatedDate={selectedPost.last_updated}