Merge pull request #91 from 5-Bits-in-a-Byte/dev - SUCCESS

Inquire Update v1.1.0 Merging Dev onto Prod
5-Bits-in-a-Byte · Oct 9, 2021 · ea7769f · ea7769f
2 parents 288ad42 + 837de92
commit ea7769f
Show file tree

Hide file tree

Showing 35 changed files with 1,245 additions and 346 deletions.
diff --git a/.gitignore b/.gitignore
@@ -126,3 +126,8 @@ inquire-server.yaml
 **.tar.gz
 mongodb-backup**
 backup-README.md
+
+patchNotes
+# environments
+env/
+*.sh
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -12,11 +12,14 @@
     "draft-js": "^0.11.7",
     "draftjs-to-markdown": "^0.6.0",
     "mdb-react-ui-kit": "^1.0.0-alpha4",
+    "moment": "^2.29.1",
+    "moment-timezone": "^0.5.33",
     "react": "^17.0.1",
     "react-color": "^2.19.3",
     "react-dom": "^17.0.1",
     "react-draft-wysiwyg": "^1.14.7",
     "react-google-login": "^5.2.2",
+    "react-moment": "^1.1.1",
     "react-polls": "^1.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",

diff --git a/client/src/components/comments/Comment.js b/client/src/components/comments/Comment.js
@@ -90,6 +90,7 @@ const Comment = ({ comment, isDraft, callback }) => {
               uploadCallback: imageCallback,
               uploadEnabled: true,
               previewImage: true,
+              defaultSize: { width: "600" },
             },
           }}
         />

diff --git a/client/src/components/comments/CommentReply.js b/client/src/components/comments/CommentReply.js
@@ -92,6 +92,7 @@ const CommentReply = ({
               uploadCallback: imageCallback,
               uploadEnabled: true,
               previewImage: true,
+              defaultSize: { width: "600" },
             },
           }}
         />
@@ -193,6 +194,7 @@ const CommentReply = ({
               uploadCallback: imageCallback,
               uploadEnabled: true,
               previewImage: true,
+              defaultSize: { width: "600" },
             },
           }}
         />

diff --git a/client/src/components/comments/CommentView.js b/client/src/components/comments/CommentView.js
@@ -95,51 +95,51 @@ const CommentView = ({ classroomName }) => {
         endpoint: "/courses/" + courseId + "/posts/" + post._id + "/comments",
         onSuccess: (data) => {
           setCommentData([...renderComments(data, userRole)]);
-          io.emit("join", { room: post._id, room_type: "post" });
+          // io.emit("join", { room: post._id, room_type: "post" });
         },
       });
     }
     // io.emit("join", { room: post._id, room_type: "post" });
     if (post) {
       return () => {
-        io.emit("leave", { room: post._id });
+        // io.emit("leave", { room: post._id });
       };
     }
   }, [post]);
 
