Skip to content

Instantly share code, notes, and snippets.

@kbighorse
Created February 5, 2020 19:44
Show Gist options
  • Save kbighorse/47597a6a1b66698f9e6b6f66b59de412 to your computer and use it in GitHub Desktop.
Save kbighorse/47597a6a1b66698f9e6b6f66b59de412 to your computer and use it in GitHub Desktop.
import React, { Component } from "react";
import Fish from "./Fish";
import Header from "./Header";
import Order from "./Order";
import Inventory from "./Inventory";
import sampleFishes from "../sample-fishes"
import base from "../base";
class App extends Component {
state = {
fishes: {},
order: {}
};
// lifecycle methods
componentDidMount() {
const { params } = this.props.match;
const localStorageRef = localStorage.getItem(params.storeId);
if (localStorageRef) {
this.setState({ order: JSON.parse(localStorageRef)})
}
this.ref = base.syncState(
`${params.storeId}/fishes`,
{
context: this,
state: "fishes"
}
);
}
componentDidUpdate() {
localStorage.setItem(
this.props.match.params.storeId,
JSON.stringify(this.state.order)
);
}
componentWillUnmount() {
base.removeBinding(this.ref);
}
// instance methods
addFish = fish => {
const fishes = {...this.state.fishes};
fishes[`fish${Date.now()}`] = fish;
this.setState({ fishes });
}
updateFish = (key, updatedFish) => {
const fishes = { ...this.state.fishes };
fishes[key] = updatedFish;
this.setState({ fishes });
}
loadSampleFishes = () => {
this.setState({ fishes: sampleFishes });
}
addToOrder = key => {
const order = {...this.state.order};
order[key] = order[key] + 1 || 1;
this.setState({order});
}
render() {
return (
<div className="catch-of-the-day">
<div className="menu">
<Header tagline="Fresh Seafood Market" age={25}/>
<ul className="fishes">
{
Object.keys(this.state.fishes).map(key => (
<Fish
key={key}
index={key}
details={this.state.fishes[key]}
addToOrder={this.addToOrder} />
))
}
</ul>
</div>
<Order fishes={this.state.fishes} order={this.state.order} />
<Inventory
addFish={this.addFish}
editFish={this.editFish}
loadSampleFishes={this.loadSampleFishes}
fishes={this.state.fishes}
/>
</div>
);
}
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment