[APF-105] ✨ Add relevant information to profile page. Add...

[APF-105] ✨ Add relevant information to profile page. Add relevant(ish) welcome message to home page.

src/components/Nav.tsx

@@ -3,30 +3,28 @@ import { Link } from 'react-router-dom'
 import {useGoogleAuth} from 'hooks'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUser } from '@fortawesome/free-solid-svg-icons'
-import { Box, Heading, Flex, Spacer, Button } from "@chakra-ui/react"
+import { Box, Heading, Flex, Spacer, Button, Image, Avatar } from "@chakra-ui/react"
 import Logo from '../img/logo.png'
 
 const Nav = () => {
-    const { isSignedIn, signOut, signIn } = useGoogleAuth();
-
+    const { isSignedIn, signOut, signIn, manager } = useGoogleAuth();
     const handleAuth = () => { isSignedIn ? signOut() : signIn();}
-
     const authLinkText = useMemo(() => isSignedIn ? "Logout" : "Login", [isSignedIn]);
-
-    const userIcon = <FontAwesomeIcon icon={faUser} />
-
+    const userIcon = isSignedIn ? 
+    <Avatar name={manager.firstName + " " + manager.lastName} boxSize="40px" borderRadius="full"  src={manager.imageUrl} alt="profile"/> : 
+    <FontAwesomeIcon icon={faUser} />
 
     return (
         <Flex>
             <Box className="left-nav">
-                <Link to="/"><img src={Logo}/></Link>
+                <Link to="/"><Image src={Logo} alt="project logo"/></Link>
             </Box>
             <Spacer />
-            <Box className="right-nav">
+            <Flex className="right-nav">
                 <Link className="nav-link" to="/account">{userIcon}</Link>
                 <Button><Link to="/orders">All orders</Link></Button>
                 <Button onClick={handleAuth}>{authLinkText}</Button>
-            </Box>
+            </Flex>
         </Flex>
     )
 }

src/hooks/useGoogleAuth.tsx

@@ -15,7 +15,7 @@ export const GoogleAuthProvider: React.FC = ({ children }) => {
     const [manager, setManager] = React.useState<Manager | null>()
     const [authError, setAuthError] = React.useState<String | null>()
 
-  const { signIn, loaded, } = useGoogleLogin({ 
+    const { signIn, loaded, } = useGoogleLogin({ 
         clientId: (process.env.REACT_APP_GOOGLE_CLIENT_ID as string),
         onSuccess: (res: any) => {
             const {

src/hooks/useOrder.ts

@@ -29,7 +29,7 @@ const useOrder = (orderId: string) => {
         };
 
         fetchOrders();
-    }, []);
+    }, [orderId]);
 
     return { status, data, order: data, error, ResStatus };
 };

src/pages/AccountPage.tsx

-import React, { useState, useEffect } from 'react'
-import { GoogleAuthService } from 'services'
-import {AccountForm} from 'components'
+import { Box, Avatar, Center } from '@chakra-ui/react'
+import {useGoogleAuth} from 'hooks'
 const AccountPage = () => {
-    const storage = window.localStorage
-    const [userInfo, setUserInfo] = useState();
-
-
-
+    const { manager } = useGoogleAuth();
     return (
-        <div>
-            <AccountForm props={userInfo}/>
-        </div>
+        <Center>
+            <Box>
+                <Box>
+                    <Avatar name={manager.firstName + " " + manager.lastName} size="2xl" src={manager.imageUrl} alt="profile"/>
+                </Box>
+                <Box>
+                    Email: {manager.email}
+                </Box>
+                <Box>
+                    First Name: {manager.firstName}
+                </Box>
+                <Box>
+                    Last Name: {manager.lastName}
+                </Box>
+            </Box>
+        </Center>
     )
 }
 

src/pages/HomePage.tsx

+import React from 'react'
+import { Box, Center, Text, Heading } from '@chakra-ui/react'
+
+const HomePage = () => {
+    return (
+        <Center>
+            <Box>
+                <Box>
+                    <Text>Welcome to the Order Management System Console</Text>
+                    <Heading>PRO</Heading>
+                </Box>
+                <Box></Box>
+                <Box>
+                    <Text>
+                        It is here that you can check on the status of all orders, search for orders, or look at your account details.
+                    </Text>
+                    <Text>
+                        Please log in at the top right to experience all our platform has to offer.
+                    </Text>
+                </Box>
+            </Box>
+        </Center>
+    )
+}
+
+export default HomePage

src/pages/OrderIndexPage.tsx

 import React, {useState, useEffect} from 'react'
 import {OrderDetails } from 'components'
-import { OrderService } from 'services';
 import { Order } from 'Order';
 import { useAllOrders } from 'hooks'
 import {

src/pages/index.ts

 export { default as AccountPage } from './AccountPage'
 export { default as AuthPage } from './AuthPage'
+export { default as HomePage } from './HomePage'
 export { default as OrderIndexPage } from './OrderIndexPage'
 export { default as OrderShowPage } from './OrderShowPage'

src/router/MainRouter.tsx

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