Skip to content

Commit

Permalink
Merged
Browse files Browse the repository at this point in the history
  • Loading branch information
@khankamolk
khankamolk committed Dec 7, 2024
2 parents 520cc18 + 04f4375 commit 2aa2a59
Show file tree
Hide file tree
Showing 19 changed files with 620 additions and 568 deletions.
346 changes: 168 additions & 178 deletions package-lock.json
View file

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"@apollo/client": "^3.11.10",
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@mui/icons-material": "^6.1.10",
"@mui/material": "^6.1.4",
"@mui/styled-engine-sc": "^6.1.4",
"@radix-ui/react-icons": "^1.3.0",
Expand All @@ -21,6 +22,7 @@
"iconoir": "^7.10.0",
"iconoir-react": "^7.9.0",
"mongodb": "^6.11.0",
"mui": "^0.0.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-redux": "^9.1.2",
Expand Down
31 changes: 31 additions & 0 deletions src/App.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}

button:hover {
cursor: pointer;
}
3 changes: 1 addition & 2 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import SetUpPage from "./components/SetUpPage"
import AddDegree from "./components/AddDegree/AddDegree";
import SemesterHome from './app/Onboarding/SemesterHome/SemesterHome';
import Header from "./components/Header/header";
import SemesterHome from './app/SemesterHome/SemesterHome';

