Merge pull request #155 from maingockien01/Update-Frontend-Structure

Fix FE file structure

apps/frontend/src/App.tsx

@@ -1,20 +1,14 @@
 import React, {useEffect, useState} from 'react';
 import './App.css';
 import MainScreen from './Screens/MainScreen';
-import Calendar from './Screens/Calendar/Calendar';
+import Calendar from './Screens/Calendar';
 import AddDropCourses from './Screens/AddDropCourses';
-import Roadmap from './Screens/Roadmap/Roadmap';
-import PersonalizedRoadmap
-  from './Screens/PersonalizedRoadmap/PersonalizedRoadmap';
-import {
-  Routes,
-  Route,
-  useNavigate,
-  Navigate,
-} from 'react-router-dom';
+import Roadmap from './Screens/Roadmap';
+import PersonalizedRoadmap from './Screens/PersonalizedRoadmap';
+import {Routes, Route, useNavigate, Navigate} from 'react-router-dom';
 import LookUpScreen from './Screens/LookUpScreen';
 import CoursesScreen from './Screens/CoursesScreen';
-import Navbar from './Components/Navbar/Navbar';
+import Navbar from './Components/Navbar';
 import LoginScreen from './Screens/LoginScreen';
 import SignupScreen from './Screens/SignupScreen';
 import DetailScreen from './Screens/DetailScreen';
