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

feat: list reordering (#154)

Browse Source
This commit is contained in:
Razboy20
2024-03-13 16:45:32 -05:00
committed by GitHub
parent 91f62e1943
commit 038ebaa268
7 changed files with 187 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/stories/components/Dropdown.stories.tsx
View File

@@ -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) => (
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
draggableElements={schedules.map((schedule, index) => {
const [activeSchedule] = useSchedules();
return (
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}
/>
)}
</List>
</ScheduleDropdown>
</div>
),
);
},
} satisfies Meta<typeof ScheduleDropdown>;
export default meta;

12
src/stories/components/List.stories.tsx
View File

@@ -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 => (

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

@@ -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,28 +62,54 @@ 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>
<div className='w-full flex flex-col items-center gap-1.25 p-5 pt-3.75'>

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

@@ -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'

110
src/views/components/common/List/List.tsx
View File

@@ -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;

3
src/views/components/common/ScheduleListItem/ScheduleListItem.tsx
View File

@@ -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'>

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

@@ -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.