Skip to content

Instantly share code, notes, and snippets.

@dabit3
Last active April 5, 2022 05:09

Revisions

  1. dabit3 revised this gist Nov 6, 2018. 1 changed file with 18 additions and 18 deletions.
    36 changes: 18 additions & 18 deletions App.js
    Original 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.js'
    import { createRestaurant } from './graphql/mutations.js'
    import { listRestaurants } from './graphql/queries'
    import { createRestaurant } from './graphql/mutations'

    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))
    @@ -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">
  2. dabit3 created this gist Nov 6, 2018.
    95 changes: 95 additions & 0 deletions App.js
    Original 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