Merge branch 'main' into roles-backend-setup

5-Bits-in-a-Byte · Apr 29, 2021 · 7203cb7 · 7203cb7
2 parents a31d809 + ad8b0da
commit 7203cb7
Show file tree

Hide file tree

Showing 45 changed files with 2,630 additions and 1,533 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -3,12 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.3",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.7.1",
     "axios": "^0.21.1",
     "mdb-react-ui-kit": "^1.0.0-alpha4",
     "react": "^17.0.1",
+    "react-color": "^2.19.3",
     "react-dom": "^17.0.1",
     "react-google-login": "^5.2.2",
     "react-router-dom": "^5.2.0",

diff --git a/client/src/App.js b/client/src/App.js
@@ -10,6 +10,7 @@ import ClassView from "./components/posts/ClassView";
 import CommentView from "./components/comments/CommentView";
 import { UserProvider } from "./components/context/UserProvider";
 import PrivateRoute from "./PrivateRoute";
+import ConfigView from "./components/configPage/ConfigView";
 
 function App() {
   return (
@@ -47,6 +48,11 @@ function App() {
               <CommentView />
             </NavigationWrapper>
           </PrivateRoute>
+          <PrivateRoute path="/course/:courseId/config">
+            <NavigationWrapper>
+              <ConfigView />
+            </NavigationWrapper>
+          </PrivateRoute>
         </Switch>
       </UserProvider>
     </Router>

diff --git a/client/src/components/comments/Comment.js b/client/src/components/comments/Comment.js
@@ -1,19 +1,27 @@
 import React, { useContext, useState } from "react";
+import { useHistory } from "react-router-dom";
 import styled from "styled-components";
 import CommentReply from "./CommentReply";
 import DraftTextBox from "../common/DraftTextArea";
 import Button from "../common/Button";
 import { useParams } from "react-router";
 import LazyFetch from "../common/requests/LazyFetch";
 import Reaction from "../common/Reaction";
+import Dropdown from "../common/dropdown/Dropdown";
+import Icon from "../common/Icon";
+import OptionDots from "../../imgs/option-dots.svg";
+import { UserContext } from "../context/UserProvider";
 
 const Comment = ({ comment, isDraft, callback }) => {
-  const { postid } = useParams();
+  const { courseId, postid } = useParams();
   const [content, setContent] = useState("");
+  const user = useContext(UserContext);
 
   const [newReplies, setNewReplies] = useState([]);
   const [isReplying, toggleReply] = useState(false);
 
+  const endpoint = "/api/posts/" + postid + "/comments";
+
   const renderContent = () => {
     if (isDraft) {
       return <DraftTextBox onChange={handleChange} />;
@@ -31,8 +39,7 @@ const Comment = ({ comment, isDraft, callback }) => {
     } else {
       LazyFetch({
         type: "post",
-        endpoint:
-          "/api/posts/" + postid + "/comments/" + comment._id + "/replies",
+        endpoint: endpoint + "/" + comment._id + "/replies",
         data: { content, isAnonymous: false },
         onSuccess: (data) => {
           toggleReply(false);
@@ -54,7 +61,14 @@ const Comment = ({ comment, isDraft, callback }) => {
   let replies = [];
   if (comment.replies && comment.replies.length > 0) {
     comment.replies.forEach((reply) => {
-      replies.push(<CommentReply reply={reply} postid={postid} />);
+      replies.push(
+        <CommentReply
+          reply={reply}
+          postid={postid}
+          key={reply._id}
+          commentid={comment._id}
+        />
+      );
     });
   }
   // Insert new replies that were created from state
@@ -63,19 +77,68 @@ const Comment = ({ comment, isDraft, callback }) => {
   // If the user clicks reply, insert a drafted reply
   if (isReplying) {
     replies.push(
-      <CommentReply isDraft submitReply={submitReply} postid={postid} />
+      <CommentReply isDraft submitReply={submitReply} postid={postid} key={0} />
     );
   }
 
+  const handleDelete = () => {
+    LazyFetch({
+      type: "delete",
+      endpoint: endpoint,
+      data: { _id: comment._id },
+      onSuccess: () => {
+        window.location.reload();
+      },
+      onFailure: (err) => {
+        alert(err.response);
+      },
+    });
+  };
+
+  const handleEdit = () => {
+    alert("This feature is still a work in progress. Check back soon!");
+  };
+
+  const options = [
+    { onClick: handleDelete, label: "Delete comment" },
+    { onClick: handleEdit, label: "Edit comment" },
+  ];
+
+  // Initialize viewOptions to see if a user should be able to see dropdown options
+  var viewOptions = false;
+  // Check to see if the user is an admin
+  for (let i = 0; i < user.courses.length; i++) {
+    if (user?.courses[i].courseId == courseId) {
+      viewOptions = user.courses[i].admin;
+    }
+  }
+  // Check to see if the user made the post
+  if (
+    !isDraft &&
+    (comment.postedBy._id == user._id ||
+      comment.postedBy._id == user.anonymousId)
+  ) {
+    viewOptions = true;
+  }
+
   return (
     <CommentWrapper>
-      <CommentContent>{renderContent()}</CommentContent>
+      <Content>
+        <CommentContent>{renderContent()}</CommentContent>
+        {!isDraft && viewOptions && (
+          <Dropdown options={options}>
+            <Icon
+              src={OptionDots}
+              style={{ padding: "0 1rem 0 0", cursor: "pointer" }}
+            />
+          </Dropdown>
+        )}
+      </Content>
       <ReplyContainer>
         <PostMetaContentWrapper className="meta">
           <UserDescription>
             by {comment.postedBy.first + " " + comment.postedBy.last}
           </UserDescription>
-
           <MetaIconWrapper>
             {isDraft ? (
               <>
@@ -130,22 +193,23 @@ const CommentWrapper = styled.div`
   width: 100%;
   min-height: 85px;
   margin: 17px 0;
-  border-radius: 0.3em;
+  border-radius: 5px;
   box-shadow: 0px 1px 4px 2px rgba(0, 0, 0, 0.07);
 `;
 
 const CommentContent = styled.p`
   padding: 1em 2.2em 1em 2.2em;
+  flex: 1;
   font-size: 16px;
   background-color: #fff;
-  border-radius: 5px 5px 0 0;
+  border-radius: 5px;
 `;
 
 const PostMetaContentWrapper = styled.div`
   display: flex;
   flex-direction: row;
   height: 100%;
-  padding: 0.5em 0;
+  padding: 0.5em 0 0 0;
   align-items: center;
 `;
 
@@ -174,3 +238,10 @@ const ReplyContainer = styled.div`
   min-height: 40px;
   border-radius: 0 0 0.3em 0.3em;
 `;
+
+const Content = styled.div`
+  display: flex;
+  background-color: #fff;
+  padding: 10px 10px 0px 0px;
+  border-radius: 5px;
+`;
diff --git a/client/src/components/comments/CommentReply.js b/client/src/components/comments/CommentReply.js
@@ -1,13 +1,23 @@
 import React, { useState, useContext } from "react";
+import { useParams } from "react-router";
 import styled from "styled-components";
 import { UserContext } from "../context/UserProvider";
 import DraftTextArea from "../common/DraftTextArea";
 import Button from "../common/Button";
 import Reaction from "../common/Reaction";
+import LazyFetch from "../common/requests/LazyFetch";
+import Dropdown from "../common/dropdown/Dropdown";
+import Icon from "../common/Icon";
+import OptionDots from "../../imgs/option-dots.svg";
 
-const CommentReply = ({ reply, isDraft, submitReply, postid }) => {
+const CommentReply = ({ reply, isDraft, submitReply, postid, commentid }) => {
   const user = useContext(UserContext);
   const [draft, setDraft] = useState("");
+  const { courseId } = useParams();
+
+  // '/posts/<string:postId>/comments/<string:comment_id>/replies'
+  const endpoint =
+    "/api/posts/" + postid + "/comments/" + commentid + "/replies";
 
   const handleChange = (e) => {
     setDraft(e.target.value);
@@ -22,9 +32,58 @@ const CommentReply = ({ reply, isDraft, submitReply, postid }) => {
     };
   }
 
+  const handleDelete = () => {
+    LazyFetch({
+      type: "delete",
+      endpoint: endpoint,
+      data: { _id: reply._id },
+      onSuccess: () => {
+        window.location.reload();
+      },
+      onFailure: (err) => {
+        alert(err.response);
+      },
+    });
+  };
+
+  const handleEdit = () => {
+    alert("This feature is still a work in progress. Check back soon!");
+  };
+
+  const options = [
+    { onClick: handleDelete, label: "Delete reply" },
+    { onClick: handleEdit, label: "Edit reply" },
+  ];
+
+  // Initialize viewOptions to see if a user should be able to see dropdown options
+  var viewOptions = false;
+  // Check to see if the user is an admin
+  for (let i = 0; i < user.courses.length; i++) {
+    if (user?.courses[i].courseId == courseId) {
+      viewOptions = user.courses[i].admin;
+    }
+  }
+  // Check to see if the user made the post
+  if (
+    !isDraft &&
+    (reply.postedBy._id == user._id || reply.postedBy._id == user.anonymousId)
+  ) {
+    viewOptions = true;
+  }
+
   return (
     <CommentReplyWrapper>
-      <CommentReplyContent>{reply.content}</CommentReplyContent>
+      <Content>
+        <CommentReplyContent>{reply.content}</CommentReplyContent>
+        {!isDraft && viewOptions && (
+          <Dropdown options={options}>
+            <Icon
+              src={OptionDots}
+              style={{ padding: "0 1rem 0 0", cursor: "pointer" }}
+            />
+          </Dropdown>
+        )}
+      </Content>
       <ReplyMetaContentWrapper className="meta">
         <UserDescription>
           by{" "}
@@ -69,15 +128,16 @@ const CommentReplyWrapper = styled.div`
   background-color: #fff;
   width: 100%;
   margin: 18px 0;
-  border-radius: 0.3em;
+  border-radius: 5px;
   box-shadow: 0px 1px 4px 2px rgba(0, 0, 0, 0.07);
-  border-left: 4px solid gainsboro;
+  /* border-left: 4px solid gainsboro; */
 `;
 
 const CommentReplyContent = styled.p`
   margin: 0 2.2em 1em 2.2em;
   padding-top: 1em;
   font-size: 16px;
+  flex: 1;
 `;
 
 const ReplyMetaContentWrapper = styled.div`
@@ -88,7 +148,7 @@ const ReplyMetaContentWrapper = styled.div`
   width: 100%;
   min-height: 1.5em;
   background-color: #f9f9f9;
-  border-radius: 0 0 0.3em 0.3em;
+  border-radius: 5px;
 `;
 
 const UserDescription = styled.h5`
@@ -101,3 +161,10 @@ const MetaIconWrapper = styled.div`
   margin-left: auto;
   align-items: center;
 `;
+
+const Content = styled.div`
+  display: flex;
+  background-color: #fff;
+  padding: 10px 10px 0px 0px;
+  border-radius: 5px;
+`;
diff --git a/client/src/components/comments/CommentView.js b/client/src/components/comments/CommentView.js
@@ -62,7 +62,7 @@ const CommentView = ({ classroomName }) => {
 
   useEffect(() => {
     io.on("Comment/create", (comment) => {
-      console.log(comment);
+      //console.log(comment);
       // Ensure the user isn't the one who posted it
       if (
         comment &&
@@ -119,7 +119,7 @@ const CommentView = ({ classroomName }) => {
       });
     }
   };
-  console.log(commentData);
+  //console.log(commentData);
 
   let comments = [...commentData];
   if (newComments.draft) {