quick commit

.env

-PORT=8090
\ No newline at end of file
+PORT=8090
+REACT_APP_GOOGLE_CLIENT_ID=925243198137-hhe2e3ejlethf321hh7tbm7ontc19cpj.apps.googleusercontent.com
\ No newline at end of file

src/@types/Manager.d.ts

+declare module "Manager" {
+    export interface Manager {
+        firstName: string,
+        lastName: string,
+        googleId: string,
+        email: string,
+        imageUrl: string
+        managerId?: string
+    }
+}
\ No newline at end of file

src/App.tsx

-import React from 'react';
-import MainRouter from 'router/MainRouter';
+import { MainRouter }  from 'router';
 
 function App() {
   return (
-    <div className="App">
-      <MainRouter />  
-    </div>
+      <div className="App">
+        <MainRouter />  
+      </div>
   );
 }
 

src/components/Nav.tsx

-import React from 'react'
+import React, { useMemo} from 'react'
 import { Link } from 'react-router-dom'
-
+import {useGoogleAuth} from 'hooks'
 const Nav = () => {
+    const { isSignedIn, signOut, signIn } = useGoogleAuth();
+
+    const handleAuth = () => { isSignedIn ? signOut() : signIn();}
+
+    const authLinkText = useMemo(() => isSignedIn ? "Logout" : "Login", [isSignedIn]);
+
+
     return (
         <header className="nav-bar" role="navigation">
             <div className="order-management">Order Management Console PRO</div>
             <ul className="nav-list">
                 <li><Link className="nav-link" to="/orders">All orders</Link></li>
                 <li><Link className="nav-link" to="/account">(account logo here)</Link></li>
-                <li><Link className="nav-link" to="/">Login / Logout</Link></li>
+                <li><button onClick={handleAuth}>{authLinkText}</button></li>
             </ul>
         </header>
     )

src/hooks/index.ts

+export {default as useAllOrders} from './useAllOrders'
+export * from './useGoogleAuth'
+export {default as useOrder} from './useOrder'
\ No newline at end of file

src/hooks/useAllOrders.ts

+import  {useState, useEffect } from 'react'
+import { OrderService } from 'services'
+import { Order } from 'Order'
+
+enum ResStatus {
+    IDLE = "IDLE",
+    FETCHING = "FETCHING",
+    SUCCESS = "SUCCESS",
+    ERROR = "ERROR"
+}
+
+const useAllOrders = () => {
+    const [status, setStatus] = useState<ResStatus>(ResStatus.IDLE);
+    const [data, setData] = useState<Order[]>([]);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+    
+        const fetchOrders = async () => {
+            setStatus(ResStatus.FETCHING);
+            try {
+                const ordersData = await OrderService.allOrders()
+                setData(ordersData);
+                setStatus(ResStatus.SUCCESS)
+            } catch (err) {
+                setError(err)
+                setStatus(ResStatus.ERROR);
+            }
+        };
+
+        fetchOrders();
+    }, []);
+
+    return { status, data, orders: data, error, ResStatus };
+};
+
+export default useAllOrders;
\ No newline at end of file

src/hooks/useGoogleAuth.tsx

+
+import React from 'react'
+import { useGoogleLogin, useGoogleLogout } from 'react-google-login'
+import { useHistory } from 'react-router-dom'
+import { Manager } from 'Manager'
+const GoogleAuthContext = React.createContext<any>({});
+
+export const useGoogleAuth = () => React.useContext(GoogleAuthContext);
+export default useGoogleAuth;
+
+export const GoogleAuthProvider: React.FC = ({ children }) => {
+    const {push: historyPush} = useHistory();
+    const [isSignedIn, setIsSignedIn] = React.useState(false)
+    const [staySignedIn, setStaySignedIn] = React.useState(true)
+    const [manager, setManager] = React.useState<Manager | null>()
+    const [authError, setAuthError] = React.useState<String | null>()
+
+  const { signIn, loaded, } = useGoogleLogin({ 
+        clientId: (process.env.REACT_APP_GOOGLE_CLIENT_ID as string),
+        onSuccess: (res: any) => {
+            const {
+                email, 
+                familyName: lastName, 
+                givenName:firstName, 
+                googleId, 
+                imageUrl
+            } = res.profileObj;
+       
+            setManager(({
+                email,
+                firstName,
+                lastName,
+                googleId,
+                imageUrl
+            }))
+
+            // ManagerService.existByEmail(email) // GET api/managers/[email]
+            //     .then((exists: boolean) => {
+            //         if (exists) {
+            //             ManagerService.isLoggedin(email)
+            //         } else {
+            //            ManagerService.create([managerData])
+            //         }
+            //     }).finally(() => {
+                    setIsSignedIn(true);
+                    historyPush("/orders");
+            //     })
+ 
+         },
+        onFailure: (err) =>  { 
+            console.error("GOOGLE AUTH SIGN-IN ERROR: ", err) 
+            setAuthError(`Ooops. Something went wrong: ${err?.message}`);
+        },
+        isSignedIn: staySignedIn,
+        cookiePolicy: 'single_host_origin'
+    })
+
+    const { signOut } = useGoogleLogout({ 
+        clientId: (process.env.REACT_APP_GOOGLE_CLIENT_ID as string),
+        onLogoutSuccess: () =>  { 
+            setIsSignedIn(false);
+            historyPush("/") 
+        },
+        onFailure: () =>  { 
+            console.error("A GOOGLE AUTH SIGN-OUT ERROR OCCURED") 
+            setAuthError("Ooops. Something went wrong");
+        },
+     })
+
+    const authContextValues = {
+        authError,
+        isSignedIn,
+        loaded, 
+        setStaySignedIn,
+        signIn,
+        signOut,
+        staySignedIn,
+        manager
+    };
+
+  return <GoogleAuthContext.Provider value={authContextValues}>{children}</GoogleAuthContext.Provider>
+}

