mirror of
https://github.com/sergeyyarkov/todo-app.git
synced 2026-10-11 10:29:14 +03:00
119 lines
3.9 KiB
JavaScript
119 lines
3.9 KiB
JavaScript
import React from 'react';
|
||
import UpdateTodoModal from '../Modals/Todo/UpdateTodoModal'
|
||
import DeleteTodoDialog from '../Dialogs/Todo/DeleteTodoDialog'
|
||
import DeleteTodoСompletelyDialog from '../Dialogs/Todo/DeleteTodoСompletelyDialog'
|
||
import { Card, CardActions, CardContent, Typography, Grid, IconButton, makeStyles } from '@material-ui/core'
|
||
|
||
import RestoreIcon from '@material-ui/icons/Restore';
|
||
import DeleteIcon from '@material-ui/icons/Delete'
|
||
import AlarmIcon from '@material-ui/icons/Alarm';
|
||
import EditIcon from '@material-ui/icons/Edit';
|
||
|
||
|
||
import categories from '../../db/categories.json'
|
||
|
||
const useStyles = makeStyles((theme) => ({
|
||
alarmIcon: {
|
||
marginRight: 10
|
||
},
|
||
cardActions: {
|
||
justifyContent: 'flex-end'
|
||
},
|
||
cardHeading: {
|
||
marginBottom: 10
|
||
},
|
||
cardCategoryHeading: {
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
fontSize: 14
|
||
},
|
||
cardAlarm: {
|
||
display: 'flex',
|
||
alignItems: 'center'
|
||
},
|
||
fab: {
|
||
position: 'fixed',
|
||
margin: 30,
|
||
bottom: theme.spacing(2),
|
||
right: theme.spacing(2),
|
||
},
|
||
}))
|
||
|
||
const Todos = ({ data, fromTrashContainer }) => {
|
||
const classes = useStyles()
|
||
const [selectedTodo, setSelectedTodo] = React.useState({
|
||
title: '',
|
||
description: '',
|
||
category: '',
|
||
deadline: ''
|
||
})
|
||
const [isModalOpen, setIsModalOpen] = React.useState(false)
|
||
const [isOpenDialog, setIsOpenDialog] = React.useState(false);
|
||
const handleOpenModal = todo => {
|
||
setSelectedTodo({
|
||
id: todo._id.$oid,
|
||
title: todo.title,
|
||
description: todo.description,
|
||
category: todo.categoryId,
|
||
deadline: todo.deadline
|
||
})
|
||
setIsModalOpen(true)
|
||
}
|
||
const handleCloseModal = () => setIsModalOpen(false)
|
||
|
||
const handleOpenDialog = todo => {
|
||
setSelectedTodo({
|
||
id: todo._id.$oid,
|
||
title: todo.title,
|
||
description: todo.description,
|
||
category: todo.categoryId,
|
||
deadline: todo.deadline
|
||
})
|
||
setIsOpenDialog(true)
|
||
}
|
||
const handleCloseDialog = () => setIsOpenDialog(false)
|
||
|
||
return (
|
||
<>
|
||
{!fromTrashContainer ? <UpdateTodoModal isModalOpen={isModalOpen} handleOpenModal={handleOpenModal} handleCloseModal={handleCloseModal} selectedTodo={selectedTodo} setSelectedTodo={setSelectedTodo} /> : null}
|
||
{!fromTrashContainer ? <DeleteTodoDialog isOpenDialog={isOpenDialog} handleCloseDialog={handleCloseDialog} selectedTodo={selectedTodo} /> : null}
|
||
{fromTrashContainer ? <DeleteTodoСompletelyDialog isOpenDialog={isOpenDialog} handleCloseDialog={handleCloseDialog} selectedTodo={selectedTodo} /> : null}
|
||
{data.map((todo, i) =>
|
||
<Grid key={i} item xs={12} md={4} lg={3}>
|
||
<Card>
|
||
<CardContent>
|
||
<Typography className={classes.cardCategoryHeading} color="textSecondary" gutterBottom>
|
||
{categories.find(category => category._id.$oid === todo.categoryId).title}
|
||
<span className={classes.cardAlarm}>
|
||
<AlarmIcon className={classes.alarmIcon} color='action' />
|
||
{todo.deadline}
|
||
</span>
|
||
</Typography>
|
||
<Typography className={classes.cardHeading} variant="h5" component="h2">
|
||
{todo.title}
|
||
</Typography>
|
||
<Typography variant="body2" component="p">
|
||
{todo.description}
|
||
</Typography>
|
||
</CardContent>
|
||
<CardActions className={classes.cardActions}>
|
||
{!fromTrashContainer
|
||
? <IconButton onClick={() => handleOpenModal(todo)} aria-label="update">
|
||
<EditIcon />
|
||
</IconButton>
|
||
: <IconButton aria-label="restore">
|
||
<RestoreIcon />
|
||
</IconButton>
|
||
}
|
||
<IconButton onClick={() => handleOpenDialog(todo)} aria-label="delete" color='secondary'>
|
||
<DeleteIcon />
|
||
</IconButton>
|
||
</CardActions>
|
||
</Card>
|
||
</Grid>
|
||
)}
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default Todos |