Skip to content

Commit

Permalink
fully implemented front end NUPath filtering and course search modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@dkd2101
dkd2101 committed Feb 1, 2024
1 parent b811659 commit 76397f3
Show file tree
Hide file tree
Showing 7 changed files with 375 additions and 89 deletions.
10 changes: 5 additions & 5 deletions packages/common/src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
* breadth requirements.
*/
export enum NUPathEnum {
ND = "Natural and Designed World",
EI = "Creative Expression/Innovation",
ND = "Natural/Designed World",
EI = "Creative Express/Innov",
IC = "Interpreting Culture",
FQ = "Formal and Quantitative Reasoning",
SI = "Societies and Institutions",
FQ = "Formal/Quant Reasoning",
SI = "Societies/Institutions",
AD = "Analyzing/Using Data",
DD = "Difference and Diversity",
DD = "Difference/Diversity",
ER = "Ethical Reasoning",
WF = "1st Yr Writing",
WD = "Adv Writ Dscpl",
Expand Down
192 changes: 155 additions & 37 deletions packages/frontend-v2/components/AddCourseModal/AddCourseModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ import {
Stack,
Divider,
} from "@chakra-ui/react";
import { ScheduleCourse2 } from "@graduate/common";
import { useState } from "react";
import { NUPathEnum, ScheduleCourse2 } from "@graduate/common";
import { useEffect, useState } from "react";
import { useSearchCourses } from "../../hooks";
import {
isEqualCourses,
Expand Down Expand Up @@ -58,6 +58,11 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
ScheduleCourse2<null>[]
>([]);
const [isLoadingSelectCourse, setIsLoadingSelectCourse] = useState(false);
const [filteredNuPaths, setFilteringNUPaths] = useState<NUPathEnum[]>([]);

useEffect(() => {
setSearchQuery((searchQuery) => searchQuery + " ");
}, [filteredNuPaths]);

const {
courses,
Expand Down Expand Up @@ -106,6 +111,7 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
};

const addClassesOnClick = async () => {
console.log("removing course");
if (selectedCourses.length === 0) {
return;
}
Expand All @@ -114,6 +120,64 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
onClose();
};

// filters the given list of courses by nuPaths within the
const filterClassesByPaths = (
classes: ScheduleCourse2<null>[]
): ScheduleCourse2<null>[] => {
if (filteredNuPaths.length == 0) {
return classes;
}

const filteredCourses = classes.filter((course) => hasFilteredPath(course));

console.log("filtered courses: ");
console.log(filteredCourses);

return filteredCourses;
};

// sorts the list of courses by how many NUPaths are contained within a course
const sortByNUPath = (
classes: ScheduleCourse2<null>[]
): ScheduleCourse2<null>[] => {
const sortedCourses = classes.sort(byFilteredPath);
return sortedCourses;
};

const byFilteredPath = (
course: ScheduleCourse2<null>,
courseTwo: ScheduleCourse2<null>
): number => {
return countFilteredPaths(course) - countFilteredPaths(courseTwo);
};

const countFilteredPaths = (course: ScheduleCourse2<null>): number => {
if (course.nupaths == null) {
return -1;
}
let count = 0;
course.nupaths.forEach((element) => {
if (filteredNuPaths.includes(element)) {
count++;
}
});

return count;
};

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const hasFilteredPath = (course: ScheduleCourse2<null>): boolean => {
console.log(filteredNuPaths);
let isInFilter = false;
filteredNuPaths.forEach((curPath) => {
if (course.nupaths != null && course.nupaths.includes(curPath)) {
console.log("detected " + curPath + " in " + course.name);
isInFilter = true;
}
});
return isInFilter;
};

const onClose = () => {
setSelectedCourses([]);
setSearchQuery("");
Expand All @@ -137,21 +201,24 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
<Text>Add Courses</Text>
<HelperToolTip label="We try our best to search for courses across as many semesters as possible. If you cannot find your course, please report a bug with your plan catalog year and we will try to solve it as soon as possible." />
</Flex>
</ModalHeader>
<ModalCloseButton />
<ModalBody
margin-bottom="0"
paddingBottom="0"
marginLeft="0"
marginRight="0"
paddingLeft="0"
paddingRight="0"
>
<Divider
borderWidth="2px"
colorScheme="gray"
bg="gray"
orientation="horizontal"
flexGrow="1"
/>
</ModalHeader>
<ModalCloseButton />
<ModalBody
margin-left="0"
paddingLeft="0"
margin-top="0"
paddingTop="0"
>
<Flex direction="row" justifyContent="left" gap="xl" pl="20px">
<Flex direction="row" justifyContent="left">
{/* NUPath sidebar */}
<Flex direction="row">
<Flex
Expand All @@ -161,71 +228,107 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
w="250px"
margin-right="0"
paddingRight="0"
paddingLeft="20px"
paddingTop="0"
>
<Flex pt="50px" pb="20px">
<Text fontSize="lg" as="b">
NUPath
</Text>
</Flex>
<Flex
direction="row"
justifyContent="left"
margin-right="0"
pr="20px"
>
<Flex direction="row" justifyContent="left" pr="20px">
<Flex justifyContent="center">
<Stack spacing={1} direction="column">
<NUPathCheckBox
abbreviation="ND"
label="Natural/Designed World"
filteredPaths={filteredNuPaths}
associatedPath={NUPathEnum.ND}
setPathState={setFilteringNUPaths}
/>
<NUPathCheckBox
abbreviation="EI"
label="Creative/Expressive Inov"
filteredPaths={filteredNuPaths}
associatedPath={NUPathEnum.EI}
setPathState={setFilteringNUPaths}
/>
<NUPathCheckBox
abbreviation="IC"
label="Interpreting Culture"
filteredPaths={filteredNuPaths}
associatedPath={NUPathEnum.IC}
setPathState={setFilteringNUPaths}
/>
<NUPathCheckBox
abbreviation="FQ"
label="Formal/Quant Reasoning"
filteredPaths={filteredNuPaths}
associatedPath={NUPathEnum.FQ}
setPathState={setFilteringNUPaths}
/>
<NUPathCheckBox
abbreviation="SI"
label="Societies/Institutions"
filteredPaths={filteredNuPaths}
associatedPath={NUPathEnum.SI}
setPathState={setFilteringNUPaths}
/>
<NUPathCheckBox
abbreviation="AD"
label="Analyzing/Using Data"
filteredPaths={filteredNuPaths}
associatedPath={NUPathEnum.AD}
setPathState={setFilteringNUPaths}
/>
<NUPathCheckBox
abbreviation="DD"
label="Difference Diversity"
filteredPaths={filteredNuPaths}
associatedPath={NUPathEnum.DD}
setPathState={setFilteringNUPaths}
/>
<NUPathCheckBox
abbreviation="ER"
label="Ethical Reasoning"
filteredPaths={filteredNuPaths}
associatedPath={NUPathEnum.ER}
setPathState={setFilteringNUPaths}
/>
<NUPathCheckBox
abbreviation="WF"
label="First Year Writing"
filteredPaths={filteredNuPaths}
associatedPath={NUPathEnum.WF}
setPathState={setFilteringNUPaths}
/>
<NUPathCheckBox
abbreviation="WD"
label="Advanced Writing"
filteredPaths={filteredNuPaths}
associatedPath={NUPathEnum.WD}
setPathState={setFilteringNUPaths}
/>
<NUPathCheckBox
abbreviation="WI"
label="Writing Intensive"
filteredPaths={filteredNuPaths}
associatedPath={NUPathEnum.WI}
setPathState={setFilteringNUPaths}
/>
<NUPathCheckBox
abbreviation="EX"
label="Integration Experience"
filteredPaths={filteredNuPaths}
associatedPath={NUPathEnum.EX}
setPathState={setFilteringNUPaths}
/>
<NUPathCheckBox
abbreviation="CE"
label="Capstone Experience"
filteredPaths={filteredNuPaths}
associatedPath={NUPathEnum.CE}
setPathState={setFilteringNUPaths}
/>
</Stack>
</Flex>
Expand All @@ -240,19 +343,17 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
</Flex>
{/* End NUPath Sidebar */}

<Flex
direction="column"
rowGap="md"
flexGrow="2"
margin="0.5px"
padding="5px"
>
<SearchCoursesInput setSearchQuery={setSearchQuery} />
{/* Course Work Area */}
<Flex direction="column" rowGap="md" flexGrow="2">
<Flex px="10px" margin="0.5" pt="10px">
<SearchCoursesInput setSearchQuery={setSearchQuery} />
</Flex>
<VStack
height="200px"
overflow="scroll"
alignItems="left"
gap="2xs"
px="5px"
>
{error && (
<GraduateToolTip label="We rely on SearchNEU to search for courses, and there may be an ongoing issue on their end. We recommend refreshing the page and trying again soon. If the issue persists, help us by clicking the Bug/Feature button to report the bug">
Expand All @@ -274,18 +375,23 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
</GraduateToolTip>
)}
{courses &&
courses.map((searchResult) => (
<SearchResult
key={getCourseDisplayString(searchResult)}
searchResult={searchResult}
addSelectedCourse={addSelectedCourse}
isResultAlreadyAdded={isCourseAlreadyAdded(searchResult)}
isResultAlreadySelected={isCourseAlreadySelected(
searchResult
)}
isSelectingAnotherCourse={isLoadingSelectCourse}
/>
))}
sortByNUPath(filterClassesByPaths(courses)).map(
(searchResult) => (
<SearchResult
key={getCourseDisplayString(searchResult)}
searchResult={searchResult}
addSelectedCourse={addSelectedCourse}
isResultAlreadyAdded={isCourseAlreadyAdded(
searchResult
)}
isResultAlreadySelected={isCourseAlreadySelected(
searchResult
)}
isSelectingAnotherCourse={isLoadingSelectCourse}
filteredPaths={filteredNuPaths}
/>
)
)}
{!error && (!courses || courses.length === 0) && (
<Flex
alignItems="center"
Expand Down Expand Up @@ -313,6 +419,14 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
</Text>
</Flex>
)}

<Divider
borderWidth="2px"
bg="gray.100"
orientation="horizontal"
/>

{/* Selected Courses Area */}
<Flex alignItems="flex-start" justifyContent="left">
<Text fontSize="lg">Courses to Add:</Text>
</Flex>
Expand All @@ -322,6 +436,7 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
key={getCourseDisplayString(selectedCourse)}
selectedCourse={selectedCourse}
removeSelectedCourse={removeSelectedCourse}
filteredPaths={filteredNuPaths}
/>
))}
</VStack>
Expand All @@ -342,6 +457,9 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
variant="solid"
borderRadius="lg"
size="md"
backgroundColor="primary.blue.light.main"
borderColor="primary.blue.light.main"
colorScheme="primary.blue.light.main"
onClick={addClassesOnClick}
isLoading={isCoursesLoading}
>
Expand Down
Loading

0 comments on commit 76397f3

Please sign in to comment.