diff --git a/client/src/components/Dialogs/Category/DeleteCategoryDialog.js b/client/src/components/Dialogs/Category/DeleteCategoryDialog.js
new file mode 100644
index 0000000..a603eee
--- /dev/null
+++ b/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 (
+ <>
+
+ >
+ )
+}
+
+export default DeleteCategoryDialog
\ No newline at end of file
diff --git a/client/src/components/Dialogs/Todo/DeleteTodoDialog.js b/client/src/components/Dialogs/Todo/DeleteTodoDialog.js
new file mode 100644
index 0000000..5d28270
--- /dev/null
+++ b/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 (
+ <>
+
+ >
+ )
+}
+
+export default DeleteTodoDialog
\ No newline at end of file
diff --git a/client/src/components/Dialogs/Todo/DeleteTodoСompletelyDialog.js b/client/src/components/Dialogs/Todo/DeleteTodoСompletelyDialog.js
new file mode 100644
index 0000000..bad6bc0
--- /dev/null
+++ b/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 (
+ <>
+
+ >
+ )
+}
+
+export default DeleteTodoСompletelyDialog
\ No newline at end of file
diff --git a/client/src/components/Dialogs/styles.js b/client/src/components/Dialogs/styles.js
new file mode 100644
index 0000000..2186f27
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/client/src/components/Fab/Fab.js b/client/src/components/Fab/Fab.js
index ccfe47f..ac260cb 100644
--- a/client/src/components/Fab/Fab.js
+++ b/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
case 'edit':
return
+ case 'delete':
+ return
default:
break;
}
}
-const FabComponent = ({ typeIcon, color, secondary, size, ariaLabel, handleOpenModal }) => {
+const FabComponent = ({ typeIcon, color, secondary, size, ariaLabel, onClick, style }) => {
const classes = useStyles()
return (
-
+
{renderIcon(typeIcon)}
)
diff --git a/client/src/components/Todos/Todos.js b/client/src/components/Todos/Todos.js
index f1680fb..3313df8 100644
--- a/client/src/components/Todos/Todos.js
+++ b/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 ? : null}
+ {!fromTrashContainer ? : null}
+ {fromTrashContainer ? : null}
{data.map((todo, i) =>
@@ -88,7 +105,7 @@ const Todos = ({ data, fromTrashContainer }) => {
}
-
+ handleOpenDialog(todo)} aria-label="delete" color='secondary'>
diff --git a/client/src/containers/CategoryContainer/CategoryContainer.js b/client/src/containers/CategoryContainer/CategoryContainer.js
index 7eeb262..5a3454c 100644
--- a/client/src/containers/CategoryContainer/CategoryContainer.js
+++ b/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(() => {
@@ -22,11 +24,16 @@ const Category = () => {
const handleOpenModal = () => setIsModalOpen(true)
const handleCloseModal = () => setIsModalOpen(false)
+
+ const handleOpenDialog = () => setIsOpenDialog(true)
+ const handleCloseDialog = () => setIsOpenDialog(false)
return (
<>
-
+
+
+
diff --git a/client/src/containers/TodosContainer/TodosContainer.js b/client/src/containers/TodosContainer/TodosContainer.js
index 9e52d3f..669ac1b 100644
--- a/client/src/containers/TodosContainer/TodosContainer.js
+++ b/client/src/containers/TodosContainer/TodosContainer.js
@@ -13,7 +13,7 @@ const TodosContainer = () => {
return (
<>
-
+