@@ -26,7 +20,7 @@ const App = () => {
   const navigate = useNavigate();
 
   const [isLoggedIn, setLoggedIn] = useState(
-      getTokenFromCookie() !== undefined,
+    getTokenFromCookie() !== undefined,
   );
 
   useEffect(() => {

apps/frontend/src/Components/CourseDetail/CourseDetail.tsx → apps/frontend/src/Components/CourseDetail.tsx

@@ -1,6 +1,6 @@
 import {CourseDTO} from '@team8/types/dtos/course/course.dto';
 import {Stack, Typography} from '@mui/material';
-import CourseChip from '../CourseChip';
+import CourseChip from './CourseChip';
 import React from 'react';
 
 export interface CourseDetailProps {
@@ -24,16 +24,16 @@ const CourseDetail = (props: CourseDetailProps) => {
       <Stack direction="row" textAlign="center" spacing={2}>
         <Typography variant="h6">
           Prerequisites:{' '}
-          {course.prerequisites.length === 0 ?
-            'None' :
-            course.prerequisites.map((prerequisite: CourseDTO) => (
-              <CourseChip
-                key={prerequisite.cid}
-                course={prerequisite}
-                onChipClick={props.onCourseClick}
-                onChipDelete={props.onCourseDelete}
-              />
-            ))}
+          {course.prerequisites.length === 0
+            ? 'None'
+            : course.prerequisites.map((prerequisite: CourseDTO) => (
+                <CourseChip
+                  key={prerequisite.cid}
+                  course={prerequisite}
+                  onChipClick={props.onCourseClick}
+                  onChipDelete={props.onCourseDelete}
+                />
+              ))}
         </Typography>
       </Stack>
     </Stack>

apps/frontend/src/Components/CourseTree.tsx

@@ -0,0 +1,145 @@
+import React, {useState} from 'react';
+import {CourseDTO} from '@team8/types/dtos/course/course.dto';
+import {Chip, Fade, Grid} from '@mui/material';
+import '../css/CourseTree.css';
+import Tooltip from '@mui/material/Tooltip';
+
+export interface CourseTreeProps {
+  courses: CourseDTO[];
+  onRemoveCourse?: (course: CourseDTO) => void | undefined;
+}
+
+interface CourseChipProps {
+  course: CourseDTO;
+  isSelected: boolean;
+  isPrerequisite: boolean;
+  label: string;
+}
+
+const courseTree = ({courses, onRemoveCourse = undefined}: CourseTreeProps) => {
+  const [courseChips, setCourseChips] = useState<CourseChipProps[]>(
+    courses.map((course: CourseDTO) => {
+      return {
+        course,
+        isSelected: false,
+        isPrerequisite: false,
+        label: `${course.department.abbreviation} ${course.courseNumber}`,
+      };
+    }),
+  );
+  const toggleHightlightCourses = (
+    selected: CourseDTO,
+    prerequisite: CourseDTO[],
+    hightlight = true,
+  ) => {
+    const cids = prerequisite.map((course) => course.cid);
+    const newCourseChips = courseChips
+      .map((courseChip) => {
+        if (cids.includes(courseChip.course.cid)) {
+          courseChip.isPrerequisite = hightlight;
+        }
+        return courseChip;
+      })
+      .map((courseChip) => {
+        if (courseChip.course.cid === selected.cid) {
+          courseChip.isSelected = hightlight;
+        }
+        return courseChip;
+      });
+    setCourseChips(newCourseChips);
+  };
+
+  return (
+    <div>
+      <h3>Recommended courses</h3>
+      <Grid
+        container
+        spacing={2}
+        className="course_tree--grid_container"
+        rowSpacing={5}
+      >
+        {courseChips.map(
+          ({course, isSelected, isPrerequisite, label}: CourseChipProps) => (
+            <Grid item xs="auto">
+              <Tooltip
+                TransitionComponent={Fade}
+                TransitionProps={{timeout: 600}}
+                title={course.courseName}
+                placement="bottom-start"
+              >
+                {onRemoveCourse ? (
+                  <Chip
+                    className="course_tree--chip"
+                    label={label}
+                    color={
+                      isSelected
+                        ? 'primary'
+                        : isPrerequisite
+                        ? 'secondary'
+                        : 'default'
+                    }
+                    key={course.cid}
+                    variant="filled"
+                    onMouseOver={() =>
+                      // eslint-disable-next-line max-len
+                      toggleHightlightCourses(
+                        course,
+                        course.prerequisites,
+                        true,
+                      )
+                    }
+                    onMouseOut={() =>
+                      // eslint-disable-next-line max-len
+                      toggleHightlightCourses(
+                        course,
+                        course.prerequisites,
+                        false,
+                      )
+                    }
+                    onDelete={() => {
+                      if (onRemoveCourse) {
+                        onRemoveCourse(course);
+                      }
+                    }}
+                  />
+                ) : (
+                  <Chip
+                    className="course_tree--chip"
+                    label={label}
+                    color={
+                      isSelected
+                        ? 'primary'
+                        : isPrerequisite
+                        ? 'secondary'
+                        : 'default'
+                    }
+                    key={course.cid}
+                    variant="filled"
+                    onMouseOver={() =>
+                      // eslint-disable-next-line max-len
+                      toggleHightlightCourses(
+                        course,
+                        course.prerequisites,
+                        true,
+                      )
+                    }
+                    onMouseOut={() =>
+                      // eslint-disable-next-line max-len
+                      toggleHightlightCourses(
+                        course,
+                        course.prerequisites,
+                        false,
+                      )
+                    }
+                  />
+                )}
+              </Tooltip>
+            </Grid>
+          ),
+        )}
+      </Grid>
+    </div>
+  );
+};
+
+export default courseTree;

apps/frontend/src/Components/Navbar/Navbar.tsx → apps/frontend/src/Components/Navbar.tsx

@@ -12,19 +12,17 @@ import MenuItem from '@mui/material/MenuItem';
 import Stack from '@mui/material/Stack';
 import Divider from '@mui/material/Divider';
 import AutoStoriesIcon from '@mui/icons-material/AutoStories';
-import {getTokenFromCookie} from '../../Utils/CookieFunctions';
+import {getTokenFromCookie} from '../Utils/CookieFunctions';
 import {useNavigate} from 'react-router-dom';
 import axios from 'axios';
-import NavbarLinks from '../NavbarLinks/NavbarLinks';
+import NavbarLinks from './NavbarLinks';
 
 const settings = ['Profile', 'Logout'];
 
-
 /**
  * Represents a styled button component with custom color and hover effects.
  */
 
-
 /**
  * Represents the function signature for the handleLogout function.
  */
@@ -34,7 +32,7 @@ interface HandleLogoutFunction {
 
 const Navbar = (props: {handleLogout: HandleLogoutFunction}) => {
   const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(
-      null,
+    null,
   );
   const navigate = useNavigate();