Commit 47b6c107 by Kristian Freeman

Manufacture widgets

parent 3bed60d5
......@@ -3,26 +3,61 @@ import "./index.css"
import "./normalize.css"
import Materials from './Materials'
import Manufacturing from './Manufacturing'
const Header = () => <img className="logo" src="/logo.png" />
const Error = (props) => <h4>{props.message}</h4>
class App extends Component {
constructor() {
super()
this.state = {
materials: [
{ name: 'Dowel', count: 2 },
{ name: 'Screw', count: 8 },
{ name: 'Wheel', count: 3 }
]
error: null,
materials: {
dowel: { count: 2 },
screw: { count: 8 },
wheel: { count: 3 }
},
widgets: []
}
this.addWidget = this.addWidget.bind(this)
this.presentError = this.presentError.bind(this)
}
addWidget() {
const newState = {}
const newMaterials = this.state.materials
newMaterials.dowel.count -= 1
newMaterials.screw.count -= 2
newMaterials.wheel.count -= 2
const newWidget = { created: Date.now() }
const newWidgetsInventory = [].concat(this.state.widgets, newWidget)
this.setState(Object.assign({}, this.state, {
materials: newMaterials,
widgets: newWidgetsInventory
}))
}
presentError(message) {
this.setState(Object.assign({}, this.state, { error: message }))
}
render() {
const { materials } = this.state
const { error, materials, widgets } = this.state
return (
<div>
<Header />
{error ? <Error message={error} /> : null}
<Materials materials={materials} />
<Manufacturing
addWidget={this.addWidget}
materials={materials}
presentError={this.presentError}
/>
</div>
);
}
......
import React, { Component } from 'react';
class Manufacturing extends Component {
constructor() {
super()
this.manufactureWidget = this.manufactureWidget.bind(this)
}
manufactureWidget() {
const { addWidget, materials, presentError } = this.props
if (materials.dowel.count >= 1 && materials.screw.count >= 2 && materials.wheel.count >= 2) {
addWidget()
} else {
presentError("Not enough materials to create a widget")
}
}
render() {
return (
<div>
<h2>Manufacturing</h2>
<button onClick={this.manufactureWidget}>Manufacture widget</button>
</div>
);
}
}
export default Manufacturing;
......@@ -3,12 +3,14 @@ import React, { Component } from 'react';
class Materials extends Component {
render() {
const { materials } = this.props
const { dowel, screw, wheel } = materials
return (
<div>
<h2>Raw Materials</h2>
<ul>
{materials.map(material =>
<li key={material.name}>{material.name}: {material.count}</li>)}
<li>Dowel: {dowel.count}</li>
<li>Screw: {screw.count}</li>
<li>Wheel: {wheel.count}</li>
</ul>
</div>
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment