Frontend-Bootcamp-2022 · github-classroom · Jul 3, 2022 · Jul 12, 2022 · Jul 12, 2022 · Jul 12, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,11 +1,13 @@
 {
-  "name": "react-dashboard",
+  "name": "my-react",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.27.2",
+    "node-sass": "^7.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

diff --git a/public/index.html b/public/index.html
@@ -1,16 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-  <title>React Dashboard</title>
-</head>
-
-<body>
-  <div id="root"></div>
-</body>
-
-</html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
+      rel="stylesheet"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <title>React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,44 @@
+import { useState, useEffect } from "react";
+import axios from "axios";
+
+import Header from "./components/Header/Header";
+import Card from "./components/Card/Card";
+import Sidebar from "./components/Sidebar/Sidebar";
+
+import styles from "./components/Card/card.module.scss";
+import "./App.scss";
+
 const App = () => {
+  const [projectData, setProjectData] = useState([]);
+  const [search, setSearch] = useState("");
+  const [selected, setSelected] = useState("");
+
+  const value = { search, selected, setSearch, setSelected };
+
+  const fetchData = async () => {
+    const result = await axios(
+      "https://private-e6514c-projectsinfo.apiary-mock.com/getProjects"
+    );
+    setProjectData(result.data);
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
   return (
-    <h1>React Dashboard</h1>
+    <div className="wrapper">
+      <div className="wrapper__left">
+        <Sidebar />
+      </div>
+      <div className="wrapper__right">
+        <Header value={value} />
+        <div className={styles.table}>
+          <Card styles={styles} value={value} data={projectData} />
+        </div>
+      </div>
+    </div>
   );
-}
+};
 
 export default App;
diff --git a/src/App.scss b/src/App.scss
@@ -0,0 +1,33 @@
+* {
+  box-sizing: border-box;
+
+  &::after {
+    box-sizing: border-box;
+  }
+
+  &::before {
+    box-sizing: border-box;
+  }
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+.wrapper {
+  display: flex;
+
+  &__left {
+    flex: 0 1 15%;
+    max-width: 400px;
+    min-width: 300px;
+    min-height: 100vh;
+    height: auto;
+  }
+
+  &__right {
+    flex: 0 1 85%;
+    margin: 0 0 16px 0;
+  }
+}
diff --git a/src/assets/icons/Icon.js b/src/assets/icons/Icon.js
diff --git a/src/assets/image/profile.png b/src/assets/image/profile.png
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
@@ -0,0 +1,14 @@
+import React from "react";
+
+const Button = ({ styles }) => {
+  return (
+    <div className={styles.button}>
+      <button type="submit">
+        <span>+ </span>
+        <span>New</span>
+      </button>
+    </div>
+  );
+};
+
+export default Button;
diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js
@@ -0,0 +1,59 @@
+import { useState } from "react";
+
+import ProjectTop from "./CardItemTop";
+import ProjectMid from "./CardItemMiddle";
+import ProjectBottom from "./CardItemBottom";
+
+const Card = ({ styles, data, value }) => {
+  const { search, selected } = value;
+
+  const projectData = data
+    .filter(
+      (project) =>
+        project.name.toLowerCase().includes(search.toLowerCase()) ||
+        project.name.toLocaleLowerCase().includes(search.toLocaleLowerCase())
+    )
+    .filter(
+      (project) =>
+        project.status?.includes(selected) || project.activity === selected
+    );
+
+  const hasProject = projectData.length ? (
+    projectData.map((project) => {
+      return (
+        <div key={project.id} className={styles.table__item}>
+          <div className={styles.card}>
+            <ProjectTop
+              styles={styles}
+              title={project.name}
+              activity={project.activity}
+            />
+            <ProjectMid
+              styles={styles}
+              date={project.startDate}
+              status={project.status}
+              number={{ one: 15, two: project.members.length }}
+            />
+            <ProjectBottom
+              styles={styles}
+              members={project.members}
+              progress={project.progress}
+            />
+          </div>
+        </div>
+      );
+    })
+  ) : (
+    <div className={styles.loading}>NO PROJECTS FOUND</div>
+  );
+
+  const Wrapper = data.length ? (
+    hasProject
+  ) : (
+    <div className={styles.loading}>LOADING...</div>
+  );
+
+  return Wrapper;
+};
+
+export default Card;
diff --git a/src/components/Card/CardItemBottom.js b/src/components/Card/CardItemBottom.js
@@ -0,0 +1,59 @@
+import { PlusIcon } from "../../assets/icons/Icon";
+
+export const Member = ({ picture }) => {
+  return <img src={picture.src} alt={picture.alt} />;
+};
+
+export const MembersBar = ({ styles, members }) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>Members</div>
+      <div className={styles.images}>
+        <div className={styles.profiles}>
+          {members.map((member, index) => (
+            <Member
+              key={member.url + member.alt + index}
+              picture={{ src: member.src, alt: member.alt }}
+            />
+          ))}
+        </div>
+        <div className={styles.plus}>
+          <PlusIcon />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const Progress = ({ styles, progress }) => {
+  return (
+    <div className={styles.progress__bar}>
+      <div className={styles.color} style={{ width: `${progress}%` }}></div>
+    </div>
+  );
+};
+
+export const ProgressBar = ({ styles, progress }) => {
+  return (
+    <div className={styles.progress}>
+      <div className={styles.progress__title}>
+        <span>Progress</span>
+      </div>
+      <div className={styles.progress__percent}>
+        <span>{progress}%</span>
+      </div>
+      <Progress styles={styles} progress={progress} />
+    </div>
+  );
+};
+
+const CardItemBottom = ({ styles, members, progress }) => {
+  return (
+    <div className={styles.card__bottom}>
+      <MembersBar styles={styles} members={members} />
+      <ProgressBar styles={styles} progress={progress} />
+    </div>
+  );
+};
+
+export default CardItemBottom;
diff --git a/src/components/Card/CardItemMiddle.js b/src/components/Card/CardItemMiddle.js
@@ -0,0 +1,62 @@
+import React from "react";
+import { DotIcon, LineIcon } from "../../assets/icons/Icon";
+
+export const Date = ({ styles, date }) => {
+  return (
+    <div className={styles.date}>
+      <span>Start Date</span>
+      <span>{date}</span>
+    </div>
+  );
+};
+
+export const Status = (props) => {
+  const styles = props.styles;
+  let color;
+  let status;
+  switch (props.status) {
+    case "Completed":
+      color = "#45DB99";
+      status = "Completed";
+      break;
+
+    case "On Hold":
+      color = "#F0BB00";
+      status = "On hold";
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <div className={styles.status}>
+      <DotIcon fill={color} />
+      <span style={{ color: `${color}` }}>{status}</span>
+    </div>
+  );
+};
+
+const Signal = ({ styles, number, name }) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.number}>{number}</div>
+      <div className={styles.name}>{name}</div>
+    </div>
+  );
+};
+
+const CardItemMiddle = ({ styles, status, date, number }) => {
+  return (
+    <div className={styles.card__mid}>
+      <Date styles={styles} date={date} />
+      <Status styles={styles} status={status} />
+      <div className={styles.buttons}>
+        <Signal styles={styles} number={number.one} name={"Tasks"} />
+        <LineIcon />
+        <Signal styles={styles} number={number.two} name={"Users"} />
+      </div>
+    </div>
+  );
+};
+
+export default CardItemMiddle;
diff --git a/src/components/Card/CardItemTop.js b/src/components/Card/CardItemTop.js
@@ -0,0 +1,54 @@
+import { DotIcon, EditIcon, PencilIcon } from "../../assets/icons/Icon";
+
+export const Title = ({ title, styles }) => {
+  return (
+    <div className={styles.title}>
+      <h2>{title}</h2>
+    </div>
+  );
+};
+
+export const Icons = ({ styles }) => {
+  return (
+    <div className={styles.icons}>
+      <PencilIcon />
+      <EditIcon />
+    </div>
+  );
+};
+
+export const Activity = ({ styles, activity }) => {
+  let color;
+  let status;
+  switch (activity) {
+    case true:
+      color = "#00DB99";
+      status = "Active";
+      break;
+    case false:
+      color = "#FF285C";
+      status = "Inactive";
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <div className={styles.activity}>
+      <DotIcon fill={color} />
+      <span style={{ color: `${color}` }}>{status}</span>
+    </div>
+  );
+};
+
+const CardItemTop = ({ title, styles, activity }) => {
+  return (
+    <div className={styles.card__header}>
+      <Title title={title} styles={styles} />
+      <Icons styles={styles} />
+      <Activity styles={styles} activity={activity} />
+    </div>
+  );
+};
+
+export default CardItemTop;