added query modal for categories

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

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

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

@@ -3,7 +3,6 @@ import gql from 'graphql-tag'
 const GET_TODOS_BY_CATEGORY = gql`
 query getTodosByCategory($id: ID!) {
   category(id: $id) {
-    id
     title
     todos {
       id
@@ -12,6 +11,7 @@ query getTodosByCategory($id: ID!) {
       status
       deadline
       category {
+        id
         title
       }
     }

client/src/components/Modals/Todo/CreateTodoModal.js

@@ -3,7 +3,8 @@ import useStyles from '../styles'
 import { Dialog, DialogContent, DialogTitle, DialogActions, Button, TextField, Select, MenuItem, InputLabel, FormControl } from '@material-ui/core'
 import AddIcon from '@material-ui/icons/Add'
 
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { Query } from 'react-apollo'
+import { useMutation } from '@apollo/react-hooks'
 
 import CREATE_TODO from '../../../apollo/mutations/todos/createTodo';
 import GET_TODOS from '../../../apollo/queries/todos/todos';
@@ -63,82 +64,86 @@ const CreateTodoModal = ({ isModalOpen, handleCloseModal }) => {
     })
   }
  
-  const { loading, error, data } = useQuery(GET_CATEGORIES);
-
-  if (loading) return null;
-  if (error) return `Error! ${error.message}`;
-
   return (
-    <div>
-      <Dialog fullWidth={true} open={isModalOpen} onClose={handleCloseModal} color='default'>
-        <DialogTitle> 
-          <AddIcon className={classes.headingIcon} /> Добавить новую запись
-        </DialogTitle>
-        <DialogContent>
-          <form onSubmit={handleFormSubmit} noValidate autoComplete="off" className={classes.form}>
-            <TextField 
-              name='title'
-              label="Название вашей записи"
-              margin="normal"
-              placeholder='Название вашей записи'
-              variant="outlined"
-              className={classes.textField}
-              value={fieldsData.title}
-              onChange={handleFieldChange}
-              InputLabelProps={{
-                shrink: true,
-              }}
-            />
-            <TextField 
-              name='description'
-              label="Описание"
-              margin="normal"
-              placeholder='Описание'
-              variant="outlined"
-              className={classes.textField}
-              value={fieldsData.description}
-              onChange={handleFieldChange}
-              InputLabelProps={{
-                shrink: true,
-              }}
-            />
-            <FormControl variant="outlined" className={classes.selectField}>
-              <InputLabel id="category-outlined-label">Категория</InputLabel>
-              <Select
-                labelId="category-outlined-label"
-                id="demo-simple-select-outlined"
-                name='category'
-                value={fieldsData.category}
-                onChange={handleFieldChange}
-                label="Категория"
-              >
-                {data.categories.map((category, i) => <MenuItem key={i} value={category.id}>{category.title}</MenuItem>)}
-              </Select>
-            </FormControl>
-            <TextField
-              name='deadline'
-              label="Дедлайн"
-              variant="outlined"
-              type="datetime-local"
-              className={classes.textField}
-              value={fieldsData.deadline}
-              onChange={handleFieldChange}
-              InputLabelProps={{
-                shrink: true,
-              }}
-            />
-            <DialogActions>
-              <Button type='submit' color="default">
-                Добавить
-              </Button>
-              <Button onClick={handleCloseModal} color="secondary">
-                Закрыть
-              </Button>
-            </DialogActions>
-          </form>
-        </DialogContent>
-      </Dialog>
-    </div>
+    <Query query={GET_CATEGORIES}>
+      {({ loading, error, data }) => {
+        if (loading) return null;
+        if (error) return `Error! ${error.message}`;
+
+        return (
+          <div>
+            <Dialog fullWidth={true} open={isModalOpen} onClose={handleCloseModal} color='default'>
+              <DialogTitle> 
+                <AddIcon className={classes.headingIcon} /> Добавить новую запись
+              </DialogTitle>
+              <DialogContent>
+                <form onSubmit={handleFormSubmit} noValidate autoComplete="off" className={classes.form}>
+                  <TextField 
+                    name='title'
+                    label="Название вашей записи"
+                    margin="normal"
+                    placeholder='Название вашей записи'
+                    variant="outlined"
+                    className={classes.textField}
+                    value={fieldsData.title}
+                    onChange={handleFieldChange}
+                    InputLabelProps={{
+                      shrink: true,
+                    }}
+                  />
+                  <TextField 
+                    name='description'
+                    label="Описание"
+                    margin="normal"
+                    placeholder='Описание'
+                    variant="outlined"
+                    className={classes.textField}
+                    value={fieldsData.description}
+                    onChange={handleFieldChange}
+                    InputLabelProps={{
+                      shrink: true,
+                    }}
+                  />
+                  <FormControl variant="outlined" className={classes.selectField}>
+                    <InputLabel id="category-outlined-label">Категория</InputLabel>
+                    <Select
+                      labelId="category-outlined-label"
+                      id="demo-simple-select-outlined"
+                      name='category'
+                      value={fieldsData.category}
+                      onChange={handleFieldChange}
+                      label="Категория"
+                    >
+                      {data.categories.map((category, i) => <MenuItem key={i} value={category.id}>{category.title}</MenuItem>)}
+                    </Select>
+                  </FormControl>
+                  <TextField
+                    name='deadline'
+                    label="Дедлайн"
+                    variant="outlined"
+                    type="datetime-local"
+                    className={classes.textField}
+                    value={fieldsData.deadline}
+                    onChange={handleFieldChange}
+                    InputLabelProps={{
+                      shrink: true,
+                    }}
+                  />
+                  <DialogActions>
+                    <Button type='submit' color="default">
+                      Добавить
+                    </Button>
+                    <Button onClick={handleCloseModal} color="secondary">
+                      Закрыть
+                    </Button>
+                  </DialogActions>
+                </form>
+              </DialogContent>
+            </Dialog>
+          </div>
+        )
+      }}
+    </Query>
   )
 }
 

client/src/components/Modals/Todo/UpdateTodoModal.js

@@ -3,7 +3,9 @@ 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 categories from '../../../db/categories.json'
+import { Query } from 'react-apollo'
+import { useQuery } from '@apollo/react-hooks'
+import GET_CATEGORIES from '../../../apollo/queries/categories/categories'
 
 const UpdateTodoModal = ({ isModalOpen, handleCloseModal, selectedTodo, setSelectedTodo }) => {
   const classes = useStyles()
@@ -32,6 +34,9 @@ const UpdateTodoModal = ({ isModalOpen, handleCloseModal, selectedTodo, setSelec
     })
   }
 
+  const { loading, error, data } = useQuery(GET_CATEGORIES)
+  if (loading) return null
+  if (error) return `Error: ${error}`
   return (
     <div>
       <Dialog fullWidth={true} open={isModalOpen} onClose={handleCloseModal} color='default'>
@@ -77,7 +82,7 @@ const UpdateTodoModal = ({ isModalOpen, handleCloseModal, selectedTodo, setSelec
                 onChange={handleFieldChange}
                 label="Категория"
               >
-                {categories.map((category, i) => <MenuItem key={i} value={category._id.$oid}>{category.title}</MenuItem>)}
+                {data.categories.map((category, i) => <MenuItem key={i} value={category.id}>{category.title}</MenuItem>)}
               </Select>
             </FormControl>
             <TextField

client/src/components/Todos/Todos.js

@@ -28,7 +28,7 @@ const Todos = ({ data, fromTrashContainer }) => {
       id: todo.id,
       title: todo.title,
       description: todo.description,
-      category: todo.category,
+      category: todo.category.id,
       deadline: todo.deadline
     }