Merge pull request #37 from csci312a-s23/postViewUI

added styling changes with post view page - updated with main

Author: AlexisBallo2

ellen.db

@@ -20,6 +20,9 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/material": "^5.12.1",
     "ajv-formats": "^2.1.1",
     "db-errors": "^0.2.3",
     "knex": "^2.4.2",

package-lock.json

@@ -11,24 +11,28 @@
     -setCurrentSortFilter: sets current filter based on button click
 */
 
+import Button from "@mui/material/Button";
 import PropTypes from "prop-types";
 
 function filterBar({ currentSortFilter, setCurrentSortFilter }) {
   return (
-    <div>
+    <div style={{ display: "flex", flexDirection: "row" }}>
       {/* Maybe want some sort of sections view / titles view combo? */}
-      <button
+      <Button
+        variant="outlined"
         onClick={() => setCurrentSortFilter("new")}
         disabled={currentSortFilter === "new"}
       >
         New
-      </button>
-      <button
+      </Button>
+      <Button
+        style={{ marginLeft: "5%" }}
+        variant="outlined"
         onClick={() => setCurrentSortFilter("hot")}
         disabled={currentSortFilter === "hot"}
       >
         Hot
-      </button>
+      </Button>
     </div>
   );
 }

package.json

@@ -0,0 +1,36 @@
+import Paper from "@mui/material/Paper";
+import PropTypes from "prop-types";
+import Link from "next/link";
+
+export default function Post({ postInfo }) {
+  const postStyle = {
+    display: "flex",
+    flexDirection: "column",
+  };
+  return (
+    <div data-testid="post">
+      <Paper elevation={3} style={postStyle}>
+        <div style={{ display: "flex", flexDirection: "row", marginTop: "2%" }}>
+          <Link href={`/posts/${postInfo.id}`} style={{ marginLeft: "5%" }}>
+            {postInfo.title}
+          </Link>
+          <p style={{ alignSelf: "center", marginLeft: "5%" }}>
+            {" "}
+            {postInfo.category}{" "}
+          </p>
+          <p style={{ marginLeft: "auto", marginRight: "2%" }}>
+            {" "}
+            {postInfo.votes}{" "}
+          </p>
+        </div>
+        <p style={{ marginLeft: "10%", marginTop: "3%", marginBottom: "2%" }}>
+          {postInfo.content}
+        </p>
+        <p style={{ marginLeft: "80%", fontSize: "10px" }}>{postInfo.date}</p>
+      </Paper>
+    </div>
+  );
+}
+Post.propTypes = {
+  postInfo: PropTypes.object,
+};

public/components/filterBar.js

@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
-import IndividualPost from "@/components/IndividualPost";
+import Post from "./post";
+
 function PostList({ posts, sortingFilter }) {
   let filteredPosts;
 
@@ -21,16 +22,16 @@ function PostList({ posts, sortingFilter }) {
   });
 
   return (
-    <>
+    <div style={{ width: "100%", margin: "5% 0 5% 0" }}>
       {/* WE need a post id */}
       {filteredPosts.map((post) => {
         return (
-          <div key={post.id}>
-            <IndividualPost post={post} />
+          <div key={post.id} style={{ marginBottom: "2%" }}>
+            <Post postInfo={post} />
           </div>
         );
       })}
-    </>
+    </div>
   );
 }
 

public/components/post.js

@@ -58,7 +58,7 @@ describe("postList: postList tests", () => {
 
     const items = await screen.findAllByTestId("post");
     const dates = items.map(
-      (item) => new Date(item.children[3].innerHTML.slice(12))
+      (item) => new Date(item.children[0].children[2].innerHTML.slice(12))
     );
     console.log(dates);
     let sorted = true;

public/components/postsList.js

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import Popup from "reactjs-popup";
 import styles from "./PostCreator.module.css";
 import ReactSwitch from "react-switch";
+import Button from "@mui/material/Button";
 
 export default function PostCreator({ refresh }) {
   const [open, setOpen] = useState(false);
@@ -49,13 +50,16 @@ export default function PostCreator({ refresh }) {
 
   return (
     <div>
-      <button
-        type="button"
-        className={styles.openCreator}
-        onClick={() => setOpen((o) => !o)}
-      >
-        New Post
-      </button>
+      <div style={{ margin: "5%" }}>
+        <Button
+          variant="outlined"
+          type="button"
+          className={styles.openCreator}
+          onClick={() => setOpen((o) => !o)}
+        >
+          New Post
+        </Button>
+      </div>
       <Popup open={open} closeOnDocumentClick onClose={closeModal}>
         <div className={styles.modal}>
           <a className={styles.close} onClick={closeModal}>

public/components/postsList.test.js

@@ -1,6 +1,6 @@
 .openCreator {
-  width: 100px;
-  height: 100px;
+  width: 150px;
+  height: 50px;
 }
 
 .modal {

src/components/newPost/PostCreator.js

@@ -22,14 +22,22 @@ export default function Home({ posts, refreshPosts }) {
   };
 
   return (
-    <>
+    <div
+      style={{
+        display: "flex",
+        width: "40%",
+        flexDirection: "column",
+        alignItems: "center",
+        margin: "2%",
+      }}
+    >
       <FilterBar
         currentSortFilter={currentSortFilter}
         setCurrentSortFilter={changeSortFilter}
       />
       <PostList posts={posts} sortingFilter={currentSortFilter} />
       <PostCreator refresh={refreshPosts} />
-    </>
+    </div>
   );
 }