Merge branch 'main' into posts

5-Bits-in-a-Byte · Mar 5, 2021 · a39a811 · a39a811
2 parents d286a44 + d0015bc
commit a39a811
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 25 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -49,7 +49,7 @@ function App() {
           </PrivateRoute>
           <Route path="/postForm" exact>
             <NavigationWrapper></NavigationWrapper>
-          </Route>
+          </PrivateRoute>
         </Switch>
       </UserProvider>
     </Router>

diff --git a/client/src/components/comments/Comment.js b/client/src/components/comments/Comment.js
@@ -19,10 +19,10 @@ const Comment = ({ posterName, commentContent }) => {
             <IconValue>1</IconValue>
           </MetaIconWrapper>
         </PostMetaContentWrapper>
-        <CommentReply />
-        <CommentReply />
-        <CommentReply />
-        <CommentReply />
+        <CommentReply posterName={posterName} />
+        <CommentReply posterName={posterName} />
+        <CommentReply posterName={posterName} />
+        <CommentReply posterName={posterName} />
       </ReplyContainer>
     </CommentWrapper>
   );

diff --git a/client/src/components/comments/CommentReply.js b/client/src/components/comments/CommentReply.js
@@ -1,15 +1,24 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
+import LikeImg from "../../imgs/like.svg";
 
-const CommentReply = (props) => {
+const CommentReply = ({ posterName }) => {
   return (
     <CommentReplyWrapper>
-      Lorem ipsum dolor sit.
-      <p></p>
-      <p></p>
-      <p></p>
-      <p></p>
+      <CommentReplyContent>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci
+        voluptatem nemo dolor quo corporis quas quasi qui provident cumque,
+        quisquam quos quod minima libero.
+      </CommentReplyContent>
+      <ReplyMetaContentWrapper className="meta">
+        <UserDescription>Reply by {posterName}</UserDescription>
+
+        <MetaIconWrapper>
+          <Icon src={LikeImg} />
+          <IconValue>1</IconValue>
+        </MetaIconWrapper>
+      </ReplyMetaContentWrapper>
     </CommentReplyWrapper>
   );
 };
@@ -23,5 +32,66 @@ const CommentReplyWrapper = styled.div`
   min-height: 85px;
   margin: 1em auto;
 
-  background-color: #454545;
+  /* border: 1px solid red; */
+  border-radius: 0.3em;
+  background-color: #f8f8f8;
+
+  box-shadow: 0px 1px 4px 2px rgba(0, 0, 0, 0.07);
+
+  :hover {
+    cursor: pointer;
+  }
+`;
+
+const CommentReplyContent = styled.p`
+  margin: 0 2.2em 1em 2.2em;
+  padding-top: 1em;
+  font-size: 14px;
+
+  color: #979797;
+`;
+
+const ReplyMetaContentWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  width: 100%;
+  min-height: 1.5em;
+  /* margin: 0 2.2em 0.5em 2.2em; */
+  /* padding-top: 0.5em; */
+
+  // border: 1px solid black;
+  background-color: #ededed;
+`;
+
+const UserDescription = styled.h5`
+  user-select: none;
+
+  color: #8c8c8c;
+
+  margin: auto 2em;
+  line-height: 1.5em;
+  font-size: 12px;
+`;
+
+const MetaIconWrapper = styled.div`
+  display: inline-flex;
+  margin-left: 400px;
+
+  height: 1.75em;
+`;
+
+const Icon = styled.img`
+  float: left;
+
+  width: 18px;
+  height: 18px;
+  margin-right: 1em;
+  margin-left: 0.75em;
+
+  user-select: none;
+`;
+
+const IconValue = styled.h5`
+  color: #8c8c8c;
 `;
diff --git a/client/src/components/comments/CommentView.js b/client/src/components/comments/CommentView.js
@@ -26,7 +26,7 @@ const CommentView = ({ classroomName }) => {
           <Button>Reply to Post</Button>
         </OptionsContainer>
 
-        <PostCommentContainer>
+        <ScrollingDiv>
           <Post
             postTitle={testTitle}
             postContent={testContent}
@@ -35,7 +35,7 @@ const CommentView = ({ classroomName }) => {
             isCondensed={true}
           />
           <Comment posterName={testName} commentContent={testContent} />
-        </PostCommentContainer>
+        </ScrollingDiv>
       </CommentViewContainer>
     </CommentViewWrapper>
   );
@@ -56,7 +56,7 @@ const CommentViewContainer = styled.div`
   align-items: center;
 
   width: 100%;
-  border: 1px solid green;
+  /* border: 1px solid green; */
 `;
 
 const OptionsContainer = styled.div`
@@ -71,5 +71,17 @@ const OptionsContainer = styled.div`
 const PostCommentContainer = styled.div`
   width: 100%;
 
-  border: 1px solid orange;
+  /* border: 1px solid orange; */
+`;
+
+const ScrollingDiv = styled.div`
+  position: absolute;
+  height: 100%;
+  width: 50%;
+  padding: 0 40px;
+  overflow: auto;
+  ::-webkit-scrollbar {
+    width: 0; /* Remove scrollbar space */
+    background: transparent; /* Optional: just make scrollbar invisible */
+  }
 `;
diff --git a/client/src/components/courses/Courses.js b/client/src/components/courses/Courses.js
@@ -5,13 +5,14 @@ import TopContent from "./TopContent";
 import CourseCard from "./CourseCard";
 
 const colorsArray = [
-  "#000700",
-  "#440000",
-  "#500F90",
-  "#FF0000",
-  "#0F9900",
-  "#000EEE",
-  "#326500",
+  "#dd0000",
+  "#dd7700",
+  "#eedd00",
+  "#00cc00",
+  "#2a2aff",
+  "#7337ee",
+  "#ee55ee",
+  "#00cccc",
 ];
 
 // List-to-components mapping technique from:
@@ -25,7 +26,7 @@ const courseList = (userCourses) => {
         id={course.course_id}
         courseName={course.course_name}
         courseTerm="Winter 2021"
-        color={course.color || colorsArray[index]}
+        color={course.color || colorsArray[index % colorsArray.length]}
       />
     );
   });

diff --git a/server/resources/posts.py b/server/resources/posts.py
@@ -106,7 +106,7 @@ def put(self, course_id):
         parser = reqparse.RequestParser()
         parser.add_argument('title')
         parser.add_argument('content')
-        parser.add_argument('isPinned')
+        parser.add_argument('isPinned', type=bool)
         parser.add_argument('_id')
         args = parser.parse_args()