Custom color for courses

src/lib/hooks/useSavedCourses.ts

@@ -66,6 +66,7 @@ type SavedCourses = {
   clearCourses: (term: string) => void;
   setSection: (type: string, newSection: SavedSection, existingCourse: SavedCourse) => void;
   contains: (pid: string, term: string) => boolean;
+  updateCourseColor: (pid: string, term: string, color: string) => void;
   sectionIsSaved: (pid: string, term: string, sectionCode: string) => boolean;
   setSelected: (selected: boolean, existingCourse: SavedCourse) => void;
   setShowSections: (showSections: boolean, existingCourse: SavedCourse) => void;
@@ -100,6 +101,18 @@ export const useSavedCourses = (): SavedCourses => {
     [data]
   );
 
+  const updateCourseColor = useCallback(
+    (pid: string, term: string, color: string) => {
+      data.map((item) => {
+        if (item.term === term && item.pid === pid) {
+          item.color = color;
+        }
+        return data;
+      });
+      setData(data);
+    },
+    [data, setData]
+  );
   /**
    * Checks the equality of two courses
    * @param a Course
@@ -303,6 +316,7 @@ export const useSavedCourses = (): SavedCourses => {
     clearCourses,
     setSection,
     contains,
+    updateCourseColor,
     sectionIsSaved,
     setSelected,
     setShowSections,

src/pages/scheduler/components/CourseCard.tsx

@@ -1,7 +1,20 @@
 import { useCallback } from 'react';
 
-import { ChevronDownIcon, ChevronUpIcon, CloseIcon } from '@chakra-ui/icons';
-import { Box, Text, Flex, VStack, Checkbox, IconButton, BackgroundProps, Skeleton } from '@chakra-ui/react';
+import { ChevronDownIcon, ChevronUpIcon, CloseIcon, EditIcon } from '@chakra-ui/icons';
+import {
+  Box,
+  Text,
+  Flex,
+  VStack,
+  Checkbox,
+  IconButton,
+  BackgroundProps,
+  Skeleton,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+} from '@chakra-ui/react';
 import { Link } from 'react-router-dom';
 
 import { Term, useGetCourse } from 'lib/fetchers';
@@ -30,6 +43,19 @@ export type CourseCardProps = {
     selected?: boolean;
   }) => void;
   handleDelete: ({ code, pid, subject, term }: { code: string; pid: string; subject: string; term: string }) => void;
+  handleColorChange: ({
+    code,
+    pid,
+    subject,
+    term,
+    color,
+  }: {
+    code: string;
+    pid: string;
+    subject: string;
+    term: string;
+    color: string;
+  }) => void;
   handleShowSections: ({
     code,
     pid,
@@ -43,6 +69,7 @@ export type CourseCardProps = {
     term: string;
     showSections?: boolean;
   }) => void;
+  colorList: { color: string; name: string }[];
 };
 
 export function CourseCard({
@@ -57,12 +84,21 @@ export function CourseCard({
   handleSelection,
   handleShowSections,
   handleDelete,
+  handleColorChange,
+  colorList,
 }: CourseCardProps): JSX.Element {
   const mode = useDarkMode();
   const onChange = useCallback(() => {
     handleSelection({ term, code, subject, pid, selected });
   }, [code, handleSelection, pid, selected, subject, term]);
 
+  const onColorChange = useCallback(
+    (color: string) => {
+      handleColorChange({ term, code, subject, pid, color });
+    },
+    [code, handleColorChange, pid, subject, term]
+  );
+
   const onShowSections = useCallback(() => {
     handleShowSections({ term, code, subject, pid, showSections });
   }, [code, handleShowSections, pid, showSections, subject, term]);
@@ -87,18 +123,43 @@ export function CourseCard({
       <Flex direction="row">
         <Flex background={color} alignItems="center" justifyContent="center" mr="10px">
           {hasSections ? (
-            <Flex>
-              <Checkbox
-                backgroundColor="whiteAlpha.600"
-                colorScheme="whiteAlpha"
-                iconColor="black"
-                id={`checkbox-${pid}-${term}-${subject}-${code}`}
-                size="lg"
-                mx="7px"
-                isChecked={selected}
-                onChange={onChange}
-              />
-            </Flex>
+            <>
+              <Flex direction="column" gap="1" w="100%">
+                <Box pt={3} alignItems="center" justifyContent="center" ml="3px" mr="3px">
+                  <Checkbox
+                    backgroundColor="whiteAlpha.600"
+                    colorScheme="whiteAlpha"
+                    iconColor="black"
+                    id={`checkbox-${pid}-${term}-${subject}-${code}`}
+                    size="lg"
+                    mx="7px"
+                    isChecked={selected}
+                    onChange={onChange}
+                  />
+                </Box>
+                <Box>
+                  <Menu>
+                    <MenuButton
+                      size="md"
+                      as={IconButton}
+                      variant="ghost"
+                      isRound={true}
+                      aria-label="Options"
+                      icon={<EditIcon />}
+                    />
+                    <MenuList>
+                      {colorList.map((colorOption) => {
+                        return (
+                          <MenuItem key={colorOption.color} onClick={() => onColorChange(colorOption.color)}>
+                            {colorOption.name}
+                          </MenuItem>
+                        );
+                      })}
+                    </MenuList>
+                  </Menu>
+                </Box>
+              </Flex>
+            </>
           ) : (
             <VStack mx="7px" width="5" />
           )}

src/pages/scheduler/components/SchedulerSidebar.tsx

@@ -14,14 +14,25 @@ import { CourseCard } from './CourseCard';
 import { SectionsCardContainer } from './SchedulerSections';
 
 // GREEN, RED, YELLOW, BLUE, PURPLE, ORANGE
-export const COLORS = ['#32a852', '#b33127', '#e8e523', '#247fe0', '#971dcc', '#cc7d1d'];
+export const COLORS: { color: string; name: string }[] = [
+  { color: '#F56565', name: 'Red' },
+  { color: '#48BB78', name: 'Green' },
+  { color: '#4299E1', name: 'Blue' },
+  { color: '#ED8936', name: 'Orange' },
+  { color: '#38B2AC', name: 'Teal' },
+  { color: '#9F7AEA', name: 'Purple' },
+  { color: '#ECC94B', name: 'Yellow' },
+  { color: '#0BC5EA', name: 'Cyan' },
+  { color: '#ED64A6', name: 'Pink' },
+];
 
 interface SchedulerSidebarProps {
   term: string;
 }
 
 export function SchedulerSidebar({ term }: SchedulerSidebarProps): JSX.Element {
-  const { deleteCourse, setSection, setShowSections, courses, setSelected, clearCourses } = useSavedCourses();
+  const { deleteCourse, setSection, setShowSections, updateCourseColor, courses, setSelected, clearCourses } =
+    useSavedCourses();
   const coursesResult = useGetCourseSections(term, courses);
 
   const handleCourseSectionChange = useCallback(
@@ -63,6 +74,13 @@ export function SchedulerSidebar({ term }: SchedulerSidebarProps): JSX.Element {
     [deleteCourse]
   );
 
+  const handleColorChange = useCallback(
+    ({ pid, term, color }: { pid: string; term: string; color: string }) => {
+      updateCourseColor(pid, term, color);
+    },
+    [updateCourseColor]
+  );
+
   const handleCourseToggle = useCallback(
     ({
       code,
@@ -139,6 +157,8 @@ export function SchedulerSidebar({ term }: SchedulerSidebarProps): JSX.Element {
                   handleSelection={handleCourseToggle}
                   handleDelete={handleCourseDelete}
                   handleShowSections={handleShowSections}
+                  handleColorChange={handleColorChange}
+                  colorList={COLORS}
                 />
                 <Collapse
                   // hacky way of addressing the fact that `showSections` was added as an attribute after users have already added courses to the timetable