CATCH UP

frontend/package.json

@@ -3,16 +3,29 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.15.11",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.82",
-    "@types/react": "^18.2.56",
+    "@types/react": "^18.2.57",
     "@types/react-dom": "^18.2.19",
+    "chroma-js": "^2.4.2",
+    "clsx": "^2.1.0",
+    "d3": "^7.8.5",
+    "lodash": "^4.17.21",
+    "lodash.debounce": "^4.0.8",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.10.1",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-native-linear-gradient": "^2.8.3",
+    "react-native-svg": "^14.1.0",
+    "react-router-dom": "^6.22.3",
+    "react-scripts": "^5.0.1",
+    "react-tooltip": "^5.26.3",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
@@ -39,5 +52,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/chroma-js": "^2.4.4",
+    "@types/d3": "^7.4.3",
+    "@types/lodash.debounce": "^4.0.9"
   }
 }

frontend/src/App.css

@@ -1,5 +1,5 @@
 .App {
-  text-align: center;
+  margin-top: 100px; /* match navbar, surely theres a better way to do this */ 
 }
 
 .App-logo {

frontend/src/App.tsx

@@ -1,25 +1,25 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+
+import "./App.css";
+import { Route, Routes } from 'react-router-dom';
+import Navbar from './navbar/NavBar';
+import Courses from './pages/Courses';
+import Graduation from './pages/Graduation';
+import Majors from './pages/Majors';
 
 function App() {
   return (
+  <>
+    <Navbar/>
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Routes>
+        <Route path="/"             element={<Graduation />} />
+        <Route path="/graduation"   element={<Graduation/>}/>        
+        <Route path="/courses"      element={<Courses/>} />
+        <Route path="/majors"       element={<Majors/>}/>
+      </Routes>
     </div>
+  </>
+
   );
 }
 

frontend/src/Providers.tsx

@@ -0,0 +1,3 @@
+export default function Providers({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

frontend/src/Router.tsx

@@ -0,0 +1,31 @@
+
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import "./index.css";
+import Courses from "./pages/Courses";
+import Majors from "./pages/Majors";
+import Graduation from "./pages/Graduation";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <div>MajorAudit</div>,
+  },
+  {
+    path: "/courses",
+    element: <Courses />,
+  },
+  {
+    path: "/majors",
+    element: <Majors />,
+  },
+  {
+    path: "/graduation",
+    element: <Graduation />,
+  },
+]);
+
+function Router() {
+  return <RouterProvider router={router} />;
+}
+
+export default Router;

frontend/src/commons/components/courses/CourseBoxSmall.module.css

@@ -0,0 +1,14 @@
+
+.CourseBox {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    border-radius: 15px;
+
+    width: max-content;
+    padding: 2px 4px;
+
+    font-size: 14px;
+    font-weight: bold;
+}