src/hooks/useOrder.ts

+import  {useState, useEffect } from 'react'
+import { OrderService } from 'services'
+import { Order } from 'Order'
+
+enum ResStatus {
+    IDLE = "IDLE",
+    FETCHING = "FETCHING",
+    SUCCESS = "SUCCESS",
+    ERROR = "ERROR"
+}
+
+const useOrder = (orderId: string) => {
+    const [status, setStatus] = useState<ResStatus>(ResStatus.IDLE);
+    const [data, setData] = useState<Order | null>(null);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+    
+        const fetchOrders = async () => {
+            setStatus(ResStatus.FETCHING);
+            try {
+                const orderData = await OrderService.orderById(orderId)
+                setData(orderData);
+                setStatus(ResStatus.SUCCESS)
+            } catch (err) {
+                setError(err)
+                setStatus(ResStatus.ERROR);
+            }
+        };
+
+        fetchOrders();
+    }, []);
+
+    return { status, data, order: data, error, ResStatus };
+};
+
+export default useOrder;
\ No newline at end of file

src/pages/AuthPage.tsx

-import React from 'react'
-import { LoginForm } from 'components';
-import { GoogleLogin } from 'react-google-login';
-
 const AuthPage = () => {
-    const responseGoogle = (response: any) => {
-        // console.log(response)
-        // console.log(response.profileObj);
-        // console.log(response.tokenObj);
-
-        const {email, familyName:lastName, givenName:firstName, googleId, imageUrl} = response.profileObj;
-        return ({
-            email,
-            firstName,
-            lastName,
-            googleId,
-            imageUrl
-        })
-    }
-
     return (
         <div>
-            <GoogleLogin
-                clientId="925243198137-hhe2e3ejlethf321hh7tbm7ontc19cpj.apps.googleusercontent.com"
-                buttonText="Login"
-                onSuccess={responseGoogle}
-                onFailure={responseGoogle}
-                cookiePolicy={'single_host_origin'}
-            />
+            <h1>Welcome</h1>
         </div>
     )
 }
 
-export default AuthPage
-
-/*
-Google Successful OAuth response (The parts we want to keep, anyway):
-response => 
-    response.profileObj = {
-        email: "kkaminski@nisum.com",
-        familyName: "Kaminski",
-        givenName: "Kevin",
-        googleId: "104324023295177405903",
-        imageUrl: "https://lh3.googleusercontent.com/a/AATXAJymxbs98AGxOFCVUCpV9pEwpxx1JWR6XZqKXe8b=s96-c",
-        name: "Kevin Kaminski"
-    }
-
-    response.tokenObj = {
-        access_token: "ya2...LCe",
-        expires_at: 1620238821414,
-        expires_in: 3599,
-        first_issued_at: 1620235222414,
-        id_token: "eyJhbGciOiJSUzI1NiIs...yXc6HOG97FF6eF1AU0Oh8w",
-        idpId: "google",
-        login_hint: "AJDLj6J...RcffTyHTSIHVKSQ",
-        scope: "email profile https://www.googleapis.com/auth/userinfo.email openid https://www.googleapis.com/auth/userinfo.profile",
-        session_state: {
-            extraQueryParams: {
-                authuser: 2
-            }
-        },
-        token_type: "bearer"
-    }
-
-
-*/
+export default AuthPage
\ No newline at end of file

src/pages/OrderIndexPage.tsx

@@ -2,28 +2,10 @@ import React, {useState, useEffect} from 'react'
 import {OrderDetails, SearchOrder} from 'components'
 import { OrderService } from 'services';
 import { Order } from 'Order';
