DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): course color picker (#382)

Browse Source 
* fix: update CourseCellColorPicker.tsx background to white

* feat: add color picker to CalendarCourseCell component

* feat: add color picker functionality to update course colors

* fix: type issues with storybook components

* feat: add useColorPicker hook, isValidHexColor and updateCourseColors utilities

* refactor: color picker logic and UI components

* refactor: update useFlattenedCourseSchedule hook to include courseID property

* refactor: update storybook calendar components with updated props

* refactor: update color picker ui logic to account for position of cell

* fix: revert back to error handling for invalid rgb

* refactor: update jsdocs

* refactor: integrate ColorPickerContext into Calendar components and update props

* refactor: integrate ColorPickerContext into Calendar components and update related props

* refactor: change JSDocs comments and remove unused color inversion state

* refactor: update story components

* feat: add functionality for selecting secondary course colors

* refactor: enhance HexColorEditor to dynamically adjust tag icon color based on preview color

* refactor: simplify JSDoc comment in useColorPicker hook

* fix: revert Button component

* refactor: update CalendarCourseCell component positioning and styling

* fix: correct types in color.ts

* feat: add getDarkerShade function to compute darker shades of hex colors

* feat: add shadow to color picker button

* fix: update button size in ColorPatch component

* feat: implement debounced input for hex color editor and add useDebounce hook

* chore: utilize the logical and && operator instead of the ternary operator

* fix: imports and palette icon

* refactor: remove unused import

* fix: bug when course add fails with custom colors

* chore: run lint

* chore: run check-types

* feat: add HSL color type and conversion functions

* refactor: rename colorway to theme

* fix: hide color picker on screenshot

* fix: undo important syntax

* refactor: rename SomeFunction to DebouncedCallback

* refactor: remove inner function

* refactor: update return type to DebouncedCallback

* fix: adjust sizes for hash and palette button

* feat: create tests for hexToHSL and isValidHexColor

* refactor: update parameter type to use HexColor

* fix: increase size of palette button

* fix: update dependency array for hex code debounce

* fix: change colorPickerRef element ref

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
This commit is contained in:
Ethan
2025-01-20 17:48:52 -06:00
committed by GitHub
parent a61bddf0e8
commit 1f635d2515
22 changed files with 878 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/views/components/calendar/CalendarBottomBar.tsx
View File

@@ -4,6 +4,7 @@ import { saveAsCal, saveCalAsPng } from '@views/components/calendar/utils';
import { Button } from '@views/components/common/Button';
import Divider from '@views/components/common/Divider';
import Text from '@views/components/common/Text/Text';
import { ColorPickerProvider } from '@views/contexts/ColorPickerContext';
import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
import clsx from 'clsx';
import React from 'react';
@@ -41,19 +42,21 @@ export default function CalendarBottomBar({ courseCells, setCourse }: CalendarBo
—
</Text>
<div className='inline-flex gap-2.5'>
{asyncCourseCells.map(block => {
const { courseDeptAndInstr, status, colors, className } = block.componentProps;
return (
<CalendarCourseBlock
courseDeptAndInstr={courseDeptAndInstr}
status={status}
colors={colors}
key={courseDeptAndInstr}
className={clsx(className, 'w-35! h-15!')}
onClick={() => setCourse(block.course)}
/>
);
})}
<ColorPickerProvider>
{asyncCourseCells.map(block => {
const { courseDeptAndInstr, status, className } = block.componentProps;
return (
<CalendarCourseBlock
courseDeptAndInstr={courseDeptAndInstr}
status={status}
key={courseDeptAndInstr}
className={clsx(className, 'w-35! h-15!')}
onClick={() => setCourse(block.course)}
blockData={block}
/>
);
})}
</ColorPickerProvider>
</div>
</>
)}

112
src/views/components/calendar/CalendarCourseCell.tsx
View File

