Revert "fix(ios): make ordering question drag-and-drop work on iOS Safari" (#46)

Revert "fix(ios): make ordering question drag-and-drop work on iOS Safari (#45)"

This reverts commit ee82cb3.

Author: OlaszPL

frontend/app/components/quiz/questions/Ordering.tsx

@@ -1,22 +1,5 @@
 'use client';
 
-import {
-  closestCenter,
-  DndContext,
-  type DragEndEvent,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  SortableContext,
-  sortableKeyboardCoordinates,
-  useSortable,
-  verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
 import { GripVertical } from 'lucide-react';
 import { useState } from 'react';
 
@@ -36,69 +19,6 @@ interface OrderingProps {
   onSubmit?: (order: number[]) => void;
 }
 
-interface OrderedItem {
-  text: string;
-  origIdx: number;
-}
-
-function SortableRow({
-  item,
-  position,
-}: {
-  item: OrderedItem;
-  position: number;
-}) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    setActivatorNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: item.origIdx });
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={{ transform: CSS.Transform.toString(transform), transition }}
-      className={cn(
-        'flex w-full items-center gap-3 rounded-2xl px-4 py-3.5',
-        isDragging
-          ? 'relative z-10 border-2 border-[var(--selected-border)] bg-[var(--selected-bg)] shadow-[0_4px_12px_rgba(246,162,0,0.25)]'
-          : 'border-[1.5px] border-[var(--border)] bg-[var(--card-bg)]',
-      )}
-    >
-      <button
-        ref={setActivatorNodeRef}
-        type="button"
-        aria-label="Przeciągnij, aby zmienić kolejność"
-        className="flex cursor-grab touch-none items-center active:cursor-grabbing"
-        {...attributes}
-        {...listeners}
-      >
-        <GripVertical
-          size={18}
-          className={cn(
-            isDragging ? 'text-[var(--orange)]' : 'text-[var(--text-muted)]',
-          )}
-        />
-      </button>
-      <span className="flex h-[26px] w-[26px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--orange)] text-xs font-bold text-white">
-        {position}
-      </span>
-      <span
-        className={cn(
-          'text-sm text-[var(--text-dark)]',
-          isDragging ? 'font-semibold' : 'font-medium',
-        )}
-      >
-        {item.text}
-      </span>
-    </div>
-  );
-}
-
 export default function Ordering({
   questionNumber,
   totalQuestions,
@@ -108,25 +28,16 @@ export default function Ordering({
   items,
   onSubmit,
 }: OrderingProps) {
-  const [ordered, setOrdered] = useState<OrderedItem[]>(() =>
+  const [ordered, setOrdered] = useState(() =>
     items.map((text, origIdx) => ({ text, origIdx })),
   );
+  const [dragging, setDragging] = useState<number | null>(null);
 
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    }),
-  );
-
-  const handleDragEnd = ({ active, over }: DragEndEvent) => {
-    if (over && active.id !== over.id) {
-      setOrdered((prev) => {
-        const oldIndex = prev.findIndex((o) => o.origIdx === active.id);
-        const newIndex = prev.findIndex((o) => o.origIdx === over.id);
-        return arrayMove(prev, oldIndex, newIndex);
-      });
-    }
+  const moveItem = (from: number, to: number) => {
+    const next = [...ordered];
+    const [item] = next.splice(from, 1);
+    next.splice(to, 0, item);
+    setOrdered(next);
   };
 
   return (
@@ -137,22 +48,52 @@ export default function Ordering({
     >
       <QuestionCard question={question} hint={hint} />
 
-      <DndContext
-        sensors={sensors}
-        collisionDetection={closestCenter}
-        onDragEnd={handleDragEnd}
-      >
-        <SortableContext
-          items={ordered.map((o) => o.origIdx)}
-          strategy={verticalListSortingStrategy}
-        >
-          <div className="flex flex-col gap-2.5">
-            {ordered.map((item, i) => (
-              <SortableRow key={item.origIdx} item={item} position={i + 1} />
-            ))}
-          </div>
-        </SortableContext>
-      </DndContext>
+      <div className="flex flex-col gap-2.5">
+        {ordered.map(({ text, origIdx }, i) => {
+          const isDragging = dragging === i;
+          return (
+            <div
+              key={origIdx}
+              draggable
+              onDragStart={() => setDragging(i)}
+              onDragOver={(e) => {
+                e.preventDefault();
+                if (dragging !== null && dragging !== i) {
+                  moveItem(dragging, i);
+                  setDragging(i);
+                }
+              }}
+              onDragEnd={() => setDragging(null)}
+              className={cn(
+                'flex w-full cursor-grab items-center gap-3 rounded-2xl px-4 py-3.5 transition-all',
+                isDragging
+                  ? 'border-2 border-[var(--selected-border)] bg-[var(--selected-bg)] shadow-[0_4px_12px_rgba(246,162,0,0.25)]'
+                  : 'border-[1.5px] border-[var(--border)] bg-[var(--card-bg)]',
+              )}
+            >
+              <GripVertical
+                size={18}
+                className={cn(
+                  isDragging
+                    ? 'text-[var(--orange)]'
+                    : 'text-[var(--text-muted)]',
+                )}
+              />
+              <span className="flex h-[26px] w-[26px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--orange)] text-xs font-bold text-white">
+                {i + 1}
+              </span>
+              <span
+                className={cn(
+                  'text-sm text-[var(--text-dark)]',
+                  isDragging ? 'font-semibold' : 'font-medium',
+                )}
+              >
+                {text}
+              </span>
+            </div>
+          );
+        })}
+      </div>
 
       <SubmitButton
         label="Zatwierdź kolejność"

frontend/package.json

@@ -16,9 +16,6 @@
     "test": "pnpm exec tsx --test \"lib/**/*.{test,spec}.{ts,tsx}\" \"app/**/*.{test,spec}.{ts,tsx}\" \"components/**/*.{test,spec}.{ts,tsx}\" \"hooks/**/*.{test,spec}.{ts,tsx}\""
   },
   "dependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.2.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",