frontend/src/commons/components/courses/CourseBoxSmall.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import styles from "./CourseBoxSmall.module.css";
+
+import { List } from "lodash";
+
+import "react-tooltip/dist/react-tooltip.css";
+import { Tooltip } from "react-tooltip";
+import { Course, Season } from "../../types/TypeCourse";
+
+import img_fall from "./../../images/fall.png";
+import img_spring from "./../../images/spring.png";
+
+import DistributionBoxSmall from "./DistributionBoxSmall"
+import DistributionCircle from "./DistributionsCircle";
+import ReactDOMServer from 'react-dom/server';
+
+function CourseSeasonIcon(props: { seasons: Array<Season> }) {
+  const seasonImageMap = {
+    FALL: img_fall,
+    SPRING: img_spring,
+    SUMMER: "summer.png",
+  };
+
+  return (
+    <div style={{ display: "flex", marginRight: "2px", marginTop: "3px" }}>
+      {props.seasons.map((szn, index) => (
+        <div key={index} style={{ marginLeft: index > 0 ? "-7.5px" : 0 }}>
+          {seasonImageMap[szn] && (
+            <img
+              style={{ width: "15px", height: "15px" }}
+              src={seasonImageMap[szn]}
+              alt={szn}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function CourseDistributionsText(props: { distributions: List<string>}) {
+  const rows = [];
+  for (let i = 0; i < props.distributions.length; i++) {
+      rows.push(<DistributionBoxSmall text={props.distributions[i]}/>);
+  }
+  return (
+    <div>Satisfies {rows} Requirement{props.distributions.length > 1 ? "s" : ""}</div>
+  );
+}
+
+function CourseBoxSmall(course: Course) {
+  return (
+    <div
+      className={styles.CourseBox}
+      style={{
+        backgroundColor: course.status === "COMPLETED" ? "#E4E9F8" : "#F5F5F5",
+      }}
+    >
+      {course.status === "COMPLETED" ? (
+        <div
+          style={{
+            paddingLeft: "1px",
+            paddingRight: "3px",
+          }}
+        >
+          <div
+            data-tooltip-id="check-tooltip"
+            data-tooltip-content="Credit Confirmed by Yale"
+            data-tooltip-place="top"
+          >
+            ✓
+          </div>
+          <Tooltip id="check-tooltip" border="1px solid black" style={{ 
+            color: "black",
+            backgroundColor: "white",
+            borderRadius: "15px"}}/>
+        </div>
+      ) : (
+        ""
+      )}
+      <CourseSeasonIcon seasons={course.seasons} />
+      {course.code}
+      {course.distributions.length > 0 ? (<DistributionCircle distributions={course.distributions}/>) : ("")}
+    </div>
+  );
+}
+
+export default CourseBoxSmall;

frontend/src/commons/components/courses/DistributionBoxLarge.tsx

@@ -0,0 +1,26 @@
+
+import React from "react";
+import chroma from "chroma-js"
+import { skillsAreasColors } from '../../utilities/constants';
+
+type Props = {
+  readonly text: string;
+};
+
+export default function DistributionBox({ text }: Props) {
+  const textColor = skillsAreasColors[text];
+  return (
+    <div
+      style={{
+        borderRadius: "5px",
+        color: textColor,
+        backgroundColor: chroma(textColor).alpha(0.16).css(),
+        width: "max-content",
+        padding: "2px 4px",
+        fontWeight: "bold"
+      }}
+    >
+      {text}
+    </div>
+  );
+}

frontend/src/commons/components/courses/DistributionBoxSmall.module.css

@@ -0,0 +1,15 @@
+.overviewDistBox {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: max-content;
+    height: 20px;
+    margin-bottom: 4px;
+    padding: 0 6px; 
+
+    font-size: 12px;
+    font-weight: 550;
+
+    border-radius: 8px; 
+}

frontend/src/commons/components/courses/DistributionBoxSmall.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import chroma from "chroma-js"
+import styles from "./DistributionBoxSmall.module.css";
+import { skillsAreasColors } from '../../utilities/constants';
+
+type Props = {
+  readonly text: string;
+};
+
+export default function DistributionBox({ text }: Props) {
+  const textColor = skillsAreasColors[text];
+  return (
+    <div className={styles.overviewDistBox} style={{ 
+        backgroundColor: chroma(textColor).alpha(0.16).css(), 
+        color: textColor,
+        fontWeight: "bold"
+     }}>{text}</div>
+  );
+}
+

frontend/src/commons/components/courses/DistributionsCircle.tsx

@@ -0,0 +1,60 @@
+
+import { List } from "lodash";
+import React, { useMemo } from "react";
+import * as d3 from "d3";
+import { skillsAreasColors } from "../../utilities/constants";
+
+type Props = {
+  readonly distributions: List<string>;
+};
+
+function getData({ distributions }: Props) {
+  const pieData = [];
+  for (let i = 0; i < distributions.length; i++) {
+    pieData.push({ name: distributions[i], value: 1 });
+  }
+  return pieData;
+}
+
+type DataItem = {
+  name: string;
+  value: number;
+};
+
+const width = 12;
+const height = 12;
+
+export default function DistributionCircle({ distributions }: Props) {
+  const radius = Math.min(width, height) / 2;
+  const data = getData({ distributions });
+
+  const pie = useMemo(() => {
+    const pieGenerator = d3.pie<any, DataItem>().value((d) => d.value);
+    return pieGenerator(data);
+  }, [data]);
+
+  const arcs = useMemo(() => {
+    const arcPathGenerator = d3.arc();
+    return pie.map(
+      (p) =>
+        arcPathGenerator({
+          innerRadius: 0,
+          outerRadius: radius,
+          startAngle: p.startAngle,
+          endAngle: p.endAngle,
+        }) as any
+    );
+  }, [radius, pie]);
+
+  return(
+    <div style={{position: "relative", float: "right"}}>
+      <svg width={width} height={height} style={{ display: "inline-block" }}>
+        <g transform={`translate(${width / 2}, ${height / 2})`}>
+          {arcs.map((arc, i) => {
+            return (<path key={i} d={arc} fill={skillsAreasColors[distributions[i]]}/>);
+          })}
+        </g>
+      </svg>
+    </div>
+  );
+}

frontend/src/commons/mock/MockCourses.ts

@@ -0,0 +1,28 @@
+
+import {Course, StudentCourse } from "./../types/TypeCourse";
+
+const CPSC201: Course = { studentCourse: true, code: "CPSC 201", title: "Title CPSC201", seasons: ["FALL", "SPRING"],  evaluation: { rating: 4.1, workload: 4.2, professor: 5}, distribution: ["QR"] };
+const CPSC202: Course = { studentCourse: false, code: "CPSC 202", title: "Title CPSC202", seasons: ["FALL", "SPRING"], evaluation: { rating: 4.1, workload: 4.2, professor: 5}, distribution: ["QR"] };
+const MATH244: Course = { studentCourse: false, code: "MATH 244", title: "Title MATH244", seasons: ["FALL", "SPRING"], evaluation: { rating: 4.1, workload: 4.2, professor: 5}, distribution: ["QR"] };
+const CPSC223: Course = { studentCourse: true, code: "CPSC 223", title: "Title CPSC223", seasons: ["FALL", "SPRING"], evaluation: { rating: 4.1, workload: 4.2, professor: 5}, distribution: ["QR"] };
+const CPSC323: Course = { studentCourse: true, code: "CPSC 323", title: "Title CPSC323", seasons: ["FALL", "SPRING"], evaluation: { rating: 4.1, workload: 4.2, professor: 5}, distribution: ["QR"] };
+const CPSC365: Course = { studentCourse: false, code: "CPSC 365", title: "Title CPSC365", seasons: ["FALL", "SPRING"], evaluation: { rating: 4.1, workload: 4.2, professor: 5}, distribution: ["QR"] };
+
+const Student201: StudentCourse = { course: CPSC201, enrollmentStatus: "COMPLETED", season: "FALL", year: "2022-2023", letterGrade: "A-" };
+const Student223: StudentCourse = { course: CPSC201, enrollmentStatus: "COMPLETED", season: "SPRING", year: "2022-2023", letterGrade: "A" };
+const Student323: StudentCourse = { course: CPSC201, enrollmentStatus: "ENROLLED", season: "FALL", year: "2022-2023", letterGrade: "" };
+
+export const MockCourses = [
+    CPSC201,
+    CPSC202,
+    MATH244,
+    CPSC223,
+    CPSC323,
+    CPSC365,
+];
+
+export const MockStudentCourses = [
+    Student201,
+    Student223,
+    Student323,
+];