Updated routing

src/App.js

@@ -4,35 +4,31 @@ import Main from "./component/Main";
 import AuthRoute from "./component/AuthRoute";
 import { Switch } from "react-router";
 import Login from "./component/Login";
-import 'semantic-ui-css/semantic.min.css'
-import React, { useState, createContext, useEffect } from 'react';
-
+import "semantic-ui-css/semantic.min.css";
+import React, { useState, createContext, useEffect } from "react";
 
 export const AuthContext = createContext();
 
-
 function App() {
-  const[isLoggedIn, setIsLoggedIn] = useState(false);
-  const[user, setUser] = useState(null);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [user, setUser] = useState(null);
   console.log(user);
   const state = {
     user,
     setUser,
     isLoggedIn,
-    setIsLoggedIn
-  }
-
-  useEffect(()=>{
-
-    localStorage.setItem("loggedIn", isLoggedIn)
+    setIsLoggedIn,
+  };
 
-  }, [isLoggedIn])
+  useEffect(() => {
+    localStorage.setItem("loggedIn", isLoggedIn);
+  }, [isLoggedIn]);
 
   return (
     <AuthContext.Provider value={state}>
       <div>
         <Switch>
-          <AuthRoute path="/login">
+          <AuthRoute exact path="/login">
             <Login />
           </AuthRoute>
           <AuthRoute>

src/component/AuthRoute.jsx

-import {useEffect, useContext} from "react";
+import { useEffect, useContext } from "react";
 import React from "react";
 import { Redirect, Route } from "react-router";
-import {AuthContext} from '../App';
-
-export default function AuthRoute({children, ...rest}) {
-
-  const { isLoggedIn } = useContext(AuthContext)
+import { AuthContext } from "../App";
 
+export default function AuthRoute({ children, ...rest }) {
+  const { isLoggedIn } = useContext(AuthContext);
 
   return (
     <Route
@@ -14,14 +12,13 @@ export default function AuthRoute({children, ...rest}) {
       render={({ location }) => {
         if (isLoggedIn) {
           if (location.pathname === "/login") {
-            return <Redirect to="/" />;
-          } else {
-            return children;
-          }
-        } else if (location.pathname !== "/login") {
-          return <Redirect to="/login" />;
+            return <Redirect to="/products" />;
+          } else return children;
+        } else {
+          if (location.pathname !== "/login") {
+            return <Redirect to="/login" />;
+          } else return children;
         }
-        return children;
       }}
     />
   );

src/component/Main.jsx

@@ -15,7 +15,7 @@ export default function Main() {
         <AuthRoute exact path="/products/new">
           <ProductForm method="POST" />
         </AuthRoute>
-        <AuthRoute exact path="/products/edit/:productId">
+        <AuthRoute exact path="/products/:productId/update">
           <ProductForm method="PUT" />
         </AuthRoute>
         <AuthRoute

src/component/ProductForm.jsx

 import React, { useEffect, useState } from "react";
 import { useHistory, useParams } from "react-router";
 import emptyProduct from "../emptProduct";
-import Config from '../config';
+import Config from "../config";
 
 const emptyForm = {
   ...emptyProduct,
@@ -21,7 +21,7 @@ export default function ProductForm(props) {
   const { productId } = useParams("productId");
 
   useEffect(() => {
-    fetch(`http://localhost:8080/api/products/${productId}/`).then((res) => {
+    fetch(`${Config.inventoryUrl}/${productId}/`).then((res) => {
       if (res.ok) {
         console.log(res);
         res.json().then((data) => {
@@ -40,7 +40,7 @@ export default function ProductForm(props) {
   const validate = () => {
     setErrors([]);
     const errs = [];
-    console.log(form)
+    console.log(form);
     if (form.sku.length < 3) {
       errs.push("SKU must be at least 3 characters");
     }
@@ -238,7 +238,9 @@ export default function ProductForm(props) {
               className="form-control"
               id="stock"
               value={form.availableStock}
-              onChange={(e) => setForm({ ...form, availableStock: e.target.value })}
+              onChange={(e) =>
+                setForm({ ...form, availableStock: e.target.value })
+              }
             />
           </div>
         </div>

src/component/ProductRow.jsx

 import React, { useState } from "react";
 import "./../styles/ProductRow.css";
 import { Modal, Button, Alert } from "react-bootstrap";
+import { useHistory } from "react-router";
 
 export default function ProductRow({ product, handleDelete }) {
   const [show, setShow] = useState(false);
   const [showConfirm, setShowConfirm] = useState(false);
+  const history = useHistory();
 
   const handleClose = () => {
     setShow(false);
@@ -60,7 +62,10 @@ export default function ProductRow({ product, handleDelete }) {
           >
             Delete product
           </Button>
-          <Button variant="primary" href={`/products/edit/${product.sku}`}>
+          <Button
+            variant="primary"
+            onClick={() => history.push(`/products/${product.sku}/update`)}
+          >
             Edit Product
           </Button>