diff --git a/labs/lab8/src/main.tsx b/labs/lab8/src/main.tsx
index ed00ad7..fc91163 100644
--- a/labs/lab8/src/main.tsx
+++ b/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(
-
+
+
+
,
)
diff --git a/labs/lab8/src/store.tsx b/labs/lab8/src/store.tsx
index e69de29..da3d11f 100644
--- a/labs/lab8/src/store.tsx
+++ b/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;
+export type AppDispatch = typeof store.dispatch;
+
+export default store;
\ No newline at end of file
diff --git a/labs/lab8/src/testing/features/Matching.tsx b/labs/lab8/src/testing/features/Matching.tsx
index 0d44203..19de54e 100644
--- a/labs/lab8/src/testing/features/Matching.tsx
+++ b/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 (
@@ -26,8 +37,8 @@ function Matching({tasks}: ComponentProps) {
-
-
+
+
);
diff --git a/labs/lab8/src/testing/features/Quiz.tsx b/labs/lab8/src/testing/features/Quiz.tsx
index 2321c87..9074270 100644
--- a/labs/lab8/src/testing/features/Quiz.tsx
+++ b/labs/lab8/src/testing/features/Quiz.tsx
@@ -11,7 +11,7 @@ function Quiz() {
{index + 1}. { item.title }
-
+
))}
diff --git a/labs/lab8/src/testing/features/SortableList.tsx b/labs/lab8/src/testing/features/SortableList.tsx
index c9189f6..7f418c0 100644
--- a/labs/lab8/src/testing/features/SortableList.tsx
+++ b/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 ) {
- 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);
- });
- }
- };
-
- return (
-
-
-
- {draggedItems.map((item) => (
-
- ))}
-
-
-
- );
+ 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 (
+
+
+
+ {draggedItems.map((item) => (
+
+ ))}
+
+
+
+ );
}
export default SortableList;
\ No newline at end of file