Merged current version of dev for deployment

deployment.yaml

@@ -14,7 +14,7 @@ spec:
     spec:
       containers:
         - name: afp-inventory-ui-container
-          image: nexus.mynisum.com/afp-inventory-ui:11
+          image: nexus.mynisum.com/afp-inventory-ui:12
           imagePullPolicy: Always
           ports:
             - containerPort: 8081

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

@@ -12,16 +12,13 @@ export default function AuthRoute({ children, ...rest }) {
       render={({ location }) => {
         if (isLoggedIn) {
           if (location.pathname === "/login") {
-            // return <Redirect to="/" />;
-            return children;
-          } else {
-            return children;
-          }
-        } else if (location.pathname !== "/login") {
-          // return <Redirect to="/login" />;
-          return children;
+            return <Redirect to="/products" />;
+          } else return children;
+        } else {
+          if (location.pathname !== "/login") {
+            return <Redirect to="/login" />;
+          } else return children;
         }
-        return children;
       }}
     />
   );

src/component/Header.jsx

@@ -4,14 +4,14 @@ import Search from "./Search";
 import ".././styles/Header.css"
 import LogoutButton from "./session/LogoutButton";
 
-const Header = ({login, setLogin}) => {
+const Header = ({ login, setLogin }) => {
   const [show, setShow] = useState(false);
 
   return (
     <nav className="navbar navbar-expand-lg navbar-dark">
-      <div className="container-fluid">
+      <div id="parent" className="container-fluid">
         <Link className="navbar-brand" to="/">
-          Ascend
+          <img id="logo" src="../../../logo.jpeg" alt="Nisum Logo"></img>
         </Link>
         <button
           className="navbar-toggler"
@@ -30,7 +30,7 @@ const Header = ({login, setLogin}) => {
           id="navbarSupportedContent"
         >
           <ul className="navbar-nav me-auto mb-2 mb-lg-0">
-            <li className="nav-item" style={{color: "red"}}>
+            <li className="nav-item">
               <Link className="nav-link" to="/products">
                 Products
               </Link>
@@ -41,13 +41,11 @@ const Header = ({login, setLogin}) => {
               </Link>
             </li>
           </ul>
-          <div id="page-title" className="nav-item mx-auto"> <h1>Inventory, Promotions, Pricing</h1>
-          </div>
-
-     
-        <LogoutButton/>
+          
+          <LogoutButton />
         </div>
       </div>
+      <h1 id="page-title">Inventory, Promotions, Pricing</h1>
     </nav>
   );
 };

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

@@ -21,7 +21,7 @@ export default function ProductForm(props) {
   const { productId } = useParams("productId");
 
   useEffect(() => {
-    fetch(`${Config.inventoryUrl}${productId}/`).then((res) => {
+    fetch(`${Config.inventoryUrl}/${productId}/`).then((res) => {
       if (res.ok) {
         console.log(res);
         res.json().then((data) => {

src/component/ProductIndex.jsx

@@ -10,7 +10,7 @@ export default function ProductIndex() {
   const [categories, setCategories] = useState([]);
   const [activeCategory, setActiveCategory] = useState("");
 
-  console.log(displayProducts);
+  // console.log(displayProducts);
   const fetchProducts = async () => {
     const res = await fetch(`${Config.inventoryUrl}`);
     if (res.ok) {

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>
 

src/component/session/LoginButton.jsx

@@ -10,13 +10,14 @@ const clientId =
 
 function LoginButton({}){
 
-    const { isLoggedIn, setIsLoggedIn } = useContext(AuthContext);
-
+    const { isLoggedIn, setIsLoggedIn,setUser } = useContext(AuthContext);
     const onSuccessLogin = (res) =>{
         setIsLoggedIn(true);
         const { tokenId, profileObj } = res;
+        setUser(profileObj);
     };
 
+
     const onFailure = (res) =>{
         setIsLoggedIn(false);
     };
@@ -34,6 +35,7 @@ function LoginButton({}){
                 onSuccess= {onSuccessLogin}
                 onFailure= {onFailure}
                 cookiePolicy={'single_host_origin'}
+                isSignedIn={true}
             />
             </div>
         </div>

src/component/session/LoginButtonPage.css

@@ -2,4 +2,5 @@
     padding: 50px;
     justify-content: center;
 
-}
\ No newline at end of file
+}
+

src/component/session/LogoutButton.jsx

-import React, { useContext } from "react";
-import { GoogleLogout } from "react-google-login";
-import { AuthContext } from "../../App";
-
+import React, {useContext} from 'react';
+import {GoogleLogout} from 'react-google-login';
+import {AuthContext} from "../../App";
+import { Dropdown } from 'react-bootstrap';
+import "./LogoutDropDown.css";
 const google_ClientID = process.env.REACT_APP_GOOGLE_CLIENT_ID;
 const clientId = `925243198137-7066age7c8m7sfuufcheruoa43ng55ts.apps.googleusercontent.com`;
 
 function LogoutButton() {
-  const { isLoggedIn, setIsLoggedIn } = useContext(AuthContext);
+    const { isLoggedIn, setIsLoggedIn, user , setUser } = useContext(AuthContext);
+
+    const onSuccessLogout= (res) =>{
+        setIsLoggedIn(false);
+    }
 
-  const onSuccessLogout = (res) => {
-    setIsLoggedIn(false);
-  };
+    return(
+        <div>
+            <Dropdown>
+                <Dropdown.Toggle  className="dropdown">
+                    {user != null ?
+                    <p><img className="profile-pic" src={user.imageUrl}/>
+                    {user.name}</p>
+                    : <p>User</p>
+                    }
+                </Dropdown.Toggle>
+                <Dropdown.Menu>
+                <Dropdown.Item>Profile</Dropdown.Item>
+                <Dropdown.Item><GoogleLogout
+                render={props => (<div onClick={props.onClick}>Logout</div>)}
+                clientId= {clientId}
+                buttonText="Logout"
+                onLogoutSuccess={onSuccessLogout}
+                isSignedIn={false}
+            /></Dropdown.Item>
+                </Dropdown.Menu>
+            </Dropdown>
 
-  return (
-    <div>
-      <GoogleLogout
-        clientId={clientId}
-        buttonText="Logout"
-        onLogoutSuccess={onSuccessLogout}
-      />
-    </div>
-  );
+        </div>
+    );
 }
 
 export default LogoutButton;

src/component/session/LogoutDropDown.css

+.profile-pic{
+    position: relative;
+    width: 28px;
+    height: 28px;
+    overflow: hidden;
+    border-radius: 50%;
+    padding: 2px;
+}
+
+.dropdown{
+    color:#EBEBEB;
+    background-color: transparent;
+    border-color: transparent;
+    
+}
+
+.dropdown:hover{
+    color:#CCCDCF;
+    background-color: transparent;
+    border-color: transparent;
+}
+
+.dropdown-toggle:after {
+    display: none;
+}
+
+

src/config.js

 class Config {
   static inventoryUrl = "http://13.64.175.185:8080/api/products";
-  static promotionsUrl = "http://40.118.215.99:8082/api/promos";
+  static promotionsUrl = "http://168.62.203.53:8082/api/promos";
   static sessionUrl = "http://localhost:8080/api/sessions";
 }
 

src/emptProduct.js

@@ -9,5 +9,4 @@ const emptyProduct = {
   productDesciption: "",
   productImageUrl: "",
 };
-
-export default emptyProduct;
+export default emptyProduct;
\ No newline at end of file

src/index.js

@@ -12,10 +12,11 @@ storage.setItem("loggedIn", "false");
 ReactDOM.render(
   <React.StrictMode>
     <BrowserRouter>
-      <App />
+    <App />
     </BrowserRouter>
+
   </React.StrictMode>,
-  document.getElementById("root")
+  document.getElementById('root')
 );
 
 // If you want to start measuring performance in your app, pass a function

src/styles/Header.css

 .navbar {
     background-color: #00567D;
+    position: relative;
 }
 
 #page-title{
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: auto;
+    margin-bottom: auto;
+    left: 0;
+    right: 0;
     color: #EBEBEB;
+    pointer-events: none;
+}
+
+#logo{
+    width: 100px;
+    height: 50px;
+}
+
+.nav-link{
+    color: #EBEBEB !important;
+}
+
+.nav-link:hover{
+    color: #CCCDCF !important;
 }
\ No newline at end of file