lab 8 p6/7 done

labs/lab8/src/main.tsx

@@ -1,5 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { Provider } from 'react-redux';
+import store from './store';
 
 import {
   createBrowserRouter,
@@ -39,6 +41,8 @@ const router = createBrowserRouter([
 import './styles/index.css'
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <RouterProvider router={router} />
+    <Provider store={store}>
+      <RouterProvider router={router} />
+    </Provider>
   </StrictMode>,
 )

labs/lab8/src/store.tsx

@@ -0,0 +1,13 @@
+import { configureStore } from '@reduxjs/toolkit';
+import listsReducer from './testing/features/quizSlice';
+
+const store = configureStore({
+  reducer: {
+    lists: listsReducer,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+
+export default store;

labs/lab8/src/testing/features/Matching.tsx

@@ -1,11 +1,22 @@
 import { Grid, List, ListItem, ListItemButton, ListItemText } from '@mui/material';
 import type {tTasks} from "../quizData"
 import SortableList from '../features/SortableList';
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { addList } from './quizSlice';
 interface ComponentProps {
     tasks: tTasks;
+    index: number;
   }
 
-function Matching({tasks}: ComponentProps) {
+function Matching({tasks,index}: ComponentProps) {
+  const dispatch = useDispatch();
+  
+  // Добавляем список ответов очередного задания в хранилище
+  useEffect(() => {
+     dispatch(addList({ index, items: answers }));
+  }, []);
+
   const answers: string[] = tasks.map((item) => item.answer);
   return (
     <Grid container spacing={2}>
@@ -26,8 +37,8 @@ function Matching({tasks}: ComponentProps) {
         </List>
       </Grid>
 
-      <Grid size={6}>
+          <Grid size={6}>
-       <SortableList answers={answers} />
+        <SortableList index={index} answers={answers}/>
       </Grid>
     </Grid> 
   );

labs/lab8/src/testing/features/Quiz.tsx

@@ -11,7 +11,7 @@ function Quiz() {
           <Typography variant="h5" gutterBottom>
                 {index + 1}. { item.title }
           </Typography>
-          <Matching tasks={item.tasks} />
+           <Matching index={index} tasks={ item.tasks }/>
         </Box>
         ))}
       <Box sx={{ display: 'flex', justifyContent:'space-around' }}>

labs/lab8/src/testing/features/SortableList.tsx

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