Merge pull request #34 from YaleComputerSociety/dev

Dev

frontend/package.json

@@ -3,16 +3,30 @@
   "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.2",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-icons": "^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 +53,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.module.css

@@ -0,0 +1,44 @@
+
+.row {
+    display: flex;
+    flex-direction: row;
+  }
+
+.NavBar {
+  position: fixed;
+
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 75px;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  background-color: #ffffff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+.activePage {
+  color: #598ff4;
+  font-size: 20px; 
+  text-decoration: none;
+  margin-right: 10px;
+  margin-left: 10px;
+  transition: color 0.3s;
+  background-color: white;
+  border: none;
+}
+
+.dormantPage {
+  color: #000000;
+  font-size: 20px; /* Increase font size */
+  text-decoration: none;
+  margin-right: 10px;
+  margin-left: 10px;
+  transition: color 0.3s;
+  background-color: white;
+  border: none;
+}

frontend/src/App.tsx

@@ -1,25 +1,22 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+
+import React from "react";
+// import styles from "./App.module.css";
+
+import { Route, Routes } from 'react-router-dom';
+
+import Courses from './pages/Courses';
+import Graduation from './pages/Graduation';
+import Majors from './pages/Majors';
 
 function App() {
   return (
-    <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>
-    </div>
+  <div>
+      <Routes>
+        <Route path="/"              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,28 @@
+
+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: <Graduation />,
+  },
+  {
+    path: "/courses",
+    element: <Courses />,
+  },
+  {
+    path: "/majors",
+    element: <Majors />,
+  },
+
+]);
+
+function Router() {
+  return <RouterProvider router={router} />;
+}
+
+export default Router;

frontend/src/commons/components/InfoButton.tsx

@@ -0,0 +1,22 @@
+
+import React from "react";
+import { GoInfo } from "react-icons/go";
+import "react-tooltip/dist/react-tooltip.css";
+import { Tooltip } from "react-tooltip";
+
+export default function InfoButton(props: { text: string, size?: number}) {
+    return (
+        <div style={{ display: "flex", marginLeft: "3px", marginTop: "0px"}}>
+        <div
+            data-tooltip-id="info-tooltip"
+            data-tooltip-content={props.text}
+            data-tooltip-place="top"
+          >
+            <GoInfo style={{ fontSize: props.size ? props.size : 16 }}/>
+          </div>
+          <Tooltip id="info-tooltip" style={{ 
+            backgroundColor: "#444444",
+            borderRadius: "3px"}}/>
+        </div>
+      );
+  }

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,89 @@
+import React from "react";
+import styles from "./CourseBoxSmall.module.css";
+
+import "react-tooltip/dist/react-tooltip.css";
+import { Tooltip } from "react-tooltip";
+import { Season, StudentCourse, Course, Distribution } from "../../types/TypeCourse";
+
+import img_fall from "./../../images/fall.png";
+import img_spring from "./../../images/spring.png";
+
+import DistributionCircle from "./DistributionsCircle";
+
+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 DistCircDiv(props: { dist: Array<Distribution> }){
+  return(
+    <div style={{ marginLeft: "2px", marginTop: "2px" }}>
+      <DistributionCircle distributions={props.dist}/>
+    </div>
+  );
+}
+
+function CheckMark(props: { studentCourse: StudentCourse }){
+  return(
+    <div>
+      {props.studentCourse.enrollmentStatus === "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" style={{ backgroundColor: "#444444", borderRadius: "3px"}}/>
+          </div>
+        ) : (
+          ""
+        )}
+    </div>
+  );
+}
+
+function CourseBoxSmall(props: { studentCourse?: StudentCourse, course?: Course } ) {
+
+  if(props.course && props.studentCourse == null) 
+  {
+    return(
+      <div className={styles.CourseBox} style={{ backgroundColor: "#F5F5F5" }}>
+        <CourseSeasonIcon seasons={props.course.seasons}/>
+        {props.course.code}
+        {props.course.distribution.length > 0 ? (<DistCircDiv dist={props.course.distribution}/>) : ("")}
+      </div>
+    );
+  }
+  else 
+  if(props.course == null && props.studentCourse) 
+  {
+    return (
+      <div className={styles.CourseBox} style={{ backgroundColor: "#F5F5F5" }}>
+        <CheckMark studentCourse={props.studentCourse}/>
+        <CourseSeasonIcon seasons={[props.studentCourse.season]} />
+        {props.studentCourse.course.code}
+        {props.studentCourse.course.distribution.length > 0 ? (<DistCircDiv dist={props.studentCourse.course.distribution}/>) : ("")}
+      </div>
+    );
+  }
+  return <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>
+  );
+}
+