Last active
April 5, 2022 05:09
Revisions
-
dabit3 revised this gist
Nov 6, 2018 . 1 changed file with 18 additions and 18 deletions.There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -3,27 +3,11 @@ import logo from './logo.svg'; import './App.css'; import { API, graphqlOperation } from 'aws-amplify' import { listRestaurants } from './graphql/queries' import { createRestaurant } from './graphql/mutations' class App extends Component { state = { name: '', description: '', restaurants: [] } async componentDidMount() { try { const apiData = await API.graphql(graphqlOperation(listRestaurants)) @@ -33,6 +17,22 @@ createRestaurant = async () => { console.log('error: ', err) } } onChange = e => { this.setState({ [e.target.name]: e.target.value }) } createRestaurant = async () => { const { name, description } = this.state if (name === '' || description === '') return try { const restaurant = { name, description } const restaurants = [...this.state.restaurants, restaurant] this.setState({ restaurants, name: '', description: '' }) await API.graphql(graphqlOperation(createRestaurant, {input: restaurant})) console.log('restaurant successfully created!') } catch (err) { console.log('error: ', err) } } render() { return ( <div className="App"> -
dabit3 created this gist
Nov 6, 2018 .There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,95 @@ import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import { API, graphqlOperation } from 'aws-amplify' import { listRestaurants } from './graphql/queries.js' import { createRestaurant } from './graphql/mutations.js' class App extends Component { state = { name: '', description: '', restaurants: [] } onChange = e => { this.setState({ [e.target.name]: e.target.value }) } createRestaurant = async () => { const { name, description } = this.state if (name === '' || description === '') return try { const restaurant = { name, description } const restaurants = [...this.state.restaurants, restaurant] this.setState({ restaurants, name: '', description: '' }) await API.graphql(graphqlOperation(createRestaurant, {input: restaurant})) console.log('restaurant successfully created!') } catch (err) { console.log('error: ', err) } } async componentDidMount() { try { const apiData = await API.graphql(graphqlOperation(listRestaurants)) const restaurants = apiData.data.listRestaurants.items this.setState({ restaurants }) } catch (err) { console.log('error: ', err) } } render() { return ( <div className="App"> <div style={styles.inputContainer}> <input name='name' placeholder='restaurant name' onChange={this.onChange} value={this.state.name} style={styles.input} /> <input name='description' placeholder='restaurant description' onChange={this.onChange} value={this.state.description} style={styles.input} /> </div> <button style={styles.button} onClick={this.createRestaurant} >Create Restaurant</button> { this.state.restaurants.map((rest, i) => ( <div key={i} style={styles.item}> <p style={styles.name}>{rest.name}</p> <p style={styles.description}>{rest.description}</p> </div> )) } </div> ); } } const styles = { inputContainer: { margin: '0 auto', display: 'flex', flexDirection: 'column', width: 300 }, button: { border: 'none', backgroundColor: '#ddd', padding: '10px 30px' }, input: { fontSize: 18, border: 'none', margin: 10, height: 35, backgroundColor: "#ddd", padding: 8 }, item: { padding: 10, borderBottom: '2px solid #ddd' }, name: { fontSize: 22 }, description: { color: 'rgba(0, 0, 0, .45)' } } export default App