95 lines
2.3 KiB
JavaScript
95 lines
2.3 KiB
JavaScript
import React, { Component } from 'react'
|
|
import logo from './logo.svg'
|
|
import './App.css'
|
|
|
|
class App extends Component {
|
|
state = {
|
|
todos: []
|
|
}
|
|
componentDidMount() {
|
|
console.log('fetch items')
|
|
fetch('/.netlify/functions/todos-read-all')
|
|
.then((response) => {
|
|
console.log(response)
|
|
return response.json()
|
|
})
|
|
.then((myJson) => {
|
|
console.log(myJson)
|
|
this.setState({
|
|
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} style={{borderBottom: '1px solid black', padding: 20}}>
|
|
{data.title} <button data-id={id} onClick={this.deleteTodo}>delete</button>
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
render() {
|
|
return (
|
|
<div className="App">
|
|
<header className="App-header">
|
|
<img src={logo} className="App-logo" alt="logo" />
|
|
<h1 className="App-title">Netlify + Fauna DB</h1>
|
|
</header>
|
|
<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>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default App
|