feat: list reordering (#154)

2024-03-13 16:45:32 -05:00
parent 91f62e1943
commit 038ebaa268
7 changed files with 187 additions and 98 deletions
--- a/src/stories/components/Dropdown.stories.tsx
+++ b/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;

--- a/src/stories/components/List.stories.tsx
+++ b/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 => (
--- a/src/views/components/PopupMain.tsx
+++ b/src/views/components/PopupMain.tsx
@@ -1,11 +1,11 @@
+import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
 import { tailwindColorways } from '@shared/util/storybook';
 import Divider from '@views/components/common/Divider/Divider';
 import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
 import List from '@views/components/common/List/List';
-import PopupCourseBlock from '@views/components/common/PopupCourseBlock/PopupCourseBlock';
 import Text from '@views/components/common/Text/Text';
 import { handleOpenCalendar } from '@views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions';
-import useSchedules, { switchSchedule } from '@views/hooks/useSchedules';
+import useSchedules, { getActiveSchedule, replaceSchedule, switchSchedule } from '@views/hooks/useSchedules';
 import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript';
 import clsx from 'clsx';
 import React, { useState } from 'react';
@@ -16,6 +16,7 @@ import SettingsIcon from '~icons/material-symbols/settings';

 import CourseStatus from './common/CourseStatus/CourseStatus';
 import { LogoIcon } from './common/LogoIcon';
+import PopupCourseBlock from './common/PopupCourseBlock/PopupCourseBlock';
 import ScheduleDropdown from './common/ScheduleDropdown/ScheduleDropdown';
 import ScheduleListItem from './common/ScheduleListItem/ScheduleListItem';

@@ -61,27 +62,53 @@ export default function PopupMain(): JSX.Element {
                <div className='px-5 pb-2.5 pt-3.75'>
                    <ScheduleDropdown>
                        <List
-                            draggableElements={schedules.map((schedule, index) => (
+                            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={false}
                                    name={schedule.name}
                                    onClick={() => {
                                        switchSchedule(schedule.name);
                                    }}
+                                    dragHandleProps={handleProps}
                                />
-                            ))}
-                            gap={10}
-                        />
+                            )}
+                        </List>
                    </ScheduleDropdown>
                </div>
                <div className='flex-1 self-stretch overflow-y-auto px-5'>
                    {activeSchedule?.courses?.length > 0 && (
                        <List
-                            draggableElements={activeSchedule?.courses.map((course, i) => (
-                                <PopupCourseBlock key={course.uniqueId} course={course} colors={tailwindColorways[i]} />
-                            ))}
+                            draggables={activeSchedule.courses.map((course, i) => ({
+                                course,
+                                colors: tailwindColorways[i],
+                            }))}
+                            onReordered={reordered => {
+                                activeSchedule.courses = reordered.map(c => c.course);
+                                replaceSchedule(getActiveSchedule(), activeSchedule);
+                            }}
+                            equalityCheck={(a, b) => a.course.uniqueId === b.course.uniqueId}
                            gap={10}
-                        />
+                        >
+                            {({ course, colors }, handleProps) => (
+                                <PopupCourseBlock
+                                    key={course.uniqueId}
+                                    course={course}
+                                    colors={colors}
+                                    dragHandleProps={handleProps}
+                                />
+                            )}
+                        </List>
                    )}
                </div>

--- a/src/views/components/calendar/CalendarSchedules/CalendarSchedules.tsx
+++ b/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'
--- a/src/views/components/common/List/List.tsx
+++ b/src/views/components/common/List/List.tsx
@@ -1,3 +1,4 @@
+import type { DraggableProvided, DraggableProvidedDragHandleProps, OnDragEndResponder } from '@hello-pangea/dnd';
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import type { ReactElement } from 'react';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -9,27 +10,30 @@ import React, { useCallback, useEffect, useState } from 'react';
 /**
 * Props for the List component.
 */
-export interface ListProps {
-    draggableElements: any[]; // TODO: Will later define draggableElements based on what types
-    // of components are draggable.
-    gap: number; // Impacts the spacing between items in the list
+export interface ListProps<T> {
+    draggables: T[];
+    children: (draggable: T, handleProps: DraggableProvidedDragHandleProps) => ReactElement;
+    onReordered: (elements: T[]) => void;
+    equalityCheck?: (a: T, b: T) => boolean;
+    gap?: number; // Impacts the spacing between items in the list
 }

-function initial(count: number, draggableElements: any[] = []) {
+function wrap<T>(draggableElements: T[]) {
    return draggableElements.map((element, index) => ({
-        id: `id:${index + count}`,
-        content: element as ReactElement,
+        id: `id:${index}`,
+        content: element,
    }));
 }

-function reorder(list: { id: string; content: ReactElement }[], startIndex: number, endIndex: number) {
-    const result = Array.from(list);
-    const [removed] = result.splice(startIndex, 1);
-    result.splice(endIndex, 0, removed);
-    return result;
+function reorder<T>(list: T[], startIndex: number, endIndex: number) {
+    const listCopy = [...list];
+
+    const [removed] = listCopy.splice(startIndex, 1);
+    listCopy.splice(endIndex, 0, removed);
+    return listCopy;
 }

-function getStyle({ provided, style /*  , isDragging, gap   */ }) {
+function getStyle(provided: DraggableProvided, style: React.CSSProperties) {
    const combined = {
        ...style,
        ...provided.draggableProps.style,
@@ -38,15 +42,21 @@ function getStyle({ provided, style /*  , isDragging, gap   */ }) {
    return combined;
 }

-function Item({ provided, item, style, isDragging /* , gap */ }) {
+function Item<T>(props: {
+    provided: DraggableProvided;
+    style: React.CSSProperties;
+    item: T;
+    isDragging: boolean;
+    children: React.ReactElement;
+}) {
    return (
        <div
-            {...provided.draggableProps}
-            ref={provided.innerRef}
-            style={getStyle({ provided, style /* , isDragging, gap   */ })}
-            className={`item ${isDragging ? 'is-dragging' : ''}`}
+            {...props.provided.draggableProps}
+            ref={props.provided.innerRef}
+            style={getStyle(props.provided, props.style)}
+            className={props.isDragging ? 'is-dragging' : ''}
        >
-            {React.cloneElement(item.content, { dragHandleProps: provided.dragHandleProps })}
+            {props.children}
        </div>
    );
 }
@@ -57,30 +67,34 @@ function Item({ provided, item, style, isDragging /* , gap */ }) {
 * @example
 * <List draggableElements={elements} />
 */
-export default function List({ draggableElements, gap = 12 }: ListProps): JSX.Element {
-    const [items, setItems] = useState(() => initial(0, draggableElements));
+function List<T>(props: ListProps<T>): JSX.Element {
+    const [items, setItems] = useState(wrap(props.draggables));
+
+    const equalityCheck = props.equalityCheck || ((a, b) => a === b);
+    const transformFunction = props.children;

    useEffect(() => {
-        setItems(prevItems => {
-            const prevItemIds = prevItems.map(item => item.id);
-            const newElements = draggableElements.filter((_, index) => !prevItemIds.includes(`id:${index}`));
-            const newItems = initial(prevItems.length, newElements);
-            return [...prevItems, ...newItems];
-        });
-    }, [draggableElements]);
-    const onDragEnd = useCallback(
+        // check if the draggables content has *actually* changed
+        if (props.draggables.every((element, index) => equalityCheck(element, items[index].content))) {
+            console.log("List's draggables have not changed");
+            return;
+        }
+
+        console.log("List's draggables have changed, updating...");
+
+        setItems(wrap(props.draggables));
+    }, [props.draggables]);
+
+    const onDragEnd: OnDragEndResponder = useCallback(
        result => {
-            if (!result.destination) {
-                return;
-            }
+            if (!result.destination) return;
+            if (result.source.index === result.destination.index) return;

-            if (result.source.index === result.destination.index) {
-                return;
-            }
+            // will reorder in place
+            const reordered = reorder(items, result.source.index, result.destination.index);

-            const newItems = reorder(items, result.source.index, result.destination.index);
-
-            setItems(newItems satisfies { id: string; content: React.ReactElement }[]);
+            setItems(reordered);
+            props.onReordered(reordered.map(item => item.content));
        },
        [items]
    );
@@ -107,14 +121,20 @@ export default function List({ draggableElements, gap = 12 }: ListProps): JSX.El
                                isDragging={snapshot.isDragging}
                                item={items[rubric.source.index]}
                                style={{
-                                    style,
+                                    ...style,
                                }}
-                            />
+                            >
+                                {transformFunction(items[rubric.source.index].content, provided.dragHandleProps)}
+                            </Item>
                        );
                    }}
                >
                    {(provided, snapshot) => (
-                        <div {...provided.droppableProps} ref={provided.innerRef} style={{ marginBottom: `-${gap}px` }}>
+                        <div
+                            {...provided.droppableProps}
+                            ref={provided.innerRef}
+                            style={{ marginBottom: `-${props.gap}px` }}
+                        >
                            {items.map((item, index) => (
                                <Draggable key={item.id} draggableId={item.id} index={index}>
                                    {draggableProvided => (
@@ -124,12 +144,10 @@ export default function List({ draggableElements, gap = 12 }: ListProps): JSX.El
                                            style={{
                                                ...draggableProvided.draggableProps.style,
                                                // if last item, don't add margin
-                                                marginBottom: `${gap}px`,
+                                                marginBottom: `${props.gap}px`,
                                            }}
                                        >
-                                            {React.cloneElement(item.content, {
-                                                dragHandleProps: draggableProvided.dragHandleProps,
-                                            })}
+                                            {transformFunction(item.content, draggableProvided.dragHandleProps)}
                                        </div>
                                    )}
                                </Draggable>
@@ -142,3 +160,5 @@ export default function List({ draggableElements, gap = 12 }: ListProps): JSX.El
        </div>
    );
 }
+
+export default React.memo(List) as typeof List;
--- a/src/views/components/common/ScheduleListItem/ScheduleListItem.tsx
+++ b/src/views/components/common/ScheduleListItem/ScheduleListItem.tsx
@@ -10,7 +10,6 @@ import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
 */
 export type Props = {
    style?: React.CSSProperties;
-    active?: boolean;
    name: string;
    dragHandleProps?: Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>;
    onClick?: React.DOMAttributes<HTMLDivElement>['onClick'];
@@ -22,7 +21,7 @@ export type Props = {
 export default function ScheduleListItem({ style, name, dragHandleProps, onClick }: Props): JSX.Element {
    const [activeSchedule] = useSchedules();

-    const isActive = useMemo(() => activeSchedule?.name === name, [activeSchedule, name]);
+    const isActive = useMemo(() => activeSchedule.name === name, [activeSchedule, name]);

    return (
        <div style={{ ...style }} className='items-center rounded bg-white'>
--- a/src/views/hooks/useSchedules.ts
+++ b/src/views/hooks/useSchedules.ts
@@ -39,10 +39,12 @@ export default function useSchedules(): [active: UserSchedule | null, schedules:

    useEffect(() => {
        const l1 = UserScheduleStore.listen('schedules', ({ newValue }) => {
-            setSchedules(newValue.map(s => new UserSchedule(s)));
+            schedulesCache = newValue.map(s => new UserSchedule(s));
+            setSchedules(schedulesCache);
        });

        const l2 = UserScheduleStore.listen('activeIndex', ({ newValue }) => {
+            activeIndexCache = newValue;
            setActiveIndex(newValue);
        });

@@ -55,11 +57,23 @@ export default function useSchedules(): [active: UserSchedule | null, schedules:
    // recompute active schedule on a schedule/index change
    useEffect(() => {
        setActiveSchedule(schedules[activeIndex]);
-    });
+    }, [activeIndex, schedules]);

    return [activeSchedule, schedules];
 }

+export function getActiveSchedule(): UserSchedule | null {
+    return schedulesCache[activeIndexCache] || null;
+}
+
+export async function replaceSchedule(oldSchedule: UserSchedule, newSchedule: UserSchedule) {
+    const schedules = await UserScheduleStore.get('schedules');
+    const oldIndex = schedules.findIndex(s => s.name === oldSchedule.name);
+    schedules[oldIndex] = newSchedule;
+    await UserScheduleStore.set('schedules', schedules);
+    console.log('schedule replaced');
+}
+
 /**
 * Switches the active schedule to the one with the specified name.
 * @param name - The name of the schedule to switch to.