Redirect in <ContactData /> to Improve UX

README.md

@@ -126,3 +126,4 @@ Dependency Installation: **`npm i --save redux-thunk`**
 9. Connecting `<ContactData />` Container & Order ACTIONS: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/61c94b912042d3ecad8d8c80d48f45eb5c0da798)
 10. The Order **`REDUCER`**: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/c96dbb6ba4f585e6bb6bfd895b1979d4cba912ae)
 11. Working on Order **`ACTIONS`**: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/d24c2cc486b23d0bc3d4d481c5451df39a48aa41)
+12. Redirect in `<ContactData />` to Improve UX: [Commit Details]()

src/containers/Checkout/Checkout.component.jsx

@@ -1,6 +1,6 @@
 // LIBRARY IMPORTS
 import React, { Component } from 'react';
-import { Route } from 'react-router-dom';
+import { Route, Redirect } from 'react-router-dom';
 import { connect } from 'react-redux';
 
 // CUSTOM COMPONENTS
@@ -31,20 +31,31 @@ class Checkout extends Component {
   checkoutContinuedHandler = () => {
     this.props.history.replace('/checkout/contact-data');
   }
+
+  /**
+   * Whenever we try to access the "/checkout" route before
+   * building the Burger at "/" route, we would always get an
+   * error because the `ingredients` aren't loaded yet from the
+   * firebase backend. And so, we will make sure that we only
+   * show a Loading Spinner until ingredients are loaded, 
+   * otherwise we show the <CheckoutSummary /> Component below.
+   */
 
   render() {
-    return (
-      <div>
-        <CheckoutSummary
-          ingredients={this.props.ings}
-          checkoutCancelled={this.checkoutCancelledHandler}
-          checkoutContinued={this.checkoutContinuedHandler}
-        />
-        <Route
-          path={`${this.props.match.url}/contact-data`}
-          component={ContactData} />
-      </div>
-    );
+    let summary = !this.props.ings ? <Redirect to="/" />
+      : (
+        <div>
+          <CheckoutSummary
+            ingredients={this.props.ings}
+            checkoutCancelled={this.checkoutCancelledHandler}
+            checkoutContinued={this.checkoutContinuedHandler}
+          />
+          <Route
+            path={`${this.props.match.url}/contact-data`}
+            component={ContactData} />
+        </div>
+      );
+    return summary;
   }
 }