Building the <Checkout /> & <CheckoutSummary /> Components

README.md

@@ -66,3 +66,7 @@ Firebase Common API Endpoint: <https://burger-builder-ram.firebaseio.com/>
 6. Retrieving Data from the **[Firebase Backend](https://burger-builder-ram.firebaseio.com/ingredients)** & Resetting Error Handler inside `withErrorHandler` Closure HOC inside the `constructor()` lifecycle method: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/25931159b2254abff5398b69b3ef1d9d877a5498)
 7. De-allocating Previously Allocated Interceptors to Different Respective Components using `axios.interceptors.request/response.eject(axiosInstance)`: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/56ec181898c2dd9be30af028a2f76832ce708864)
 8. Resetting the `<BurgerBuilder />` Component to show in App.js: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/ae43d461e8b467b0639a066ffd1b62b70fce6424)
+
+### Adding Routing using `react-router`
+
+1. Building the `<Checkout />` & `<CheckoutSummary />` Components: [Commit Details]()

src/App.js

@@ -1,16 +1,18 @@
-// Library Imports
+// LIBRARY IMPORTS
 import React, { Component } from 'react';
 
-// Our Components
+// CUSTOM COMPONENTS
 import Layout from './components/Layout/Layout.component';
 import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder.component';
+import Checkout from './containers/Checkout/Checkout.component';
 
 class App extends Component {
   render() {
     return (
       <div>
         <Layout>
           <BurgerBuilder />
+          <Checkout />
         </Layout>
       </div>
     );

src/components/Order/CheckoutSummary/CheckoutSummary.component.jsx

@@ -0,0 +1,41 @@
+// LIBRARY IMPORTS
+import React from 'react';
+import styled from 'styled-components';
+
+// CUSTOM COMPONENTS
+import Burger from '../../Burger/Burger.component';
+import { StyledButton as Button } from '../../UI/Buttons/StyledButton.styled';
+
+// STYLED COMPONENTS
+const CheckoutDiv = styled.div`
+  text-align: center;
+  width: 80%;
+  margin: auto;
+
+  & > div {
+    width: 100%;
+    margin: auto;
+  }
+
+  @media (min-width: 600px) {
+    width: 500px;
+  }
+`;
+
+// RENDERED JSX COMPONENT
+const checkoutSummary = props => {
+  return (
+    <CheckoutDiv>
+      <h1>We hope it tastes well!</h1>
+      <div><Burger ingredients={props.ingredients} /></div>
+      <Button
+        type="danger"
+        onClick={() => { }}>CANCEL</Button>
+      <Button
+        type="success"
+        onClick={() => { }}>CONTINUE</Button>
+    </CheckoutDiv>
+  );
+}
+
+export default checkoutSummary;

src/containers/Checkout/Checkout.component.jsx

@@ -0,0 +1,23 @@
+// LIBRARY IMPORTS
+import React, { Component } from 'react';
+
+// CUSTOM COMPONENTS
+import CheckoutSummary from '../../components/Order/CheckoutSummary/CheckoutSummary.component';
+
+class Checkout extends Component {
+  // Dummy data in the state for now. Later on we will pass in 
+  // data regarding ingredients, using Routing
+  state = {
+    ingredients: { salad: 1, meat: 1, cheese: 1, bacon: 1, }
+  }
+
+  render() {
+    return (
+      <div>
+        <CheckoutSummary ingredients={this.state.ingredients}/>
+      </div>
+    );
+  }
+}
+
+export default Checkout;