Skip to content

Commit

Permalink
Merge pull request #45 from YaleComputerSociety/clickable-classes
Browse files Browse the repository at this point in the history
Clickable classes
  • Loading branch information
winbow13 authored Apr 26, 2024
2 parents faf4148 + c149e88 commit a8c1226
Show file tree
Hide file tree
Showing 19 changed files with 352 additions and 126 deletions.
47 changes: 47 additions & 0 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
"@headlessui/react": "^1.7.19",
"@mui/icons-material": "^5.15.15",
"@mui/material": "^5.15.11",
"@testing-library/jest-dom": "^5.17.0",
Expand Down
43 changes: 10 additions & 33 deletions frontend/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,45 +1,22 @@

import { useState } from "react";
import { Navigate, Route, Routes } from 'react-router-dom';

import Login from "./pages/Login";
import Graduation from './pages/Graduation';
import Courses from './pages/Courses';
import Majors from './pages/Majors';
import About from "./pages/OtherPages/About/About";
import FAQ from "./pages/OtherPages/FAQ/FAQ";
import Globals from './Globals';
import Router from './Router';
import CourseModal from './commons/components/courses/CourseModal';

import { CGSC, CPSC, ECON, HIST } from "./commons/mock/MockProgram";

function App() {

const [auth] = useState(true);

const programs = [CGSC, CPSC, ECON, HIST];
const strPrograms = JSON.stringify(programs);
localStorage.setItem("programList", strPrograms);

return (
<div>
<Routes>
{/* <Route path="/" element={auth ? <Navigate to="/graduation"/> : <Navigate to="/login"/>}/>
<Route path="/login" element={auth ? <Navigate to="/graduation"/> : <Login/>}/>
<Route path="/graduation" element={auth ? <Graduation/> : <Navigate to="/login"/>}/>
<Route path="/courses" element={auth ? <Courses/> : <Navigate to="/login"/>}/>
<Route path="/majors" element={auth ? <Majors/> : <Navigate to="/login"/>}/> */}
<Route path="/" element={<Navigate to="/login"/>}/>
<Route path="/login" element={<Login />}/>

<Route path="/graduation" element={<Graduation/>}/>
<Route path="/courses" element={<Courses/>}/>
<Route path="/majors" element={<Majors/>}/>

<Route path="/about" element={<About/>}/>
<Route path="/faq" element={<FAQ/>}/>
</Routes>
</div>
<div>
<Globals>
<Router />
<CourseModal />
</Globals>
</div>
);
}

export default App;
export default App;
11 changes: 11 additions & 0 deletions frontend/src/Globals.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { ModalProvider } from "./hooks/modalContext";

function Globals({ children }: { readonly children: React.ReactNode }) {
return (
<ModalProvider>
<div>{children}</div>
</ModalProvider>
);
}

export default Globals;
57 changes: 26 additions & 31 deletions frontend/src/Router.tsx
Original file line number Diff line number Diff line change
@@ -1,36 +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";
import FAQ from "./pages/OtherPages/FAQ/FAQ";
import About from "./pages/OtherPages/About/About";
import React, { useState } from 'react';
import { Navigate, Route, Routes } from 'react-router-dom';

const router = createBrowserRouter([
{
path: "/graduation",
element: <Graduation />,
},
{
path: "/courses",
element: <Courses />,
},
{
path: "/majors",
element: <Majors />,
},
{
path: "/faq",
element: <FAQ />,
},
{
path: "/about",
element: <About />,
},
]);
import Login from "./pages/Login";
import Graduation from './pages/Graduation';
import Courses from './pages/Courses';
import Majors from './pages/Majors';
import About from './pages/OtherPages/About/About';
import FAQ from './pages/OtherPages/FAQ/FAQ';

function Router() {
return <RouterProvider router={router} />;
const [auth] = useState(true);

return (
<div>
<Routes>
<Route path="/" element={auth ? <Navigate to="/graduation"/> : <Navigate to="/login"/>}/>
<Route path="/login" element={auth ? <Navigate to="/graduation"/> : <Login/>}/>

<Route path="/graduation" element={auth ? <Graduation/> : <Navigate to="/login"/>}/>
<Route path="/courses" element={auth ? <Courses/> : <Navigate to="/login"/>}/>
<Route path="/majors" element={auth ? <Majors/> : <Navigate to="/login"/>}/>

<Route path="/about" element={<About/>}/>
<Route path="/FAQ" element={<FAQ/>}/>
</Routes>
</div>
);
}

export default Router;
export default Router;
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,12 @@

font-size: 14px;
font-weight: bold;

background-color: #F5F5F5;
transition: filter 0.4s ease;
}

.CourseBox:hover {
cursor: pointer;
filter: brightness(95%);
}
122 changes: 85 additions & 37 deletions frontend/src/commons/components/courses/CourseBoxSmall.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,27 @@
import React from "react";
import React, { useContext } 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 {
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";
import ReactDOMServer from 'react-dom/server';

import { useModal } from "../../../hooks/modalContext";

function CourseSeasonText(season: string ) {
return (
"Course Offered In " + season.charAt(0) + season.slice(1).toLowerCase()
);
}

function CourseSeasonIcon(props: { seasons: Array<Season> }) {
const seasonImageMap = {
Expand All @@ -22,68 +35,103 @@ function CourseSeasonIcon(props: { seasons: Array<Season> }) {
{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
data-tooltip-id="season-tooltip"
data-tooltip-content={CourseSeasonText(szn)}
data-tooltip-place="top"
>
<img
style={{ width: "15px", height: "15px" }}
src={seasonImageMap[szn]}
alt={szn}
/>
</div>
<Tooltip
id="season-tooltip"
style={{ backgroundColor: "#444444", borderRadius: "3px" }}
/>
</div>
)}
</div>
))}
</div>
);
}

function DistCircDiv(props: { dist: Array<Distribution> }){
return(
function DistCircDiv(props: { dist: Array<Distribution> }) {
return (
<div style={{ marginLeft: "2px", marginTop: "2px" }}>
<DistributionCircle distributions={props.dist}/>
<DistributionCircle distributions={props.dist} />
</div>
);
}

function CheckMark(props: { studentCourse: StudentCourse }){
return(
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 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}/>
function CourseBoxSmall(props: {
studentCourse?: StudentCourse;
course?: Course;
}) {
const { setModalOpen } = useModal();

function openModal() {
if (props.course && props.studentCourse == null) {
setModalOpen(props.course);
} else if (props.course == null && props.studentCourse) {
setModalOpen(props.studentCourse.course);
}
}

if (props.course && props.studentCourse == null) {
return (
<div className={styles.CourseBox} onClick={openModal}>
<CourseSeasonIcon seasons={props.course.seasons} />
{props.course.code}
{props.course.distribution.length > 0 ? (<DistCircDiv dist={props.course.distribution}/>) : ("")}
{props.course.distribution.length > 0 ? (
<DistCircDiv dist={props.course.distribution} />
) : (
""
)}
</div>
);
}
else
if(props.course == null && props.studentCourse)
{
} else if (props.course == null && props.studentCourse) {
return (
<div className={styles.CourseBox} style={{ backgroundColor: "#F5F5F5" }}>
<CheckMark studentCourse={props.studentCourse}/>
<div className={styles.CourseBox} onClick={openModal}>
<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}/>) : ("")}
{props.studentCourse.course.distribution.length > 0 ? (
<DistCircDiv dist={props.studentCourse.course.distribution} />
) : (
""
)}
</div>
);
}
return <div/>
return <div />;
}

export default CourseBoxSmall;
Loading

0 comments on commit a8c1226

Please sign in to comment.