function App() {
return (
Expand Down
28 changes: 0 additions & 28 deletions src/app/Onboarding/SemesterHome/SemesterHome.css
View file

This file was deleted.

74 changes: 0 additions & 74 deletions src/app/Onboarding/SemesterHome/SemesterHome.tsx
View file

This file was deleted.

75 changes: 46 additions & 29 deletions src/app/SemesterHome/SemesterHome.css
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,60 @@
.semester-home-body {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
padding-top: var(--S, 16px);
background: var(--White, #FFF);
position: relative;
overflow-x: auto;
overflow-y: auto;
box-sizing: border-box;
.body {
display: flex !important;
justify-content: start !important;
}

.content {
display: flex;
flex: 1;
flex-direction: column;
padding: 16px;
overflow: hidden;
/* padding: 16px; */
overflow: auto;
box-sizing: border-box;
}

.semester-layout {
direction: row;
margin: 32px;
}

.semester-home {
display: flex;
flex-direction: row; /* Stack items vertically */
justify-content: flex-start; /* Align content to the top */
align-items: flex-start; /* Align content to the left */
/* width: auto; */
/* min-width: 240px; */
height: 100vh; /* Make the panel span the full height of the viewport */
position: fixed; /* Fix the panel to the left side of the page */
top: 0;
left: 0;
/* padding: 16px; */
z-index: 1000; /* Ensure it stays above other elements */
}

.semester-blocks {
overflow-x: auto; /* Enable horizontal scrolling */
gap: 12px;
width: 100vw;
height: calc(100vh - 80px);
box-sizing: border-box;
position: relative;
top: 50px;


}

.semester-title {
color: var(--Primary-Text, #000);
/* Web UI/Heading/Heading Large */
font-family: "Inter Variable";
font-size: 28px;
font-style: normal;
font-weight: 580;
line-height: 36px; /* 128.571% */
letter-spacing: -0.28px;
text-align: left;
margin-top: 32px;
margin-left: 32px;
position: sticky;
}
position: fixed; /* Fix the position */
top: 32px; /* Align it to the top */
left: 314px; /* Offset to account for the fixed side panel */
padding-left: 32px;
z-index: 100; /* Ensure it appears above other elements */
/* width: calc(100% - 240px); Take up the remaining width after the side panel */
color: var(--Primary-Text, #000); /* Ensure consistent text styling */
background-color: white;
width: 100%;
font-size: 28px;
font-style: normal;
font-weight: 580;
line-height: 36px; /* 128.571% */
letter-spacing: -0.28px;
text-align: left;
}
80 changes: 51 additions & 29 deletions src/app/SemesterHome/SemesterHome.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,34 @@
import React from 'react';
import { useLocation } from 'react-router-dom';
import SemesterBlock from "../../components/SemesterBlock"
import { Flex } from '@radix-ui/themes';
import SidePanel from "../../components/SidePanel/SidePanel"
import "./SemesterHome.css"

type DegreeOption = {
label: string;
value: string;
};

function SemesterHome() {
const location = useLocation();
const { startYear, gradYear, summerCheck } = location.state || {};
const state = location.state as {
startYear: string;
gradYear: string;
summerCheck: boolean;
selectedDegreeList: DegreeOption[];
selectedMinorList: DegreeOption[];
};
const { startYear, gradYear, summerCheck, selectedDegreeList, selectedMinorList } = state;
const selectedDegreeStrings: string[] = selectedDegreeList.map((degree) => degree.value);
const selectedMinorStrings: string[] = selectedMinorList.map((minor) => minor.value);


// Pretend this is the queried data
// TODO: Request for minors to be added to backend
const user = {
"name": "Yuna Kim",
"majors": ["Computer Science BA", "Data Science"],
"minors": []
"name": "Khankamol Chor Kongrukgreatiyos",
"majors": selectedDegreeStrings,
"minors": selectedMinorStrings
}

const numStartYear = parseInt(startYear, 10);
Expand All @@ -24,36 +39,43 @@ function SemesterHome() {
(_, i) => numStartYear + i
);

const [semesterTotals, setSemesterTotals] = React.useState<Record<string, number>>({});

const updateTotalUnits = (semesterKey: string, newTotal: number) => {
setSemesterTotals((prev) => ({ ...prev, [semesterKey]: newTotal }));
};

const totalUnits = Object.values(semesterTotals).reduce((sum, units) => sum + units, 0);

return (
<>
<Flex direction="row" height="100vh">
<Flex direction="row" height="100vh" className='semester-home'>
{/* Side panel */}
<SidePanel
name={user.name}
majors={user.majors}
minors={user.minors}
totalUnits={140}
transferUnits={40}
pnpTotal={15}
/>
<SidePanel
name={user.name}
majors={user.majors}
minors={user.minors}
totalUnits={totalUnits}
transferUnits={40}
pnpTotal={15}
/>

{/* Page body */}
<Flex direction="column">
<h3 className='semester-title'>Semesters</h3>
<Flex className='semester-layout'>
<SemesterBlock selectedSemester={"Miscellaneous"} selectedYear={""}></SemesterBlock>
{years.map((year) => (
<Flex key={year} className="year-element" direction="row" gap="12px">
{/* Replace with the element you want to render */}
<SemesterBlock selectedSemester={"Fall"} selectedYear={year}></SemesterBlock>
<SemesterBlock selectedSemester={"Spring"} selectedYear={year}></SemesterBlock>
{summerCheck &&
<SemesterBlock selectedSemester={"Summer"} selectedYear={year}></SemesterBlock>
}
</Flex>
))}
<Flex direction="column" gap="32px" className='semester-blocks'>
<h3 className='semester-title'>Semesters</h3>
<Flex direction="row" gap="12px" className='semester-layout'>
<SemesterBlock selectedSemester={"Miscellaneous"} selectedYear={""} onTotalUnitsChange={(newTotal) => updateTotalUnits("Miscellaneous", newTotal)}></SemesterBlock>
{years.map((year) => (
<Flex key={year} className="year-element" direction="row" gap="12px">
<SemesterBlock selectedSemester={"Fall"} selectedYear={year} onTotalUnitsChange={(newTotal) => updateTotalUnits(`Fall-${year}`, newTotal)}></SemesterBlock>
<SemesterBlock selectedSemester={"Spring"} selectedYear={year} onTotalUnitsChange={(newTotal) => updateTotalUnits(`Spring-${year}`, newTotal)}></SemesterBlock>
{summerCheck &&
<SemesterBlock selectedSemester={"Summer"} selectedYear={year} onTotalUnitsChange={(newTotal) => updateTotalUnits(`Summer-${year}`, newTotal)}></SemesterBlock>
}
</Flex>
))}
</Flex>
</Flex>
</Flex>
</Flex>
</>
);
Expand Down
8 changes: 5 additions & 3 deletions src/components/AddDegree/AddDegree.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,14 @@ export default function AddDegree({ isMajor }: AddDegreeProps) {
const handleAddDegree = () => {
if (selectedDegree && !selectedDegreeList.some((degree) => degree.value === selectedDegree.value)) {
setSelectedDegreeList([...selectedDegreeList, selectedDegree]);
setSelectedDegree(null);
}
};

const handleAddMinor = () => {
if (selectedDegree && !selectedDegreeList.some((degree) => degree.value === selectedDegree.value)) {
if (selectedDegree && !selectedMinorList.some((degree) => degree.value === selectedDegree.value)) {
setSelectedMinorList([...selectedMinorList, selectedDegree]);
setSelectedDegree(null);
}
};

Expand Down Expand Up @@ -73,7 +75,7 @@ export default function AddDegree({ isMajor }: AddDegreeProps) {
isClearable={true}
placeholder={`Search for a ${optionType.toLowerCase()}...`}
value={selectedDegree}
onChange={(option) => setSelectedDegree(option as DegreeOption)}
onChange={(option) => setSelectedDegree(option as DegreeOption | null)}
/>
)

Expand All @@ -97,7 +99,7 @@ export default function AddDegree({ isMajor }: AddDegreeProps) {
<Separator size="4"/>
<Flex direction="column" align="start" gap="16px" width="100%">
<h2>Selected {optionType}s</h2>
{selectedDegreeList.length === 0 ? (
{(selectedDegreeList.length === 0 && isMajor) || (selectedMinorList.length === 0 && !isMajor) ? (
<p className="secondary-text">None Selected</p>
) : (
<div className="selected-degree-list" id={`${optionType.toLowerCase()}s-list`}>
Expand Down
Loading

0 comments on commit 2aa2a59

Please sign in to comment.