Reorderable classes in added courses pane

apps/antalmanac/src/actions/ActionTypesStore.ts

@@ -83,6 +83,13 @@ export interface ReorderScheduleAction {
     to: number;
 }
 
+export interface ReorderAddedCoursesAction {
+    type: 'reorderAddedCourses';
+    scheduleIndex: number;
+    movedCourseId: string;
+    nextCourseId: string | null;
+}
+
 export interface ChangeCourseColorAction {
     type: 'changeCourseColor';
     sectionCode: string;
@@ -103,6 +110,7 @@ export type ActionType =
     | DeleteScheduleAction
     | CopyScheduleAction
     | ReorderScheduleAction
+    | ReorderAddedCoursesAction
     | ChangeCourseColorAction
     | UndoRedoAction;
 

apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/CustomEventDialog.tsx

@@ -1,3 +1,9 @@
+import { addCustomEvent, editCustomEvent } from '$actions/AppStoreActions';
+import { DaySelector } from '$components/Calendar/Toolbar/CustomEventDialog/DaySelector';
+import { ScheduleSelector } from '$components/Calendar/Toolbar/CustomEventDialog/ScheduleSelector';
+import { BuildingSelect, ExtendedBuilding } from '$components/inputs/BuildingSelect';
+import analyticsEnum, { logAnalytics } from '$lib/analytics/analytics';
+import AppStore from '$stores/AppStore';
 import { Add, Edit } from '@mui/icons-material';
 import {
     Button,
@@ -14,13 +20,6 @@ import type { RepeatingCustomEvent } from '@packages/antalmanac-types';
 import { usePostHog } from 'posthog-js/react';
 import { useCallback, useEffect, useState } from 'react';
 
-import { addCustomEvent, editCustomEvent } from '$actions/AppStoreActions';
-import { DaySelector } from '$components/Calendar/Toolbar/CustomEventDialog/DaySelector';
-import { ScheduleSelector } from '$components/Calendar/Toolbar/CustomEventDialog/ScheduleSelector';
-import { BuildingSelect, ExtendedBuilding } from '$components/inputs/BuildingSelect';
-import analyticsEnum, { logAnalytics } from '$lib/analytics/analytics';
-import AppStore from '$stores/AppStore';
-
 interface CustomEventDialogProps {
     customEvent?: RepeatingCustomEvent;
     onDialogClose?: () => void;

apps/antalmanac/src/components/Calendar/Toolbar/ScheduleSelect/ScheduleSelect.tsx

@@ -4,11 +4,11 @@ import { PostHog, usePostHog } from 'posthog-js/react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { changeCurrentSchedule } from '$actions/AppStoreActions';
-import { SortableList } from '$components/Calendar/Toolbar/ScheduleSelect/drag-and-drop/SortableList';
 import { AddScheduleButton } from '$components/Calendar/Toolbar/ScheduleSelect/schedule-select-buttons/AddScheduleButton';
 import { DeleteScheduleButton } from '$components/Calendar/Toolbar/ScheduleSelect/schedule-select-buttons/DeleteScheduleButton';
 import { RenameScheduleButton } from '$components/Calendar/Toolbar/ScheduleSelect/schedule-select-buttons/RenameScheduleButton';
 import { CopyScheduleButton } from '$components/buttons/Copy';
+import { SortableList } from '$components/drag-and-drop/SortableList';
 import analyticsEnum, { logAnalytics } from '$lib/analytics/analytics';
 import AppStore from '$stores/AppStore';
 import { scheduleComponentsToggleStore } from '$stores/ScheduleComponentsToggleStore';
@@ -80,6 +80,11 @@ export function SelectSchedulePopover() {
         setCurrentScheduleIndex(AppStore.getCurrentScheduleIndex());
     }, []);
 
+    const handleSortableListChange = (schedules: ScheduleItem[], activeIndex: number, overIndex: number) => {
+        setScheduleMapping(schedules);
+        AppStore.reorderSchedule(activeIndex, overIndex);
+    };
+
     useEffect(() => {
         AppStore.on('addedCoursesChange', handleScheduleIndexChange);
         AppStore.on('customEventsChange', handleScheduleIndexChange);
@@ -161,7 +166,7 @@ export function SelectSchedulePopover() {
                 <Box padding={1}>
                     <SortableList
                         items={scheduleMappingToUse}
-                        onChange={setScheduleMapping}
+                        onChange={handleSortableListChange}
                         renderItem={(item) => {
                             const index = scheduleMappingToUse.indexOf(item);
                             return (

apps/antalmanac/src/components/LoadingScreen.tsx

@@ -1,10 +1,9 @@
+import { BLUE } from '$src/globals';
 import { Dialog, DialogContent, LinearProgress, Stack, Box } from '@mui/material';
 import { useState, useEffect } from 'react';
 
 import { Logo } from './Header/Logo';
 
-import { BLUE } from '$src/globals';
-
 const FUN_FACTS = [
     'Did you know? AntAlmanac is maintained by the ICS Student Council at UCI!',
     'AntAlmanac was created in 2018 by a small group of students under the leadership of @the-rango.',

apps/antalmanac/src/components/RightPane/AddedCourses/AddedCoursePane.tsx

@@ -1,6 +1,7 @@
 import { updateScheduleNote } from '$actions/AppStoreActions';
 import { ClearScheduleButton } from '$components/buttons/Clear';
 import { CopyScheduleButton } from '$components/buttons/Copy';
+import { SortableList } from '$components/drag-and-drop/SortableList';
 import { EmptyState } from '$components/EmptyState';
 import CustomEventDetailView from '$components/RightPane/AddedCourses/CustomEventDetailView';
 import { getMissingSections } from '$components/RightPane/AddedCourses/getMissingSections';
@@ -12,7 +13,9 @@ import { clickToCopy } from '$lib/helpers';
 import { LIGHT_BLUE } from '$src/globals';
 import AppStore from '$stores/AppStore';
 import { scheduleComponentsToggleStore } from '$stores/ScheduleComponentsToggleStore';
+import { getCourseId } from '$stores/scheduleHelpers';
 import { useTabStore } from '$stores/TabStore';
+import { verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { MenuBook } from '@mui/icons-material';
 import { Box, Chip, Paper, SxProps, TextField, Tooltip, Typography, useTheme } from '@mui/material';
 import { AACourse } from '@packages/antalmanac-types';
@@ -36,6 +39,7 @@ const buttonSx: SxProps = {
 
 export interface CourseWithTerm extends AACourse {
     term: string;
+    id: string;
 }
 
 const NOTE_MAX_LEN = 5000;
@@ -46,12 +50,8 @@ function getCourses() {
     const formattedCourses: CourseWithTerm[] = [];
 
     for (const course of currentCourses) {
-        let formattedCourse = formattedCourses.find(
-            (needleCourse) =>
-                needleCourse.courseNumber === course.courseNumber &&
-                needleCourse.deptCode === course.deptCode &&
-                needleCourse.courseTitle === course.courseTitle
-        );
+        const courseId = getCourseId(course);
+        let formattedCourse = formattedCourses.find((needleCourse) => getCourseId(needleCourse) === courseId);
 
         const sectionUpdatedAt = course.section?.updatedAt ?? null;
 
@@ -75,6 +75,7 @@ function getCourses() {
                     },
                 ],
                 updatedAt: sectionUpdatedAt ?? null,
+                id: getCourseId(course),
             };
             formattedCourses.push(formattedCourse);
         }
@@ -304,10 +305,23 @@ function SkeletonSchedule() {
 }
 
 function AddedSectionsGrid() {
-    const [courses, setCourses] = useState(getCourses());
+    const [courses, setCourses] = useState(getCourses);
     const [scheduleNames, setScheduleNames] = useState(AppStore.getScheduleNames());
     const [scheduleIndex, setScheduleIndex] = useState(AppStore.getCurrentScheduleIndex());
 
+    const handleCourseOrderChange = (updatedCourses: CourseWithTerm[], _activeIndex: number, overIndex: number) => {
+        setCourses(updatedCourses);
+
+        const movedCourse = updatedCourses[overIndex];
+        const nextConsecutiveCourse = overIndex + 1 !== updatedCourses.length ? updatedCourses[overIndex + 1] : null;
+
+        AppStore.reorderAddedCourses(
+            AppStore.getCurrentScheduleIndex(),
+            getCourseId(movedCourse),
+            nextConsecutiveCourse !== null ? getCourseId(nextConsecutiveCourse) : null
+        );
+    };
+
     useEffect(() => {
         const handleCoursesChange = () => {
             setCourses(getCourses());
@@ -377,24 +391,30 @@ function AddedSectionsGrid() {
                         }}
                     />
                 )}
-                <Box display="flex" flexDirection="column" gap={1}>
-                    {courses.map((course) => {
+                <SortableList
+                    disableHorizontalScroll
+                    items={courses}
+                    onChange={handleCourseOrderChange}
+                    sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}
+                    sortingStrategy={verticalListSortingStrategy}
+                    renderItem={(course: CourseWithTerm) => {
                         const missingSections = getMissingSections(course);
 
                         return (
-                            <Box key={course.deptCode + course.courseNumber + course.courseTitle}>
+                            <SortableList.Item id={course.id}>
                                 <SectionTableLazyWrapper
                                     courseDetails={course}
                                     term={course.term}
                                     allowHighlight={false}
                                     analyticsCategory={analyticsEnum.addedClasses}
                                     scheduleNames={scheduleNames}
                                     missingSections={missingSections}
+                                    sortable
                                 />
-                            </Box>
+                            </SortableList.Item>
                         );
-                    })}
-                </Box>
+                    }}
+                />
             </Box>
 
             <CustomEventsBox />

apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/DepartmentSearchBar/DepartmentSearchBar.tsx

@@ -1,9 +1,8 @@
-import { useCallback, useEffect, useState } from 'react';
-
 import { LabeledAutocomplete } from '$components/RightPane/CoursePane/SearchForm/LabeledInputs/LabeledAutocomplete';
 import RightPaneStore from '$components/RightPane/RightPaneStore';
 import { useDepartments } from '$hooks/useDepartments';
 import { getLocalStorageRecentlySearched, setLocalStorageRecentlySearched } from '$lib/localStorage';
+import { useCallback, useEffect, useState } from 'react';
 
 const DEFAULT_DEPARTMENTS: Record<string, string> = {
     ALL: 'ALL: Include All Departments',

apps/antalmanac/src/components/RightPane/SectionTable/CourseInfo/CourseInfoBar.tsx

@@ -1,14 +1,13 @@
+import PrereqTree from '$components/RightPane/SectionTable/PrereqTree';
+import { useIsMobile } from '$hooks/useIsMobile';
+import analyticsEnum, { AnalyticsCategory, logAnalytics } from '$lib/analytics/analytics';
+import trpc from '$lib/api/trpc';
 import { InfoOutlined } from '@mui/icons-material';
 import { Box, Button, Popover, Skeleton } from '@mui/material';
 import type { PrerequisiteTree } from '@packages/antalmanac-types';
 import { usePostHog } from 'posthog-js/react';
 import { useState } from 'react';
 
-import PrereqTree from '$components/RightPane/SectionTable/PrereqTree';
-import { useIsMobile } from '$hooks/useIsMobile';
-import analyticsEnum, { AnalyticsCategory, logAnalytics } from '$lib/analytics/analytics';
-import trpc from '$lib/api/trpc';
-
 const noCourseInfo = {
     id: '',
     department: '',

apps/antalmanac/src/components/RightPane/SectionTable/SectionTable.tsx

@@ -1,5 +1,5 @@
 import { Assessment, Route, ShowChart as ShowChartIcon } from '@mui/icons-material';
-import { Alert, Box, Paper, Table, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
+import { Alert, Box, Button, Paper, Table, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
 import { useMemo } from 'react';
 
 import { CourseInfoBar } from '$components/RightPane/SectionTable/CourseInfo/CourseInfoBar';
@@ -10,6 +10,7 @@ import { EnrollmentHistoryPopup } from '$components/RightPane/SectionTable/Enrol
 import GradesPopup from '$components/RightPane/SectionTable/GradesPopup';
 import { SectionTableProps } from '$components/RightPane/SectionTable/SectionTable.types';
 import { SectionTableBody } from '$components/RightPane/SectionTable/SectionTableBody/SectionTableBody';
+import { SortableList } from '$components/drag-and-drop/SortableList';
 import { useIsMobile } from '$hooks/useIsMobile';
 import analyticsEnum from '$lib/analytics/analytics';
 import { useColumnStore, SECTION_TABLE_COLUMNS, type SectionTableColumn } from '$stores/ColumnStore';
@@ -67,8 +68,15 @@ const tableHeaderColumns: Record<Exclude<SectionTableColumn, 'action'>, TableHea
 };
 const tableHeaderColumnEntries = Object.entries(tableHeaderColumns);
 
-function SectionTable(props: SectionTableProps) {
-    const { courseDetails, term, allowHighlight, scheduleNames, analyticsCategory, missingSections = [] } = props;
+function SectionTable({
+    courseDetails,
+    term,
+    allowHighlight,
+    scheduleNames,
+    analyticsCategory,
+    missingSections = [],
+    sortable = false,
+}: SectionTableProps) {
     const { isMilitaryTime } = useTimeFormatStore();
 
     const [activeColumns] = useColumnStore((store) => [store.activeColumns]);
@@ -101,7 +109,7 @@ function SectionTable(props: SectionTableProps) {
     }, [activeColumns]);
 
     return (
-        <>
+        <Box>
             <Box
                 sx={{
                     display: 'flex',
@@ -110,6 +118,12 @@ function SectionTable(props: SectionTableProps) {
                     marginTop: '4px',
                 }}
             >
+                {sortable ? (
+                    <Button variant="contained" color="secondary" sx={{ padding: 0, minWidth: 0, minHeight: 0 }}>
+                        <SortableList.DragHandle iconSx={{ color: 'inherit' }} />
+                    </Button>
+                ) : null}
+
                 <CourseInfoBar
                     deptCode={courseDetails.deptCode}
                     courseTitle={courseDetails.courseTitle}
@@ -218,7 +232,7 @@ function SectionTable(props: SectionTableProps) {
                     />
                 </Table>
             </TableContainer>
-        </>
+        </Box>
     );
 }
 

apps/antalmanac/src/components/RightPane/SectionTable/SectionTable.types.ts

@@ -14,4 +14,5 @@ export interface SectionTableProps {
     analyticsCategory: AnalyticsCategory;
     updatedAt?: string;
     missingSections?: string[];
+    sortable?: boolean;
 }

apps/antalmanac/src/components/Calendar/Toolbar/ScheduleSelect/drag-and-drop/DragHandle.tsx → apps/antalmanac/src/components/drag-and-drop/DragHandle.tsx

@@ -1,15 +1,17 @@
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import { Box } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
+import { SxProps, Theme, useTheme } from '@mui/material/styles';
+import { mergeSx } from '@mui/x-date-pickers/internals';
 import { useContext } from 'react';
 
-import { SortableItemContext } from '$components/Calendar/Toolbar/ScheduleSelect/drag-and-drop/SortableItem';
+import { SortableItemContext } from '$components/drag-and-drop/SortableItem';
 
 interface DragHandleProps {
     disabled?: boolean;
+    iconSx?: SxProps<Theme>;
 }
 
-export function DragHandle({ disabled = false }: DragHandleProps) {
+export function DragHandle({ disabled = false, iconSx }: DragHandleProps) {
     const { attributes, listeners, ref } = useContext(SortableItemContext);
     const theme = useTheme();
 
@@ -24,6 +26,7 @@ export function DragHandle({ disabled = false }: DragHandleProps) {
                 justifyContent: 'center',
                 cursor: disabled ? 'auto' : 'pointer',
                 borderRadius: 1,
+                touchAction: 'none',
                 '&:hover': {
                     backgroundColor: disabled ? 'transparent' : 'rgba(0, 0, 0, 0.1)',
                 },
@@ -33,9 +36,12 @@ export function DragHandle({ disabled = false }: DragHandleProps) {
             }}
         >
             <DragIndicatorIcon
-                sx={{
-                    color: disabled ? 'gray' : theme.palette.mode === 'light' ? 'black' : 'white',
-                }}
+                sx={mergeSx(
+                    {
+                        color: disabled ? 'gray' : theme.palette.mode === 'light' ? 'black' : 'white',
+                    },
+                    iconSx
+                )}
             />
         </Box>
     );