diff --git a/client/src/apollo/mutations/categories/createCategory.js b/client/src/apollo/mutations/categories/createCategory.js index 6ccffd6..3b580d6 100644 --- a/client/src/apollo/mutations/categories/createCategory.js +++ b/client/src/apollo/mutations/categories/createCategory.js @@ -4,6 +4,7 @@ const CREATE_CATEGORY = gql` mutation createCategory($title: String!) { createCategory(title: $title) { id + title } } ` diff --git a/client/src/apollo/mutations/categories/deleteCategoty.js b/client/src/apollo/mutations/categories/deleteCategoty.js new file mode 100644 index 0000000..c1413f1 --- /dev/null +++ b/client/src/apollo/mutations/categories/deleteCategoty.js @@ -0,0 +1,11 @@ +import gql from 'graphql-tag' + +const DELETE_CATEGORY = gql` + mutation deleteCategory($id: ID!) { + deleteCategory(id: $id) { + id + title + } + } +` +export default DELETE_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 index e69de29..75cf88b 100644 --- a/client/src/apollo/mutations/categories/updateCategory.js +++ b/client/src/apollo/mutations/categories/updateCategory.js @@ -0,0 +1,11 @@ +import gql from 'graphql-tag' + +const UPDATE_CATEGORY = gql` + mutation updateCategory($id: ID! $title: String!) { + updateCategory(id: $id title: $title) { + id + title + } + } +` +export default UPDATE_CATEGORY \ No newline at end of file diff --git a/client/src/components/Dialogs/Category/DeleteCategoryDialog.js b/client/src/components/Dialogs/Category/DeleteCategoryDialog.js index a603eee..5bdb3a3 100644 --- a/client/src/components/Dialogs/Category/DeleteCategoryDialog.js +++ b/client/src/components/Dialogs/Category/DeleteCategoryDialog.js @@ -1,15 +1,43 @@ import React from 'react'; +import { useHistory } from "react-router-dom"; 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' +import { useMutation } from '@apollo/react-hooks' + +import GET_CATEGORIES from '../../../apollo/queries/categories/categories' +import DELETE_CATEGORY from '../../../apollo/mutations/categories/deleteCategoty' const DeleteCategoryDialog = ({ isOpenDialog, handleCloseDialog }) => { const classes = useStyles() + const history = useHistory(); const { id } = useParams() + + const [deleteCategory] = useMutation(DELETE_CATEGORY, { + update(cache, { data: { deleteCategory } }) { + const { categories } = cache.readQuery({ query: GET_CATEGORIES }) + console.log(categories, deleteCategory) + cache.writeQuery({ + query: GET_CATEGORIES, + data: { categories: categories.filter(category => category.id !== deleteCategory.id) } + }); + } + }) + const handleClickDelete = () => { - console.log('Request on delete category:', id) - handleCloseDialog() + try { + deleteCategory({ + variables: { + id + } + }) + handleCloseDialog() + history.push("/"); + } 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 a68bb2b..d04549c 100644 --- a/client/src/components/Modals/Category/CreateCategoryModal.js +++ b/client/src/components/Modals/Category/CreateCategoryModal.js @@ -5,12 +5,21 @@ import { useMutation } from '@apollo/react-hooks' import CategoryIcon from '@material-ui/icons/Category'; import CREATE_CATEGORY from '../../../apollo/mutations/categories/createCategory' +import GET_CATEGORIES from '../../../apollo/queries/categories/categories'; const CreateCategoryModal = ({ isModalOpen, handleCloseModal }) => { const classes = useStyles() - // create catehory mutation - const [updateTodo] = useMutation(CREATE_CATEGORY) + // create category mutation + const [createCategory] = useMutation(CREATE_CATEGORY, { + update(cache, { data: { createCategory } }) { + const { categories } = cache.readQuery({ query: GET_CATEGORIES }) + cache.writeQuery({ + query: GET_CATEGORIES, + data: { categories: categories.concat([createCategory]) } + }); + } + }) const [fieldsData, setFieldsData] = React.useState({ title: '', @@ -20,7 +29,7 @@ const CreateCategoryModal = ({ isModalOpen, handleCloseModal }) => { try { e.preventDefault() const elements = e.target.elements - updateTodo({ + createCategory({ variables: { title: elements.title.value } diff --git a/client/src/components/Modals/Category/UpdateCategoryModal.js b/client/src/components/Modals/Category/UpdateCategoryModal.js index a54bd96..1713de7 100644 --- a/client/src/components/Modals/Category/UpdateCategoryModal.js +++ b/client/src/components/Modals/Category/UpdateCategoryModal.js @@ -1,20 +1,31 @@ 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 EditIcon from '@material-ui/icons/Edit' +import UPDATE_CATEGORY from '../../../apollo/mutations/categories/updateCategory' const UpdateCategoryModal = ({ isModalOpen, handleCloseModal, selectedCategory, setSelectedCategory }) => { const classes = useStyles() + + // update category mutation + const [updateCategory] = useMutation(UPDATE_CATEGORY) + const handleFormSubmit = e => { - e.preventDefault() - const elements = e.target.elements - const data = { - id: selectedCategory.id, - title: elements.title.value + try { + e.preventDefault() + const elements = e.target.elements + updateCategory({ + variables: { + id: selectedCategory.id, + title: elements.title.value + } + }) + handleCloseModal() + } catch (error) { + console.log(error) } - handleCloseModal() - console.log('Request on update category:', data) } const handleFieldChange = e => { diff --git a/client/src/containers/CategoryContainer/CategoryContainer.js b/client/src/containers/CategoryContainer/CategoryContainer.js index ccd2467..6825e6e 100644 --- a/client/src/containers/CategoryContainer/CategoryContainer.js +++ b/client/src/containers/CategoryContainer/CategoryContainer.js @@ -30,7 +30,6 @@ const Category = () => { {({ loading, error, data }) => { if (loading) return if (error) return `Error! ${error.message}`; - if (data.category.todos <= 0) return 'В этой категории задач пока что нету' return ( <> @@ -43,8 +42,7 @@ const Category = () => { Сортируйте свои повседневные дела используя категории. - {/* Здесь берем значение slug из query и передаем полученные данные в prop data !!!! */} - + {data.category.todos <= 0 ? В этой категории задач пока что нету : } )