@@ -1,12 +1,16 @@
import { ClockUser, LockKey, Prohibit } from '@phosphor-icons/react';
import { ClockUser, LockKey, Palette, Prohibit } from '@phosphor-icons/react';
import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
import type { StatusType } from '@shared/types/Course';
import { Status } from '@shared/types/Course';
import type { CourseColors } from '@shared/types/ThemeColors';
import { pickFontColor } from '@shared/util/colors';
import { hexToRGB, pickFontColor } from '@shared/util/colors';
import Text from '@views/components/common/Text/Text';
import { useColorPickerContext } from '@views/contexts/ColorPickerContext';
import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
import clsx from 'clsx';
import React, { useEffect, useState } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { Button } from '../common/Button';
import CourseCellColorPicker from './CalendarCourseCellColorPicker/CourseCellColorPicker';
/**
* Props for the CalendarCourseCell component.
@@ -15,9 +19,9 @@ export interface CalendarCourseCellProps {
courseDeptAndInstr: string;
timeAndLocation?: string;
status: StatusType;
colors: CourseColors;
className?: string;
onClick?: React.MouseEventHandler<HTMLDivElement>;
blockData: CalendarGridCourse;
className?: string;
}
/**
@@ -34,11 +38,25 @@ export default function CalendarCourseCell({
courseDeptAndInstr,
timeAndLocation,
status,
colors,
className,
onClick,
blockData,
className,
}: CalendarCourseCellProps): JSX.Element {
const [enableCourseStatusChips, setEnableCourseStatusChips] = useState<boolean>(false);
const colorPickerRef = useRef<HTMLDivElement>(null);
const { selectedColor, setSelectedCourse, handleCloseColorPicker, isSelectedBlock, isSelectedCourse } =
useColorPickerContext();
const { colors, uniqueId: courseID } = blockData.course;
const { dayIndex, startIndex } = blockData.calendarGridPoint;
let selectedCourse = false;
let selectedBlock = false;
if (isSelectedCourse && isSelectedBlock) {
selectedCourse = isSelectedCourse(courseID);
selectedBlock = isSelectedBlock(courseID, dayIndex, startIndex);
}
useEffect(() => {
initSettings().then(({ enableCourseStatusChips }) => setEnableCourseStatusChips(enableCourseStatusChips));
@@ -53,6 +71,26 @@ export default function CalendarCourseCell({
};
}, []);
useEffect(() => {
function handleClickOutside(event: MouseEvent) {
if (selectedBlock && colorPickerRef.current) {
const path = event.composedPath();
const isClickOutside = !path.some(
element => (element as HTMLElement).classList === colorPickerRef.current?.classList
);
if (isClickOutside) {
handleCloseColorPicker();
}
}
}
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [handleCloseColorPicker, selectedBlock]);
let rightIcon: React.ReactNode | null = null;
if (enableCourseStatusChips) {
if (status === Status.WAITLISTED) {
@@ -71,7 +109,7 @@ export default function CalendarCourseCell({
return (
<div
className={clsx(
'h-full w-0 flex justify-center rounded p-x-2 p-y-1.2 cursor-pointer hover:shadow-md transition-shadow-100 ease-out',
'h-full w-0 flex group relative justify-center rounded p-x-2 p-y-1.2 cursor-pointer screenshot:p-1.5 hover:shadow-md transition-shadow-100 ease-out',
{
'min-w-full': timeAndLocation,
'w-full': !timeAndLocation,
@@ -111,6 +149,62 @@ export default function CalendarCourseCell({
{rightIcon}
</div>
)}
<div
onClick={e => {
e.stopPropagation();
}}
className={clsx(
'absolute screenshot:opacity-0! text-black transition-all ease-in-out group-focus-within:pointer-events-auto group-hover:pointer-events-auto group-focus-within:opacity-100 group-hover:opacity-100 gap-y-0.75',
dayIndex === 4 ? 'left-0 -translate-x-full pr-0.75 items-end' : 'right-0 translate-x-full pl-0.75', // If the cell is on the right side of the screen
selectedBlock ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'
)}
style={{
// Prevents from button from appear on top of color picker
zIndex: selectedBlock ? 30 : 29,
}}
>
<div className={clsx('relative', dayIndex === 4 && 'flex flex-col items-end')}>
<Button
onClick={() => {
if (selectedBlock) {
handleCloseColorPicker();
} else {
setSelectedCourse(courseID, dayIndex, startIndex);
}
}}
icon={Palette}
iconProps={{
fill: colors.secondaryColor,
weight: 'fill',
}}
variant='outline'
className={clsx(
'size-8.5! border border-white rounded-full !p-1 bg-opacity-100 !hover:enabled:bg-opacity-100 rounded-full shadow-lg shadow-black/20'
)}
color='ut-gray'
style={{
color: colors.secondaryColor,
backgroundColor: selectedCourse
? (selectedColor ?? colors.primaryColor)
: `rgba(${hexToRGB(`${colors.primaryColor}`)}, var(--un-bg-opacity))`,
}}
/>
{selectedBlock && (
<div
ref={colorPickerRef}
className={
startIndex < 21 && !blockData.async
? 'relative top-0.75 w-max'
: 'absolute bottom-full mb-0.75 w-max'
}
>
<CourseCellColorPicker defaultColor={colors.primaryColor} />
</div>
)}
</div>
</div>
</div>
);
}

25
src/views/components/calendar/CalendarCourseCellColorPicker/ColorPatch.tsx
View File

@@ -1,5 +1,5 @@
import { Check } from '@phosphor-icons/react';
import { getThemeColorHexByName } from '@shared/util/themeColors';
import { useColorPickerContext } from '@views/contexts/ColorPickerContext';
import React from 'react';
/**
@@ -8,7 +8,8 @@ import React from 'react';
interface ColorPatchProps {
color: string;
isSelected: boolean;
handleSetSelectedColor: (color: string) => void;
handleSelectColorPatch: (color: string) => void;
defaultColor: string;
}
/**
@@ -19,13 +20,25 @@ interface ColorPatchProps {
* @param handleSetSelectedColor - Function from parent component to control selection state of a patch.
* @returns The rendered color patch button.
*/
export default function ColorPatch({ color, isSelected, handleSetSelectedColor }: ColorPatchProps): JSX.Element {
const handleClick = () => {
handleSetSelectedColor(isSelected ? getThemeColorHexByName('ut-gray') : color);
export default function ColorPatch({
color,
isSelected,
handleSelectColorPatch,
defaultColor,
}: ColorPatchProps): JSX.Element {
const { handleCloseColorPicker } = useColorPickerContext();
const handleClick = async () => {
// If the color patch is already selected, close the color picker
if (isSelected) {
handleCloseColorPicker();
} else {
handleSelectColorPatch(isSelected ? defaultColor : color);
}
};
return (
<button
className='h-5.5 w-5.5 p-0 transition-all duration-200 hover:scale-110 btn'
className='size-6.5 p-0 transition-all duration-200 hover:scale-110 btn'
style={{ backgroundColor: color }}
onClick={handleClick}
>

54
src/views/components/calendar/CalendarCourseCellColorPicker/CourseCellColorPicker.tsx
View File

@@ -1,12 +1,10 @@
import type { ThemeColor, TWIndex } from '@shared/types/ThemeColors';
import { getThemeColorHexByName } from '@shared/util/themeColors';
import Divider from '@views/components/common/Divider';
import { useColorPickerContext } from '@views/contexts/ColorPickerContext';
import React from 'react';
import { theme } from 'unocss/preset-mini';
import InvertColorsIcon from '~icons/material-symbols/invert-colors';
import InvertColorsOffIcon from '~icons/material-symbols/invert-colors-off';
import ColorPatch from './ColorPatch';
import HexColorEditor from './HexColorEditor';
@@ -55,9 +53,7 @@ const hexCodeToBaseColor = new Map<string, string>(
* Props for the CourseCellColorPicker component.
*/
export interface CourseCellColorPickerProps {
setSelectedColor: React.Dispatch<React.SetStateAction<ThemeColor | null>>;
isInvertColorsToggled: boolean;
setIsInvertColorsToggled: React.Dispatch<React.SetStateAction<boolean>>;
defaultColor: string;
}
/**
@@ -86,49 +82,43 @@ export interface CourseCellColorPickerProps {
*
* @returns The color picker component that displays a color palette with a list of color patches.
*/
export default function CourseCellColorPicker({
setSelectedColor: setFinalColor,
isInvertColorsToggled,
setIsInvertColorsToggled,
}: CourseCellColorPickerProps): JSX.Element {
export default function CourseCellColorPicker({ defaultColor }: CourseCellColorPickerProps): JSX.Element {
// hexCode mirrors contents of HexColorEditor which has no hash prefix
const [hexCode, setHexCode] = React.useState<string>(
getThemeColorHexByName('ut-gray').slice(1).toLocaleLowerCase()
defaultColor.slice(1).toLocaleLowerCase() || getThemeColorHexByName('ut-gray')
);
const { setSelectedColor } = useColorPickerContext();
const hexCodeWithHash = `#${hexCode}` as ThemeColor;
const selectedBaseColor = hexCodeToBaseColor.get(hexCodeWithHash);
const handleSelectColorPatch = (baseColor: string) => {
setHexCode(baseColor.slice(1).toLocaleLowerCase());
let hexCode = baseColor.toLocaleLowerCase();
if (hexCode.startsWith('#')) {
hexCode = baseColor.slice(1);
}
setHexCode(hexCode);
setSelectedColor(`#${hexCode}` as ThemeColor);
};
React.useEffect(() => {
setFinalColor(hexCodeWithHash);
}, [hexCodeWithHash, setFinalColor]);
return (
<div className='inline-flex flex-col border border-1 border-ut-offwhite rounded-1 p-1.25'>
<div className='inline-flex flex-col border border-1 border-ut-offwhite rounded-1 bg-white p-1.25'>
<div className='grid grid-cols-6 gap-1'>
{Array.from(colorPatchColors.keys()).map(baseColor => (
<ColorPatch
key={baseColor}
color={baseColor}
isSelected={baseColor === selectedBaseColor}
handleSetSelectedColor={handleSelectColorPatch}
handleSelectColorPatch={handleSelectColorPatch}
defaultColor={defaultColor}
/>
))}
<div className='col-span-3 flex items-center justify-center overflow-hidden'>
<HexColorEditor hexCode={hexCode} setHexCode={setHexCode} />
<HexColorEditor hexCode={hexCode} setHexCode={handleSelectColorPatch} />
</div>
<button
className='h-5.5 w-5.5 bg-ut-black p-0 transition-all duration-200 hover:scale-110 btn'
onClick={() => setIsInvertColorsToggled(prev => !prev)}
>
{isInvertColorsToggled ? (
<InvertColorsIcon className='h-3.5 w-3.5 color-white' />
) : (
<InvertColorsOffIcon className='h-3.5 w-3.5 color-white' />
)}
</button>
</div>
{selectedBaseColor && (
<>
@@ -138,9 +128,11 @@ export default function CourseCellColorPicker({
.get(selectedBaseColor)
?.map(shadeColor => (
<ColorPatch
key={shadeColor}
color={shadeColor}
isSelected={shadeColor === hexCodeWithHash}
handleSetSelectedColor={handleSelectColorPatch}
handleSelectColorPatch={handleSelectColorPatch}
defaultColor={defaultColor}
/>
))}
</div>

28
src/views/components/calendar/CalendarCourseCellColorPicker/HexColorEditor.tsx
View File

@@ -1,5 +1,8 @@
import { Hash } from '@phosphor-icons/react';
import { isValidHexColor, pickFontColor } from '@shared/util/colors';
import { getThemeColorHexByName } from '@shared/util/themeColors';
import { useDebounce } from '@views/hooks/useDebounce';
import clsx from 'clsx';
import React from 'react';
/**
@@ -7,7 +10,7 @@ import React from 'react';
*/
export interface HexColorEditorProps {
hexCode: string;
setHexCode: React.Dispatch<React.SetStateAction<string>>;
setHexCode: (hexCode: string) => void;
}
/**
@@ -20,23 +23,34 @@ export interface HexColorEditorProps {
*/
export default function HexColorEditor({ hexCode, setHexCode }: HexColorEditorProps): JSX.Element {
const baseColor = React.useMemo(() => getThemeColorHexByName('ut-gray'), []);
const previewColor = hexCode.length === 6 ? `#${hexCode}` : baseColor;
const previewColor = isValidHexColor(`#${hexCode}`) ? `#${hexCode}` : baseColor;
const tagColor = pickFontColor(previewColor.slice(1) as `#${string}`);
const [localHexCode, setLocalHexCode] = React.useState(hexCode);
const debouncedSetHexCode = useDebounce((value: string) => setHexCode(value), 500);
React.useEffect(() => {
debouncedSetHexCode(localHexCode);
// This is on purpose
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [localHexCode]);
return (
<>
<div
style={{ backgroundColor: previewColor }}
className='h-5.5 w-5.25 flex items-center justify-center rounded-l-1'
className='h-6.5 w-6.5 flex items-center justify-center rounded-l-1'
>
<Hash className='h-4 w-4 text-color-white' />
<Hash className={clsx('h-5 w-5 text-color-white', tagColor)} />
</div>
<div className='h-5.5 w-[53px] flex flex-1 items-center justify-center border-b border-r border-t rounded-br rounded-tr p-1.25'>
<div className='h-6.5 w-[53px] flex flex-1 items-center justify-center border-b border-r border-t rounded-br rounded-tr p-1.25'>
<input
type='text'
maxLength={6}
className='w-full border-none bg-transparent font-size-2.75 font-normal outline-none focus:outline-none'
value={hexCode}
onChange={e => setHexCode(e.target.value)}
value={localHexCode}
onChange={e => setLocalHexCode(e.target.value)}
/>
</div>
</>

7
src/views/components/calendar/CalendarGrid.tsx
View File

@@ -1,6 +1,7 @@
import type { Course } from '@shared/types/Course';
import CalendarCourseCell from '@views/components/calendar/CalendarCourseCell';
import Text from '@views/components/common/Text/Text';
import { ColorPickerProvider } from '@views/contexts/ColorPickerContext';
import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
import React from 'react';
@@ -73,7 +74,9 @@ export default function CalendarGrid({
.map(() => (
<div className='h-4 flex items-end justify-center border-r border-gray-300' />
))}
{courseCells ? <AccountForCourseConflicts courseCells={courseCells} setCourse={setCourse} /> : null}
<ColorPickerProvider>
{courseCells && <AccountForCourseConflicts courseCells={courseCells} setCourse={setCourse} />}
</ColorPickerProvider>
</div>
);
}
@@ -147,8 +150,8 @@ function AccountForCourseConflicts({ courseCells, setCourse }: AccountForCourseC
courseDeptAndInstr={courseDeptAndInstr}
timeAndLocation={timeAndLocation}
status={status}
colors={block.course.colors}
onClick={() => setCourse(block.course)}
blockData={block}
/>
</div>
);

2
src/views/components/common/Button.tsx
View File

@@ -44,9 +44,9 @@ export function Button({
<button
style={
{
...style,
color: colorHex,
backgroundColor: `rgb(${colorRgb} / var(--un-bg-opacity)`,
...style,
} satisfies React.CSSProperties
}
className={clsx(

2
src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
View File

@@ -41,7 +41,7 @@ interface HeadingAndActionProps {
* @returns The rendered component.
*/
export default function HeadingAndActions({ course, activeSchedule, onClose }: HeadingAndActionProps): JSX.Element {
const { courseName, department, number: courseNumber, uniqueId, instructors, flags, schedule, core } = course;
const { courseName, department, number: courseNumber, uniqueId, instructors, flags, core } = course;
const courseAdded = activeSchedule.courses.some(ourCourse => ourCourse.uniqueId === uniqueId);
const formattedUniqueId = uniqueId.toString().padStart(5, '0');
const isInCalendar = useCalendar();

45
src/views/contexts/ColorPickerContext.tsx Normal file
View File

@@ -0,0 +1,45 @@
import type { ReactNode } from 'react';
import React, { createContext } from 'react';
import { type ColorPickerInterface, useColorPicker } from '../hooks/useColorPicker';
const defaultContext: ColorPickerInterface = {
selectedColor: null,
setSelectedColor: () => {},
handleCloseColorPicker: () => {},
setSelectedCourse: () => {},
isSelectedCourse: () => false,
isSelectedBlock: () => false,
};
const ColorPickerContext = createContext<ColorPickerInterface>(defaultContext);
interface ColorPickerProviderProps {
children: ReactNode;
}
/**
* Provides the color picker context to its children.
*
* @param props - The properties for the ColorPickerProvider component.
* @param children - The child components that will have access to the color picker context.
* @returns The provider component that supplies the color picker context to its children.
*/
export const ColorPickerProvider = ({ children }: ColorPickerProviderProps) => {
const colorPicker = useColorPicker();
return <ColorPickerContext.Provider value={colorPicker}>{children}</ColorPickerContext.Provider>;
};
/**
* Custom hook to use the ColorPicker context.
* Throws an error if used outside of a ColorPickerProvider.
* @returns The color picker context value.
*/
export const useColorPickerContext = () => {
const context = React.useContext(ColorPickerContext);
if (context === undefined) {
throw new Error('useColorPickerContext must be used within a ColorPickerProvider');
}
return context;
};

111
src/views/hooks/useColorPicker.ts Normal file
View File

@@ -0,0 +1,111 @@
import type { HexColor } from '@shared/types/Color';
import type { ThemeColor } from '@shared/types/ThemeColors';
import { isValidHexColor } from '@shared/util/colors';
import { useCallback, useEffect, useState } from 'react';
import { updateCourseColors } from './useSchedules';
/**
* Interface for the color picker functionality.
*/
export interface ColorPickerInterface {
/**
* The currently selected color.
*/
selectedColor: ThemeColor | null;
/**
* Function to set the selected color.
*/
setSelectedColor: React.Dispatch<React.SetStateAction<ThemeColor | null>>;
/**
* Function to close the color picker.
*/
handleCloseColorPicker: () => void;
/**
* Function to set the selected course.
*
* @param courseID - The ID of the course.
* @param dayIndex - The index of the day.
* @param startIndex - The start index of the course.
*/
setSelectedCourse: (courseID: number, dayIndex: number, startIndex: number) => void;
/**
* Function to check if a course is selected.
*
* @param courseID - The ID of the course.
* @returns True if the course is selected, false otherwise.
*/
isSelectedCourse: (courseID: number) => boolean;
/**
* Function to check if a course block is selected.
*
* @param courseID - The ID of the course.
* @param dayIndex - The index of the day.
* @param startIndex - The start index of the course.
* @returns True if the block is selected, false otherwise.
*/
isSelectedBlock: (courseID: number, dayIndex: number, startIndex: number) => boolean;
}
/**
* Custom hook for managing color picker state and functionality.
*
* @returns The color picker interface with state and functions.
*/
export function useColorPicker(): ColorPickerInterface {
const [selectedColor, setSelectedColor] = useState<ThemeColor | null>(null);
const [selectedBlock, setSelectedBlock] = useState<{
courseID: number | null;
dayIndex: number | null;
startIndex: number | null;
}>({
courseID: null,
dayIndex: null,
startIndex: null,
});
const updateSelectedCourseColor = useCallback(async () => {
if (selectedBlock.courseID && selectedColor) {
if (isValidHexColor(selectedColor as HexColor)) {
await updateCourseColors(selectedBlock.courseID, `#${selectedColor.replace('#', '')}`);
}
}
}, [selectedBlock.courseID, selectedColor]);
const setSelectedCourse = (courseID: number, dayIndex: number, startIndex: number) => {
setSelectedBlock({ courseID, dayIndex, startIndex });
};
const handleCloseColorPicker = () => {
setSelectedColor(null);
setSelectedBlock({ courseID: null, dayIndex: null, startIndex: null });
};
const isSelectedCourse = (courseID: number) => selectedBlock.courseID === courseID;
const isSelectedBlock = (courseID: number, dayIndex: number, startIndex: number) =>
selectedBlock.courseID === courseID &&
selectedBlock.dayIndex === dayIndex &&
selectedBlock.startIndex === startIndex;
useEffect(() => {
if (selectedBlock.courseID && selectedColor) {
(async () => {
await updateSelectedCourseColor();
})();
}
}, [selectedBlock.courseID, selectedColor, updateSelectedCourseColor]);
return {
selectedColor,
setSelectedColor,
handleCloseColorPicker,
setSelectedCourse,
isSelectedBlock,
isSelectedCourse,
};
}

41
src/views/hooks/useDebounce.tsx Normal file
View File

@@ -0,0 +1,41 @@
import { useCallback, useEffect, useRef } from 'react';
type Timer = ReturnType<typeof setTimeout>;
type DebouncedCallback<T extends unknown[]> = (...args: T) => void;
/**
* Custom hook to debounce a function call.
*
* @param func - The original, non-debounced function.
* @param delay - The delay (in ms) for the function to return.
* @returns The debounced function, which will run only if the debounced function has not been called in the last (delay) ms.
*/
export function useDebounce<T extends unknown[]>(
func: DebouncedCallback<T>,
delay: number = 1000
): DebouncedCallback<T> {
const timer = useRef<Timer>();
useEffect(
() => () => {
if (timer.current) {
clearTimeout(timer.current);
}
},
[]
);
const debouncedFunction = useCallback(
(...args: T) => {
if (timer.current) {
clearTimeout(timer.current);
}
timer.current = setTimeout(() => {
func(...args);
}, delay);
},
[func, delay]
);
return debouncedFunction;
}

9
src/views/hooks/useFlattenedCourseSchedule.ts
View File

@@ -126,7 +126,12 @@ function processAsyncCourses({
componentProps: {
courseDeptAndInstr,
status,
colors: course.colors,
blockData: {
calendarGridPoint: { dayIndex: -1, startIndex: -1, endIndex: -1 },
componentProps: { courseDeptAndInstr, status, blockData: {} as CalendarGridCourse },
course,
async: true,
},
},
course,
async: true,
@@ -170,7 +175,7 @@ function processInPersonMeetings(
courseDeptAndInstr,
timeAndLocation,
status,
colors: course.colors,
blockData: {} as CalendarGridCourse,
},
course,
async: false,

46
src/views/hooks/useSchedules.ts
View File

@@ -1,5 +1,7 @@
import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
import type { HexColor } from '@shared/types/Color';
import { UserSchedule } from '@shared/types/UserSchedule';
import { getColorwayFromColor, getCourseColors, getDarkerShade } from '@shared/util/colors';
import { useEffect, useState } from 'react';
let schedulesCache: UserSchedule[] = [];
@@ -89,7 +91,6 @@ export async function replaceSchedule(oldSchedule: UserSchedule, newSchedule: Us
oldIndex = oldIndex !== -1 ? oldIndex : 0;
schedules[oldIndex] = newSchedule;
await UserScheduleStore.set('schedules', schedules);
console.log('schedule replaced');
}
/**
@@ -115,3 +116,46 @@ export async function switchScheduleByName(name: string): Promise<void> {
const activeIndex = schedules.findIndex(s => s.name === name);
await UserScheduleStore.set('activeIndex', activeIndex);
}
/**
* Updates the color of a course in the active schedule.
*
* @param courseID - The ID of the course to update.
* @param color - The new color to set for the course.
* @throws If the course with the given ID is not found.
*/
export async function updateCourseColors(courseID: number, primaryColor: HexColor) {
const activeSchedule = getActiveSchedule();
const updatedCourseIndex = activeSchedule.courses.findIndex(c => c.uniqueId === courseID);
if (updatedCourseIndex === -1) {
throw new Error(`Course with ID ${courseID} not found`);
}
const newSchedule = new UserSchedule(activeSchedule);
const updatedCourse = newSchedule.courses[updatedCourseIndex];
if (!updatedCourse) {
throw new Error(`Course with ID ${courseID} not found`);
}
let secondaryColor: HexColor;
try {
const { colorway: primaryColorWay, index: primaryIndex } = getColorwayFromColor(primaryColor);
const { secondaryColor: colorFromWay } = getCourseColors(primaryColorWay, primaryIndex, 400);
if (!colorFromWay) {
throw new Error('Secondary color not found');
}
secondaryColor = colorFromWay;
} catch (e) {
secondaryColor = getDarkerShade(primaryColor, 80);
}
updatedCourse.colors.primaryColor = primaryColor;
updatedCourse.colors.secondaryColor = secondaryColor;
newSchedule.courses[updatedCourseIndex] = updatedCourse;
await replaceSchedule(activeSchedule, newSchedule);
}