52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
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,mixUp } from './quizSlice';
|
|
interface ComponentProps {
|
|
tasks: tTasks;
|
|
index: number;
|
|
}
|
|
|
|
function Matching({tasks,index}: ComponentProps) {
|
|
const dispatch = useDispatch();
|
|
|
|
// Добавляем список ответов очередного задания в хранилище
|
|
useEffect(() => {
|
|
dispatch(addList({ index, items: answers }));
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
dispatch(mixUp());
|
|
}, []);
|
|
|
|
|
|
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 index={index} answers={answers}/>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
}
|
|
|
|
export default Matching |