copied tesing folder to the main site

site/testing/features/SortableList.tsx

@@ -0,0 +1,45 @@
+import { DndContext, closestCenter } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
+import { useDispatch, useSelector } from 'react-redux';
+import { setDraggedItems } from './quizSlice';
+import type { RootState } from '../../store';
+import List from '@mui/material/List';
+import { SortableItem } from '../components/SortableItem'
+
+interface ComponentProps {
+  index: number;
+  answers: string[];
+}
+
+function SortableList({ index}: ComponentProps) {
+
+  const dispatch = useDispatch();
+  const arr = useSelector((state: RootState) => state.lists.lists[index])
+  const isDisabled = useSelector((state: RootState) => state.lists.isTestingDone)
+  const draggedItems = arr || []; 
+
+  const handleDragEnd = (event: any) => {
+    const { active, over } = event;
+    if (active.id !== over.id) {
+       const oldIndex = draggedItems.indexOf(active.id);
+       const newIndex = draggedItems.indexOf(over.id);
+       const newList = arrayMove(draggedItems, oldIndex, newIndex);
+       dispatch(setDraggedItems({ index, items: newList }));
+    } 
+  };
+
+  return (
+    <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <SortableContext items={draggedItems}
+        strategy={verticalListSortingStrategy}>
+        <List>
+          {draggedItems.map((item) => (
+            <SortableItem key={item} item={item} id={item} isDisabled={isDisabled}/>
+          ))}
+        </List>
+      </SortableContext>
+    </DndContext>
+  );
+}
+
+export default SortableList;