Solition: Yaiser Avila Rodriguez

src/App.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import { BrowserRouter, Route } from "react-router-dom";
 
 import Home from "./pages/Home";
-// import NewProduct from "./pages/NewProduct";
+import NewProduct from "./pages/NewProduct";
 
 import * as api from "./api";
 
@@ -228,13 +228,8 @@ class App extends Component {
   }
 
   render() {
-    const {
-      cartItems,
-      products,
-      isLoading,
-      hasError,
-      loadingError,
-    } = this.state;
+    const { cartItems, products, isLoading, hasError, loadingError } =
+      this.state;
 
     return (
       <BrowserRouter>
@@ -258,7 +253,18 @@ class App extends Component {
             />
           )}
         />
-        {/* route path="/new-product" <NewProduct ...stuff /> */}
+        <Route
+          path="/new-product"
+          exact
+          render={(routeProps) => {
+            return (
+              <NewProduct
+                {...routeProps}
+                saveNewProduct={this.saveNewProduct}
+              />
+            );
+          }}
+        ></Route>
       </BrowserRouter>
     );
   }

src/components/NewProductForm/NewProductForm.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-// import { Redirect } from "react-router-dom";
+import { Redirect } from "react-router-dom";
 import { v4 as uuid } from "uuid";
 import { Formik } from "formik";
 
@@ -35,17 +35,26 @@ function addProductDetails(product) {
 
 // eslint-disable-next-line react/prefer-stateless-function
 class NewProductForm extends Component {
-  // ...
-  // state: {
-  //   submitted: false
-  // }
-  // ...
+  constructor(props) {
+    super(props);
+    this.state = {
+      submitted: false,
+    };
+    this.setSubmitted = this.setSubmitted.bind(this);
+  }
+  setSubmitted() {
+    setTimeout(() => {
+      this.setState({
+        submitted: true,
+      });
+    }, 500);
+  }
   render() {
-    // const { submitted } = this.state;
+    const { submitted } = this.state;
     const { saveNewProduct } = this.props;
 
     return (
-      <>
+      <React.Fragment>
         <Formik
           initialValues={{
             title: "",
@@ -63,7 +72,7 @@ class NewProductForm extends Component {
             const newProduct = addProductDetails(values);
             saveNewProduct(newProduct);
             setSubmitting(true);
-            // this.setSubmitted();
+            this.setSubmitted();
           }}
         >
           {({
@@ -183,8 +192,8 @@ class NewProductForm extends Component {
             </form>
           )}
         </Formik>
-        {/* {submitted && <Redirect to="/" />} */}
-      </>
+        {submitted && <Redirect to="/" />}
+      </React.Fragment>
     );
   }
 }

src/pages/Home/Home.js

@@ -20,7 +20,7 @@ function Home({
   handleChange,
 }) {
   return (
-    <>
+    <React.Fragment>
       <AppHeader />
       <Main className="container-fluid">
         <div className="row">
@@ -72,7 +72,7 @@ function Home({
         </div>
       </Main>
       <Footer />
-    </>
+    </React.Fragment>
   );
 }
 

src/pages/NewProduct/NewProduct.js

@@ -1,13 +1,12 @@
 import React from "react";
-
 import AppHeader from "../../components/AppHeader";
 import Footer from "../../components/Footer";
 import Main from "../../components/Main";
 import NewProductForm from "../../components/NewProductForm";
 
 function NewProduct({ saveNewProduct }) {
   return (
-    <>
+    <React.Fragment>
       <AppHeader />
       <Main className="container">
         <div className="row justify-content-center">
@@ -28,7 +27,7 @@ function NewProduct({ saveNewProduct }) {
         </div>
       </Main>
       <Footer />
-    </>
+    </React.Fragment>
   );
 }