delete category cache

client/src/apollo/mutations/categories/createCategory.js

@@ -4,6 +4,7 @@ const CREATE_CATEGORY = gql`
   mutation createCategory($title: String!) {
     createCategory(title: $title) {
       id
+      title
     }
   } 
 `

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

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

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)
+    try {
-    handleCloseDialog()
+      deleteCategory({
+        variables: {
+          id
+        }
+      })
+      handleCloseDialog()
+      history.push("/");
+    } catch (error) {
+      console.log(error)
+    }
+    
   }
 
   return (

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
+  // create category mutation
-  const [updateTodo] = useMutation(CREATE_CATEGORY)
+  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
         }

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()
+    try {
-    const elements = e.target.elements
+      e.preventDefault()
-    const data = {
+      const elements = e.target.elements
-      id: selectedCategory.id,
+      updateCategory({
-      title: elements.title.value
+        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 => {

client/src/containers/CategoryContainer/CategoryContainer.js

@@ -30,7 +30,6 @@ const Category = () => {
       {({ loading, error, data }) => {
         if (loading) return <LinearProgress />
         if (error) return `Error! ${error.message}`;
-        if (data.category.todos <= 0) return 'В этой категории задач пока что нету'
         return (
           <>
             <UpdateCategoryModal isModalOpen={isModalOpen} handleCloseModal={handleCloseModal} selectedCategory={selectedCategory} setSelectedCategory={setSelectedCategory} />
@@ -43,8 +42,7 @@ const Category = () => {
                   Сортируйте свои повседневные дела используя категории.
                 </Typography>
               </Grid>
-              {/* Здесь берем значение slug из query и передаем полученные данные в prop data !!!!  */}
+              {data.category.todos <= 0 ? <Grid item xs={12}><Typography>В этой категории задач пока что нету</Typography></Grid> : <Todos data={data.category.todos} />}
-              <Todos data={data.category.todos} />
             </Grid>
           </>
         )