todo create & update cache

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

client/src/apollo/mutations/todos/createTodo.js

@@ -6,7 +6,6 @@ const CREATE_TODO = gql`
       id
       title
       description
-      status
       deadline
       category {
         id

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

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

client/src/apollo/queries/todos/todos.js

@@ -6,7 +6,6 @@ const GET_TODOS = gql`
       id
       title
       description
-      status
       deadline
       category {
         id

client/src/apollo/queries/todos/todosByCategory.js

@@ -8,7 +8,6 @@ query getTodosByCategory($id: ID!) {
       id
       title
       description
-      status
       deadline
       category {
         id

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 (

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 => {

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 => {

client/src/components/Todos/Todos.js

@@ -82,7 +82,7 @@ const Todos = ({ data, fromTrashContainer }) => {
                 {todo.category.title}
                 <span className={classes.cardAlarm}>
                   <AlarmIcon className={classes.alarmIcon} color='action' />
-                  {todo.deadline}
+                  {new Date(todo.deadline).toLocaleString()}
                 </span>
               </Typography>
               <Typography className={classes.cardHeading} variant="h5" component="h2">

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 <LinearProgress />
         if (error) return `Error! ${error.message}`;
+        if (data.category.todos <= 0) return 'В этой категории задач пока что нету'
         return (
           <>
             <UpdateCategoryModal isModalOpen={isModalOpen} handleCloseModal={handleCloseModal} selectedCategory={selectedCategory} setSelectedCategory={setSelectedCategory} />