Merge pull request #15 from alecspringel/posts

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

Hide file tree

Showing 6 changed files with 90 additions and 172 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -37,17 +37,17 @@ function App() {
           <Route path="/login" exact>
             <Login />
           </Route>
-          <Route path="/course/:courseid" exact>
+          <PrivateRoute path="/course/:courseid" exact>
             <NavigationWrapper>
               <ClassView classroomName={"CIS 422"} />
             </NavigationWrapper>
-          </Route>
-          <PrivateRoute path="/postView" exact>
+          </PrivateRoute>
+          <PrivateRoute path="/course/:courseid/post/:postid" exact>
             <NavigationWrapper>
               <CommentView classroomName={"CIS 422"} />
             </NavigationWrapper>
           </PrivateRoute>
-          <PrivateRoute path="/postForm" exact>
+          <Route path="/postForm" exact>
             <NavigationWrapper></NavigationWrapper>
           </PrivateRoute>
         </Switch>

diff --git a/client/src/components/common/requests/Fetch.js b/client/src/components/common/requests/Fetch.js
@@ -0,0 +1,31 @@
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+
+const Fetch = ({ type, url = process.env.REACT_APP_SERVER_URL, endpoint }) => {
+  const [res, setRes] = useState({ data: null, errors: null, loading: false });
+  useEffect(() => {
+    setRes({ ...res, loading: true });
+    axios[type](url + endpoint, { withCredentials: true })
+      .then((response) => {
+        setRes({ ...res, data: response.data, loading: false });
+      })
+      .catch((err) => {
+        if (err.response && err.response.data) {
+          // Set the errors provided by our API request
+          console.log(err.response.data.errors);
+          setRes({ ...res, errors: err.response.data.errors, loading: false });
+        } else {
+          setRes({
+            ...res,
+            errors: [
+              "There was an error creating the course. Please try again.",
+            ],
+            loading: false,
+          });
+        }
+      });
+  }, []);
+  return res;
+};
+
+export default Fetch;
diff --git a/client/src/components/forumsAndPosts/Post.js b/client/src/components/forumsAndPosts/Post.js
@@ -20,9 +20,9 @@ const Post = ({
 
       <PinIcon style={pin} src={PinImg} />
 
-      {isCondensed && <PostContent>{postContent}</PostContent>}
+      {!isCondensed && <PostContent>{postContent}</PostContent>}
 
-      {isCondensed && <hr style={HRStyle} />}
+      {!isCondensed && <hr style={HRStyle} />}
 
       <PostMetaContentWrapper className="meta">
         <UserIcon src="./icons8_note.svg" />
@@ -88,7 +88,7 @@ const PostWrapper = styled.div`
 
 const PostTitle = styled.h2`
   /* margin: 1em 0 0.5em 2em; */
-  font-size: ${(props) => (props.isCondensed && "18px") || "14px"};
+  font-size: ${(props) => (!props.isCondensed && "18px") || "14px"};
 `;
 
 const PinIcon = styled.img`

diff --git a/client/src/components/forumsAndPosts/PostView.js b/client/src/components/forumsAndPosts/PostView.js
@@ -8,21 +8,45 @@ import LineWidthImg from "../../imgs/line-width.svg";
 import HollowPinImg from "../../imgs/pin-hollow.svg";
 import { useParams } from "react-router-dom";
 import axios from "axios";
+import Fetch from "../common/requests/Fetch";
 
-const testTitle = "This is temp post title text?";
-const testContent =
-  "Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis labore saepe voluptatem natus officia molestiae beatae repudiandae nisi. Aspernatur dolores sequi ipsum quaerat facilis.";
-const testName = "Seth Tal";
+const createPost = (post) => {
+  return (
+    <Post
+      // key=
+      postTitle={post.title}
+      postContent={post.content}
+      posterName={post.postedby.first + " " + post.postedby.last}
+      isPinned={post.isPinned}
+      isCondensed={false}
+    />
+  );
+};
+
+// Sorts the posts by pinned/date
+const generateSections = (data) => {
+  let posts = { pinned: [], other: [] };
+  if (data) {
+    data.forEach((post) => {
+      if (post.isPinned) {
+        posts.pinned.push(createPost(post));
+      } else {
+        posts.other.push(createPost(post));
+      }
+    });
+  }
+  return posts;
+};
 
 const PostView = (props) => {
   const [isCondensed, setCondensedState] = useState(true);
   // Retrieves the courseid from the url parameters
   const { courseid } = useParams();
-
-  // THIS IS WHERE WE WOULD RETRIEVE POSTS
-  // useEffect(() => {
-  //   axios.get(process.env.REACT_APP_SERVER_URL + "/api/")
-  // }, [courseid]);
+  const { data, errors, loading } = Fetch({
+    type: "get",
+    endpoint: "/api/courses/" + courseid + "/posts",
+  });
+  let posts = generateSections(data);
 
   return (
     <>
@@ -48,76 +72,22 @@ const PostView = (props) => {
               {" Most Recent "}
             </Button>
           </SortingOptions>
-          <PostGroupingHeader>
-            {" "}
-            <img
-              src={HollowPinImg}
-              style={{ width: "18px", height: "18px" }}
-            />{" "}
-            Pinned Posts
-          </PostGroupingHeader>
-
-          <Post
-            postTitle={testTitle}
-            postContent={testContent}
-            posterName={testName}
-            isPinned={true}
-            isCondensed={isCondensed}
-          />
-          <PostGroupingHeader>This Week</PostGroupingHeader>
-
-          <Post
-            postTitle={testTitle}
-            postContent={testContent}
-            posterName={testName}
-            isPinned={false}
-            isCondensed={isCondensed}
-          />
-          <Post
-            postTitle={testTitle}
-            postContent={testContent}
-            posterName={testName}
-            isPinned={false}
-            isCondensed={isCondensed}
-          />
-          <Post
-            postTitle={testTitle}
-            postContent={testContent}
-            posterName={testName}
-            isPinned={false}
-            isCondensed={isCondensed}
-          />
-          <Post
-            postTitle={testTitle}
-            postContent={testContent}
-            posterName={testName}
-            isPinned={false}
-            isCondensed={isCondensed}
-          />
-          <Post
-            postTitle={testTitle}
-            postContent={testContent}
-            posterName={testName}
-            isPinned={false}
-            isCondensed={isCondensed}
-          />
-          <Post
-            postTitle={testTitle}
-            postContent={testContent}
-            posterName={testName}
-            isPinned={false}
-            isCondensed={isCondensed}
-          />
-          <Post
-            postTitle={testTitle}
-            postContent={testContent}
-            posterName={testName}
-            isPinned={false}
-            isCondensed={isCondensed}
-          />
+          {posts.pinned.length > 0 && (
+            <PostGroupingHeader>
+              <img
+                src={HollowPinImg}
+                style={{ width: 18, height: 18, marginRight: 5 }}
+              />
+              Pinned Posts
+            </PostGroupingHeader>
+          )}
+          {posts.pinned}
+          {posts.other.length > 0 && (
+            <PostGroupingHeader>Other Posts</PostGroupingHeader>
+          )}
+          {posts.other}
         </ScrollingDiv>
       </PostFeed>
-
       {/* Displays options panel on the right of the webpage */}
       <Options />
     </>
@@ -189,19 +159,18 @@ const ScrollingDiv = styled.div`
 `;
 
 const SortingOptions = styled.div`
+  position: absolute;
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   align-items: center;
-
+  padding-right: 65px;
   width: 100%;
   margin: 2.2em 0 1em 0;
 `;
 
 const PostGroupingHeader = styled.div`
-  margin: 1em 0;
-
-  font-family: Roboto;
+  margin: 2.2em 0 0em 0;
   font-size: 1.25em;
   font-weight: 500;
 `;

diff --git a/client/src/components/forums_and_posts/ClassView.js b/client/src/components/forums_and_posts/ClassView.js
diff --git a/server/resources/posts.py b/server/resources/posts.py
@@ -29,7 +29,8 @@ def post(self, course_id=None):
                         "_id": current_user.anonymousId, "anonymous": anonymous}
         else:
             postedby = {"first": current_user.first, "last": current_user.last,
-                        "_id": current_user._id, "anonymous": anonymous}
+                        "_id": current_user._id, "anonymous": anonymous,
+                        "picture": current_user.picture}
 
         # Add post to MongoDB
         post = Post(courseid=course_id, postedby=postedby, title=args.title,