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