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

fix: Schedule Switching Bugs (#138)

Browse Source 
* style: course selection fix

* fix: generic bugs on course selection

* fix: schedule switch lag when popup is open for too long

* fix: storybook bug

* chore: remove unnecessary dependency
This commit is contained in:
Lukas Zenick
2024-03-09 19:54:51 -06:00
committed by GitHub
parent d70011016a
commit c51e6881d1
3 changed files with 34 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/components/PopupMain.tsx
View File

@@ -30,7 +30,7 @@ export default function PopupMain(): JSX.Element {
useEffect(() => {
function handleClickOutside(event) {
if (!popupRef.current.contains(event.target) && !toggleRef.current.contains(event.target)) {
if (!popupRef.current?.contains(event.target) && !toggleRef.current?.contains(event.target)) {
setIsPopupVisible(false);
}
}
@@ -114,7 +114,7 @@ export default function PopupMain(): JSX.Element {
{nonActiveSchedules.map(schedule => (
<div
key={schedule.name}
className='my-2 cursor-pointer border border-gray-300 rounded-md border-solid bg-white py-4 shadow-sm hover:bg-gray-100'
className='my-2 cursor-pointer border border-gray-300 rounded-md border-solid bg-white p-2 shadow-sm hover:bg-gray-100'
onClick={() => selectSchedule(schedule)}
>
<Text as='div' variant='h1-course' className='color-ut-burntorange'>

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

@@ -8,7 +8,6 @@ import { useEffect, useState } from 'react';
*/
export default function useSchedules(): [active: UserSchedule | null, schedules: UserSchedule[]] {
const [schedules, setSchedules] = useState<UserSchedule[]>([]);
const [activeIndex, setActiveIndex] = useState<number>(0);
const [activeSchedule, setActiveSchedule] = useState<UserSchedule | null>(null);
useEffect(() => {
@@ -18,31 +17,36 @@ export default function useSchedules(): [active: UserSchedule | null, schedules:
UserScheduleStore.get('activeIndex'),
]);
setSchedules(storedSchedules.map(s => new UserSchedule(s)));
setActiveIndex(storedActiveIndex);
setActiveSchedule(new UserSchedule(storedSchedules[storedActiveIndex]));
const initializable = UserScheduleStore.initialize();
if (initializable) {
const l1 = UserScheduleStore.listen('schedules', ({ newValue }) => {
setSchedules(newValue.map(s => new UserSchedule(s)));
setActiveSchedule(new UserSchedule(newValue[activeIndex]));
});
const l2 = UserScheduleStore.listen('activeIndex', ({ newValue }) => {
setActiveIndex(newValue);
setActiveSchedule(new UserSchedule(schedules[newValue]));
});
return () => {
UserScheduleStore.removeListener(l1);
UserScheduleStore.removeListener(l2);
};
}
};
fetchData();
}, [activeIndex, schedules]);
const setupListeners = () => {
const l1 = UserScheduleStore.listen('schedules', ({ newValue }) => {
setSchedules(newValue.map(s => new UserSchedule(s)));
setActiveSchedule(currentActive => {
const newActiveIndex = newValue.findIndex(s => s.name === currentActive?.name);
return new UserSchedule(newValue[newActiveIndex]);
});
});
const l2 = UserScheduleStore.listen('activeIndex', ({ newValue }) => {
setSchedules(currentSchedules => {
setActiveSchedule(new UserSchedule(currentSchedules[newValue]));
return currentSchedules;
});
});
return () => {
UserScheduleStore.removeListener(l1);
UserScheduleStore.removeListener(l2);
};
};
const init = UserScheduleStore.initialize();
init.then(() => setupListeners()).catch(console.error);
}, []);
return [activeSchedule, schedules];
}