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>
+    <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}>
@@ -27,7 +38,7 @@ function Matching({tasks}: ComponentProps) {
       </Grid>
 
           <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,24 +1,29 @@
 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'
 
 interface ComponentProps {
+  index: number;
   answers: string[];
 }
 
-function SortableList({ answers }: ComponentProps ) {
-  const [draggedItems, setDraggedItems] = useState(answers);
+function SortableList({ index}: ComponentProps) {
+
+  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) {
-        setDraggedItems((draggedItems) => {
        const oldIndex = draggedItems.indexOf(active.id);
        const newIndex = draggedItems.indexOf(over.id);
-          return arrayMove(draggedItems, oldIndex, newIndex);
-         });
+       const newList = arrayMove(draggedItems, oldIndex, newIndex);
+       dispatch(setDraggedItems({ index, items: newList }));
     } 
   };