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

feat: Calendar Schedule component finished, fix: list didn't allow updates when adding a new schedule (#115)

Browse Source 
* Temporarily uninstalling husky cause github desktop has issues with it

* Cleaned up some code. Removed unnecessary state value on injected popup

* Should've fixed popup alignment issue. Still need to integrate course schedule with calendar. Still debugging.

* Updated CalendarGridStories

* Fix: change to ExampleCourse from exampleCourse

* setCourse and calendar header need work

* Update as part of merge

* Fix: fixed build errors

* Fix: Added Todo

* Chore: Cleaned up useFlattenedCourseSchedule hook

* fix: List now keeps track of state when existing items are switched, while adding new items to the end

* Added back husky

* Update src/views/components/calendar/Calendar/Calendar.tsx

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

* refactor: added type-safety, destructuring, etc. ready for re-review

* refactor: got rid of ts-ignore in openNewTabFromContentScript

* Update src/views/components/calendar/CalendarHeader/CalenderHeader.tsx

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

* refactor: using path aliasing

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

* refactor: using path aliasing

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

* refactor: using satisfies instead of as

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

* refactor: using satisfies instead of as

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

* style: reformatted spacing

* style: eslint import order

* refactor: added new constructor for UserSchedule to avoid passing down null values to child props

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
This commit is contained in:
Som Gupta
2024-02-29 20:15:45 -06:00
committed by doprz
parent 3a48859ddd
commit a99a55788a
15 changed files with 899 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/views/components/calendar/CalendarSchedules/CalendarSchedules.tsx
View File

@@ -1,14 +1,15 @@
import createSchedule from '@pages/background/lib/createSchedule';
import switchSchedule from '@pages/background/lib/switchSchedule';
import type { UserSchedule } from '@shared/types/UserSchedule';
import List from '@views/components/common/List/List';
import ScheduleListItem from '@views/components/common/ScheduleListItem/ScheduleListItem';
import Text from '@views/components/common/Text/Text';
import React, { useState } from 'react';
import useSchedules from '@views/hooks/useSchedules';
import React, { useEffect,useState } from 'react';
import AddSchedule from '~icons/material-symbols/add';
/**
* Props for the CalendarSchedules component.
*/
import List from '../../common/List/List';
import ScheduleListItem from '../../common/ScheduleListItem/ScheduleListItem';
import Text from '../../common/Text/Text';
export type Props = {
style?: React.CSSProperties;
dummySchedules?: UserSchedule[];
@@ -22,11 +23,39 @@ export type Props = {
* @returns The rendered component.
*/
export function CalendarSchedules(props: Props) {
const [activeScheduleIndex, setActiveScheduleIndex] = useState(props.dummyActiveIndex || 0);
const [schedules, setSchedules] = useState(props.dummySchedules || []);
const [activeScheduleIndex, setActiveScheduleIndex] = useState(0);
const [newSchedule, setNewSchedule] = useState('');
const [activeSchedule, schedules] = useSchedules();
useEffect(() => {
const index = schedules.findIndex(schedule => schedule.name === activeSchedule.name);
if (index !== -1) {
setActiveScheduleIndex(index);
}
}, [activeSchedule, schedules]);
const handleKeyDown = event => {
if (event.code === 'Enter') {
createSchedule(newSchedule);
setNewSchedule('');
}
};
const handleScheduleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setNewSchedule(e.target.value);
};
const selectItem = (index: number) => {
setActiveScheduleIndex(index);
switchSchedule(schedules[index].name);
};
const scheduleComponents = schedules.map((schedule, index) => (
<ScheduleListItem active={index === activeScheduleIndex} name={schedule.name} />
<ScheduleListItem
active={index === activeScheduleIndex}
name={schedule.name}
onClick={() => selectItem(index)}
/>
));
return (
@@ -39,8 +68,16 @@ export function CalendarSchedules(props: Props) {
</Text>
</div>
</div>
<List gap={10} draggableElements={scheduleComponents} itemHeight={30} listHeight={30} listWidth={240} />
<div className='flex flex-col space-y-2.5'>
<List gap={10} draggableElements={scheduleComponents} itemHeight={30} listHeight={30} listWidth={240} />
<input
type='text'
placeholder='Enter new schedule'
value={newSchedule}
onChange={handleScheduleInputChange}
onKeyDown={handleKeyDown}
/>
</div>
</div>
);
}