Solution : Paola Estefania

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run pre:commit

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run pre:push

.lintstagedrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  "**/*.js": [
+    "npm run lint:js",
+    "npm run lint:format:check",
+    "npm run test:related",
+  ],
+  "*.{css,scss,html,md,json,yml,yaml}": ["npm run lint:format:check"],
+};

package.json

@@ -57,7 +57,9 @@
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-testing-library": "^4.1.1",
+    "husky": "^6.0.0",
     "jest": "^26.6.0",
+    "lint-staged": "^10.5.4",
     "prettier": "^2.2.1",
     "typescript": "^4.2.4"
   },
@@ -72,7 +74,10 @@
     "lint:js": "eslint . --ext .js",
     "lint:js:fix": "npm run lint:js -- --fix",
     "lint:format": "prettier --write .",
-    "lint:format:check": "prettier --check ."
+    "lint:format:check": "prettier --check .",
+    "prepare": "husky install",
+    "pre:commit": "lint-staged",
+    "pre:push": "npm run lint:js && npm run lint:format:check && npm run test:ci:all"
   },
   "browserslist": {
     "production": [

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";
 
@@ -258,7 +258,13 @@ class App extends Component {
             />
           )}
         />
-        {/* route path="/new-product" <NewProduct ...stuff /> */}
+        <Route
+          path="/new-product"
+          exact
+          render={(routeProps) => (
+            <NewProduct {...routeProps} saveNewProduct={this.saveNewProduct} />
+          )}
+        />
       </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";
 
@@ -33,15 +33,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 (
@@ -63,7 +74,7 @@ class NewProductForm extends Component {
             const newProduct = addProductDetails(values);
             saveNewProduct(newProduct);
             setSubmitting(true);
-            // this.setSubmitted();
+            this.setSubmitted();
           }}
         >
           {({
@@ -183,7 +194,7 @@ class NewProductForm extends Component {
             </form>
           )}
         </Formik>
-        {/* {submitted && <Redirect to="/" />} */}
+        {submitted && <Redirect to="/" />}
       </>
     );
   }