deleted trash page

This commit is contained in:
Sergey Yarkov 2020-06-15 17:01:39 +03:00
parent dcf7f71580
commit e16234d0b7
7 changed files with 6 additions and 154 deletions

View File

@ -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' />

View File

@ -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) }

View File

@ -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

View File

@ -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

View File

@ -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>
</> </>
) )

View File

@ -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} /> <UpdateTodoModal isModalOpen={isModalOpen} handleOpenModal={handleOpenModal} handleCloseModal={handleCloseModal} selectedTodo={selectedTodo} setSelectedTodo={setSelectedTodo} />
<DeleteTodoDialog isOpenDialog={isOpenDialog} handleCloseDialog={handleCloseDialog} selectedTodo={selectedTodo} /> <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>

View File

@ -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