Skip to content

Instantly share code, notes, and snippets.

@superhighfives
Last active March 6, 2017 14:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save superhighfives/9f8b22c31216a6742ad69d251792b63e to your computer and use it in GitHub Desktop.
Save superhighfives/9f8b22c31216a6742ad69d251792b63e to your computer and use it in GitHub Desktop.
Rails 5 API + ActiveAdmin + create-react-app on Heroku
import React, { Component } from 'react'
import { Container, Header, Segment, Button, Icon, Dimmer, Loader, Divider } from 'semantic-ui-react'
class App extends Component {
constructor () {
super()
this.state = {}
this.getDrinks = this.getDrinks.bind(this)
this.getDrink = this.getDrink.bind(this)
}
componentDidMount () {
this.getDrinks()
}
fetch (endpoint) {
return new Promise((resolve, reject) => {
window.fetch(endpoint)
.then(response => response.json())
.then(json => resolve(json))
.catch(error => reject(error))
})
}
getDrinks () {
this.fetch('api/drinks')
.then(drinks => {
this.setState({drinks: drinks})
this.getDrink(drinks[0].id)
})
}
getDrink (id) {
this.fetch(`api/drinks/${id}`)
.then(drink => this.setState({drink: drink}))
}
render () {
let {drinks, drink} = this.state
return drinks
? <Container text>
<Header as='h2' icon textAlign='center'>
<Icon name='cocktail' circular />
<Header.Content>
List of Ingredients
</Header.Content>
</Header>
<Button.Group fluid widths={drinks.length}>
{Object.keys(drinks).map((key) => {
return <Button active={drink && drink.id === drinks[key].id} fluid key={key} onClick={() => this.getDrink(drinks[key].id)}>
{drinks[key].title}
</Button>
})}
</Button.Group>
<Divider hidden />
{drink &&
<Container>
<Header as='h2'>{drink.title}</Header>
{drink.description && <p>{drink.description}</p>}
{drink.ingredients &&
<Segment.Group>
{drink.ingredients.map((ingredient, i) => <Segment key={i}>{ingredient.description}</Segment>)}
</Segment.Group>
}
{drink.steps && <p>{drink.steps}</p>}
</Container>
}
</Container>
: <Container text>
<Dimmer active inverted>
<Loader content='Loading' />
</Dimmer>
</Container>
}
}
export default App
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment