feat: list reordering (#154)

src/views/components/calendar/CalendarSchedules/CalendarSchedules.tsx

@@ -1,9 +1,10 @@
 import { background } from '@shared/messages';
+import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
 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 useSchedules from '@views/hooks/useSchedules';
+import useSchedules, { getActiveSchedule, switchSchedule } from '@views/hooks/useSchedules';
 import React, { useEffect, useState } from 'react';
 
 import AddSchedule from '~icons/material-symbols/add';
@@ -47,20 +48,6 @@ export function CalendarSchedules({ style, dummySchedules, dummyActiveIndex }: P
         setNewSchedule(e.target.value);
     };
 
-    const selectItem = (index: number) => {
-        background.switchSchedule({ scheduleName: schedules[index].name }).then(() => {
-            setActiveScheduleIndex(index);
-        });
-    };
-
-    const scheduleComponents = schedules.map((schedule, index) => (
-        <ScheduleListItem
-            active={index === activeScheduleIndex}
-            name={schedule.name}
-            onClick={() => selectItem(index)}
-        />
-    ));
-
     const fixBuildError = {
         dummySchedules,
         dummyActiveIndex,
@@ -78,7 +65,29 @@ export function CalendarSchedules({ style, dummySchedules, dummyActiveIndex }: P
                 </div>
             </div>
             <div className='flex flex-col space-y-2.5'>
-                <List gap={10} draggableElements={scheduleComponents} />
+                <List
+                    gap={10}
+                    draggables={schedules}
+                    equalityCheck={(a, b) => a.name === b.name}
+                    onReordered={reordered => {
+                        const activeSchedule = getActiveSchedule();
+                        const activeIndex = reordered.findIndex(s => s.name === activeSchedule.name);
+
+                        // don't care about the promise
+                        UserScheduleStore.set('schedules', reordered);
+                        UserScheduleStore.set('activeIndex', activeIndex);
+                    }}
+                >
+                    {(schedule, handleProps) => (
+                        <ScheduleListItem
+                            name={schedule.name}
+                            onClick={() => {
+                                switchSchedule(schedule.name);
+                            }}
+                            dragHandleProps={handleProps}
+                        />
+                    )}
+                </List>
                 <input
                     type='text'
                     placeholder='Enter new schedule'