diff --git a/client/src/App.js b/client/src/App.js
index 90cfb83..598cca1 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -7,20 +7,30 @@ import TrashContainer from './containers/TrashContainer/TrashContainer'
import NotFoundContainer from './containers/NotFoundContainer/NotFoundContainer'
import CssBaseLine from '@material-ui/core/CssBaseline'
+import ApolloClient from 'apollo-boost'
+import { ApolloProvider } from 'react-apollo'
+
+
+const client = new ApolloClient({
+ uri: 'http://localhost:3001'
+})
+
const App = ({ history }) => {
return (
- <>
-
-
-
-
-
-
-
-
-
-
-
+
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
)
}
diff --git a/client/src/apollo/mutations/todos/createTodo.js b/client/src/apollo/mutations/todos/createTodo.js
new file mode 100644
index 0000000..dbc19c6
--- /dev/null
+++ b/client/src/apollo/mutations/todos/createTodo.js
@@ -0,0 +1,18 @@
+import gql from 'graphql-tag'
+
+const CREATE_TODO = gql`
+ mutation CreateTodo($title: String! $description: String! $deadline: String! $categoryId: String!) {
+ createTodo(title: $title description: $description deadline: $deadline categoryId: $categoryId) {
+ id
+ title
+ description
+ status
+ deadline
+ category {
+ title
+ }
+ }
+ }
+`
+
+export default CREATE_TODO
\ No newline at end of file
diff --git a/client/src/apollo/queries/categories/categories.js b/client/src/apollo/queries/categories/categories.js
new file mode 100644
index 0000000..f6d687b
--- /dev/null
+++ b/client/src/apollo/queries/categories/categories.js
@@ -0,0 +1,12 @@
+import gql from 'graphql-tag'
+
+const GET_CATEGORIES = gql`
+ {
+ categories {
+ id
+ title
+ }
+ }
+`
+
+export default GET_CATEGORIES
\ No newline at end of file
diff --git a/client/src/apollo/queries/todos/todos.js b/client/src/apollo/queries/todos/todos.js
new file mode 100644
index 0000000..f5f29e9
--- /dev/null
+++ b/client/src/apollo/queries/todos/todos.js
@@ -0,0 +1,18 @@
+import gql from 'graphql-tag'
+
+const GET_TODOS = gql`
+ query getTodos {
+ todos {
+ id
+ title
+ description
+ status
+ deadline
+ category {
+ title
+ }
+ }
+ }
+`;
+
+export default GET_TODOS
\ No newline at end of file
diff --git a/client/src/apollo/queries/todos/todosByCategory.js b/client/src/apollo/queries/todos/todosByCategory.js
new file mode 100644
index 0000000..ce084cf
--- /dev/null
+++ b/client/src/apollo/queries/todos/todosByCategory.js
@@ -0,0 +1,22 @@
+import gql from 'graphql-tag'
+
+const GET_TODOS_BY_CATEGORY = gql`
+query getTodosByCategory($id: ID!) {
+ category(id: $id) {
+ id
+ title
+ todos {
+ id
+ title
+ description
+ status
+ deadline
+ category {
+ title
+ }
+ }
+ }
+}
+`
+
+export default GET_TODOS_BY_CATEGORY
\ No newline at end of file
diff --git a/client/src/components/Categories/Categories.js b/client/src/components/Categories/Categories.js
index 9cf6739..70ac9f4 100644
--- a/client/src/components/Categories/Categories.js
+++ b/client/src/components/Categories/Categories.js
@@ -5,8 +5,8 @@ import { ListItem, ListItemText } from '@material-ui/core'
const Categories = ({ data, history, classes }) => {
return data.map((category, i) => {
return (
-
-
+
+
diff --git a/client/src/components/Modals/Todo/CreateTodoModal.js b/client/src/components/Modals/Todo/CreateTodoModal.js
index 812dd8c..7e8cde3 100644
--- a/client/src/components/Modals/Todo/CreateTodoModal.js
+++ b/client/src/components/Modals/Todo/CreateTodoModal.js
@@ -3,7 +3,11 @@ 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 categories from '../../../db/categories.json'
+import { useQuery, useMutation } from '@apollo/react-hooks'
+
+import CREATE_TODO from '../../../apollo/mutations/todos/createTodo';
+import GET_TODOS from '../../../apollo/queries/todos/todos';
+import GET_CATEGORIES from '../../../apollo/queries/categories/categories'
const CreateTodoModal = ({ isModalOpen, handleCloseModal }) => {
const classes = useStyles()
@@ -14,23 +18,39 @@ const CreateTodoModal = ({ isModalOpen, handleCloseModal }) => {
deadline: ''
})
- const handleFormSubmit = e => {
- e.preventDefault()
- const elements = e.target.elements
- const data = {
- title: elements.title.value,
- description: elements.description.value,
- categoryId: elements.category.value,
- deadline: elements.deadline.value
+ // create todo mutation
+ const [createTodo] = useMutation(CREATE_TODO, {
+ update(cache, { data: { createTodo } }) {
+ const { todos } = cache.readQuery({ query: GET_TODOS })
+ cache.writeQuery({
+ query: GET_TODOS,
+ data: { todos: todos.concat([createTodo]) }
+ });
+ }
+ })
+
+ const handleFormSubmit = e => {
+ try {
+ e.preventDefault()
+ const elements = e.target.elements
+ createTodo({
+ variables: {
+ title: elements.title.value,
+ description: elements.description.value,
+ categoryId: elements.category.value,
+ deadline: elements.deadline.value
+ }
+ })
+ handleCloseModal()
+ setFieldsData({
+ title: '',
+ description: '',
+ category: '',
+ deadline: ''
+ })
+ } catch (error) {
+ console.log(error)
}
- handleCloseModal()
- setFieldsData({
- title: '',
- description: '',
- category: '',
- deadline: ''
- })
- console.log('Request on create todo:', data)
}
const handleFieldChange = e => {
@@ -43,6 +63,11 @@ const CreateTodoModal = ({ isModalOpen, handleCloseModal }) => {
})
}
+ const { loading, error, data } = useQuery(GET_CATEGORIES);
+
+ if (loading) return null;
+ if (error) return `Error! ${error.message}`;
+
return (