added dialogs

client/src/components/Dialogs/Category/DeleteCategoryDialog.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import useStyles from '../styles'
+import WarningIcon from '@material-ui/icons/Warning';
+import { useParams } from 'react-router-dom'
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core'
+
+const DeleteCategoryDialog = ({ isOpenDialog, handleCloseDialog }) => {
+  const classes = useStyles()
+  const { id } = useParams()
+  const handleClickDelete = () => {
+    console.log('Request on delete category:', id)
+    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" autoFocus>
+            Удалить
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}
+
+export default DeleteCategoryDialog

client/src/components/Dialogs/Todo/DeleteTodoDialog.js

@@ -0,0 +1,43 @@
+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 DeleteTodoDialog = ({ isOpenDialog, handleCloseDialog, selectedTodo }) => {
+  const classes = useStyles()
+  const handleClickDelete = () => {
+    console.log('Request on delete 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" autoFocus>
+            Удалить
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}
+
+export default DeleteTodoDialog

client/src/components/Dialogs/Todo/DeleteTodoСompletelyDialog.js

@@ -0,0 +1,43 @@
+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" autoFocus>
+            Удалить
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}
+
+export default DeleteTodoСompletelyDialog

client/src/components/Dialogs/styles.js

@@ -0,0 +1,10 @@
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyles = makeStyles(() => ({
+  headingIcon: {
+    marginRight: 10,
+    verticalAlign: 'text-bottom'
+  }
+}))
+
+export default useStyles

client/src/components/Fab/Fab.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Fab, makeStyles } from '@material-ui/core'
 import AddIcon from '@material-ui/icons/Add'
 import EditIcon from '@material-ui/icons/Edit';
+import DeleteIcon from '@material-ui/icons/Delete'
 
 const useStyles = makeStyles((theme) => ({
   fab: {
@@ -19,15 +20,17 @@ const renderIcon = (typeIcon) => {
       return <AddIcon />
     case 'edit':
       return <EditIcon />
+    case 'delete':
+      return <DeleteIcon />
     default:
       break;
   }
 }
 
-const FabComponent = ({ typeIcon, color, secondary, size, ariaLabel, handleOpenModal }) => {
+const FabComponent = ({ typeIcon, color, secondary, size, ariaLabel, onClick, style }) => {
   const classes = useStyles()
   return (
-    <Fab className={classes.fab} onClick={handleOpenModal} color={color} size={size} secondary={secondary} aria-label={ariaLabel}>
+    <Fab className={classes.fab} style={style} onClick={onClick} color={color} size={size} secondary={secondary} aria-label={ariaLabel}>
       {renderIcon(typeIcon)}
     </Fab>
   )

client/src/components/Todos/Todos.js

@@ -1,5 +1,7 @@
 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';
@@ -46,6 +48,7 @@ const Todos = ({ data, fromTrashContainer }) => {
     deadline: ''
   })
   const [isModalOpen, setIsModalOpen] = React.useState(false)
+  const [isOpenDialog, setIsOpenDialog] = React.useState(false);
   const handleOpenModal = todo => {
     setSelectedTodo({
       id: todo._id.$oid,
@@ -58,9 +61,23 @@ const Todos = ({ data, fromTrashContainer }) => {
   }
   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>
@@ -88,7 +105,7 @@ const Todos = ({ data, fromTrashContainer }) => {
                     <RestoreIcon />
                   </IconButton> 
                }
-              <IconButton aria-label="delete" color='secondary'>
+              <IconButton onClick={() => handleOpenDialog(todo)} aria-label="delete" color='secondary'>
                 <DeleteIcon />
               </IconButton>
             </CardActions>

client/src/containers/CategoryContainer/CategoryContainer.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Todos from '../../components/Todos/Todos'
 import UpdateCategoryModal from '../../components/Modals/Category/UpdateCategoryModal'
+import DeleteCategoryDialog from '../../components/Dialogs/Category/DeleteCategoryDialog'
 import Fab from '../../components/Fab/Fab'
 import { Grid, Typography } from '@material-ui/core'
 
@@ -14,6 +15,7 @@ const Category = () => {
 
   const { id } = useParams()
   const [isModalOpen, setIsModalOpen] = React.useState(false)
+  const [isOpenDialog, setIsOpenDialog] = React.useState(false)
   const [selectedCategory, setSelectedCategory] = React.useState({ id: '', title: '' })
 
   React.useEffect(() => {
@@ -23,10 +25,15 @@ const Category = () => {
   const handleOpenModal = () => setIsModalOpen(true)
   const handleCloseModal = () => setIsModalOpen(false)
 
+  const handleOpenDialog = () => setIsOpenDialog(true)
+  const handleCloseDialog = () =>  setIsOpenDialog(false)
+  
   return (
     <>
       <UpdateCategoryModal isModalOpen={isModalOpen} handleCloseModal={handleCloseModal} selectedCategory={selectedCategory} setSelectedCategory={setSelectedCategory} />
-      <Fab size='large' ariaLabel='add' typeIcon='edit' handleOpenModal={handleOpenModal} />
+      <DeleteCategoryDialog isOpenDialog={isOpenDialog} handleCloseDialog={handleCloseDialog} />
+      <Fab style={{ marginRight: '6.5rem' }} size='large' ariaLabel='add' typeIcon='edit' onClick={handleOpenModal} />
+      <Fab size='large' color="secondary" ariaLabel='delete' typeIcon='delete' onClick={handleOpenDialog} />  
       <Grid container spacing={2}>
         <Grid item xs={12}>
           <Typography>

client/src/containers/TodosContainer/TodosContainer.js

@@ -13,7 +13,7 @@ const TodosContainer = () => {
   return (
     <>
       <CreateTodoModal isModalOpen={isModalOpen} handleCloseModal={handleCloseModal} />
-      <Fab typeIcon='add' color="secondary" size='large' ariaLabel="add" handleOpenModal={handleOpenModal} />
+      <Fab typeIcon='add' color="secondary" size='large' ariaLabel="add" onClick={handleOpenModal} />
       <Grid container spacing={2}>
           <Grid item xs={12}>
             <Typography>