feat: list reordering (#154)

src/stories/components/Dropdown.stories.tsx

@@ -4,9 +4,9 @@ import type { Meta, StoryObj } from '@storybook/react';
 import List from '@views/components/common/List/List';
 import ScheduleDropdown from '@views/components/common/ScheduleDropdown/ScheduleDropdown';
 import ScheduleListItem from '@views/components/common/ScheduleListItem/ScheduleListItem';
-import useSchedules, { switchSchedule } from '@views/hooks/useSchedules';
+import useSchedules, { getActiveSchedule, switchSchedule } from '@views/hooks/useSchedules';
 import type { Serialized } from 'chrome-extension-toolkit';
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { exampleSchedule } from '../injected/mocked';
 
@@ -47,27 +47,45 @@ const meta: Meta<typeof ScheduleDropdown> = {
             },
         },
     },
-    render: (args: any) => (
-        <div className='w-80'>
-            <ScheduleDropdown {...args}>
-                <List
-                    draggableElements={schedules.map((schedule, index) => {
-                        const [activeSchedule] = useSchedules();
-                        return (
+    render: (args: any) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [activeSchedule, schedules] = useSchedules();
+
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useEffect(() => {
+            console.log(activeSchedule);
+        }, [activeSchedule]);
+
+        return (
+            <div className='w-80'>
+                <ScheduleDropdown {...args}>
+                    <List
+                        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);
+                        }}
+                        gap={10}
+                    >
+                        {(schedule, handleProps) => (
                             <ScheduleListItem
-                                active={activeSchedule?.name === schedule.name}
                                 name={schedule.name}
                                 onClick={() => {
                                     switchSchedule(schedule.name);
                                 }}
+                                dragHandleProps={handleProps}
                             />
-                        );
-                    })}
-                    gap={10}
-                />
-            </ScheduleDropdown>
-        </div>
-    ),
+                        )}
+                    </List>
+                </ScheduleDropdown>
+            </div>
+        );
+    },
 } satisfies Meta<typeof ScheduleDropdown>;
 export default meta;
 

src/stories/components/List.stories.tsx

@@ -1,3 +1,4 @@
+import type { DraggableProvidedDragHandleProps } from '@hello-pangea/dnd';
 import { Course, Status } from '@shared/types/Course';
 import { CourseMeeting } from '@shared/types/CourseMeeting';
 import Instructor from '@shared/types/Instructor';
@@ -71,9 +72,10 @@ const generateCourses = (count: number): Course[] => {
 };
 
 const exampleCourses = generateCourses(numberOfCourses);
-const generateCourseBlocks = (exampleCourses: Course[], colors: CourseColors[]) =>
-    exampleCourses.map((course, i) => <PopupCourseBlock key={course.uniqueId} course={course} colors={colors[i]} />);
-const ExampleCourseBlocks = generateCourseBlocks(exampleCourses, tailwindColorways);
+const generateCourseBlocks = (
+    { course, colors }: { course: Course; colors: CourseColors },
+    dragHandleProps: DraggableProvidedDragHandleProps
+) => <PopupCourseBlock key={course.uniqueId} course={course} colors={colors} dragHandleProps={dragHandleProps} />;
 
 const meta = {
     title: 'Components/Common/List',
@@ -83,7 +85,6 @@ const meta = {
     },
     tags: ['autodocs'],
     argTypes: {
-        draggableElements: { control: 'object' },
         gap: { control: 'number' },
     },
 } satisfies Meta<typeof List>;
@@ -93,7 +94,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {
-        draggableElements: ExampleCourseBlocks,
+        draggables: exampleCourses.map((course, i) => ({ course, colors: tailwindColorways[i] })),
+        children: generateCourseBlocks,
         gap: 12,
     },
     render: args => (