Display all projects in landing page

frontend/src/components/pages/home/index.css

@@ -0,0 +1,28 @@
+.project-parent-box{
+    margin: 5%;
+}
+
+.project-card-box{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.project-card-box > .project-card{
+    width: 30%;
+}
+
+.project-card-box::after{
+    content:"";
+    flex: 0 0 30%;
+}
+
+hr {
+    margin-top: 2%;
+    margin-bottom: 2%;
+}
+
+.title-box {
+    border-style: None !important;
+}

frontend/src/components/pages/home/index.tsx

@@ -1,42 +1,79 @@
-import React, { useEffect } from "react";
-import Button from "@material-ui/core/Button";
+import React, { useEffect, useState } from "react";
 import { useAppSelector, useAppDispatch } from "../../../redux/hooks";
-import {
-  decrement,
-  increment,
-  getProjects,
-  selectHome,
-  selectProjects,
-} from "./homeSlice";
+import { getProjects, selectProjects } from "./homeSlice";
+import ProjectCard from "./projectCard";
+import { Select, FormControl, InputLabel, MenuItem } from "@material-ui/core";
+import "./index.css";
 
+// not fully typed, add things into this for your usage
+interface Project {
+  name: string;
+  neighbourhood: string;
+  type: string;
+  is_completed: boolean;
+}
 const Home: React.FC = () => {
-  const count = useAppSelector(selectHome);
   const projects = useAppSelector(selectProjects);
   const dispatch = useAppDispatch();
+  const [inProgressProjects, setInProgressProjects] = useState<Project[]>([]);
+  const [completedProjects, setCompletedProjects] = useState<Project[]>([]);
   useEffect(() => {
     dispatch(getProjects());
   }, [dispatch]);
 
-  const onIncrement = () => {
-    dispatch(increment());
-  };
-
-  const onDecrement = () => {
-    dispatch(decrement());
-  };
-
+  useEffect(() => {
+    setInProgressProjects(
+      projects.filter((project, _) => project.is_completed === true)
+    );
+    setCompletedProjects(
+      projects.filter((project, _) => project.is_completed === false)
+    );
+  }, [projects]);
   return (
     <div>
-      <Button variant="contained" color="primary" onClick={onIncrement}>
-        increment
-      </Button>
-      {count}
-      <Button variant="contained" color="primary" onClick={onDecrement}>
-        decrement
-      </Button>
-      {projects.map((project, _) => (
-        <div>{project.id}</div>
-      ))}
+      <div className="project-parent-box">
+        <div className="title-box">
+          <h1>In Progress</h1>
+          <FormControl variant="outlined">
+            <InputLabel>Boroughs</InputLabel>
+            <Select
+              labelId="demo-simple-select-outlined-label"
+              id="demo-simple-select-outlined"
+              label="Boroughs"
+            >
+            </Select>
+          </FormControl>
+        </div>
+        <hr></hr>
+        <div className="project-card-box">
+          {inProgressProjects.map((project, _) => (
+            <div className="project-card">
+              <ProjectCard
+                title={project.name}
+                neighbourhood={project.neighbourhood}
+                type={project.type}
+              />
+            </div>
+          ))}
+        </div>
+        <br></br>
+      </div>
+
+      <div className="project-parent-box">
+        <h1>Completed</h1>
+        <hr></hr>
+        <div className="project-card-box">
+          {completedProjects.map((project, _) => (
+            <div className="project-card">
+              <ProjectCard
+                title={project.name}
+                neighbourhood={project.neighbourhood}
+                type={project.type}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
     </div>
   );
 };

frontend/src/components/pages/home/projectCard.css

@@ -0,0 +1,46 @@
+* {
+    max-width: 100%;
+    max-width: 100%
+}
+p {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: bold;
+    font-size: 1rem
+}
+img {
+    margin-bottom: 3%;
+    border-radius: 2%;
+}
+
+.description-box{
+    display: flex;
+    align-items:baseline;
+    justify-content: space-between;
+    margin-bottom: 10%;
+}
+
+.description-box > *{
+    width: 50%;
+}
+
+.chips > *{
+    width: 48%;
+}
+
+.neighbourhood {
+    border-radius: 10% !important;
+    margin-right: 4%;
+    background-color: #4FF6D1 !important;
+    font-weight: bold;
+    font-size: 1rem !important;
+
+}
+
+.type {
+    border-radius: 10% !important;
+    background-color: #FFB256 !important;
+    font-weight: bold;
+    font-size: 1rem !important;
+}

frontend/src/components/pages/home/projectCard.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import Chip from "@material-ui/core/Chip";
+import "./projectCard.css";
+
+type ProjectCardProps = {
+  title: string;
+  neighbourhood: string;
+  type: string;
+};
+
+const ProjectCard: React.FC<ProjectCardProps> = ({
+  title,
+  neighbourhood,
+  type,
+}: ProjectCardProps) => {
+  return (
+    <div>
+      <img src="https://assets.bonappetit.com/photos/5c62e4a3e81bbf522a9579ce/5:4/w_2815,h_2252,c_limit/milk-bread.jpg" alt="filler"></img>
+      <div className="description-box">
+        <p>{title}</p>
+        <div className="chips">
+          <Chip label={neighbourhood} className="neighbourhood" />
+          <Chip label={type} className="type" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectCard;