Merge pull request #52 from TheUnlocked/use-dnd-migration

Migrate to `use-dnd`

package.json

@@ -56,8 +56,6 @@
     "next-mdx-remote": "^4.1.0",
     "notistack": "^2.0.5",
     "react": "^18.2.0",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-markdown": "^8.0.3",
@@ -71,7 +69,8 @@
     "socket.io": "^4.5.2",
     "socket.io-client": "^4.5.2",
     "swr": "^1.3.0",
-    "unist-util-visit": "^4.1.1"
+    "unist-util-visit": "^4.1.1",
+    "use-dnd": "^1.2.3"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.19.0",

pages/_app.tsx

@@ -10,8 +10,6 @@ import Head from 'next/head';
 import Header from '../src/components/Header';
 import { SnackbarProvider } from 'notistack';
 import { LocalizationProvider } from '@mui/x-date-pickers';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
 import { Box, SxProps } from '@mui/system';
 import LoadingContext, { LoadingContextInfo } from '../src/api/client/LoadingContext';
 import { callWith } from '../src/util/fp';
@@ -22,6 +20,7 @@ import ErrorBoundaryPage from '../src/components/ErrorBoundaryPage';
 import usePageTitle from '../src/hooks/usePageTitle';
 import { ConfirmProvider } from 'material-ui-confirm';
 import { loader } from '@monaco-editor/react';
+import { DragDropProvider } from 'use-dnd';
 
 // Temporarily required due to https://github.com/microsoft/monaco-editor/issues/2947
 loader.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.31.1/min/vs' } });
@@ -58,7 +57,7 @@ function MyApp({ Component, pageProps }: AppProps) {
             <LocalizationProvider dateAdapter={CustomAdapterLuxon}>
             <ConfirmProvider defaultOptions={{ confirmationText: "Yes, I'm sure" }}>
             <SnackbarProvider hideIconVariant>
-            <DndProvider backend={HTML5Backend}>
+            <DragDropProvider>
             <LoadingContext.Provider value={loadingContext}>
                 <Header />
                 <Box sx={{
@@ -73,7 +72,7 @@ function MyApp({ Component, pageProps }: AppProps) {
                 </Box>
                 <LoadingSpinners />
             </LoadingContext.Provider>
-            </DndProvider>
+            </DragDropProvider>
             </SnackbarProvider>
             </ConfirmProvider>
             </LocalizationProvider>

pages/api/classroom/[classroomId]/lesson/index.ts

@@ -67,7 +67,7 @@ const apiLessonAll = endpoint(makeLessonEntity, ['classroomId', 'include[]'] as
                         lessonId: lesson.id,
                         activityType: x.activityType,
                         displayName: x.displayName,
-                        configuration: x.configuration,
+                        configuration: x.configuration ?? undefined,
                         enabledLanguages: x.enabledLanguages,
                         order: i
                     })) ?? []

src/activities/ActivityDescription.ts

@@ -1,5 +1,5 @@
 import { ComponentType } from "react";
-import { ConnectDragSource } from "react-dnd";
+import { RefConnector } from "use-dnd";
 import { PolicyConfiguration } from '../api/RtcNetwork';
 import FeatureDescription from "../languages/features/FeatureDescription";
 import LanguageDescription from "../languages/LangaugeDescription";
@@ -38,7 +38,7 @@ export interface ActivityConfigWidgetProps<ConfigData = undefined> extends BaseA
 
     startActivity: () => void;
 
-    dragHandle: ConnectDragSource;
+    dragHandle: RefConnector;
 
     displayName: string;
 

src/components/lesson-config/ActivityDragDropBox.tsx

@@ -1,8 +1,7 @@
 import { Box } from "@mui/system";
 import { useRouter } from "next/router";
-import { ComponentType, useCallback, useEffect, useRef } from "react";
-import { ConnectableElement, useDrag } from "react-dnd";
-import { getEmptyImage } from 'react-dnd-html5-backend';
+import { ComponentType, useCallback, useEffect } from "react";
+import { useDrag, createEmptyPreviewImage } from "use-dnd";
 import { CreateLiveActivityInfo } from "../../../websocketServer/src/types";
 import { ActivityConfigWidgetProps } from "../../activities/ActivityDescription";
 import { PartialAttributesOf } from '../../api/Endpoint';
@@ -51,21 +50,15 @@ export function ActivityDragDropBox<IsSkeleton extends boolean>(props: ActivityD
     const [{ isDragging }, drag, dragPreview] = useDrag(() => ({
         type: activityDragDropType,
         item: props.activity,
-        collect: (monitor) => ({
-            isDragging: monitor.isDragging()
+        collect: ev => ({
+            isDragging: Boolean(ev),
         }),
     }), [props.activity]);
 
     useEffect(() => {
-        dragPreview(getEmptyImage());
+        dragPreview(createEmptyPreviewImage());
     }, [dragPreview]);
 
-    const boxRef = useRef<Element | null>(null);
-    function setBoxRef(x: ConnectableElement) {
-        boxRef.current = x as Element;
-        return x;
-    }
-
     const activityType = useActivityDescription(props.activity?.attributes.activityType);
 
     const configChangeHandler = useCallback((configuration: any) => {
@@ -119,7 +112,7 @@ export function ActivityDragDropBox<IsSkeleton extends boolean>(props: ActivityD
         }
     }
 
-    return <Box ref={setBoxRef} sx={{ opacity: isDragging ? 0 : 1 }}>
+    return <Box sx={{ opacity: isDragging ? 0 : 1 }}>
         <Widget
             id={id}
             classroomId={classroomId}