...
 
Commits (2)
import React, {Component} from 'react';
import './index.css';
import './normalize.css';
import React, { Component } from "react";
import "./index.css";
import "./normalize.css";
import Header from './Header';
import Header from "./Header";
// Add the children prop underneath Header
const App = ({children}) => (
const App = ({ children }) => (
<div>
<Header />
{children}
</div>
);
// Set the default export for this file to be the App component.
export default App;
import React, {Component} from 'react';
import React, { Component } from "react";
// Import two named functions from './actions':
// - attemptWidgetCreation
// - orderMaterials
//
// Remember that named functions are imported in the format
// import { namedFunction } from './module'
// Import the named function connect from 'react-redux'
import { attemptWidgetCreation, orderMaterials } from "./actions";
import { connect } from "react-redux";
class Inventory extends Component {
render() {
const {
attemptWidgetCreation,
orderMaterials,
warehouse: {materials: {dowel, screw, wheel}, widgets},
warehouse: {
materials: { dowel, screw, wheel },
widgets
}
} = this.props;
return (
......@@ -35,14 +32,9 @@ class Inventory extends Component {
}
}
// Set component to the response of the connect function, with two arguments:
// 1) a function with an argument state, that simply returns state
// 2) an object with:
// key attemptWidgetCreation set to attemptWidgetCreation
// key orderMaterials set to orderMaterials
//
// This response should itself be called as a function, with the argument Inventory
// e.g. connect(1, 2)(3)
const component = null;
const component = connect(
state => state,
{ attemptWidgetCreation, orderMaterials }
)(Inventory);
export default component;
import React, {Component} from 'react';
import React, { Component } from "react";
// Import the named function 'generateOrder' from './actions':
//
// Remember that named functions are imported in the format
// import { namedFunction } from './module'
// Import the named function connect from 'react-redux'
import { generateOrder } from "./actions";
import { connect } from "react-redux";
class Orders extends Component {
render() {
const {generateOrder, warehouse: {orders}} = this.props;
const {
generateOrder,
warehouse: { orders }
} = this.props;
return (
<div>
......@@ -26,12 +25,8 @@ class Orders extends Component {
}
}
// Set component to the response of the connect function, with two arguments:
// 1) a function with an argument state, that simply returns state
// 2) an object with:
// key generateOrder set to generateOrder
//
// This response should itself be called as a function, with the argument Orders
// e.g. connect(1, 2)(3)
const component = null;
const component = connect(
state => state,
{ generateOrder }
)(Orders);
export default component;
import React, {Component} from 'react';
import React, { Component } from "react";
// Import the named function 'checkOrderForPackaging' from './actions':
//
// Remember that named functions are imported in the format
// import { namedFunction } from './module'
import { checkOrderForPackaging } from "./actions";
// Import the named function connect from 'react-redux'
import { connect } from "react-redux";
class Packaging extends Component {
render() {
const {warehouse: {orders, packaged}, checkOrderForPackaging} = this.props;
const {
warehouse: { orders, packaged },
checkOrderForPackaging
} = this.props;
return (
<div>
<h2>Packaging</h2>
......@@ -24,12 +24,9 @@ class Packaging extends Component {
}
}
// Set component to the response of the connect function, with two arguments:
// 1) a function with an argument state, that simply returns state
// 2) an object with:
// key checkOrderForPackaging set to checkOrderForPackaging
//
// This response should itself be called as a function, with the argument Packaging
// e.g. connect(1, 2)(3)
const component = null;
const component = connect(
state => state,
{ checkOrderForPackaging }
)(Packaging);
export default component;
import React, {Component} from 'react';
import {connect} from 'react-redux';
import React, { Component } from "react";
import { connect } from "react-redux";
class QA extends Component {
render() {
// Set the variable failed to this.props.warehouse.failed.
const {
warehouse: { failed }
} = this.props;
return (
<div>
......
// Import the following named constants from './constants':
// - ADD_WIDGET
// - GENERATE_ORDER
// - ORDER_MATERIALS
// - PACKAGE_ORDER
// - PRESENT_ERROR
// - SHIP_ORDER
// - DOWELS_NEEDED
// - SCREWS_NEEDED
// - WHEELS_NEEDED
import {
ADD_WIDGET,
GENERATE_ORDER,
ORDER_MATERIALS,
PACKAGE_ORDER,
PRESENT_ERROR,
SHIP_ORDER,
DOWELS_NEEDED,
SCREWS_NEEDED,
WHEELS_NEEDED
} from "./constants";
export function attemptWidgetCreation() {
const addWidget = () => ({ date: Date.now(), type: ADD_WIDGET });
const generateOrder = () => ({ date: Date.now(), type: GENERATE_ORDER });
const orderMaterials = () => ({ type: ORDER_MATERIALS });
function attemptWidgetCreation() {
return (dispatch, getState) => {
const {warehouse: {materials}} = getState();
const {dowel, screw, wheel} = materials;
const {
warehouse: { materials }
} = getState();
const { dowel, screw, wheel } = materials;
if (
dowel.count >= DOWELS_NEEDED &&
......@@ -21,53 +28,41 @@ export function attemptWidgetCreation() {
) {
dispatch(addWidget());
} else {
dispatch(presentError('Not enough materials to create a widget'));
dispatch(presentError("Not enough materials to create a widget"));
}
};
}
// Define the function addWidget, which returns an object:
// - the key "date" should be set to Date.now()
// - the key "type" should be the constant ADD_WIDGET
// Define the function generateOrder, which returns an object:
// - the key "date" should be set to Date.now()
// - the key "type" should be the constant GENERATE_ORDER
// Define the function orderMaterials, which returns an object:
// - the key "type" should be the constant ORDER_MATERIALS
export function checkOrderForPackaging() {
function checkOrderForPackaging() {
return (dispatch, getState) => {
const {warehouse: {orders, widgets}} = getState();
const {
warehouse: { orders, widgets }
} = getState();
const order = orders[0];
if (order.widgets <= widgets.length) {
dispatch(packageOrder(order));
} else {
dispatch(presentError('Not enough widgets to fill order!'));
dispatch(presentError("Not enough widgets to fill order!"));
}
};
}
// Define the function packageOrder, which takes an argument "order" and returns an object:
// - the key "type" should be the constant PACKAGE_ORDER
// - the key "order" should be set to the argument order
// Define the function shipOrder, which and returns an object:
// - the key "type" should be the constant SHIP_ORDER
const packageOrder = order => ({ type: PACKAGE_ORDER, order });
const shipOrder = order => ({ type: SHIP_ORDER });
export function presentError(message) {
function presentError(message) {
return {
type: PRESENT_ERROR,
message,
message
};
}
export default {
export {
addWidget,
attemptWidgetCreation,
generateOrder,
orderMaterials,
packageOrder,
presentError,
shipOrder,
shipOrder
};
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";
import {Provider} from 'react-redux';
import {createStore, combineReducers, applyMiddleware} from 'redux';
import { Provider } from "react-redux";
import { createStore, combineReducers, applyMiddleware } from "redux";
import {
ConnectedRouter,
routerReducer,
routerMiddleware,
} from 'react-router-redux';
import {Link} from 'react-router-dom';
import {Route} from 'react-router';
import reduxLogger from 'redux-logger';
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';
routerMiddleware
} from "react-router-redux";
import { Link } from "react-router-dom";
import { Route } from "react-router";
import reduxLogger from "redux-logger";
import thunk from "redux-thunk";
import createHistory from "history/createBrowserHistory";
import reducer from './reducer';
import routes from './routes';
import reducer from "./reducer";
import routes from "./routes";
const history = createHistory();
......@@ -39,23 +39,20 @@ const routeList = routes.map(route => (
/>
));
// Set the variable store as the result of the function createStore, with two arguments:
// 1) the response of the combineReducers function, with a hash passed in as the argument:
// - set the key router to routerReducer
// - set the key warehouse to reducer
// 2) the response of the applyMiddleware function, with the arguments:
// - the response of the routerMiddleware function, with history passed as an argument
// - reduxLogger
// - thunk
const store = null;
// First, we need to set up our application and wrap it in the
// correct Redux/React Router components. Define the app variable as:
//
// A Provider component with the prop "store" passed in (with the value of the variable store)
// A child ConnectedRouter component with the prop "history" passed in (with the value of the variable history)
// A child <App> component
// With child linkList and routeList variables
const app = null;
ReactDOM.render(app, document.getElementById('root'));
const store = createStore(
combineReducers({ router: routerReducer, warehouse: reducer }),
applyMiddleware(routerMiddleware(history), reduxLogger, thunk)
);
const app = (
<Provider store={store}>
<ConnectedRouter history={history}>
<App>
{linkList}
{routeList}
</App>
</ConnectedRouter>
</Provider>
);
ReactDOM.render(app, document.getElementById("root"));
// Import the following named constants from './constants':
// - ADD_WIDGET
// - GENERATE_ORDER
// - ORDER_MATERIALS
// - PACKAGE_ORDER
// - PRESENT_ERROR
// - SHIP_ORDER
// - DOWELS_NEEDED
// - SCREWS_NEEDED
// - WHEELS_NEEDED
import {
ADD_WIDGET,
GENERATE_ORDER,
ORDER_MATERIALS,
PACKAGE_ORDER,
PRESENT_ERROR,
SHIP_ORDER,
DOWELS_NEEDED,
SCREWS_NEEDED,
WHEELS_NEEDED
} from "./constants";
const initialState = {
error: null,
failed: 0,
orders: [],
materials: {
dowel: {count: 2},
screw: {count: 8},
wheel: {count: 3},
dowel: { count: 2 },
screw: { count: 8 },
wheel: { count: 3 }
},
packaged: 0,
shipped: 0,
widgets: [],
widgets: []
};
const addWidget = (state, date) => {
......@@ -29,16 +30,16 @@ const addWidget = (state, date) => {
newMaterials.screw.count -= SCREWS_NEEDED;
newMaterials.wheel.count -= WHEELS_NEEDED;
let newState = {materials: newMaterials};
let newState = { materials: newMaterials };
if (qaCheck()) {
const newWidget = {created: date};
const newWidget = { created: date };
const newWidgetsInventory = [].concat(state.widgets, newWidget);
newState.error = null;
newState.widgets = newWidgetsInventory;
} else {
newState.failed = state.failed += 1;
newState.error = 'A widget failed QA!';
newState.error = "A widget failed QA!";
}
return Object.assign({}, state, newState);
......@@ -52,24 +53,24 @@ const qaCheck = () => {
const generateOrder = (state, date) => {
const newOrder = {
created: date,
widgets: Math.floor(Math.random() * 10) + 1,
widgets: Math.floor(Math.random() * 10) + 1
};
const newOrders = [].concat(state.orders, newOrder);
return Object.assign({}, state, {
orders: newOrders,
orders: newOrders
});
};
const orderMaterials = state => {
const {materials} = state;
const {dowel, screw, wheel} = materials;
const { materials } = state;
const { dowel, screw, wheel } = materials;
return Object.assign({}, state, {
error: null,
materials: {
dowel: {count: dowel.count + 10},
screw: {count: screw.count + 10},
wheel: {count: wheel.count + 10},
},
dowel: { count: dowel.count + 10 },
screw: { count: screw.count + 10 },
wheel: { count: wheel.count + 10 }
}
});
};
......@@ -87,13 +88,13 @@ const packageOrder = (state, order) => {
error: null,
orders: newOrders,
packaged: state.packaged + 1,
widgets: newWidgets,
widgets: newWidgets
});
};
const presentError = (state, message) => {
return Object.assign({}, state, {
error: message,
error: message
});
};
......@@ -101,7 +102,7 @@ const shipOrder = state => {
return Object.assign({}, state, {
error: null,
packaged: state.packaged - 1,
shipped: state.shipped + 1,
shipped: state.shipped + 1
});
};
......
import React from 'react';
import React from "react";
import {Route} from 'react-router';
import { Route } from "react-router";
import Home from './Home';
import Inventory from './Inventory';
import Orders from './Orders';
import Packaging from './Packaging';
import QA from './QA';
import Home from "./Home";
import Inventory from "./Inventory";
import Orders from "./Orders";
import Packaging from "./Packaging";
import QA from "./QA";
const routes = [
{
component: Home,
exact: true,
path: '/',
title: 'Home',
path: "/",
title: "Home"
},
{
component: Inventory,
path: '/inventory',
title: 'Inventory',
path: "/inventory",
title: "Inventory"
},
{
component: Orders,
path: '/orders',
title: 'Orders',
path: "/orders",
title: "Orders"
},
{
component: Packaging,
path: '/packaging',
title: 'Packaging',
path: "/packaging",
title: "Packaging"
},
{
component: QA,
path: '/qa',
title: 'QA',
},
path: "/qa",
title: "QA"
}
];
// Set the default export for this file to be the variable routes.
export default routes;
import React from 'react';
import {BrowserRouter, Link, Route} from 'react-router-dom';
import ReactDOM from 'react-dom';
import React from "react";
import { BrowserRouter, Link, Route } from "react-router-dom";
import ReactDOM from "react-dom";
const Home = () => <h1>Welcome to my website</h1>;
const About = () => <h1>About this website</h1>;
const Help = () => <h1>Need help? Email us at email@provider.com</h1>;
// Two things need to be done in this component:
//
// First, you must create the <Link>s to the correct components:
// - Home, at the path "/"
// - About, at the path "/about"
// - Help, at the path "/help"
//
// Add each <Link> inside of a <li> component.
//
// Second, you need to define the <Route>s themselves, for each
// component above. To do this, use the <Route> component,
// passing a "path" string prop, and a component prop
// (e.g. component={MyComponent}).
//
// Additionally, the Home route definition should set the
// "exact" prop to true, in order to exactly match the root URL.
// To pass a "true" bool as a prop, you can use a short-hand -
// below, I'll set boolProp to true:
//
// <MyComponent boolProp />
//
class Application extends React.Component {
render() {
return <div />;
return (
<div>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/help">Help</Link>
</li>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/help" component={Help} />
</div>
);
}
}
const root = document.getElementById('root');
const root = document.getElementById("root");
// This application variable currently just contains
// <Application>. In order to use react-router, you should
// wrap it inside of a BrowserRouter component. For example:
//
// <ComponentA>
// <ComponentB>
// </ComponentA>
//
const application = <Application />;
const application = (
<BrowserRouter>
<Application />
</BrowserRouter>
);
if (root) {
ReactDOM.render(application, root);
......