✨ Add drag and drop, fixes #88

src/components/dnd/StorableItem.tsx

@@ -0,0 +1,20 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { AppShelfItem } from '../AppShelf/AppShelf';
+
+export function SortableItem(props: any) {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+    id: props.id,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+      <AppShelfItem service={props.service} />
+    </div>
+  );
+}

src/pages/_document.tsx

@@ -1,13 +1,10 @@
 import Document, { DocumentContext } from 'next/document';
 import { ServerStyles, createStylesServer } from '@mantine/next';
-import { resetServerContext } from 'react-beautiful-dnd';
 
 const stylesServer = createStylesServer();
 
 export default class _Document extends Document {
   static async getInitialProps(ctx: DocumentContext) {
-    resetServerContext();
-
     const initialProps = await Document.getInitialProps(ctx);
     // Add your app specific logic here
 

src/pages/trydnd.tsx

@@ -1,41 +0,0 @@
-import { useEffect } from 'react';
-import { DndList } from '../components/dnd';
-
-const data = {
-  data: [
-    {
-      position: 6,
-      mass: 12.011,
-      symbol: 'C',
-      name: 'Carbon',
-    },
-    {
-      position: 7,
-      mass: 14.007,
-      symbol: 'N',
-      name: 'Nitrogen',
-    },
-    {
-      position: 39,
-      mass: 88.906,
-      symbol: 'Y',
-      name: 'Yttrium',
-    },
-    {
-      position: 56,
-      mass: 137.33,
-      symbol: 'Ba',
-      name: 'Barium',
-    },
-    {
-      position: 58,
-      mass: 140.12,
-      symbol: 'Ce',
-      name: 'Cerium',
-    },
-  ],
-};
-
-export default function TryDnd() {
-  return <DndList data={data.data} />;
-}

src/pages/trynewdnd.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import { arrayMove, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { Grid } from '@mantine/core';
+import { SortableItem } from '../components/dnd/StorableItem';
+import { AppShelfItem } from '../components/AppShelf/AppShelf';
+import { useConfig } from '../tools/state';
+import { Config } from '../tools/types';
+
+export default function App() {
+  const [activeId, setActiveId] = useState(null);
+  const { config, setConfig } = useConfig();
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <SortableContext items={config.services}>
+        <Grid gutter="xl" align="center">
+          {config.services.map((service) => (
+            <Grid.Col key={service.id} span={6} xl={2} xs={4} sm={3} md={3}>
+              <SortableItem service={service} key={service.id} id={service.id} />
+            </Grid.Col>
+          ))}
+        </Grid>
+      </SortableContext>
+      <DragOverlay>
+        {activeId ? (
+          <AppShelfItem service={config.services.find((e) => e.id === activeId)} id={activeId} />
+        ) : null}
+      </DragOverlay>
+    </DndContext>
+  );
+
+  function handleDragStart(event) {
+    const { active } = event;
+
+    setActiveId(active.id);
+  }
+
+  function handleDragEnd(event) {
+    const { active, over } = event;
+
+    if (active.id !== over.id) {
+      const newConfig = { ...config };
+      const activeIndex = newConfig.services.findIndex((e) => e.id === active.id);
+      const overIndex = newConfig.services.findIndex((e) => e.id === over.id);
+      newConfig.services = arrayMove(newConfig.services, activeIndex, overIndex);
+      setConfig(newConfig);
+    }
+
+    setActiveId(null);
+  }
+}