mirror of
https://github.com/sergeyyarkov/todo-app.git
synced 2026-10-11 18:39:09 +03:00
deleted trash page
This commit is contained in:
parent
dcf7f71580
commit
e16234d0b7
@ -3,7 +3,6 @@ import { Route, Switch, Redirect, withRouter } from "react-router-dom"
|
|||||||
import Layout from './components/Layout/Layout'
|
import Layout from './components/Layout/Layout'
|
||||||
import TodosContainer from './containers/TodosContainer/TodosContainer'
|
import TodosContainer from './containers/TodosContainer/TodosContainer'
|
||||||
import CategoryContainer from './containers/CategoryContainer/CategoryContainer'
|
import CategoryContainer from './containers/CategoryContainer/CategoryContainer'
|
||||||
import TrashContainer from './containers/TrashContainer/TrashContainer'
|
|
||||||
import NotFoundContainer from './containers/NotFoundContainer/NotFoundContainer'
|
import NotFoundContainer from './containers/NotFoundContainer/NotFoundContainer'
|
||||||
import CssBaseLine from '@material-ui/core/CssBaseline'
|
import CssBaseLine from '@material-ui/core/CssBaseline'
|
||||||
|
|
||||||
@ -23,7 +22,6 @@ const App = ({ history }) => {
|
|||||||
<Layout history={history}>
|
<Layout history={history}>
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route history={history} exact path='/category/:id' component={CategoryContainer} />
|
<Route history={history} exact path='/category/:id' component={CategoryContainer} />
|
||||||
<Route history={history} exact path='/trash' component={TrashContainer} />
|
|
||||||
<Route history={history} exact path='/' component={TodosContainer} />
|
<Route history={history} exact path='/' component={TodosContainer} />
|
||||||
<Route path='/404' component={NotFoundContainer} />
|
<Route path='/404' component={NotFoundContainer} />
|
||||||
<Redirect from='*' to='/404' />
|
<Redirect from='*' to='/404' />
|
||||||
|
|||||||
@ -17,7 +17,6 @@ const DeleteCategoryDialog = ({ isOpenDialog, handleCloseDialog }) => {
|
|||||||
const [deleteCategory] = useMutation(DELETE_CATEGORY, {
|
const [deleteCategory] = useMutation(DELETE_CATEGORY, {
|
||||||
update(cache, { data: { deleteCategory } }) {
|
update(cache, { data: { deleteCategory } }) {
|
||||||
const { categories } = cache.readQuery({ query: GET_CATEGORIES })
|
const { categories } = cache.readQuery({ query: GET_CATEGORIES })
|
||||||
console.log(categories, deleteCategory)
|
|
||||||
cache.writeQuery({
|
cache.writeQuery({
|
||||||
query: GET_CATEGORIES,
|
query: GET_CATEGORIES,
|
||||||
data: { categories: categories.filter(category => category.id !== deleteCategory.id) }
|
data: { categories: categories.filter(category => category.id !== deleteCategory.id) }
|
||||||
|
|||||||
@ -1,43 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import useStyles from '../styles'
|
|
||||||
import WarningIcon from '@material-ui/icons/Warning';
|
|
||||||
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core'
|
|
||||||
|
|
||||||
const DeleteTodoСompletelyDialog = ({ isOpenDialog, handleCloseDialog, selectedTodo }) => {
|
|
||||||
const classes = useStyles()
|
|
||||||
const handleClickDelete = () => {
|
|
||||||
console.log('Request on delete completely todo:', selectedTodo.id, selectedTodo.title)
|
|
||||||
handleCloseDialog()
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Dialog
|
|
||||||
open={isOpenDialog}
|
|
||||||
onClose={handleCloseDialog}
|
|
||||||
aria-labelledby="alert-dialog-title"
|
|
||||||
aria-describedby="alert-dialog-description"
|
|
||||||
>
|
|
||||||
<DialogTitle id="alert-dialog-title">
|
|
||||||
<WarningIcon className={classes.headingIcon} />
|
|
||||||
Удалить запись навсегда?
|
|
||||||
</DialogTitle>
|
|
||||||
<DialogContent>
|
|
||||||
<DialogContentText id="alert-dialog-description">
|
|
||||||
Запись будет удалена навсегда, вы не сможете её восстановить.
|
|
||||||
</DialogContentText>
|
|
||||||
</DialogContent>
|
|
||||||
<DialogActions>
|
|
||||||
<Button onClick={handleCloseDialog} color="default">
|
|
||||||
Отменить
|
|
||||||
</Button>
|
|
||||||
<Button onClick={handleClickDelete} color="secondary">
|
|
||||||
Удалить
|
|
||||||
</Button>
|
|
||||||
</DialogActions>
|
|
||||||
</Dialog>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default DeleteTodoСompletelyDialog
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import useStyles from '../styles'
|
|
||||||
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core'
|
|
||||||
|
|
||||||
import RestoreIcon from '@material-ui/icons/Restore';
|
|
||||||
|
|
||||||
const DeleteTodoDialog = ({ isOpenDialog, handleCloseDialog, selectedTodo }) => {
|
|
||||||
const classes = useStyles()
|
|
||||||
const handleClickDelete = () => {
|
|
||||||
console.log('Request on restore todo:', selectedTodo.id, selectedTodo.title)
|
|
||||||
handleCloseDialog()
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Dialog
|
|
||||||
open={isOpenDialog}
|
|
||||||
onClose={handleCloseDialog}
|
|
||||||
aria-labelledby="alert-dialog-title"
|
|
||||||
aria-describedby="alert-dialog-description"
|
|
||||||
>
|
|
||||||
<DialogTitle id="alert-dialog-title">
|
|
||||||
<RestoreIcon className={classes.headingIcon} />
|
|
||||||
Восстановить запись?
|
|
||||||
</DialogTitle>
|
|
||||||
<DialogContent>
|
|
||||||
<DialogContentText id="alert-dialog-description">
|
|
||||||
Запись будет восстановлена в прежнее состояние.
|
|
||||||
</DialogContentText>
|
|
||||||
</DialogContent>
|
|
||||||
<DialogActions>
|
|
||||||
<Button onClick={handleCloseDialog} color="default">
|
|
||||||
Отменить
|
|
||||||
</Button>
|
|
||||||
<Button onClick={handleClickDelete} color="primary">
|
|
||||||
Восстановить
|
|
||||||
</Button>
|
|
||||||
</DialogActions>
|
|
||||||
</Dialog>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default DeleteTodoDialog
|
|
||||||
@ -8,7 +8,6 @@ import MuiLink from '@material-ui/core/Link';
|
|||||||
import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
|
import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
|
||||||
import CategoryIcon from '@material-ui/icons/Category';
|
import CategoryIcon from '@material-ui/icons/Category';
|
||||||
import AddIcon from '@material-ui/icons/Add';
|
import AddIcon from '@material-ui/icons/Add';
|
||||||
import DeleteIcon from '@material-ui/icons/Delete';
|
|
||||||
import GitHubIcon from '@material-ui/icons/GitHub';
|
import GitHubIcon from '@material-ui/icons/GitHub';
|
||||||
import ExpandLess from '@material-ui/icons/ExpandLess'
|
import ExpandLess from '@material-ui/icons/ExpandLess'
|
||||||
import ExpandMore from '@material-ui/icons/ExpandMore'
|
import ExpandMore from '@material-ui/icons/ExpandMore'
|
||||||
@ -69,14 +68,6 @@ const NavContent = ({ history, handleOpenModal }) => {
|
|||||||
</List>
|
</List>
|
||||||
</Collapse>
|
</Collapse>
|
||||||
<Divider />
|
<Divider />
|
||||||
<Link className={classes.link} to='/trash'>
|
|
||||||
<ListItem selected={history.location.pathname === '/trash'} button>
|
|
||||||
<ListItemIcon>
|
|
||||||
<DeleteIcon />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText primary={'Корзина'} />
|
|
||||||
</ListItem>
|
|
||||||
</Link>
|
|
||||||
</List>
|
</List>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -2,16 +2,13 @@ import React from 'react';
|
|||||||
import useStyles from './styles'
|
import useStyles from './styles'
|
||||||
import UpdateTodoModal from '../Modals/Todo/UpdateTodoModal'
|
import UpdateTodoModal from '../Modals/Todo/UpdateTodoModal'
|
||||||
import DeleteTodoDialog from '../Dialogs/Todo/DeleteTodoDialog'
|
import DeleteTodoDialog from '../Dialogs/Todo/DeleteTodoDialog'
|
||||||
import DeleteTodoСompletelyDialog from '../Dialogs/Todo/DeleteTodoСompletelyDialog'
|
|
||||||
import RestoreTodoDialog from '../Dialogs/Todo/RestoreTodoDialog'
|
|
||||||
import { Card, CardActions, CardContent, Typography, Grid, IconButton } from '@material-ui/core'
|
import { Card, CardActions, CardContent, Typography, Grid, IconButton } from '@material-ui/core'
|
||||||
|
|
||||||
import RestoreIcon from '@material-ui/icons/Restore';
|
|
||||||
import DeleteIcon from '@material-ui/icons/Delete'
|
import DeleteIcon from '@material-ui/icons/Delete'
|
||||||
import AlarmIcon from '@material-ui/icons/Alarm';
|
import AlarmIcon from '@material-ui/icons/Alarm';
|
||||||
import EditIcon from '@material-ui/icons/Edit';
|
import EditIcon from '@material-ui/icons/Edit';
|
||||||
|
|
||||||
const Todos = ({ data, fromTrashContainer }) => {
|
const Todos = ({ data }) => {
|
||||||
const classes = useStyles()
|
const classes = useStyles()
|
||||||
const [selectedTodo, setSelectedTodo] = React.useState({
|
const [selectedTodo, setSelectedTodo] = React.useState({
|
||||||
title: '',
|
title: '',
|
||||||
@ -21,7 +18,6 @@ const Todos = ({ data, fromTrashContainer }) => {
|
|||||||
})
|
})
|
||||||
const [isModalOpen, setIsModalOpen] = React.useState(false)
|
const [isModalOpen, setIsModalOpen] = React.useState(false)
|
||||||
const [isOpenDialog, setIsOpenDialog] = React.useState(false);
|
const [isOpenDialog, setIsOpenDialog] = React.useState(false);
|
||||||
const [isOpenRestoreDialog, setIsOpenRestoreDialog] = React.useState(false)
|
|
||||||
|
|
||||||
const handleOpenModal = todo => {
|
const handleOpenModal = todo => {
|
||||||
const selectedTodo = {
|
const selectedTodo = {
|
||||||
@ -49,31 +45,10 @@ const Todos = ({ data, fromTrashContainer }) => {
|
|||||||
}
|
}
|
||||||
const handleCloseDialog = () => setIsOpenDialog(false)
|
const handleCloseDialog = () => setIsOpenDialog(false)
|
||||||
|
|
||||||
const handleOpenRestoreDialog = todo => {
|
|
||||||
setSelectedTodo({
|
|
||||||
id: todo.id,
|
|
||||||
title: todo.title,
|
|
||||||
description: todo.description,
|
|
||||||
category: todo.category,
|
|
||||||
deadline: todo.deadline
|
|
||||||
})
|
|
||||||
setIsOpenRestoreDialog(true)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleCloseRestoreDialog = () => setIsOpenRestoreDialog(false)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{!fromTrashContainer
|
<UpdateTodoModal isModalOpen={isModalOpen} handleOpenModal={handleOpenModal} handleCloseModal={handleCloseModal} selectedTodo={selectedTodo} setSelectedTodo={setSelectedTodo} />
|
||||||
? <>
|
<DeleteTodoDialog isOpenDialog={isOpenDialog} handleCloseDialog={handleCloseDialog} selectedTodo={selectedTodo} />
|
||||||
<UpdateTodoModal isModalOpen={isModalOpen} handleOpenModal={handleOpenModal} handleCloseModal={handleCloseModal} selectedTodo={selectedTodo} setSelectedTodo={setSelectedTodo} />
|
|
||||||
<DeleteTodoDialog isOpenDialog={isOpenDialog} handleCloseDialog={handleCloseDialog} selectedTodo={selectedTodo} />
|
|
||||||
</>
|
|
||||||
: <>
|
|
||||||
<DeleteTodoСompletelyDialog isOpenDialog={isOpenDialog} handleCloseDialog={handleCloseDialog} selectedTodo={selectedTodo} />
|
|
||||||
<RestoreTodoDialog isOpenDialog={isOpenRestoreDialog} handleCloseDialog={handleCloseRestoreDialog} selectedTodo={selectedTodo} />
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
{data.map((todo, i) =>
|
{data.map((todo, i) =>
|
||||||
<Grid key={i} item xs={12} md={4} lg={3}>
|
<Grid key={i} item xs={12} md={4} lg={3}>
|
||||||
<Card>
|
<Card>
|
||||||
@ -93,14 +68,9 @@ const Todos = ({ data, fromTrashContainer }) => {
|
|||||||
</Typography>
|
</Typography>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
<CardActions className={classes.cardActions}>
|
<CardActions className={classes.cardActions}>
|
||||||
{!fromTrashContainer
|
<IconButton onClick={() => handleOpenModal(todo)} aria-label="update">
|
||||||
? <IconButton onClick={() => handleOpenModal(todo)} aria-label="update">
|
<EditIcon />
|
||||||
<EditIcon />
|
</IconButton>
|
||||||
</IconButton>
|
|
||||||
: <IconButton onClick={() => handleOpenRestoreDialog(todo)} aria-label="restore">
|
|
||||||
<RestoreIcon />
|
|
||||||
</IconButton>
|
|
||||||
}
|
|
||||||
<IconButton onClick={() => handleOpenDialog(todo)} aria-label="delete" color='secondary'>
|
<IconButton onClick={() => handleOpenDialog(todo)} aria-label="delete" color='secondary'>
|
||||||
<DeleteIcon />
|
<DeleteIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
|||||||
@ -1,19 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import Todos from '../../components/Todos/Todos'
|
|
||||||
import { Grid, Typography } from '@material-ui/core'
|
|
||||||
|
|
||||||
const Trash = () => {
|
|
||||||
return (
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Typography>
|
|
||||||
Здесь находятся ваши недавно удаленные записи, вы можете их легко восстановить.
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
{/* Здесь также выполняем нужный запрос на удаленные записи в БД !!!!!!!! */}
|
|
||||||
{/* <Todos data={todos} fromTrashContainer={true} /> */}
|
|
||||||
</Grid>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Trash
|
|
||||||
Loading…
x
Reference in New Issue
Block a user