diff --git a/package-lock.json b/package-lock.json
index 639dd6d..3cbb87a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3684,6 +3684,15 @@
"sha.js": "^2.4.8"
}
},
+ "create-react-context": {
+ "version": "0.2.3",
+ "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz",
+ "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==",
+ "requires": {
+ "fbjs": "^0.8.0",
+ "gud": "^1.0.0"
+ }
+ },
"cross-spawn": {
"version": "6.0.5",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -4604,6 +4613,14 @@
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
"integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
},
+ "encoding": {
+ "version": "0.1.12",
+ "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+ "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+ "requires": {
+ "iconv-lite": "~0.4.13"
+ }
+ },
"end-of-stream": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
@@ -5603,6 +5620,35 @@
"bser": "^2.0.0"
}
},
+ "fbjs": {
+ "version": "0.8.17",
+ "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+ "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+ "requires": {
+ "core-js": "^1.0.0",
+ "isomorphic-fetch": "^2.1.1",
+ "loose-envify": "^1.0.0",
+ "object-assign": "^4.1.0",
+ "promise": "^7.1.1",
+ "setimmediate": "^1.0.5",
+ "ua-parser-js": "^0.7.18"
+ },
+ "dependencies": {
+ "core-js": {
+ "version": "1.2.7",
+ "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+ "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+ },
+ "promise": {
+ "version": "7.3.1",
+ "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+ "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+ "requires": {
+ "asap": "~2.0.3"
+ }
+ }
+ }
+ },
"figgy-pudding": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
@@ -6744,6 +6790,11 @@
"resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
"integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
},
+ "gud": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+ "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+ },
"gzip-size": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz",
@@ -6936,6 +6987,19 @@
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
},
+ "history": {
+ "version": "4.9.0",
+ "resolved": "https://registry.npmjs.org/history/-/history-4.9.0.tgz",
+ "integrity": "sha512-H2DkjCjXf0Op9OAr6nJ56fcRkTSNrUiv41vNJ6IswJjif6wlpZK0BTfFbi7qK9dXLSYZxkq5lBsj3vUjlYBYZA==",
+ "requires": {
+ "@babel/runtime": "^7.1.2",
+ "loose-envify": "^1.2.0",
+ "resolve-pathname": "^2.2.0",
+ "tiny-invariant": "^1.0.2",
+ "tiny-warning": "^1.0.0",
+ "value-equal": "^0.4.0"
+ }
+ },
"hmac-drbg": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -7899,6 +7963,15 @@
"resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
"integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
},
+ "isomorphic-fetch": {
+ "version": "2.2.1",
+ "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+ "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+ "requires": {
+ "node-fetch": "^1.0.1",
+ "whatwg-fetch": ">=0.10.0"
+ }
+ },
"isstream": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -9314,6 +9387,15 @@
"lower-case": "^1.1.1"
}
},
+ "node-fetch": {
+ "version": "1.7.3",
+ "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+ "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+ "requires": {
+ "encoding": "^0.1.11",
+ "is-stream": "^1.0.1"
+ }
+ },
"node-forge": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
@@ -12660,6 +12742,52 @@
"react-is": "^16.8.2"
}
},
+ "react-router": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.0.0.tgz",
+ "integrity": "sha512-6EQDakGdLG/it2x9EaCt9ZpEEPxnd0OCLBHQ1AcITAAx7nCnyvnzf76jKWG1s2/oJ7SSviUgfWHofdYljFexsA==",
+ "requires": {
+ "@babel/runtime": "^7.1.2",
+ "create-react-context": "^0.2.2",
+ "history": "^4.9.0",
+ "hoist-non-react-statics": "^3.1.0",
+ "loose-envify": "^1.3.1",
+ "path-to-regexp": "^1.7.0",
+ "prop-types": "^15.6.2",
+ "react-is": "^16.6.0",
+ "tiny-invariant": "^1.0.2",
+ "tiny-warning": "^1.0.0"
+ },
+ "dependencies": {
+ "isarray": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+ "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+ },
+ "path-to-regexp": {
+ "version": "1.7.0",
+ "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
+ "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
+ "requires": {
+ "isarray": "0.0.1"
+ }
+ }
+ }
+ },
+ "react-router-dom": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.0.0.tgz",
+ "integrity": "sha512-wSpja5g9kh5dIteZT3tUoggjnsa+TPFHSMrpHXMpFsaHhQkm/JNVGh2jiF9Dkh4+duj4MKCkwO6H08u6inZYgQ==",
+ "requires": {
+ "@babel/runtime": "^7.1.2",
+ "history": "^4.9.0",
+ "loose-envify": "^1.3.1",
+ "prop-types": "^15.6.2",
+ "react-router": "5.0.0",
+ "tiny-invariant": "^1.0.2",
+ "tiny-warning": "^1.0.0"
+ }
+ },
"react-scripts": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-2.1.5.tgz",
@@ -13330,6 +13458,11 @@
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
"integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
},
+ "resolve-pathname": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
+ "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
+ },
"resolve-url": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -14743,6 +14876,16 @@
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
},
+ "tiny-invariant": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.4.tgz",
+ "integrity": "sha512-lMhRd/djQJ3MoaHEBrw8e2/uM4rs9YMNk0iOr8rHQ0QdbM7D4l0gFl3szKdeixrlyfm9Zqi4dxHCM2qVG8ND5g=="
+ },
+ "tiny-warning": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.2.tgz",
+ "integrity": "sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q=="
+ },
"tmp": {
"version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -14899,6 +15042,11 @@
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
},
+ "ua-parser-js": {
+ "version": "0.7.19",
+ "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz",
+ "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ=="
+ },
"uglify-js": {
"version": "3.4.9",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",
@@ -15182,6 +15330,11 @@
"spdx-expression-parse": "^3.0.0"
}
},
+ "value-equal": {
+ "version": "0.4.0",
+ "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
+ "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
+ },
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/package.json b/package.json
index b911bc3..f413bb3 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^6.0.1",
+ "react-router-dom": "^5.0.0",
"react-scripts": "2.1.5",
"redux": "^4.0.1"
},
diff --git a/src/App.js b/src/App.js
old mode 100755
new mode 100644
index 55596e4..fd74c74
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,23 @@
-import React, { Component } from "react";
-import Layout from "./components/Layout/Layout";
-import BurgerBuilder from "./containers/BurgerBuilder/BurgerBuilder";
+import React, { Component } from 'react';
+import { Route, Switch } from 'react-router-dom';
+
+import Layout from './hoc/Layout/Layout';
+import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder';
+import Checkout from './containers/Checkout/Checkout';
+import Orders from './containers/Orders/Orders';
class App extends Component {
- render() {
+ render () {
return (
-
-
-
+
+
+
+
+
+
+
+
+
);
}
}
diff --git a/src/App.test.js b/src/App.test.js
old mode 100755
new mode 100644
index a754b20..b84af98
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -5,5 +5,4 @@ import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(, div);
- ReactDOM.unmountComponentAtNode(div);
});
diff --git a/src/axios-order.js b/src/axios-orders.js
similarity index 100%
rename from src/axios-order.js
rename to src/axios-orders.js
diff --git a/src/components/Burger/BuildControls/BuildControl/BuildControl.js b/src/components/Burger/BuildControls/BuildControl/BuildControl.js
new file mode 100644
index 0000000..5fa72fd
--- /dev/null
+++ b/src/components/Burger/BuildControls/BuildControl/BuildControl.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import classes from './BuildControl.module.css';
+
+
+const buildControl = (props) => (
+
+
{props.label}
+
+
+
-
{props.label}
-
-
-
+
Current Price: {props.price.toFixed(2)}
+ {controls.map(ctrl => (
+
props.ingredientAdded(ctrl.type)}
+ removed={() => props.ingredientRemoved(ctrl.type)}
+ disabled={props.disabled[ctrl.type]} />
+ ))}
+
+
-
- Current price: {props.price}
-
- {Object.keys(props.ingredients).map(ingredient => {
- const ingr = ingredient.charAt(0).toUpperCase() + ingredient.slice(1);
- return (
-
props.add(ingredient)}
- remove={() => props.remove(ingredient)}
- value={props.ingredients[ingredient]}
- />
- );
- })}
-
- Please start adding ingredients!
;
+ }
+ return (
+
+
+ {transformedIngredients}
+
+
+ );
+};
+
+export default burger;
\ No newline at end of file
diff --git a/src/components/Burger/Burger.jsx b/src/components/Burger/Burger.jsx
deleted file mode 100644
index 111649d..0000000
--- a/src/components/Burger/Burger.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-import classes from "./Burger.module.css";
-import BurgerIngredient from "./BurgerIngredient/BurgerIngredient";
-
-const burger = props => {
- const transformedIngredients = Object.keys(props.ingredients)
- .map(igkey => {
- return [...Array(props.ingredients[igkey])].map((_, index) => (
-
- ));
- })
- .reduce((prev, cur) => prev.concat(cur));
-
- const messageIfNoIngredients = !transformedIngredients.length && (
- Please select ingredients
- );
- return (
-
-
- {messageIfNoIngredients}
- {transformedIngredients}
-
-
- );
-};
-
-export default burger;
diff --git a/src/components/Burger/Burger.module.css b/src/components/Burger/Burger.module.css
index cd18bf6..67a7b36 100644
--- a/src/components/Burger/Burger.module.css
+++ b/src/components/Burger/Burger.module.css
@@ -1,30 +1,30 @@
.Burger {
- width: 100%;
- margin: auto;
- height: 250px;
- overflow: scroll;
- text-align: center;
- font-weight: bold;
- font-size: 1.2rem;
+ width: 100%;
+ margin: auto;
+ height: 250px;
+ overflow: scroll;
+ text-align: center;
+ font-weight: bold;
+ font-size: 1.2rem;
}
@media (min-width: 500px) and (min-height: 400px) {
- .Burger {
- width: 350px;
- height: 300px;
- }
+ .Burger {
+ width: 350px;
+ height: 300px;
+ }
}
@media (min-width: 500px) and (min-height: 401px) {
- .Burger {
- width: 450px;
- height: 400px;
- }
+ .Burger {
+ width: 450px;
+ height: 400px;
+ }
}
@media (min-width: 1000px) and (min-height: 700px) {
- .Burger {
- width: 700px;
- height: 600px;
- }
-}
+ .Burger {
+ width: 700px;
+ height: 600px;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Burger/BurgerIngredient/BurgerIngredient.js b/src/components/Burger/BurgerIngredient/BurgerIngredient.js
new file mode 100644
index 0000000..e001f2a
--- /dev/null
+++ b/src/components/Burger/BurgerIngredient/BurgerIngredient.js
@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import classes from './BurgerIngredient.module.css';
+
+
+class BurgerIngredient extends Component {
+ render () {
+ let ingredient = null;
+
+ switch ( this.props.type ) {
+ case ( 'bread-bottom' ):
+ ingredient = ;
+ break;
+ case ( 'bread-top' ):
+ ingredient = (
+
+ );
+ break;
+ case ( 'meat' ):
+ ingredient = ;
+ break;
+ case ( 'cheese' ):
+ ingredient = ;
+ break;
+ case ( 'bacon' ):
+ ingredient = ;
+ break;
+ case ( 'salad' ):
+ ingredient = ;
+ break;
+ default:
+ ingredient = null;
+ }
+
+ return ingredient;
+ }
+}
+
+BurgerIngredient.propTypes = {
+ type: PropTypes.string.isRequired
+};
+
+export default BurgerIngredient;
\ No newline at end of file
diff --git a/src/components/Burger/BurgerIngredient/BurgerIngredient.jsx b/src/components/Burger/BurgerIngredient/BurgerIngredient.jsx
deleted file mode 100644
index 030d0d3..0000000
--- a/src/components/Burger/BurgerIngredient/BurgerIngredient.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import PropTypes from "prop-types";
-import React from "react";
-import classes from "./BurgerIngredient.module.css";
-
-const burgerIngredient = props => {
- let ingredient = null;
- switch (props.type) {
- case "bread-bottom":
- ingredient = ;
- break;
- case "bread-top":
- ingredient = (
-
- );
- break;
- case "meat":
- ingredient = ;
- break;
- case "cheese":
- ingredient = ;
- break;
- case "salad":
- ingredient = ;
- break;
- case "bacon":
- ingredient = ;
- break;
- default:
- ingredient = null;
- }
- return ingredient;
-};
-burgerIngredient.propTypes = {
- type: PropTypes.string.isRequired
-};
-
-export default burgerIngredient;
diff --git a/src/components/Burger/OrderSummary/OrderSummary.js b/src/components/Burger/OrderSummary/OrderSummary.js
new file mode 100644
index 0000000..d27a7ac
--- /dev/null
+++ b/src/components/Burger/OrderSummary/OrderSummary.js
@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+
+import Aux from '../../../hoc/Aux/Aux';
+import Button from '../../UI/Button/Button';
+
+class OrderSummary extends Component {
+ // This could be a functional component, doesn't have to be a class
+ componentWillUpdate() {
+ console.log('[OrderSummary] WillUpdate');
+ }
+
+ render () {
+ const ingredientSummary = Object.keys( this.props.ingredients )
+ .map( igKey => {
+ return (
+
+ {igKey}: {this.props.ingredients[igKey]}
+ );
+ } );
+
+ return (
+
+ Your Order
+ A delicious burger with the following ingredients:
+
+ Total Price: {this.props.price.toFixed( 2 )}
+ Continue to Checkout?
+
+
+
+ );
+ }
+}
+
+export default OrderSummary;
\ No newline at end of file
diff --git a/src/components/Burger/OrderSummary/OrderSummary.jsx b/src/components/Burger/OrderSummary/OrderSummary.jsx
deleted file mode 100644
index 9613dc4..0000000
--- a/src/components/Burger/OrderSummary/OrderSummary.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-import Button from "../../UI/Button/Button";
-
-const orderSummary = props => (
- <>
- Your order
- A delicious burger with the next ingredients:
-
- {Object.keys(props.ingredients).map(key => (
- -
- {key}:
- {props.ingredients[key]}
-
- ))}
-
-
- Total price: {props.totalPrice}
-
- Continue to checkout?
-
-
-
-);
-
-export default orderSummary;
diff --git a/src/components/Layout/Layout.jsx b/src/components/Layout/Layout.jsx
deleted file mode 100644
index dc7df7b..0000000
--- a/src/components/Layout/Layout.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { Component } from "react";
-import SideDrawer from "../Navigation/SideDrawer/SideDrawer";
-import Toolbar from "../Navigation/Toolbar/Toolbar";
-import classes from "./Layout.module.css";
-
-class Layout extends Component {
- state = {
- showSidedrawer: false
- };
- toggleSidedrawerHandler = () => {
- this.setState(prevState => {
- return { showSidedrawer: !prevState.showSidedrawer };
- });
- };
- render() {
- return (
- <>
-
-
-
-
- {this.props.children}
-
- );
- }
-}
-export default Layout;
diff --git a/src/components/Layout/Layout.module.css b/src/components/Layout/Layout.module.css
deleted file mode 100644
index e79fa5c..0000000
--- a/src/components/Layout/Layout.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.Content {
- margin-top: 72px;
-}
diff --git a/src/components/Logo/Logo.js b/src/components/Logo/Logo.js
new file mode 100644
index 0000000..9a00013
--- /dev/null
+++ b/src/components/Logo/Logo.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import burgerLogo from '../../assets/images/burger-logo.png';
+import classes from './Logo.module.css';
+
+
+const logo = (props) => (
+
+
+
-
-
+ Burger Builder
+ Orders
+
+);
+
+export default navigationItems;
\ No newline at end of file
diff --git a/src/components/Navigation/NavigationItems/NavigationItems.jsx b/src/components/Navigation/NavigationItems/NavigationItems.jsx
deleted file mode 100644
index 02acd93..0000000
--- a/src/components/Navigation/NavigationItems/NavigationItems.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import NavigationItem from "./NavigationItem/NavigationItem";
-import classes from "./NavigationItems.module.css";
-
-const navigationItems = () => {
- return (
-
-
- Burger Builder
-
- Checkout
-
- );
-};
-
-export default navigationItems;
diff --git a/src/components/Navigation/NavigationItems/NavigationItems.module.css b/src/components/Navigation/NavigationItems/NavigationItems.module.css
index f5bac0f..4f810d8 100644
--- a/src/components/Navigation/NavigationItems/NavigationItems.module.css
+++ b/src/components/Navigation/NavigationItems/NavigationItems.module.css
@@ -1,13 +1,15 @@
.NavigationItems {
- margin: 0;
- padding: 0;
- list-style: none;
- display: flex;
- flex-flow: column;
- height: 100%;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: flex;
+ flex-flow: column;
+ align-items: center;
+ height: 100%;
}
+
@media (min-width: 500px) {
- .NavigationItems {
- flex-flow: row;
- }
-}
+ .NavigationItems {
+ flex-flow: row;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.js b/src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.js
new file mode 100644
index 0000000..6ffc5ad
--- /dev/null
+++ b/src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import classes from './DrawerToggle.module.css';
+
+
+const drawerToggle = (props) => (
+
+);
+
+export default drawerToggle;
\ No newline at end of file
diff --git a/src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.jsx b/src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.jsx
deleted file mode 100644
index 27bef0e..0000000
--- a/src/components/Navigation/SideDrawer/DrawerToggle/DrawerToggle.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-import classes from "./DrawerToggle.module.css";
-
-const DrawerToggle = props => {
- return (
-
- );
-};
-
-export default DrawerToggle;
diff --git a/src/components/Navigation/SideDrawer/SideDrawer.js b/src/components/Navigation/SideDrawer/SideDrawer.js
new file mode 100644
index 0000000..c7b46d2
--- /dev/null
+++ b/src/components/Navigation/SideDrawer/SideDrawer.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import Aux from '../../../hoc/Aux/Aux';
+import Logo from '../../Logo/Logo';
+import Backdrop from '../../UI/Backdrop/Backdrop';
+import NavigationItems from '../NavigationItems/NavigationItems';
+import classes from './SideDrawer.module.css';
+
+
+const sideDrawer = ( props ) => {
+ let attachedClasses = [classes.SideDrawer, classes.Close];
+ if (props.open) {
+ attachedClasses = [classes.SideDrawer, classes.Open];
+ }
+ return (
+
+
+
+
+ );
+};
+
+export default sideDrawer;
\ No newline at end of file
diff --git a/src/components/Navigation/SideDrawer/SideDrawer.jsx b/src/components/Navigation/SideDrawer/SideDrawer.jsx
deleted file mode 100644
index 64a069b..0000000
--- a/src/components/Navigation/SideDrawer/SideDrawer.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-import Logo from "../../Logo/Logo";
-import Backdrop from "../../UI/Backdrop/Backdrop";
-import NavigationItems from "../NavigationItems/NavigationItems";
-import classes from "./SideDrawer.module.css";
-
-const sideDrawer = props => {
- let attachedClasses = [classes.SideDrawer, classes.Close];
- if (props.open) {
- attachedClasses = [classes.SideDrawer, classes.Open];
- }
- return (
- <>
-
-
-
- );
-};
-
-export default sideDrawer;
diff --git a/src/components/Navigation/SideDrawer/SideDrawer.module.css b/src/components/Navigation/SideDrawer/SideDrawer.module.css
index 1b4318f..d042661 100644
--- a/src/components/Navigation/SideDrawer/SideDrawer.module.css
+++ b/src/components/Navigation/SideDrawer/SideDrawer.module.css
@@ -1,31 +1,32 @@
.SideDrawer {
- position: fixed;
- width: 280px;
- max-width: 70%;
- height: 100%;
- left: 0;
- top: 0;
- z-index: 200;
- background-color: #fff;
- padding: 32px 16px;
- box-sizing: border-box;
- transition: transform 0.3s ease-out;
-}
-.Logo {
- height: 11%;
- margin-bottom: 32px;
+ position: fixed;
+ width: 280px;
+ max-width: 70%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ z-index: 200;
+ background-color: white;
+ padding: 32px 16px;
+ box-sizing: border-box;
+ transition: transform 0.3s ease-out;
}
@media (min-width: 500px) {
- .SideDrawer {
- display: none;
- }
+ .SideDrawer {
+ display: none;
+ }
}
.Open {
- transform: translateX(0);
+ transform: translateX(0);
}
.Close {
- transform: translateX(-100%);
+ transform: translateX(-100%);
}
+
+.Logo {
+ height: 11%;
+ margin-bottom: 32px;
+}
\ No newline at end of file
diff --git a/src/components/Navigation/Toolbar/Toolbar.js b/src/components/Navigation/Toolbar/Toolbar.js
new file mode 100644
index 0000000..16f1c64
--- /dev/null
+++ b/src/components/Navigation/Toolbar/Toolbar.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import Logo from '../../Logo/Logo';
+import NavigationItems from '../NavigationItems/NavigationItems';
+import DrawerToggle from '../SideDrawer/DrawerToggle/DrawerToggle';
+import classes from './Toolbar.module.css';
+
+
+const toolbar = ( props ) => (
+
+);
+
+export default toolbar;
\ No newline at end of file
diff --git a/src/components/Navigation/Toolbar/Toolbar.jsx b/src/components/Navigation/Toolbar/Toolbar.jsx
deleted file mode 100644
index d446b46..0000000
--- a/src/components/Navigation/Toolbar/Toolbar.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-import Logo from "../../Logo/Logo";
-import NavigationItems from "../NavigationItems/NavigationItems";
-import DrawerToggle from "../SideDrawer/DrawerToggle/DrawerToggle";
-import classes from "./Toolbar.module.css";
-
-const toolbar = props => {
- return (
-
- );
-};
-
-export default toolbar;
diff --git a/src/components/Navigation/Toolbar/Toolbar.module.css b/src/components/Navigation/Toolbar/Toolbar.module.css
index 15a2ee3..de56a35 100644
--- a/src/components/Navigation/Toolbar/Toolbar.module.css
+++ b/src/components/Navigation/Toolbar/Toolbar.module.css
@@ -1,26 +1,28 @@
.Toolbar {
- height: 56px;
- width: 100%;
- position: fixed;
- top: 0;
- left: 0;
- background-color: #703b09;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 20px;
- box-sizing: border-box;
- z-index: 90;
+ height: 56px;
+ width: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background-color: #703B09;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 20px;
+ box-sizing: border-box;
+ z-index: 90;
}
+
.Toolbar nav {
- height: 100%;
+ height: 100%;
}
+
.Logo {
- height: 80%;
+ height: 80%;
}
@media (max-width: 499px) {
- .DesktopOnly {
- display: none;
- }
-}
+ .DesktopOnly {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Order/CheckoutSummary/CheckoutSummary.js b/src/components/Order/CheckoutSummary/CheckoutSummary.js
new file mode 100644
index 0000000..cc802ec
--- /dev/null
+++ b/src/components/Order/CheckoutSummary/CheckoutSummary.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import Burger from '../../Burger/Burger';
+import Button from '../../UI/Button/Button';
+import classes from './CheckoutSummary.module.css';
+
+
+const checkoutSummary = (props) => {
+ return (
+
+
We hope it tastes well!
+
+
+
+
+
+
+
Ingredients: {ingredientOutput}
+
Price: USD {Number.parseFloat( props.price ).toFixed( 2 )}
+
+
+ {inputElement}
+
+ );
+
+};
+
+export default input;
\ No newline at end of file
diff --git a/src/components/UI/Input/Input.module.css b/src/components/UI/Input/Input.module.css
new file mode 100644
index 0000000..5bd8f06
--- /dev/null
+++ b/src/components/UI/Input/Input.module.css
@@ -0,0 +1,32 @@
+.Input {
+ width: 100%;
+ padding: 10px;
+ box-sizing: border-box;
+}
+
+.Label {
+ font-weight: bold;
+ display: block;
+ margin-bottom: 8px;
+}
+
+.InputElement {
+ outline: none;
+ border: 1px solid #ccc;
+ background-color: white;
+ font: inherit;
+ padding: 6px 10px;
+ display: block;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+.InputElement:focus {
+ outline: none;
+ background-color: #ccc;
+}
+
+.Invalid {
+ border: 1px solid red;
+ background-color: #FDA49A;
+}
\ No newline at end of file
diff --git a/src/components/UI/Modal/Modal.js b/src/components/UI/Modal/Modal.js
new file mode 100644
index 0000000..31f9514
--- /dev/null
+++ b/src/components/UI/Modal/Modal.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import Aux from '../../../hoc/Aux/Aux';
+import Backdrop from '../Backdrop/Backdrop';
+import classes from './Modal.module.css';
+
+
+class Modal extends Component {
+
+ shouldComponentUpdate ( nextProps, nextState ) {
+ return nextProps.show !== this.props.show || nextProps.children !== this.props.children;
+ }
+
+ componentWillUpdate () {
+ console.log('[Modal] WillUpdate');
+ }
+
+ render () {
+ return (
+
+
+
+ {this.props.children}
+
+
+ )
+ }
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/src/components/UI/Modal/Modal.jsx b/src/components/UI/Modal/Modal.jsx
deleted file mode 100644
index 6eec89f..0000000
--- a/src/components/UI/Modal/Modal.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { Component } from "react";
-import Backdrop from "../Backdrop/Backdrop";
-import classes from "./Modal.module.css";
-
-class Modal extends Component {
- shouldComponentUpdate(nextProps, nextState) {
- return (
- this.props.show !== nextProps.show ||
- (this.props.show && nextProps.children !== this.props.children)
- );
- }
-
- render() {
- return (
- <>
-
- {this.props.children}
-
-
-
- );
- }
-}
-export default Modal;
diff --git a/src/components/UI/Spinner/Spinner.js b/src/components/UI/Spinner/Spinner.js
new file mode 100644
index 0000000..bd1e479
--- /dev/null
+++ b/src/components/UI/Spinner/Spinner.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import classes from './Spinner.module.css';
+
+
+const spinner = () => (
+ Loading...
+);
+
+export default spinner;
\ No newline at end of file
diff --git a/src/components/UI/Spinner/Spinner.jsx b/src/components/UI/Spinner/Spinner.jsx
deleted file mode 100644
index e6f6eb1..0000000
--- a/src/components/UI/Spinner/Spinner.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from "react";
-import classes from "./Spinner.module.css";
-
-const spinner = () => Loading...
;
-
-export default spinner;
diff --git a/src/components/UI/Spinner/Spinner.module.css b/src/components/UI/Spinner/Spinner.module.css
index 492185c..989c05b 100644
--- a/src/components/UI/Spinner/Spinner.module.css
+++ b/src/components/UI/Spinner/Spinner.module.css
@@ -19,7 +19,7 @@
.Loader:before,
.Loader:after {
position: absolute;
- content: "";
+ content: '';
}
.Loader:before {
width: 5.2em;
@@ -64,4 +64,4 @@
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
-}
+}
\ No newline at end of file
diff --git a/src/containers/BurgerBuilder/BurgerBuilder.js b/src/containers/BurgerBuilder/BurgerBuilder.js
new file mode 100644
index 0000000..8995845
--- /dev/null
+++ b/src/containers/BurgerBuilder/BurgerBuilder.js
@@ -0,0 +1,132 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import axios from "../../axios-orders";
+import BuildControls from "../../components/Burger/BuildControls/BuildControls";
+import Burger from "../../components/Burger/Burger";
+import OrderSummary from "../../components/Burger/OrderSummary/OrderSummary";
+import Modal from "../../components/UI/Modal/Modal";
+import Spinner from "../../components/UI/Spinner/Spinner";
+import Aux from "../../hoc/Aux/Aux";
+import withErrorHandler from "../../hoc/withErrorHandler/withErrorHandler";
+import * as actionTypes from "../../store/actions";
+
+class BurgerBuilder extends Component {
+ // constructor(props) {
+ // super(props);
+ // this.state = {...}
+ // }
+ state = {
+ purchasing: false,
+ loading: false,
+ error: false
+ };
+
+ componentDidMount() {
+ console.log(this.props);
+ // axios.get( 'https://react-burger-89070.firebaseio.com/ingredients.json' )
+ // .then( response => {
+ // this.setState( { ingredients: response.data } );
+ // } )
+ // .catch( error => {
+ // this.setState( { error: true } );
+ // } );
+ }
+
+ updatePurchaseState(ingredients) {
+ const sum = Object.keys(ingredients)
+ .map(igKey => {
+ return ingredients[igKey];
+ })
+ .reduce((sum, el) => {
+ return sum + el;
+ }, 0);
+ return sum > 0;
+ }
+
+ purchaseHandler = () => {
+ this.setState({ purchasing: true });
+ };
+
+ purchaseCancelHandler = () => {
+ this.setState({ purchasing: false });
+ };
+
+ purchaseContinueHandler = () => {
+ this.props.history.push("/checkout");
+ };
+
+ render() {
+ const disabledInfo = {
+ ...this.props.ings
+ };
+ for (let key in disabledInfo) {
+ disabledInfo[key] = disabledInfo[key] <= 0;
+ }
+ let orderSummary = null;
+ let burger = this.state.error ? (
+ Ingredients can't be loaded!
+ ) : (
+
+ );
+
+ if (this.props.ings) {
+ burger = (
+
+
+
+
+ );
+ orderSummary = (
+
+ );
+ }
+ if (this.state.loading) {
+ orderSummary = ;
+ }
+ // {salad: true, meat: false, ...}
+ return (
+
+
+ {orderSummary}
+
+ {burger}
+
+ );
+ }
+}
+
+const mapStateToProps = state => {
+ return {
+ ings: state.ingredients,
+ price: state.totalPrice
+ };
+};
+
+const mapDispatchToProps = dispatch => {
+ return {
+ onIngredientAdded: ingName =>
+ dispatch({ type: actionTypes.ADD_INGREDIENT, ingredientName: ingName }),
+ onIngredientRemoved: ingName =>
+ dispatch({ type: actionTypes.REMOVE_INGREDIENT, ingredientName: ingName })
+ };
+};
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(withErrorHandler(BurgerBuilder, axios));
diff --git a/src/containers/BurgerBuilder/BurgerBuilder.jsx b/src/containers/BurgerBuilder/BurgerBuilder.jsx
deleted file mode 100644
index 784ce8c..0000000
--- a/src/containers/BurgerBuilder/BurgerBuilder.jsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import axios from "../../axios-order";
-import BuildControls from "../../components/Burger/BuildControls/BuildControls";
-import Burger from "../../components/Burger/Burger";
-import OrderSummary from "../../components/Burger/OrderSummary/OrderSummary";
-import Modal from "../../components/UI/Modal/Modal";
-import Spinner from "../../components/UI/Spinner/Spinner";
-import withErrorHandler from "../../hoc/withErrorHandler/withErrorHandler";
-import * as actionTypes from "../../store/actions";
-
-class BurgerBuilder extends Component {
- componentDidMount() {
- axios
- .get("/ingredients.json")
- .then(response => {
- this.props.onSetInitialIngredients(response.data);
- })
- .catch(error => {
- console.log(error);
- this.props.onSetError(true);
- });
- }
-
- continueOrderHandler = () => {
- this.props.onSetLoading(true);
- axios
- .post("/orders.json", this.props.ingredients)
- .then(response => {
- this.props.onSetPurchasing(false);
- this.props.onSetLoading(false);
- })
- .catch(error => {
- this.props.onSetPurchasing(false);
- this.props.onSetLoading(false);
- console.log(error);
- });
- };
-
- render() {
- let orderSummary = null,
- burger = this.props.error ? (
- Ingredients can't be loaded
- ) : (
-
- );
-
- if (this.props.ingredients) {
- burger = (
- <>
-
- this.props.onAddIngredient(ingredient)}
- remove={ingredient => this.props.onRemoveIngredient(ingredient)}
- price={this.props.totalPrice}
- ordered={() => this.props.onSetPurchasing(true)}
- />
-
- );
-
- orderSummary = (
- this.props.onSetPurchasing(false)}
- continue={this.continueOrderHandler}
- totalPrice={this.props.totalPrice}
- />
- );
- }
- if (this.props.loading) {
- orderSummary = ;
- }
- return (
- <>
- this.props.onSetPurchasing(false)}
- >
- {orderSummary}
-
- {burger}
-
- );
- }
-}
-
-const mapState = state => {
- return {
- ingredients: state.ingredients,
- totalPrice: state.totalPrice,
- purchasing: state.purchasing,
- loading: state.loading,
- error: state.error
- };
-};
-
-const mapDispatch = dispatch => {
- return {
- onSetInitialIngredients: ingredients =>
- dispatch({ type: actionTypes.SET_INITIAL_INGREDIENTS, ingredients }),
- onAddIngredient: ingredientType =>
- dispatch({ type: actionTypes.ADD_INGREDIENT, ingredientType }),
- onRemoveIngredient: ingredientType =>
- dispatch({ type: actionTypes.REMOVE_INGREDIENT, ingredientType }),
- onSetPurchasing: value =>
- dispatch({ type: actionTypes.SET_PURCHASING, value }),
- onSetLoading: value => dispatch({ type: actionTypes.SET_LOADING, value }),
- onSetError: value => dispatch({ type: actionTypes.SET_ERROR, value })
- };
-};
-
-export default connect(
- mapState,
- mapDispatch
-)(withErrorHandler(BurgerBuilder, axios));
diff --git a/src/containers/Checkout/Checkout.js b/src/containers/Checkout/Checkout.js
new file mode 100644
index 0000000..cebae7e
--- /dev/null
+++ b/src/containers/Checkout/Checkout.js
@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import { Route } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+import CheckoutSummary from '../../components/Order/CheckoutSummary/CheckoutSummary';
+import ContactData from './ContactData/ContactData';
+
+class Checkout extends Component {
+
+ checkoutCancelledHandler = () => {
+ this.props.history.goBack();
+ }
+
+ checkoutContinuedHandler = () => {
+ this.props.history.replace( '/checkout/contact-data' );
+ }
+
+ render () {
+ return (
+
+
+
+
+ );
+ }
+}
+
+const mapStateToProps = state => {
+ return {
+ ings: state.ingredients
+ }
+};
+
+export default connect(mapStateToProps)(Checkout);
\ No newline at end of file
diff --git a/src/containers/Checkout/ContactData/ContactData.js b/src/containers/Checkout/ContactData/ContactData.js
new file mode 100644
index 0000000..99a76c3
--- /dev/null
+++ b/src/containers/Checkout/ContactData/ContactData.js
@@ -0,0 +1,214 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import axios from '../../../axios-orders';
+import Button from '../../../components/UI/Button/Button';
+import Input from '../../../components/UI/Input/Input';
+import Spinner from '../../../components/UI/Spinner/Spinner';
+import classes from './ContactData.module.css';
+
+
+class ContactData extends Component {
+ state = {
+ orderForm: {
+ name: {
+ elementType: 'input',
+ elementConfig: {
+ type: 'text',
+ placeholder: 'Your Name'
+ },
+ value: '',
+ validation: {
+ required: true
+ },
+ valid: false,
+ touched: false
+ },
+ street: {
+ elementType: 'input',
+ elementConfig: {
+ type: 'text',
+ placeholder: 'Street'
+ },
+ value: '',
+ validation: {
+ required: true
+ },
+ valid: false,
+ touched: false
+ },
+ zipCode: {
+ elementType: 'input',
+ elementConfig: {
+ type: 'text',
+ placeholder: 'ZIP Code'
+ },
+ value: '',
+ validation: {
+ required: true,
+ minLength: 5,
+ maxLength: 5,
+ isNumeric: true
+ },
+ valid: false,
+ touched: false
+ },
+ country: {
+ elementType: 'input',
+ elementConfig: {
+ type: 'text',
+ placeholder: 'Country'
+ },
+ value: '',
+ validation: {
+ required: true
+ },
+ valid: false,
+ touched: false
+ },
+ email: {
+ elementType: 'input',
+ elementConfig: {
+ type: 'email',
+ placeholder: 'Your E-Mail'
+ },
+ value: '',
+ validation: {
+ required: true,
+ isEmail: true
+ },
+ valid: false,
+ touched: false
+ },
+ deliveryMethod: {
+ elementType: 'select',
+ elementConfig: {
+ options: [
+ {value: 'fastest', displayValue: 'Fastest'},
+ {value: 'cheapest', displayValue: 'Cheapest'}
+ ]
+ },
+ value: '',
+ validation: {},
+ valid: true
+ }
+ },
+ formIsValid: false,
+ loading: false
+ }
+
+ orderHandler = ( event ) => {
+ event.preventDefault();
+ this.setState( { loading: true } );
+ const formData = {};
+ for (let formElementIdentifier in this.state.orderForm) {
+ formData[formElementIdentifier] = this.state.orderForm[formElementIdentifier].value;
+ }
+ const order = {
+ ingredients: this.props.ings,
+ price: this.props.price,
+ orderData: formData
+ }
+ axios.post( '/orders.json', order )
+ .then( response => {
+ this.setState( { loading: false } );
+ this.props.history.push( '/' );
+ } )
+ .catch( error => {
+ this.setState( { loading: false } );
+ } );
+ }
+
+ checkValidity(value, rules) {
+ let isValid = true;
+ if (!rules) {
+ return true;
+ }
+
+ if (rules.required) {
+ isValid = value.trim() !== '' && isValid;
+ }
+
+ if (rules.minLength) {
+ isValid = value.length >= rules.minLength && isValid
+ }
+
+ if (rules.maxLength) {
+ isValid = value.length <= rules.maxLength && isValid
+ }
+
+ if (rules.isEmail) {
+ const pattern = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
+ isValid = pattern.test(value) && isValid
+ }
+
+ if (rules.isNumeric) {
+ const pattern = /^\d+$/;
+ isValid = pattern.test(value) && isValid
+ }
+
+ return isValid;
+ }
+
+ inputChangedHandler = (event, inputIdentifier) => {
+ const updatedOrderForm = {
+ ...this.state.orderForm
+ };
+ const updatedFormElement = {
+ ...updatedOrderForm[inputIdentifier]
+ };
+ updatedFormElement.value = event.target.value;
+ updatedFormElement.valid = this.checkValidity(updatedFormElement.value, updatedFormElement.validation);
+ updatedFormElement.touched = true;
+ updatedOrderForm[inputIdentifier] = updatedFormElement;
+
+ let formIsValid = true;
+ for (let inputIdentifier in updatedOrderForm) {
+ formIsValid = updatedOrderForm[inputIdentifier].valid && formIsValid;
+ }
+ this.setState({orderForm: updatedOrderForm, formIsValid: formIsValid});
+ }
+
+ render () {
+ const formElementsArray = [];
+ for (let key in this.state.orderForm) {
+ formElementsArray.push({
+ id: key,
+ config: this.state.orderForm[key]
+ });
+ }
+ let form = (
+
+ );
+ if ( this.state.loading ) {
+ form = ;
+ }
+ return (
+
+
Enter your Contact Data
+ {form}
+
+ );
+ }
+}
+
+const mapStateToProps = state => {
+ return {
+ ings: state.ingredients,
+ price: state.totalPrice
+ }
+};
+
+export default connect(mapStateToProps)(ContactData);
\ No newline at end of file
diff --git a/src/containers/Checkout/ContactData/ContactData.module.css b/src/containers/Checkout/ContactData/ContactData.module.css
new file mode 100644
index 0000000..46ab26c
--- /dev/null
+++ b/src/containers/Checkout/ContactData/ContactData.module.css
@@ -0,0 +1,15 @@
+.ContactData {
+ margin: 20px auto;
+ width: 80%;
+ text-align: center;
+ box-shadow: 0 2px 3px #ccc;
+ border: 1px solid #eee;
+ padding: 10px;
+ box-sizing: border-box;
+}
+
+@media (min-width: 600px) {
+ .ContactData {
+ width: 500px;
+ }
+}
\ No newline at end of file
diff --git a/src/containers/Orders/Orders.js b/src/containers/Orders/Orders.js
new file mode 100644
index 0000000..cfa95b3
--- /dev/null
+++ b/src/containers/Orders/Orders.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+
+import Order from '../../components/Order/Order';
+import axios from '../../axios-orders';
+import withErrorHandler from '../../hoc/withErrorHandler/withErrorHandler';
+
+class Orders extends Component {
+ state = {
+ orders: [],
+ loading: true
+ }
+
+ componentDidMount() {
+ axios.get('/orders.json')
+ .then(res => {
+ const fetchedOrders = [];
+ for (let key in res.data) {
+ fetchedOrders.push({
+ ...res.data[key],
+ id: key
+ });
+ }
+ this.setState({loading: false, orders: fetchedOrders});
+ })
+ .catch(err => {
+ this.setState({loading: false});
+ });
+ }
+
+ render () {
+ return (
+
+ {this.state.orders.map(order => (
+
+ ))}
+
+ );
+ }
+}
+
+export default withErrorHandler(Orders, axios);
\ No newline at end of file
diff --git a/src/hoc/Aux/Aux.js b/src/hoc/Aux/Aux.js
new file mode 100644
index 0000000..fd75392
--- /dev/null
+++ b/src/hoc/Aux/Aux.js
@@ -0,0 +1,3 @@
+const aux = (props) => props.children;
+
+export default aux;
\ No newline at end of file
diff --git a/src/hoc/Layout/Layout.js b/src/hoc/Layout/Layout.js
new file mode 100644
index 0000000..9276908
--- /dev/null
+++ b/src/hoc/Layout/Layout.js
@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import SideDrawer from '../../components/Navigation/SideDrawer/SideDrawer';
+import Toolbar from '../../components/Navigation/Toolbar/Toolbar';
+import Aux from '../Aux/Aux';
+import classes from './Layout.module.css';
+
+
+class Layout extends Component {
+ state = {
+ showSideDrawer: false
+ }
+
+ sideDrawerClosedHandler = () => {
+ this.setState( { showSideDrawer: false } );
+ }
+
+ sideDrawerToggleHandler = () => {
+ this.setState( ( prevState ) => {
+ return { showSideDrawer: !prevState.showSideDrawer };
+ } );
+ }
+
+ render () {
+ return (
+
+
+
+
+ {this.props.children}
+
+
+ )
+ }
+}
+
+export default Layout;
\ No newline at end of file
diff --git a/src/hoc/Layout/Layout.module.css b/src/hoc/Layout/Layout.module.css
new file mode 100644
index 0000000..4492ef8
--- /dev/null
+++ b/src/hoc/Layout/Layout.module.css
@@ -0,0 +1,3 @@
+.Content {
+ margin-top: 72px;
+}
\ No newline at end of file
diff --git a/src/hoc/withErrorHandler/withErrorHandler.js b/src/hoc/withErrorHandler/withErrorHandler.js
new file mode 100644
index 0000000..7a91923
--- /dev/null
+++ b/src/hoc/withErrorHandler/withErrorHandler.js
@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+
+import Modal from '../../components/UI/Modal/Modal';
+import Aux from '../Aux/Aux';
+
+const withErrorHandler = ( WrappedComponent, axios ) => {
+ return class extends Component {
+ state = {
+ error: null
+ }
+
+ componentWillMount () {
+ this.reqInterceptor = axios.interceptors.request.use( req => {
+ this.setState( { error: null } );
+ return req;
+ } );
+ this.resInterceptor = axios.interceptors.response.use( res => res, error => {
+ this.setState( { error: error } );
+ } );
+ }
+
+ componentWillUnmount () {
+ axios.interceptors.request.eject( this.reqInterceptor );
+ axios.interceptors.response.eject( this.resInterceptor );
+ }
+
+ errorConfirmedHandler = () => {
+ this.setState( { error: null } );
+ }
+
+ render () {
+ return (
+
+
+ {this.state.error ? this.state.error.message : null}
+
+
+
+ );
+ }
+ }
+}
+
+export default withErrorHandler;
\ No newline at end of file
diff --git a/src/hoc/withErrorHandler/withErrorHandler.jsx b/src/hoc/withErrorHandler/withErrorHandler.jsx
deleted file mode 100644
index dcce865..0000000
--- a/src/hoc/withErrorHandler/withErrorHandler.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { Component } from "react";
-import Modal from "../../components/UI/Modal/Modal";
-
-const withErrorHandler = (WrappedComponent, axios) => {
- return class extends Component {
- state = {
- error: false
- };
-
- constructor(props) {
- super(props);
- this.reqInt = axios.interceptors.request.use(request => {
- this.setState({ error: false });
- return request;
- });
- this.respInt = axios.interceptors.response.use(
- response => response,
- error => {
- this.setState({ error });
- }
- );
- }
-
- componentWillUnmount() {
- axios.interceptors.request.eject(this.reqInt);
- axios.interceptors.response.eject(this.respInt);
- }
-
- errorConfirmedHandler = () => {
- this.setState({ error: false });
- };
-
- render() {
- return (
- <>
-
- {this.state.error ? this.state.error.message : null}
-
-
-
- );
- }
- };
-};
-
-export default withErrorHandler;
diff --git a/src/index.css b/src/index.css
old mode 100755
new mode 100644
index 482b497..d14c472
--- a/src/index.css
+++ b/src/index.css
@@ -2,11 +2,4 @@ body {
margin: 0;
padding: 0;
font-family: "Open Sans", sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
- monospace;
}
diff --git a/src/index.js b/src/index.js
old mode 100755
new mode 100644
index b06c889..ebedc23
--- a/src/index.js
+++ b/src/index.js
@@ -1,22 +1,22 @@
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
+import { BrowserRouter } from "react-router-dom";
import { createStore } from "redux";
import App from "./App";
import "./index.css";
-import * as serviceWorker from "./serviceWorker";
+import registerServiceWorker from "./registerServiceWorker";
import reducer from "./store/reducer";
const store = createStore(reducer);
-ReactDOM.render(
+const app = (
-
- ,
- document.getElementById("root")
+
+
+
+
);
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister();
+ReactDOM.render(app, document.getElementById("root"));
+registerServiceWorker();
diff --git a/src/serviceWorker.js b/src/registerServiceWorker.js
old mode 100755
new mode 100644
similarity index 55%
rename from src/serviceWorker.js
rename to src/registerServiceWorker.js
index 2283ff9..4a3ccf0
--- a/src/serviceWorker.js
+++ b/src/registerServiceWorker.js
@@ -1,14 +1,12 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
+// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
+// will only see deployed updates on the "N+1" visit to a page, since previously
+// cached resources are updated in the background.
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read http://bit.ly/CRA-PWA
+// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
+// This link also includes instructions on opting out of this behavior.
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
@@ -20,74 +18,50 @@ const isLocalhost = Boolean(
)
);
-export function register(config) {
+export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
- const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+ const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
- // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+ // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
- if (isLocalhost) {
- // This is running on localhost. Let's check if a service worker still exists or not.
- checkValidServiceWorker(swUrl, config);
-
- // Add some additional logging to localhost, pointing developers to the
- // service worker/PWA documentation.
- navigator.serviceWorker.ready.then(() => {
- console.log(
- 'This web app is being served cache-first by a service ' +
- 'worker. To learn more, visit http://bit.ly/CRA-PWA'
- );
- });
+ if (!isLocalhost) {
+ // Is not local host. Just register service worker
+ registerValidSW(swUrl);
} else {
- // Is not localhost. Just register service worker
- registerValidSW(swUrl, config);
+ // This is running on localhost. Lets check if a service worker still exists or not.
+ checkValidServiceWorker(swUrl);
}
});
}
}
-function registerValidSW(swUrl, config) {
+function registerValidSW(swUrl) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
- if (installingWorker == null) {
- return;
- }
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
- // At this point, the updated precached content has been fetched,
- // but the previous service worker will still serve the older
- // content until all client tabs are closed.
- console.log(
- 'New content is available and will be used when all ' +
- 'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
- );
-
- // Execute callback
- if (config && config.onUpdate) {
- config.onUpdate(registration);
- }
+ // At this point, the old content will have been purged and
+ // the fresh content will have been added to the cache.
+ // It's the perfect time to display a "New content is
+ // available; please refresh." message in your web app.
+ console.log('New content is available; please refresh.');
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
-
- // Execute callback
- if (config && config.onSuccess) {
- config.onSuccess(registration);
- }
}
}
};
@@ -98,15 +72,14 @@ function registerValidSW(swUrl, config) {
});
}
-function checkValidServiceWorker(swUrl, config) {
+function checkValidServiceWorker(swUrl) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
- const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
- (contentType != null && contentType.indexOf('javascript') === -1)
+ response.headers.get('content-type').indexOf('javascript') === -1
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
@@ -116,7 +89,7 @@ function checkValidServiceWorker(swUrl, config) {
});
} else {
// Service worker found. Proceed as normal.
- registerValidSW(swUrl, config);
+ registerValidSW(swUrl);
}
})
.catch(() => {
diff --git a/src/store/actions.js b/src/store/actions.js
index 3eb34cd..651f210 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -1,6 +1,2 @@
-export const SET_INITIAL_INGREDIENTS = "SET_INITIAL_INGREDIENTS";
-export const ADD_INGREDIENT = "ADD_INGREDIENT";
-export const REMOVE_INGREDIENT = "REMOVE_INGREDIENT";
-export const SET_PURCHASING = "SET_PURCHASING";
-export const SET_LOADING = "SET_LOADING";
-export const SET_ERROR = "SET_ERROR";
+export const ADD_INGREDIENT = 'ADD_INGREDIENT';
+export const REMOVE_INGREDIENT = 'REMOVE_INGREDIENT';
\ No newline at end of file
diff --git a/src/store/reducer.js b/src/store/reducer.js
index 30c5847..4fa2fe1 100644
--- a/src/store/reducer.js
+++ b/src/store/reducer.js
@@ -1,75 +1,45 @@
-import * as actionTypes from "./actions";
-
-const INGREDIENT_PRICES = {
- salad: 0.5,
- cheese: 0.4,
- meat: 1.3,
- bacon: 0.7
-};
+import * as actionTypes from './actions';
const initialState = {
- ingredients: null,
- totalPrice: 4,
- purchasing: false,
- loading: false,
- error: false
+ ingredients: {
+ salad: 0,
+ bacon: 0,
+ cheese: 0,
+ meat: 0
+ },
+ totalPrice: 4
};
-const reducer = (state = initialState, action) => {
- switch (action.type) {
- case actionTypes.SET_INITIAL_INGREDIENTS:
- return {
- ...state,
- ingredients: action.ingredients
- };
- case actionTypes.ADD_INGREDIENT:
- return {
- ...state,
- ingredients: {
- ...state.ingredients,
- [action.ingredientType]: state.ingredients[action.ingredientType] + 1
- },
- totalPrice: correctDecimals(
- +state.totalPrice + INGREDIENT_PRICES[action.ingredientType]
- )
- };
- case actionTypes.REMOVE_INGREDIENT:
- return {
- ...state,
- ingredients: {
- ...state.ingredients,
- [action.ingredientType]: state.ingredients[action.ingredientType]
- ? state.ingredients[action.ingredientType] - 1
- : 0
- },
- totalPrice: state.ingredients[action.ingredientType]
- ? correctDecimals(
- +state.totalPrice - INGREDIENT_PRICES[action.ingredientType]
- )
- : state.totalPrice
- };
- case actionTypes.SET_PURCHASING:
- return {
- ...state,
- purchasing: action.value
- };
- case actionTypes.SET_LOADING:
- return {
- ...state,
- loading: action.value
- };
- case actionTypes.SET_ERROR:
- return {
- ...state,
- error: action.value
- };
- default:
- return state;
- }
+const INGREDIENT_PRICES = {
+ salad: 0.5,
+ cheese: 0.4,
+ meat: 1.3,
+ bacon: 0.7
};
-const correctDecimals = price => {
- return price.toFixed(2);
+const reducer = ( state = initialState, action ) => {
+ switch ( action.type ) {
+ case actionTypes.ADD_INGREDIENT:
+ return {
+ ...state,
+ ingredients: {
+ ...state.ingredients,
+ [action.ingredientName]: state.ingredients[action.ingredientName] + 1
+ },
+ totalPrice: state.totalPrice + INGREDIENT_PRICES[action.ingredientName]
+ };
+ case actionTypes.REMOVE_INGREDIENT:
+ return {
+ ...state,
+ ingredients: {
+ ...state.ingredients,
+ [action.ingredientName]: state.ingredients[action.ingredientName] - 1
+ },
+ totalPrice: state.totalPrice - INGREDIENT_PRICES[action.ingredientName]
+ };
+ default:
+ return state;
+ }
};
-export default reducer;
+export default reducer;
\ No newline at end of file