From cf21c291fcbb26baec90d162c73f0202bd8ecd4e Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Sun, 14 Jun 2020 19:47:51 +0300 Subject: [PATCH] todo create & update cache --- .../mutations/categories/createCategory.js | 10 ++++++ .../mutations/categories/updateCategory.js | 0 .../src/apollo/mutations/todos/createTodo.js | 1 - .../src/apollo/mutations/todos/deleteTodo.js | 18 ++++++++++ .../src/apollo/mutations/todos/updateTodo.js | 18 ++++++++++ client/src/apollo/queries/todos/todos.js | 1 - .../apollo/queries/todos/todosByCategory.js | 1 - .../Dialogs/Todo/DeleteTodoDialog.js | 27 ++++++++++++-- .../Modals/Category/CreateCategoryModal.js | 31 ++++++++++------ .../components/Modals/Todo/UpdateTodoModal.js | 35 ++++++++++++------- client/src/components/Todos/Todos.js | 2 +- .../CategoryContainer/CategoryContainer.js | 8 ++--- 12 files changed, 118 insertions(+), 34 deletions(-) create mode 100644 client/src/apollo/mutations/categories/createCategory.js create mode 100644 client/src/apollo/mutations/categories/updateCategory.js create mode 100644 client/src/apollo/mutations/todos/deleteTodo.js create mode 100644 client/src/apollo/mutations/todos/updateTodo.js diff --git a/client/src/apollo/mutations/categories/createCategory.js b/client/src/apollo/mutations/categories/createCategory.js new file mode 100644 index 0000000..6ccffd6 --- /dev/null +++ b/client/src/apollo/mutations/categories/createCategory.js @@ -0,0 +1,10 @@ +import gql from 'graphql-tag' + +const CREATE_CATEGORY = gql` + mutation createCategory($title: String!) { + createCategory(title: $title) { + id + } + } +` +export default CREATE_CATEGORY \ No newline at end of file diff --git a/client/src/apollo/mutations/categories/updateCategory.js b/client/src/apollo/mutations/categories/updateCategory.js new file mode 100644 index 0000000..e69de29 diff --git a/client/src/apollo/mutations/todos/createTodo.js b/client/src/apollo/mutations/todos/createTodo.js index fda74a2..b185c6b 100644 --- a/client/src/apollo/mutations/todos/createTodo.js +++ b/client/src/apollo/mutations/todos/createTodo.js @@ -6,7 +6,6 @@ const CREATE_TODO = gql` id title description - status deadline category { id diff --git a/client/src/apollo/mutations/todos/deleteTodo.js b/client/src/apollo/mutations/todos/deleteTodo.js new file mode 100644 index 0000000..9d1c976 --- /dev/null +++ b/client/src/apollo/mutations/todos/deleteTodo.js @@ -0,0 +1,18 @@ +import gql from 'graphql-tag' + +const DELETE_TODO = gql` + mutation DeleteTodo($id: ID!) { + deleteTodo(id: $id) { + id + title + description + deadline + category { + id + title + } + } + } +` + +export default DELETE_TODO \ No newline at end of file diff --git a/client/src/apollo/mutations/todos/updateTodo.js b/client/src/apollo/mutations/todos/updateTodo.js new file mode 100644 index 0000000..9deac7c --- /dev/null +++ b/client/src/apollo/mutations/todos/updateTodo.js @@ -0,0 +1,18 @@ +import gql from 'graphql-tag'; + +const UPDATE_TODO = gql` + mutation UpdateTodo($id: ID! $title: String! $description: String! $deadline: String! $categoryId: String!) { + updateTodo(id: $id title: $title description: $description deadline: $deadline categoryId: $categoryId) { + id + title + description + deadline + category { + id + title + } + } + } +` + +export default UPDATE_TODO \ No newline at end of file diff --git a/client/src/apollo/queries/todos/todos.js b/client/src/apollo/queries/todos/todos.js index 03088d2..7ee99ea 100644 --- a/client/src/apollo/queries/todos/todos.js +++ b/client/src/apollo/queries/todos/todos.js @@ -6,7 +6,6 @@ const GET_TODOS = gql` id title description - status deadline category { id diff --git a/client/src/apollo/queries/todos/todosByCategory.js b/client/src/apollo/queries/todos/todosByCategory.js index 8f2af9c..e45991e 100644 --- a/client/src/apollo/queries/todos/todosByCategory.js +++ b/client/src/apollo/queries/todos/todosByCategory.js @@ -8,7 +8,6 @@ query getTodosByCategory($id: ID!) { id title description - status deadline category { id diff --git a/client/src/components/Dialogs/Todo/DeleteTodoDialog.js b/client/src/components/Dialogs/Todo/DeleteTodoDialog.js index 162cdee..62e3b0e 100644 --- a/client/src/components/Dialogs/Todo/DeleteTodoDialog.js +++ b/client/src/components/Dialogs/Todo/DeleteTodoDialog.js @@ -2,12 +2,35 @@ 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' +import { useMutation } from '@apollo/react-hooks' + +import GET_TODOS from '../../../apollo/queries/todos/todos' +import DELETE_TODO from '../../../apollo/mutations/todos/deleteTodo' const DeleteTodoDialog = ({ isOpenDialog, handleCloseDialog, selectedTodo }) => { const classes = useStyles() + + const [deleteTodo] = useMutation(DELETE_TODO, { + update(cache, { data: { deleteTodo } }) { + const { todos } = cache.readQuery({ query: GET_TODOS }) + cache.writeQuery({ + query: GET_TODOS, + data: { todos: todos.filter(todo => todo.id !== deleteTodo.id) } + }); + } + }) + const handleClickDelete = () => { - console.log('Request on delete todo:', selectedTodo.id, selectedTodo.title) - handleCloseDialog() + try { + deleteTodo({ + variables: { + id: selectedTodo.id + } + }) + handleCloseDialog() + } catch (error) { + console.log(error) + } } return ( diff --git a/client/src/components/Modals/Category/CreateCategoryModal.js b/client/src/components/Modals/Category/CreateCategoryModal.js index 458db3f..a68bb2b 100644 --- a/client/src/components/Modals/Category/CreateCategoryModal.js +++ b/client/src/components/Modals/Category/CreateCategoryModal.js @@ -1,26 +1,37 @@ import React from 'react'; import useStyles from '../styles' import { Dialog, DialogContent, DialogTitle, DialogActions, Button, TextField } from '@material-ui/core' - +import { useMutation } from '@apollo/react-hooks' import CategoryIcon from '@material-ui/icons/Category'; +import CREATE_CATEGORY from '../../../apollo/mutations/categories/createCategory' + const CreateCategoryModal = ({ isModalOpen, handleCloseModal }) => { const classes = useStyles() + + // create catehory mutation + const [updateTodo] = useMutation(CREATE_CATEGORY) + const [fieldsData, setFieldsData] = React.useState({ title: '', }) const handleFormSubmit = e => { - e.preventDefault() - const elements = e.target.elements - const data = { - title: elements.title.value, + try { + e.preventDefault() + const elements = e.target.elements + updateTodo({ + variables: { + title: elements.title.value + } + }) + handleCloseModal() + setFieldsData({ + title: '', + }) + } catch (error) { + console.log(error) } - handleCloseModal() - setFieldsData({ - title: '', - }) - console.log('Request on create category:', data) } const handleFieldChange = e => { diff --git a/client/src/components/Modals/Todo/UpdateTodoModal.js b/client/src/components/Modals/Todo/UpdateTodoModal.js index 9f95e8e..b2c369d 100644 --- a/client/src/components/Modals/Todo/UpdateTodoModal.js +++ b/client/src/components/Modals/Todo/UpdateTodoModal.js @@ -3,24 +3,35 @@ import useStyles from '../styles' import { Dialog, DialogContent, DialogTitle, DialogActions, Button, TextField, Select, MenuItem, InputLabel, FormControl } from '@material-ui/core' import EditIcon from '@material-ui/icons/Edit' -import { Query } from 'react-apollo' -import { useQuery } from '@apollo/react-hooks' +// import { Query } from 'react-apollo' +import { useQuery, useMutation } from '@apollo/react-hooks' + import GET_CATEGORIES from '../../../apollo/queries/categories/categories' +import UPDATE_TODO from '../../../apollo/mutations/todos/updateTodo'; const UpdateTodoModal = ({ isModalOpen, handleCloseModal, selectedTodo, setSelectedTodo }) => { const classes = useStyles() + + // update todo mutation + const [updateTodo] = useMutation(UPDATE_TODO) + const handleFormSubmit = e => { - e.preventDefault() - const elements = e.target.elements - const data = { - id: selectedTodo.id, - title: elements.title.value, - description: elements.description.value, - categoryId: elements.category.value, - deadline: elements.deadline.value + try { + e.preventDefault() + const elements = e.target.elements + updateTodo({ + variables: { + id: selectedTodo.id, + title: elements.title.value, + description: elements.description.value, + deadline: elements.deadline.value, + categoryId: elements.category.value + } + }) + handleCloseModal() + } catch (error) { + console.log(error) } - handleCloseModal() - console.log('Request on update todo:', data) } const handleFieldChange = e => { diff --git a/client/src/components/Todos/Todos.js b/client/src/components/Todos/Todos.js index 9dcca9a..2a71e2c 100644 --- a/client/src/components/Todos/Todos.js +++ b/client/src/components/Todos/Todos.js @@ -82,7 +82,7 @@ const Todos = ({ data, fromTrashContainer }) => { {todo.category.title} - {todo.deadline} + {new Date(todo.deadline).toLocaleString()} diff --git a/client/src/containers/CategoryContainer/CategoryContainer.js b/client/src/containers/CategoryContainer/CategoryContainer.js index b90fa05..ccd2467 100644 --- a/client/src/containers/CategoryContainer/CategoryContainer.js +++ b/client/src/containers/CategoryContainer/CategoryContainer.js @@ -4,24 +4,19 @@ import UpdateCategoryModal from '../../components/Modals/Category/UpdateCategory import DeleteCategoryDialog from '../../components/Dialogs/Category/DeleteCategoryDialog' import Fab from '../../components/Fab/Fab' import { Grid, Typography, LinearProgress } from '@material-ui/core' - -import categories from '../../db/categories.json' - import { Query } from 'react-apollo' import { useParams } from 'react-router-dom' import GET_TODOS_BY_CATEGORY from '../../apollo/queries/todos/todosByCategory' const Category = () => { - const findCategoryById = id => categories.find(category => category._id.$oid === id) - const { id } = useParams() const [isModalOpen, setIsModalOpen] = React.useState(false) const [isOpenDialog, setIsOpenDialog] = React.useState(false) const [selectedCategory, setSelectedCategory] = React.useState({ id: '', title: '' }) React.useEffect(() => { - setSelectedCategory({ id, title: findCategoryById(id).title }) + setSelectedCategory({ id, title: '' }) }, [id]); const handleOpenModal = () => setIsModalOpen(true) @@ -35,6 +30,7 @@ const Category = () => { {({ loading, error, data }) => { if (loading) return if (error) return `Error! ${error.message}`; + if (data.category.todos <= 0) return 'В этой категории задач пока что нету' return ( <>