Now loading user in a wrapper for the app, added loading screen

.env

@@ -3,4 +3,4 @@ VITE_APP_API_URL=https://bxt-dev.api.adaptiveagriculture.ca/v1
 #Auth0
 VITE_AUTH0_CLIENT_DOMAIN=brandxtech.auth0.com
 VITE_AUTH0_AUDIENCE=bxt-dev.api.adaptiveagriculture.ca
-VITE_AUTH0_BXT_CLIENT_ID=dzJTpqIeMA4Rwk4xujtwPbAO3TY32bM1
+VITE_AUTH0_DEV_CLIENT_ID=dzJTpqIeMA4Rwk4xujtwPbAO3TY32bM1

package.json

@@ -18,6 +18,9 @@
   },
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^6.1.5",
     "axios": "^1.7.7",
     "moment": "^2.30.1",
     "react": "^18.3.1",

src/app/AuthHTTPWrapper.tsx

@@ -2,23 +2,17 @@ import { Auth0Provider } from '@auth0/auth0-react'
 import { or } from '../utils/types'
 import AuthWrapper from '../providers/auth'
 import HTTPProvider from '../providers/http'
-import App from './App'
 import { useState } from 'react'
+import LoadingScreen from './LoadingScreen'
+import UserWrapper from './UserWrapper'
 
 function AuthHTTPWrapper() {
   const [token, setToken] = useState<string | undefined>(undefined)
 
-  let url: string | undefined = window.location.origin;
+  let url: string | undefined = import.meta.env.VITE_AUTH0_CLIENT_DOMAIN;
-  let audience: string | undefined;
+  let audience: string | undefined = import.meta.env.VITE_AUTH0_AUDIENCE;
-  if (window.location.origin === "https://staging.brandxtech.ca") {
-    url = import.meta.env.VITE_AUTH0_CLIENT_STAGING_DOMAIN;
-    audience = import.meta.env.VITE_AUTH0_STAGING_AUDIENCE;
-  } else {
-    url = import.meta.env.VITE_AUTH0_CLIENT_DOMAIN;
-    audience = import.meta.env.VITE_AUTH0_AUDIENCE;
-  }
 
-  let client_id = import.meta.env.VITE_AUTH0_BXT_CLIENT_ID;
+  let client_id = import.meta.env.VITE_AUTH0_DEV_CLIENT_ID;
 
   return (
     <Auth0Provider
@@ -34,10 +28,12 @@ function AuthHTTPWrapper() {
       <AuthWrapper setToken={setToken}>
         { token ? 
           <HTTPProvider token={token}>
-            <App/>
+            <UserWrapper/>
           </HTTPProvider>
         :
-          <p>no token</p>
+          <LoadingScreen
+            message='Loading user profile'
+          />
         }
       </AuthWrapper>
     </Auth0Provider>

src/app/LoadingScreen.tsx

@@ -0,0 +1,23 @@
+import { CircularProgress, Typography } from "@mui/material";
+
+interface Props {
+    message?: string;
+}
+
+export default function LoadingScreen(props: Props) {
+
+    const { message } = props;
+
+    return (
+        <>
+            <CircularProgress
+                size={125}
+                style={{ marginBottom: 24 }}
+            />
+            <br/>
+            <Typography variant="h6">
+                {message ? message : "Loading..."}
+            </Typography>
+        </>
+    );
+}

src/app/UserWrapper.tsx

@@ -5,13 +5,15 @@ import './App.css'
 import { useUserAPI } from '../providers/pond/userAPI'
 import { useAuth0 } from '@auth0/auth0-react'
 import { or } from '../utils/types'
+import LoadingScreen from './LoadingScreen'
 
-function App() {
+export default function UserWrapper() {
   const [count, setCount] = useState(0)
   const [loading, setLoading] = useState(false)
   const userAPI = useUserAPI();
   const useAuth = useAuth0();
   const hasFetched = useRef(false);
+  const [user, setUser] = useState<any | undefined>(undefined)
 
   let user_id = or(useAuth.user?.sub, "")
 
@@ -19,9 +21,10 @@ function App() {
     // if (loading) return;
     if (hasFetched.current) return;
     setLoading(true)
-    console.log("send")
+    // console.log("send")
     userAPI.getUser(user_id).then(resp => {
-        console.log(resp)
+        // console.log(resp)
+        setUser(resp)
     }).finally(() => {
         setLoading(false)
         hasFetched.current = true;
@@ -33,6 +36,12 @@ function App() {
     loadUser()
   }, [loading])
 
+  if (!user || loading) return (
+    <LoadingScreen
+      message={"Loading user profile..."}
+    />
+  )
+
   return (
     <><div>
         <a href="https://vitejs.dev" target="_blank">
@@ -55,6 +64,4 @@ function App() {
         </p>
     </>
   )
-}
+}
-
-export default App

src/providers/auth.tsx

@@ -19,21 +19,13 @@ export default function AuthWrapper(props: Props) {
         if (isAuthenticated) getAccessTokenSilently().then(t => {
             if (t.length < 1) {
                 loginWithRedirect()
-            } else {
-
             }
             setToken(t)
         }).catch(() => {
             // No token, go back to login
             loginWithRedirect()
         })
-      }, [setToken, isAuthenticated])
+    }, [setToken, isAuthenticated])
 
-    if (isAuthenticated) return (
+    return children;
-        children
-    )
-
-    return (
-        <p>Redirecting...</p>
-    )
 }

src/providers/pond/pond.tsx

@@ -3,7 +3,7 @@ import UserProvider, { useUserAPI } from "./userAPI";
 
 export const pondURL = (partial: string, demo: boolean = false): string => {
   let url = import.meta.env.VITE_APP_API_URL + (demo ? "/demo" : "") + partial;
-  console.log(url)
+  // console.log(url)
   // if (isStaging()) url = process.env.REACT_APP_STAGING_API_URL + (demo ? "/demo" : "") + partial;
   return url;
 };