+import { useAllOrders } from 'hooks'
 
 const OrderIndexPage = () => {
-    let [orders, setOrders] = useState([]);
-
-    useEffect(() => {
-        const apiUrl = 'http://localhost:8080/api/orders';
-        fetch(apiUrl).then((response) => response.json())
-            .then((data) => {
-                console.log('This is your data', data)
-                setOrders(data);
-            });
-    }, [])
-    
-    
-    // const orderDetailsArr = orders.map((order: any, idx: any) => {
-    //     const apiUrl = 'http://localhost:8080/api/orders';
-    //     fetch(apiUrl).then((response) => response.json())
-    //         .then((data) => {
-    //             console.log('This is your data', data)
-    //             setOrders(data);
-    //         });
-    // }, [setOrders])
+    const { orders } = useAllOrders();
 
     const orderDetailsArr = orders.map((order: Order, idx: any) => {
         return <tr key={idx}><OrderDetails

src/pages/OrderShowPage.tsx

-import React, {useState, useEffect} from 'react';
+import { useParams } from 'react-router-dom';
 import {OrderShowDetails} from 'components';
 import { Order, Item } from 'Order';
+import { useOrder } from 'hooks'
 
-const OrderShowPage = (props: any) => {
-    const location = props.match.params.id;
-    const apiUrl = 'http://localhost:8080/api/orders/' + location;
-    const [order, setOrder] = useState<Order>();
-    const [items, setItems] = useState<Item[]>()
-
-    useEffect(() => {
-        fetch(apiUrl).then((response) => response.json())
-            .then((data) => {
-                console.log('This is your order', data)
-                setOrder(data);
-                setItems(data.orderItems)
-            });
-    }, [setOrder, setItems, apiUrl])
+const OrderShowPage = () => {
+    const { id } = useParams<any>();
+    const { order} = useOrder(id)
 
     if (!order) {
         return(<></>);
     }
     
     return (
-        <>
+        <div>
             <span>
                 <h3>Order Date: {order.orderCreatedAt}</h3>
                 <h3>Order Number: {order.id}</h3>
                 <h3>Order Status: {order.orderStatus}</h3>
             </span>
             
-            <OrderShowDetails items={items}/>
-        </>
+            <OrderShowDetails items={order.orderItems}/>
+        </div>
     )
 }
 

src/router/CustomRoutes.tsx

+import React from 'react'
+import { Redirect, Route, RouteProps } from 'react-router-dom';
+
+import { useGoogleAuth } from 'hooks';
+
+interface CustomRouteProps extends RouteProps {
+    component: React.ComponentType;
+}
+  
+export const PublicRoute: React.FC<CustomRouteProps> = ({component: Component, ...rest}) => {
+    const { isSignedIn } = useGoogleAuth();
+
+    return (
+        <Route {...rest} render={(props: any) => (
+            !isSignedIn ?
+            <Component {...props} /> : 
+            <Redirect exact to="/orders" />
+        )} />    
+    );
+};
+
+export const PrivateRoute: React.FC<CustomRouteProps>  = ({component: Component, ...rest}) => {
+    const { isSignedIn } = useGoogleAuth();
+
+    return (
+        <Route {...rest} render={(props: any) => (
+            isSignedIn ?
+            <Component  {...props }/>: 
+            <Redirect exact from="/orders" to="/" />
+        )} />
+    );
+};
\ No newline at end of file

src/router/MainRouter.tsx

-import {
-    BrowserRouter,
-    Switch,
-    Route,
-  } from "react-router-dom";
-  import {Nav} from 'components'
+import { BrowserRouter, Switch } from "react-router-dom";
 
+import { Nav } from 'components'
 import { AccountPage, AuthPage, OrderIndexPage, OrderShowPage } from 'pages';
+import { GoogleAuthProvider } from 'hooks'
+import { PublicRoute, PrivateRoute } from 'router'
 
 const MainRouter: React.FC = () => {
     return (
         <BrowserRouter>
-            <Nav />
-            <Switch>
-                <Route path="/account" component={AccountPage} />
-                <Route exact path="/" component={AuthPage} />
-                <Route path="/orders/:id" component={OrderShowPage} />
-                <Route path="/orders" component={OrderIndexPage} />
-                {/* <Route component={NotFoundPage} /> */}
-            </Switch>
+            <GoogleAuthProvider>
+                <Nav />
+                <main>
+                    <Switch>
+                        <PrivateRoute path="/account" component={AccountPage} />
+                        <PublicRoute exact path="/" component={AuthPage} />
+                        <PrivateRoute path="/orders/:id" component={OrderShowPage} />
+                        <PrivateRoute path="/orders" component={OrderIndexPage} />
+                        {/* <Route component={NotFoundPage} /> */}
+                    </Switch>
+                </main>
+            </GoogleAuthProvider>
         </BrowserRouter>
     )
 }

src/router/index.ts

+export * from './CustomRoutes'
+export { default as MainRouter } from './MainRouter'
\ No newline at end of file