p6/7 started (Freezing due to no experience in redux)

This commit is contained in:
2026-04-16 22:52:43 +10:00
parent 4f8f033306
commit 0b76fc69e5
12 changed files with 420 additions and 7 deletions

View File

@@ -8,15 +8,20 @@
"name": "lab6",
"version": "0.0.0",
"dependencies": {
"@dnd-kit/core": "^6.3.1",
"@dnd-kit/sortable": "^10.0.0",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
"@mui/icons-material": "^9.0.0",
"@mui/material": "^9.0.0",
"@mui/x-charts": "^9.0.1",
"@mui/x-data-grid": "^9.0.1",
"@reduxjs/toolkit": "^2.11.2",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"react-router-dom": "^7.14.1"
"react-redux": "^9.2.0",
"react-router-dom": "^7.14.1",
"redux": "^5.0.1"
},
"devDependencies": {
"@babel/core": "^7.29.0",
@@ -276,6 +281,59 @@
"node": ">=6.9.0"
}
},
"node_modules/@dnd-kit/accessibility": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
"integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
"license": "MIT",
"dependencies": {
"tslib": "^2.0.0"
},
"peerDependencies": {
"react": ">=16.8.0"
}
},
"node_modules/@dnd-kit/core": {
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
"integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
"license": "MIT",
"dependencies": {
"@dnd-kit/accessibility": "^3.1.1",
"@dnd-kit/utilities": "^3.2.2",
"tslib": "^2.0.0"
},
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/@dnd-kit/sortable": {
"version": "10.0.0",
"resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
"integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
"license": "MIT",
"dependencies": {
"@dnd-kit/utilities": "^3.2.2",
"tslib": "^2.0.0"
},
"peerDependencies": {
"@dnd-kit/core": "^6.3.0",
"react": ">=16.8.0"
}
},
"node_modules/@dnd-kit/utilities": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
"integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
"license": "MIT",
"dependencies": {
"tslib": "^2.0.0"
},
"peerDependencies": {
"react": ">=16.8.0"
}
},
"node_modules/@emnapi/core": {
"version": "1.9.2",
"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
@@ -1148,6 +1206,32 @@
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@reduxjs/toolkit": {
"version": "2.11.2",
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
"integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==",
"license": "MIT",
"dependencies": {
"@standard-schema/spec": "^1.0.0",
"@standard-schema/utils": "^0.3.0",
"immer": "^11.0.0",
"redux": "^5.0.1",
"redux-thunk": "^3.1.0",
"reselect": "^5.1.0"
},
"peerDependencies": {
"react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
"react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
},
"peerDependenciesMeta": {
"react": {
"optional": true
},
"react-redux": {
"optional": true
}
}
},
"node_modules/@rolldown/binding-android-arm64": {
"version": "1.0.0-rc.15",
"resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.15.tgz",
@@ -1461,6 +1545,18 @@
"dev": true,
"license": "MIT"
},
"node_modules/@standard-schema/spec": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
"integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
"license": "MIT"
},
"node_modules/@standard-schema/utils": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
"integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
"license": "MIT"
},
"node_modules/@tybys/wasm-util": {
"version": "0.10.1",
"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -1650,6 +1746,12 @@
"@types/react": "*"
}
},
"node_modules/@types/use-sync-external-store": {
"version": "0.0.6",
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
"integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
"license": "MIT"
},
"node_modules/@typescript-eslint/eslint-plugin": {
"version": "8.58.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.58.1.tgz",
@@ -2892,6 +2994,16 @@
"node": ">= 4"
}
},
"node_modules/immer": {
"version": "11.1.4",
"resolved": "https://registry.npmjs.org/immer/-/immer-11.1.4.tgz",
"integrity": "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw==",
"license": "MIT",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/immer"
}
},
"node_modules/import-fresh": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -3685,6 +3797,29 @@
"integrity": "sha512-Dn0t8IQhCmeIT3wu+Apm1/YVsJXsGWi6k4sPdnBIdqMVtHtv0IGi6dcpNpNkNac0zB2uUAqNX3MHzN8c+z2rwQ==",
"license": "MIT"
},
"node_modules/react-redux": {
"version": "9.2.0",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
"license": "MIT",
"dependencies": {
"@types/use-sync-external-store": "^0.0.6",
"use-sync-external-store": "^1.4.0"
},
"peerDependencies": {
"@types/react": "^18.2.25 || ^19",
"react": "^18.0 || ^19",
"redux": "^5.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"redux": {
"optional": true
}
}
},
"node_modules/react-router": {
"version": "7.14.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.14.1.tgz",
@@ -3739,6 +3874,21 @@
"react-dom": ">=16.6.0"
}
},
"node_modules/redux": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
"license": "MIT"
},
"node_modules/redux-thunk": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
"integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
"license": "MIT",
"peerDependencies": {
"redux": "^5.0.0"
}
},
"node_modules/reselect": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
@@ -3958,9 +4108,7 @@
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
"dev": true,
"license": "0BSD",
"optional": true
"license": "0BSD"
},
"node_modules/type-check": {
"version": "0.4.0",

View File

@@ -10,15 +10,20 @@
"preview": "vite preview"
},
"dependencies": {
"@dnd-kit/core": "^6.3.1",
"@dnd-kit/sortable": "^10.0.0",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
"@mui/icons-material": "^9.0.0",
"@mui/material": "^9.0.0",
"@mui/x-charts": "^9.0.1",
"@mui/x-data-grid": "^9.0.1",
"@reduxjs/toolkit": "^2.11.2",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"react-router-dom": "^7.14.1"
"react-redux": "^9.2.0",
"react-router-dom": "^7.14.1",
"redux": "^5.0.1"
},
"devDependencies": {
"@babel/core": "^7.29.0",

View File

@@ -82,7 +82,11 @@ function NavBar({ active }: ComponentProps) {
Контакты
</Button>
</Link>
<Link to="/quiz">
<Button variant={active == '4' ? 'contained' : 'text'} color="info" size="medium">
Проверь себя
</Button>
</Link>
</Box>
<Box sx={{ display: { xs: 'flex', md: 'none' } }}>
<IconButton aria-label="Menu button" onClick={toggleDrawer(true)}>
@@ -108,6 +112,9 @@ function NavBar({ active }: ComponentProps) {
<Link style={{ textDecoration: 'none' }} to="/chart">
<StyledMenuItem selected={active == '3'}>Диаграммы</StyledMenuItem>
</Link>
<Link style={{ textDecoration: 'none' }} to="/quiz">
<StyledMenuItem selected={active == '4'}>Проверь Себя</StyledMenuItem>
</Link>
</MenuList>
</Drawer>
</Box>

View File

@@ -10,7 +10,7 @@ import List from "./list/List";
import Main from "./main/Main";
import Building from "./building/Building";
import Chart from "./chart/Chart";
import Testing from "./testing/Testing";
const router = createBrowserRouter([
{
path: "",
@@ -20,6 +20,10 @@ const router = createBrowserRouter([
path: "/list",
element: <List />,
},
{
path: "/quiz",
element: <Testing />,
},
{
path: "/chart",
element: <Chart />,

0
labs/lab8/src/store.tsx Normal file
View File

View File

@@ -0,0 +1,15 @@
import NavBar from "../components/Navbar";
import Footer from "../components/CustomFooter";
import Quiz from "./features/Quiz";
function Testing() {
return (
<>
<NavBar active="4" />
<Quiz />
<Footer />
</>
);
}
export default Testing;

View File

@@ -0,0 +1,40 @@
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { ListItem, ListItemText, ListItemButton, ListItemIcon} from '@mui/material';
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
interface SortableItemProps {
item: string;
id: string;// чтобы тайпскрипт компилятор не жаловался, добавил в инетрфейс, хотя и так компилируется нормально
}
export function SortableItem({ item }: SortableItemProps) {
const id = item; /* идентификатор для useSortable */
const {
attributes,
listeners,
setNodeRef,
transform,
transition,
} = useSortable({ id });
const style = {
transform: CSS.Transform.toString(transform),
transition,
};
return (
<ListItem ref={ setNodeRef } style={ style } { ...attributes } { ...listeners }>
<ListItemButton
sx={{
border: '1px solid gray',
borderRadius: '5px',
}}>
<ListItemIcon>
<DragIndicatorIcon />
</ListItemIcon>
<ListItemText primary={ item } />
</ListItemButton>
</ListItem>
);
}

View File

@@ -0,0 +1,36 @@
import { Grid, List, ListItem, ListItemButton, ListItemText } from '@mui/material';
import type {tTasks} from "../quizData"
import SortableList from '../features/SortableList';
interface ComponentProps {
tasks: tTasks;
}
function Matching({tasks}: ComponentProps) {
const answers: string[] = tasks.map((item) => item.answer);
return (
<Grid container spacing={2}>
<Grid size={6}>
<List>
{tasks.map((item, index) => (
<ListItem key={index}>
<ListItemButton
sx={{
border: '1px solid gray',
borderRadius: '5px',
textAlign: 'right',
}}>
<ListItemText primary={item.question} />
</ListItemButton>
</ListItem>
))}
</List>
</Grid>
<Grid size={6}>
<SortableList answers={answers} />
</Grid>
</Grid>
);
}
export default Matching

View File

@@ -0,0 +1,25 @@
import { Box, Button, Container, Typography } from '@mui/material';
import { quiz } from "../quizData";
import Matching from './Matching';
function Quiz() {
return (
<Container maxWidth="md">
{quiz.map((item, index) => (
<Box key={item.id} component="section" sx={{ m: 2, p:2 }}>
<Typography variant="h5" gutterBottom>
{index + 1}. { item.title }
</Typography>
<Matching tasks={item.tasks} />
</Box>
))}
<Box sx={{ display: 'flex', justifyContent:'space-around' }}>
<Button variant="contained">Проверить</Button>
<Button variant="contained">Начать снова</Button>
</Box>
</Container>
);
}
export default Quiz

View File

@@ -0,0 +1,39 @@
import { DndContext, closestCenter } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
import { useState } from 'react';
import List from '@mui/material/List';
import {SortableItem} from '../components/SortableItem'
interface ComponentProps {
answers: string[];
}
function SortableList({ answers }: ComponentProps ) {
const [draggedItems, setDraggedItems] = useState(answers);
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 (
<DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
<SortableContext items={ draggedItems }
strategy={verticalListSortingStrategy}>
<List>
{draggedItems.map((item) => (
<SortableItem key={ item } item={item} id={ item } />
))}
</List>
</SortableContext>
</DndContext>
);
}
export default SortableList;

View File

@@ -0,0 +1,30 @@
import { createSlice } from '@reduxjs/toolkit';
import type {PayloadAction} from '@reduxjs/toolkit';
interface ListsState {
lists: string[][]; // хранит перемещаемые элементы каждого списка ответов
}
const initialState: ListsState = {
lists: [],
};
const listsSlice = createSlice({
name: 'lists',
initialState,
reducers: {
addList: (state, action: PayloadAction<{index: number; items: string[]}>)=>{
const { index, items } = action.payload;
state.lists.splice(index, 0, items);
},
setDraggedItems: (state, action: PayloadAction<{ index: number; items: string[] }>) => {
const { index, items } = action.payload;
if (index >= 0 && index < state.lists.length) {
state.lists[index] = items; // обновляем конкретный список
}
},
},
});
// Экспортируем действия и редьюсер
export const { addList, setDraggedItems } = listsSlice.actions;
export default listsSlice.reducer;

View File

@@ -0,0 +1,64 @@
export type tTasks ={
"question": string; /* вопрос задания*/
"answer": string; /* ответ задания*/
}[]
export type tQuizzes = {
"id": number,
"type": "M" | "S", /* типы заданий, М - сопоставление*/
"title": string, /* формулировка задания */
"tasks": tTasks,
}[];
export const quiz: tQuizzes = [
{
"id": 1,
"type": "M",
"title": "Сопоставьте сооружение и город, в котором оно расположено.",
"tasks": [
{
"question": "Башня Аль-Хамра",
"answer": "Кувейт"
},
{
"question": "Башня CITIC",
"answer": "Гуанчжоу"
},
{
"question": "Телебашня «Коктобе»",
"answer": "Алматы"
},
{
"question": "Си-Эн Тауэр",
"answer": "Торонто"
},
]
},
{
"id": 2,
"type": "M",
"title": "Сопоставьте сооружение и его высоту.",
"tasks": [
{
"question": "Tokyo Skytree",
"answer": "634"
},
{
"question": "Бурдж-Халифа",
"answer": "838"
},
{
"question": "Эмпайр-стейт-билдинг",
"answer": "448.7"
},
{
"question": "Останкинская башня",
"answer": "540.1"
},
{
"question": "Lotte World Tower",
"answer": "555"
},
]
}
]