-  useEffect(() => {
-    io.on("Comment/create", (comment) => {
-      //console.log(comment);
-      // Ensure the user isn't the one who posted it
-      if (
-        comment &&
-        comment.postedBy._id !== user._id &&
-        comment.postedBy._id !== user.anonymousId
-      ) {
-        // console.log(commentData);
-        setCommentData([
-          ...commentData,
-          <Comment comment={comment} key={comment._id} />,
-        ]);
-      }
-    });
-    io.on("Reply/create", (comment) => {
-      // console.log(comment, "ws");
-      // Take copy of socketComments and append reply to matching comment (with _id)
-      // console.log(commentData);
-      let allComments = [...commentData];
-      // console.log(allComments);
-      for (let i in allComments) {
-        // console.log(allComments[i], "in for loop");
-        if (allComments[i].props.comment._id === comment._id) {
-          // console.log("found a match");
-          allComments[i] = <Comment comment={comment} key={comment._id} />;
-          break;
-        }
-      }
-      setCommentData(allComments);
-    });
-  }, [commentData]);
+  // useEffect(() => {
+  //   io.on("Comment/create", (comment) => {
+  //     //console.log(comment);
+  //     // Ensure the user isn't the one who posted it
+  //     if (
+  //       comment &&
+  //       comment.postedBy._id !== user._id &&
+  //       comment.postedBy._id !== user.anonymousId
+  //     ) {
+  //       // console.log(commentData);
+  //       setCommentData([
+  //         ...commentData,
+  //         <Comment comment={comment} key={comment._id} />,
+  //       ]);
+  //     }
+  //   });
+  //   io.on("Reply/create", (comment) => {
+  //     // console.log(comment, "ws");
+  //     // Take copy of socketComments and append reply to matching comment (with _id)
+  //     // console.log(commentData);
+  //     let allComments = [...commentData];
+  //     // console.log(allComments);
+  //     for (let i in allComments) {
+  //       // console.log(allComments[i], "in for loop");
+  //       if (allComments[i].props.comment._id === comment._id) {
+  //         // console.log("found a match");
+  //         allComments[i] = <Comment comment={comment} key={comment._id} />;
+  //         break;
+  //       }
+  //     }
+  //     setCommentData(allComments);
+  //   });
+  // }, [commentData]);
 
   const draftNewComment = () => {
     setNewComments({
@@ -282,6 +282,13 @@ const OptionsContainer = styled.div`
   justify-content: space-between;
   width: 100%;
   margin: 2.2em 0 1.1em 0;
+
+  @media only screen and (max-width: 769px) {
+    padding-left: calc(42px);
+    margin: 1.5em 0 1em 0;
+
+    justify-content: space-around;
+  }
 `;
 
 const ScrollingDiv = styled.div`
@@ -294,6 +301,9 @@ const ScrollingDiv = styled.div`
   @media only screen and (max-width: 1200px) {
     padding: 0 2.5em;
   }
+  @media only screen and (max-width: 769px) {
+    padding: 0 1em;
+  }
 `;
 
 const MaxWidth = styled.div`

diff --git a/client/src/components/common/CustomHooks.js b/client/src/components/common/CustomHooks.js
@@ -1,5 +1,5 @@
 // https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 
 function getWindowDimensions() {
   const { innerWidth: width, innerHeight: height } = window;
@@ -25,3 +25,27 @@ export function useWindowDimensions() {
 
   return windowDimensions;
 }
+
+// useOnClickAway inspired by:
+// https://stackoverflow.com/questions/32553158/detect-click-outside-react-component
+export function useOnClickAway(handler, debugMessage) {
+  const node = useRef();
+
+  const handleClick = (event) => {
+    if (node.current.contains(event.target)) return;
+
+    debugMessage && console.log(debugMessage);
+
+    handler(event);
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClick);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+    };
+  }, []);
+
+  return node;
+}
diff --git a/client/src/components/common/Reaction.js b/client/src/components/common/Reaction.js
@@ -10,6 +10,7 @@ import GreyLightbulbImg from "../../imgs/lightbulb-grey.svg";
 import { UserContext } from "../context/UserProvider";
 import LazyFetch from "./requests/LazyFetch";
 import { UserRoleContext } from "../context/UserRoleProvider";
+import Dropdown from "./dropdown/Dropdown";
 
 /** Reaction Component
  * @brief Intended to be used above "Input" components to label them
@@ -20,7 +21,7 @@ import { UserRoleContext } from "../context/UserRoleProvider";
  * @param {number} postid id associated with the post this reaction falls within
  * @returns Reaction Component
  */
-const Reaction = ({ reactions, type, id, postid }) => {
+const Reaction = ({ reactions, type, id, postid, dropdown }) => {
   // console.log("reactions: ", reactions);
   const urlParams = useParams();
   const user = useContext(UserContext);
@@ -125,42 +126,68 @@ const Reaction = ({ reactions, type, id, postid }) => {
 
   return (
     <>
-      <a title={"Good post"}>
-        <ReactImg
-          src={reactClicked.gooded ? LightbulbImg : GreyLightbulbImg}
-          onClick={(event) => {
-            event.stopPropagation();
-            handleGood();
-          }}
-          clicked={reactClicked.gooded}
-          postid={postid}
-        />
-      </a>
-      <ReactValue>{reactionState.goods.length}</ReactValue>
-      <a title={"Helpful post"}>
-        <ReactImg
-          src={reactClicked.helpfuled ? GreenPlusImg : GreyPlusImg}
-          onClick={(event) => {
-            event.stopPropagation();
-            handleHelpful();
-          }}
-          clicked={reactClicked.helpfuled}
-          postid={postid}
-        />
-      </a>
-      <ReactValue>{reactionState.helpfuls.length}</ReactValue>
-      <a title={"Like post"}>
-        <ReactImg
-          src={reactClicked.liked ? LikedImg : UnlikedImg}
-          onClick={(event) => {
-            event.stopPropagation();
-            handleLike();
-          }}
-          clicked={reactClicked.liked}
-          postid={postid}
-        />
-      </a>
-      <ReactValue>{reactionState.likes.length}</ReactValue>
+      {dropdown ? (
+        <>
+          <Dropdown
+            // stopPropagation
+            options={[
+              {
+                onClick: handleGood,
+                label: `Mark Post As Good ${reactionState.goods.length}`,
+              },
+              {
+                onClick: handleHelpful,
+                label: `Mark Post As helpful ${reactionState.helpfuls.length}`,
+              },
+              {
+                onClick: handleLike,
+                label: `Like Post ${reactionState.likes.length}`,
+              },
+            ]}
+          >
+            <ReactDropdownText>Reactions</ReactDropdownText>
+          </Dropdown>
+        </>
+      ) : (
+        <>
+          <a title={"Good post"}>
+            <ReactImg
+              src={reactClicked.gooded ? LightbulbImg : GreyLightbulbImg}
+              onClick={(event) => {
+                event.stopPropagation();
+                handleGood();
+              }}
+              clicked={reactClicked.gooded}
+              postid={postid}
+            />
+          </a>
+          <ReactValue>{reactionState.goods.length}</ReactValue>
+          <a title={"Helpful post"}>
+            <ReactImg
+              src={reactClicked.helpfuled ? GreenPlusImg : GreyPlusImg}
+              onClick={(event) => {
+                event.stopPropagation();
+                handleHelpful();
+              }}
+              clicked={reactClicked.helpfuled}
+              postid={postid}
+            />
+          </a>
+          <ReactValue>{reactionState.helpfuls.length}</ReactValue>
+          <a title={"Like post"}>
+            <ReactImg
+              src={reactClicked.liked ? LikedImg : UnlikedImg}
+              onClick={(event) => {
+                event.stopPropagation();
+                handleLike();
+              }}
+              clicked={reactClicked.liked}
+              postid={postid}
+            />
+          </a>
+          <ReactValue>{reactionState.likes.length}</ReactValue>
+        </>
+      )}
     </>
   );
 };
@@ -182,3 +209,24 @@ const ReactImg = styled.img`
 const ReactValue = styled.h5`
   color: #8c8c8c;
 `;
+
+const ReactDropdownText = styled.h5`
+  padding: 0.75em;
+  background-color: #f8f8f8;
+  border-radius: 1em;
+  font-weight: 500;
+
+  transition: 150ms ease-out;
+
+  :hover {
+    cursor: pointer;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
+  }
+
+  :active {
+    cursor: pointer;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
+
+    border: 1px solid var(--inquire-blue); // for accessibility
+  }
+`;