From b72c13100a045d9dba70c5f0256ed153f8901da9 Mon Sep 17 00:00:00 2001
From: Ruidy <r.nemausat@empfohlen.de>
Date: Wed, 28 Oct 2020 16:35:52 +0100
Subject: [PATCH] createTodo mutation

---
 src/containers/home/index.tsx              | 50 ++++++++++++++++------
 src/core/services/createTodo.ts            | 23 ++++++++++
 src/core/services/{todo.ts => listTodo.ts} |  0
 3 files changed, 61 insertions(+), 12 deletions(-)
 create mode 100644 src/core/services/createTodo.ts
 rename src/core/services/{todo.ts => listTodo.ts} (100%)

diff --git a/src/containers/home/index.tsx b/src/containers/home/index.tsx
index 7f56d7a..5861ad5 100644
--- a/src/containers/home/index.tsx
+++ b/src/containers/home/index.tsx
@@ -1,29 +1,55 @@
-import React, { FC } from 'react';
+import React, { ChangeEvent, FC, FormEvent, useState } from 'react';
 
 import TodoList from './TodoList';
 import { Button } from '../../components/button';
 import { Container } from '../../components/container';
 
-import { useListTodos } from '../../core/services/todo';
+import { useListTodos } from '../../core/services/listTodo';
+import { useCreateTodo } from '../../core/services/createTodo';
 
 export const Home: FC = () => {
+  const [todoTitle, setTodoTitle] = useState<string>('');
   const { loading, error, data } = useListTodos();
+  const { createTodo } = useCreateTodo(todoTitle);
 
-  if (error) {
-    return <p>Sorry...</p>;
-  }
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setTodoTitle(() => e.target.value);
+  };
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    createTodo();
+  };
 
   return (
     <Container>
       <h1>Your tasks</h1>
       <p>Hi there!</p>
-      {!loading && !!data && <TodoList todos={data.listTodos} />}
-      <Button primary onClick={() => console.log('Clicked Normal Button')}>
-        Normal Button
-      </Button>
-      <Button primary onClick={() => console.log('Clicked Primary Button')}>
-        Primary Button
-      </Button>
+      {error ? (
+        <h3>{error.message}. Sorry...</h3>
+      ) : (
+        !loading &&
+        !!data && (
+          <>
+            <TodoList todos={data.listTodos} />
+            <form onSubmit={handleSubmit}>
+              <input type="text" value={todoTitle} onChange={handleChange} />
+              <Button
+                primary={false}
+                onClick={() => console.log('Clicked Normal Button')}
+              >
+                Normal Button
+              </Button>
+              <Button
+                primary
+                onClick={() => console.log('Clicked Primary Button')}
+              >
+                Primary Button
+              </Button>
+            </form>
+          </>
+        )
+      )}
     </Container>
   );
 };
diff --git a/src/core/services/createTodo.ts b/src/core/services/createTodo.ts
new file mode 100644
index 0000000..7e398fd
--- /dev/null
+++ b/src/core/services/createTodo.ts
@@ -0,0 +1,23 @@
+import { gql, useMutation } from '@apollo/client';
+
+import Todo from '../models/todo';
+
+const CREATE_TODO = gql`
+  mutation CreateTodo($title: String!) {
+    createTodo(title: $title) {
+      todo {
+        todoId
+        title
+        isDone
+      }
+    }
+  }
+`;
+
+export const useCreateTodo = (todoTitle: string) => {
+  const [createTodo, result] = useMutation<
+    { createTodo: Todo },
+    { title: string }
+  >(CREATE_TODO, { variables: { title: todoTitle } });
+  return { createTodo, result };
+};
diff --git a/src/core/services/todo.ts b/src/core/services/listTodo.ts
similarity index 100%
rename from src/core/services/todo.ts
rename to src/core/services/listTodo.ts