From fd5b183d00996817a2c48aa3a80ab32d863ae436 Mon Sep 17 00:00:00 2001
From: davidwells <david@inboundnow.com>
Date: Mon, 11 Jun 2018 18:49:12 -0700
Subject: [PATCH] add create and delete

---
 src/App.js | 52 +++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 49 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index 8acf65a..f2c5ebe 100644
--- a/src/App.js
+++ b/src/App.js
@@ -16,16 +16,52 @@ class App extends Component {
       .then((myJson) => {
         console.log(myJson)
         this.setState({
-          todos: myJson.data
+          todos: myJson
         })
       })
   }
+  saveTodo = (e) => {
+    e.preventDefault();
+
+    if (!this.inputElement.value) {
+      alert('Please add todo text')
+      return false
+    }
+    fetch('/.netlify/functions/todos-create', {
+      body: JSON.stringify({
+        title: this.inputElement.value
+      }),
+      method: 'POST',
+      // mode: 'cors', // no-cors, cors, *same-origin
+    })
+    .then(response => response.json())
+    .then((json) => {
+      console.log(json)
+    }).catch((e) => {
+      console.log('errrrr', e)
+    })
+  }
+  deleteTodo = (e) => {
+    const todoId = e.target.dataset.id
+    console.log(`Delete todo ${todoId}`)
+    fetch(`/.netlify/functions/todos-delete/${todoId}`, {
+      method: 'POST',
+    })
+    .then(response => response.json())
+    .then((json) => {
+      console.log(json)
+    }).catch((e) => {
+      console.log('errrrr', e)
+    })
+  }
   renderTodos() {
     const { todos } = this.state
     return todos.map((todo, i) => {
+      const { data } = todo
+      const id = todo.ref['@ref'].split('/').pop()
       return (
-        <div key={i}>
-          {todo['@ref']}
+        <div key={i} style={{borderBottom: '1px solid black', padding: 20}}>
+          {data.title} <button data-id={id} onClick={this.deleteTodo}>delete</button>
         </div>
       )
     })
@@ -40,6 +76,16 @@ class App extends Component {
         <p className="App-intro">
           Using FaunaDB & netlify functions
         </p>
+        <div>
+          <h2>Create todo</h2>
+          <form className='feature-add' onSubmit={this.saveTodo}>
+            <input placeholder='Todo Info' name='name' ref={el => this.inputElement = el} />
+            <button>
+              Create todo
+            </button>
+          </form>
+        </div>
+
         {this.renderTodos()}
       </div>
     )