From 404b5d578ac78eca7ab8ea41fdc78056a8d6e5c0 Mon Sep 17 00:00:00 2001
From: Robert Watt <rob.watt@sitecore.com>
Date: Mon, 18 Dec 2023 10:59:32 -0600
Subject: [PATCH] Update things

---
 .env                                          |  1 +
 src/App.router.tsx                            |  4 ++-
 src/App.tsx                                   |  4 ---
 .../domains/ordercloud/components/Profile.tsx | 32 ++++++++-----------
 .../domains/ordercloud/hooks/useOrders.ts     |  1 -
 vite.config.ts                                |  2 +-
 6 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/.env b/.env
index 881835c..b5cdc33 100644
--- a/.env
+++ b/.env
@@ -1,3 +1,4 @@
+VITE_APP_CONFIG_BASE=/buyer-application
 VITE_APP_ORDERCLOUD_BASE_API_URL=https://sandboxapi.ordercloud.io
 VITE_APP_ORDERCLOUD_CLIENT_ID=40252024-3CC9-4430-ACC5-03F8E9E4ABD7
 VITE_APP_ORDERCLOUD_SCOPE=Shopper,MeAdmin,MeAddressAdmin,MeCreditCardAdmin,MeSubscriptionAdmin,OrderReader
diff --git a/src/App.router.tsx b/src/App.router.tsx
index 0f247a5..cb374e4 100644
--- a/src/App.router.tsx
+++ b/src/App.router.tsx
@@ -4,6 +4,8 @@ import App from "./App";
 import Profile from "./features/domains/ordercloud/components/Profile";
 import Orders from "./features/domains/ordercloud/components/Orders";
 
+const basename = import.meta.env.VITE_APP_CONFIG_BASE;
+
 const router = createBrowserRouter([
   {
     path: "/",
@@ -19,7 +21,7 @@ const router = createBrowserRouter([
       }
     ],
   },
-], {basename: '/basic-application'});
+], {basename});
 
 const AppRouter: FC = () => {
   return <RouterProvider router={router} />;
diff --git a/src/App.tsx b/src/App.tsx
index 705a0c8..b48b9b2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -44,10 +44,6 @@ function App() {
           <Text fontWeight="normal" fontSize="sm">© Sitcore Inc. 2024</Text>
         </GridItem>
       </Grid>
-      {/* <TopNav />
-      <Profile />
-      <AuthToggle />
-      <Orders direction="Incoming" /> */}
       <GlobalLoadingIndicator/>
     </OrderCloudProvider>
   );
diff --git a/src/features/domains/ordercloud/components/Profile.tsx b/src/features/domains/ordercloud/components/Profile.tsx
index 7342724..b8cb21f 100644
--- a/src/features/domains/ordercloud/components/Profile.tsx
+++ b/src/features/domains/ordercloud/components/Profile.tsx
@@ -1,34 +1,30 @@
-import { FC, useMemo } from "react";
+import { FC } from "react";
 import { useCurrentUser, useMutateCurrentUser } from "../hooks/currentUser";
-import { Button, Container, Heading } from "@chakra-ui/react";
+import { Box, Button, Center, Container, Heading, Skeleton } from "@chakra-ui/react";
 import useOrderCloudContext from "../hooks/useOrderCloudContext";
+import { WarningIcon } from "@chakra-ui/icons";
 
 const Profile: FC = () => {
   const {isLoggedIn} = useOrderCloudContext();
-  const { data: user, status, error } = useCurrentUser();
+  const { data: user, isError, isPending:isLoading } = useCurrentUser();
   const {mutate, isPending} = useMutateCurrentUser();
-  
-  const content = useMemo(() => {
-    switch (status) {
-      case "pending":
-        return "PENDING";
-      case "error":
-        return <pre>{JSON.stringify(error, null, 2)}</pre>;
-      case "success":
-        return isLoggedIn ? (
+
+  return <Container maxW="full" pt={6} px={8}>
+    <Skeleton isLoaded={!isLoading}>
+      {isError ? (
+        <Box as={Center}><Heading><WarningIcon/></Heading></Box>
+      ) : isLoggedIn ? (
           <>
-            <Heading size="md" mb={5}>{`Welcome ${user.FirstName} ${user.LastName}!`}</Heading>
+            <Heading size="md" mb={5}>{`Welcome ${user?.FirstName} ${user?.LastName}!`}</Heading>
             <Button isDisabled={isPending} onClick={() => mutate({FirstName: "Buyer", LastName: "User"})}>Change Name</Button>
           </>
         ) : (
           <>
             <Heading size="md">Welcome to the app!</Heading>
           </>
-        );
-    }
-  }, [error, isLoggedIn, isPending, mutate, status, user])
-
-  return <Container maxW="full" pt={6} px={8}>{content}</Container>
+        )}
+    </Skeleton>
+  </Container>
 };
 
 export default Profile;
diff --git a/src/features/domains/ordercloud/hooks/useOrders.ts b/src/features/domains/ordercloud/hooks/useOrders.ts
index 336c8c2..deddd84 100644
--- a/src/features/domains/ordercloud/hooks/useOrders.ts
+++ b/src/features/domains/ordercloud/hooks/useOrders.ts
@@ -26,7 +26,6 @@ const useOrders = (
   direction: OrderDirection,
   listOptions?: OrderListOptions
 ) => {
-  console.log('hit');
   return useAuthQuery({
     queryKey: ["orders", direction, listOptions],
     queryFn: async () => {
diff --git a/vite.config.ts b/vite.config.ts
index 6728653..22cd77a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,6 +3,6 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: `/basic-application/`,
+  base: process.env.VITE_APP_CONFIG_BASE?.length > 1 ? `${process.env.VITE_APP_CONFIG_BASE}/` : undefined,
   plugins: [react()],
 })