bubble/todo-app
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/todo-app.git synced 2026-10-11 10:29:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

added query modal for categories

Browse Source
This commit is contained in:
Sergey Yarkov 2020-06-14 16:40:51 +03:00
parent 02ad7d86de
commit 3bc457b5d2
5 changed files with 92 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/apollo/queries/todos/todos.js
View File

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

2
client/src/apollo/queries/todos/todosByCategory.js
View File

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

11
client/src/components/Modals/Todo/CreateTodoModal.js
View File

@ -3,7 +3,8 @@ import useStyles from '../styles'
import { Dialog, DialogContent, DialogTitle, DialogActions, Button, TextField, Select, MenuItem, InputLabel, FormControl } from '@material-ui/core' import { Dialog, DialogContent, DialogTitle, DialogActions, Button, TextField, Select, MenuItem, InputLabel, FormControl } from '@material-ui/core'
import AddIcon from '@material-ui/icons/Add' 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 CREATE_TODO from '../../../apollo/mutations/todos/createTodo';
import GET_TODOS from '../../../apollo/queries/todos/todos'; import GET_TODOS from '../../../apollo/queries/todos/todos';
@ -63,8 +64,9 @@ const CreateTodoModal = ({ isModalOpen, handleCloseModal }) => {
}) })
} }
const { loading, error, data } = useQuery(GET_CATEGORIES); return (
<Query query={GET_CATEGORIES}>
{({ loading, error, data }) => {
if (loading) return null; if (loading) return null;
if (error) return `Error! ${error.message}`; if (error) return `Error! ${error.message}`;
@ -140,6 +142,9 @@ const CreateTodoModal = ({ isModalOpen, handleCloseModal }) => {
</Dialog> </Dialog>
</div> </div>
) )
}}
</Query>
)
} }
export default CreateTodoModal export default CreateTodoModal

9
client/src/components/Modals/Todo/UpdateTodoModal.js
View File

@ -3,7 +3,9 @@ import useStyles from '../styles'
import { Dialog, DialogContent, DialogTitle, DialogActions, Button, TextField, Select, MenuItem, InputLabel, FormControl } from '@material-ui/core' import { Dialog, DialogContent, DialogTitle, DialogActions, Button, TextField, Select, MenuItem, InputLabel, FormControl } from '@material-ui/core'
import EditIcon from '@material-ui/icons/Edit' 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 UpdateTodoModal = ({ isModalOpen, handleCloseModal, selectedTodo, setSelectedTodo }) => {
const classes = useStyles() 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 ( return (
<div> <div>
<Dialog fullWidth={true} open={isModalOpen} onClose={handleCloseModal} color='default'> <Dialog fullWidth={true} open={isModalOpen} onClose={handleCloseModal} color='default'>
@ -77,7 +82,7 @@ const UpdateTodoModal = ({ isModalOpen, handleCloseModal, selectedTodo, setSelec
onChange={handleFieldChange} onChange={handleFieldChange}
label="Категория" 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> </Select>
</FormControl> </FormControl>
<TextField <TextField

2
client/src/components/Todos/Todos.js
View File

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