From 28b8578605d281256f28cbadaeea59cd677e4298 Mon Sep 17 00:00:00 2001 From: Carter Date: Thu, 24 Oct 2024 12:21:52 -0600 Subject: [PATCH] getting user in app --- .env | 2 ++ package.json | 9 ++++---- src/app/App.tsx | 21 +++++++++++++++---- src/app/AuthHTTPWrapper.tsx | 10 +++++++-- src/providers/http.tsx | 42 ++++++++++++++++++++++++------------- src/providers/pond/pond.tsx | 3 ++- 6 files changed, 62 insertions(+), 25 deletions(-) diff --git a/.env b/.env index 1e19338..b763d31 100644 --- a/.env +++ b/.env @@ -1,3 +1,5 @@ +VITE_APP_API_URL=https://api.brandxtech.ca/v1 + #Auth0 VITE_AUTH0_CLIENT_DOMAIN=brandxtech.auth0.com VITE_AUTH0_AUDIENCE=pond.brandxtech.ca diff --git a/package.json b/package.json index 73fda9e..128b530 100644 --- a/package.json +++ b/package.json @@ -4,13 +4,14 @@ "version": "0.0.0", "type": "module", "scripts": { - "dev": "vite", + "start": "vite", + "start-local": "VITE_APP_API_URL=http://localhost:50052/v1 VITE_APP_WS_URL=ws://localhost:50052/v1/live VITE_APP_BILLING_URL=http://localhost:50053/v1 VITE_APP_RECLUSE_URL=http://localhost:50054/v1 VITE_APP_GITLAB_URL=http://localhost:50055/v1 vite", "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview", - "build:staging": "NODE_OPTIONS=--max_old_space_size=4096 REACT_APP_GOOGLE_API_KEY=${GOOGLE_API_KEY} REACT_APP_STRIPE_PUBLIC_KEY=${STRIPE_PUBLIC_KEY_STAGING} REACT_APP_MAPBOX_ACCESS_TOKEN=${MAPBOX_ACCESS_TOKEN} REACT_APP_CNHI_CLIENT_ID=${CNHI_CLIENT_ID} REACT_APP_CNHI_AUTHORIZE_URL=${CNHI_AUTHORIZE_URL} REACT_APP_CNHI_REDIRECT_URI=${CNHI_REDIRECT_URI} REACT_APP_CNHI_SCOPES=${CNHI_SCOPES} REACT_APP_CNHI_CONNECTION=${CNHI_CONNECTION} REACT_APP_CNHI_AUDIENCE=${CNHI_AUDIENCE} REACT_APP_IMAGE4IO_USERNAME=${IMAGE4IO_USERNAME} REACT_APP_IMAGE4IO_PASSWORD=${IMAGE4IO_PASSWORD} REACT_APP_JD_CLIENT_ID=${JD_CLIENT_ID} REACT_APP_JD_AUTHORIZE_URL=${JD_AUTHORIZE_URL} REACT_APP_JD_REDIRECT_URI=${JD_REDIRECT_URI} REACT_APP_JD_SCOPES=${JD_SCOPES} REACT_APP_JD_STATE=${JD_STATE} vite build", - "build:development": "NODE_OPTIONS=--max_old_space_size=4096 REACT_APP_GOOGLE_API_KEY=${GOOGLE_API_KEY} REACT_APP_STRIPE_PUBLIC_KEY=${STRIPE_PUBLIC_KEY_DEVELOPMENT} REACT_APP_MAPBOX_ACCESS_TOKEN=${MAPBOX_ACCESS_TOKEN} REACT_APP_CNHI_CLIENT_ID=${CNHI_CLIENT_ID} REACT_APP_CNHI_AUTHORIZE_URL=${CNHI_AUTHORIZE_URL} REACT_APP_CNHI_REDIRECT_URI=${CNHI_REDIRECT_URI} REACT_APP_CNHI_SCOPES=${CNHI_SCOPES} REACT_APP_CNHI_CONNECTION=${CNHI_CONNECTION} REACT_APP_CNHI_AUDIENCE=${CNHI_AUDIENCE} REACT_APP_IMAGE4IO_USERNAME=${IMAGE4IO_USERNAME} REACT_APP_IMAGE4IO_PASSWORD=${IMAGE4IO_PASSWORD} REACT_APP_JD_CLIENT_ID=${JD_CLIENT_ID} REACT_APP_JD_AUTHORIZE_URL=${JD_AUTHORIZE_URL} REACT_APP_JD_REDIRECT_URI=${JD_REDIRECT_URI} REACT_APP_JD_SCOPES=${JD_SCOPES} REACT_APP_JD_STATE=${JD_STATE} vite build", - "build:production": "NODE_OPTIONS=--max_old_space_size=4096 REACT_APP_GOOGLE_API_KEY=${GOOGLE_API_KEY} REACT_APP_STRIPE_PUBLIC_KEY=${STRIPE_PUBLIC_KEY_PRODUCTION} REACT_APP_MAPBOX_ACCESS_TOKEN=${MAPBOX_ACCESS_TOKEN} REACT_APP_CNHI_CLIENT_ID=${CNHI_CLIENT_ID} REACT_APP_CNHI_AUTHORIZE_URL=${CNHI_AUTHORIZE_URL} REACT_APP_CNHI_REDIRECT_URI=${CNHI_REDIRECT_URI} REACT_APP_CNHI_SCOPES=${CNHI_SCOPES} REACT_APP_CNHI_CONNECTION=${CNHI_CONNECTION} REACT_APP_CNHI_AUDIENCE=${CNHI_AUDIENCE} REACT_APP_IMAGE4IO_USERNAME=${IMAGE4IO_USERNAME} REACT_APP_IMAGE4IO_PASSWORD=${IMAGE4IO_PASSWORD} REACT_APP_JD_CLIENT_ID=${JD_CLIENT_ID} REACT_APP_JD_AUTHORIZE_URL=${JD_AUTHORIZE_URL} REACT_APP_JD_REDIRECT_URI=${JD_REDIRECT_URI} REACT_APP_JD_SCOPES=${JD_SCOPES} REACT_APP_JD_STATE=${JD_STATE} vite build", + "build:staging": "NODE_OPTIONS=--max_old_space_size=4096 VITE_APP_GOOGLE_API_KEY=${GOOGLE_API_KEY} VITE_APP_STRIPE_PUBLIC_KEY=${STRIPE_PUBLIC_KEY_STAGING} VITE_APP_MAPBOX_ACCESS_TOKEN=${MAPBOX_ACCESS_TOKEN} VITE_APP_CNHI_CLIENT_ID=${CNHI_CLIENT_ID} VITE_APP_CNHI_AUTHORIZE_URL=${CNHI_AUTHORIZE_URL} VITE_APP_CNHI_REDIRECT_URI=${CNHI_REDIRECT_URI} VITE_APP_CNHI_SCOPES=${CNHI_SCOPES} VITE_APP_CNHI_CONNECTION=${CNHI_CONNECTION} VITE_APP_CNHI_AUDIENCE=${CNHI_AUDIENCE} VITE_APP_IMAGE4IO_USERNAME=${IMAGE4IO_USERNAME} VITE_APP_IMAGE4IO_PASSWORD=${IMAGE4IO_PASSWORD} VITE_APP_JD_CLIENT_ID=${JD_CLIENT_ID} VITE_APP_JD_AUTHORIZE_URL=${JD_AUTHORIZE_URL} VITE_APP_JD_REDIRECT_URI=${JD_REDIRECT_URI} VITE_APP_JD_SCOPES=${JD_SCOPES} VITE_APP_JD_STATE=${JD_STATE} vite build", + "build:development": "NODE_OPTIONS=--max_old_space_size=4096 VITE_APP_GOOGLE_API_KEY=${GOOGLE_API_KEY} VITE_APP_STRIPE_PUBLIC_KEY=${STRIPE_PUBLIC_KEY_DEVELOPMENT} VITE_APP_MAPBOX_ACCESS_TOKEN=${MAPBOX_ACCESS_TOKEN} VITE_APP_CNHI_CLIENT_ID=${CNHI_CLIENT_ID} VITE_APP_CNHI_AUTHORIZE_URL=${CNHI_AUTHORIZE_URL} VITE_APP_CNHI_REDIRECT_URI=${CNHI_REDIRECT_URI} VITE_APP_CNHI_SCOPES=${CNHI_SCOPES} VITE_APP_CNHI_CONNECTION=${CNHI_CONNECTION} VITE_APP_CNHI_AUDIENCE=${CNHI_AUDIENCE} VITE_APP_IMAGE4IO_USERNAME=${IMAGE4IO_USERNAME} VITE_APP_IMAGE4IO_PASSWORD=${IMAGE4IO_PASSWORD} VITE_APP_JD_CLIENT_ID=${JD_CLIENT_ID} VITE_APP_JD_AUTHORIZE_URL=${JD_AUTHORIZE_URL} VITE_APP_JD_REDIRECT_URI=${JD_REDIRECT_URI} VITE_APP_JD_SCOPES=${JD_SCOPES} VITE_APP_JD_STATE=${JD_STATE} vite build", + "build:production": "NODE_OPTIONS=--max_old_space_size=4096 VITE_APP_GOOGLE_API_KEY=${GOOGLE_API_KEY} VITE_APP_STRIPE_PUBLIC_KEY=${STRIPE_PUBLIC_KEY_PRODUCTION} VITE_APP_MAPBOX_ACCESS_TOKEN=${MAPBOX_ACCESS_TOKEN} VITE_APP_CNHI_CLIENT_ID=${CNHI_CLIENT_ID} VITE_APP_CNHI_AUTHORIZE_URL=${CNHI_AUTHORIZE_URL} VITE_APP_CNHI_REDIRECT_URI=${CNHI_REDIRECT_URI} VITE_APP_CNHI_SCOPES=${CNHI_SCOPES} VITE_APP_CNHI_CONNECTION=${CNHI_CONNECTION} VITE_APP_CNHI_AUDIENCE=${CNHI_AUDIENCE} VITE_APP_IMAGE4IO_USERNAME=${IMAGE4IO_USERNAME} VITE_APP_IMAGE4IO_PASSWORD=${IMAGE4IO_PASSWORD} VITE_APP_JD_CLIENT_ID=${JD_CLIENT_ID} VITE_APP_JD_AUTHORIZE_URL=${JD_AUTHORIZE_URL} VITE_APP_JD_REDIRECT_URI=${JD_REDIRECT_URI} VITE_APP_JD_SCOPES=${JD_SCOPES} VITE_APP_JD_STATE=${JD_STATE} vite build", "build:offline": "npx env-cmd offline,whitelabel npm run build", "test": "vitest" }, diff --git a/src/app/App.tsx b/src/app/App.tsx index dc800bf..cb32218 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { useEffect, useState } from 'react' import reactLogo from '../assets/react.svg' import viteLogo from '/vite.svg' import './App.css' @@ -8,15 +8,28 @@ import { or } from '../utils/types' function App() { const [count, setCount] = useState(0) + const [loading, setLoading] = useState(false) const userAPI = useUserAPI(); const useAuth = useAuth0(); let user_id = or(useAuth.user?.sub, "") // console.log("User ID: ", user_id) - if (user_id.length > 1) userAPI.getUser(user_id).then(resp => { - console.log(resp) - }) +// if (user_id.length > 1) { + +// userAPI.getUser(user_id).then(resp => { +// console.log(resp) +// }) +// } + useEffect(() => { + if (loading) return; + setLoading(true) + userAPI.getUser(user_id).then(resp => { + console.log(resp) + }).finally(() => { + setLoading(false) + }) + }, []) return ( <>
diff --git a/src/app/AuthHTTPWrapper.tsx b/src/app/AuthHTTPWrapper.tsx index 47eea4b..10ba8a1 100644 --- a/src/app/AuthHTTPWrapper.tsx +++ b/src/app/AuthHTTPWrapper.tsx @@ -3,8 +3,10 @@ import { or } from '../utils/types' import AuthWrapper from '../providers/auth' import HTTPProvider from '../providers/http' import App from './App' +import { useState } from 'react' function AuthHTTPWrapper() { + const [gotToken, setGotToken] = useState(false) let url: string | undefined = window.location.origin; let audience: string | undefined; @@ -30,8 +32,12 @@ function AuthHTTPWrapper() { cacheLocation='localstorage' > - - + + {gotToken ? + + : +

hi

+ } diff --git a/src/providers/http.tsx b/src/providers/http.tsx index 1586e21..95bb57f 100644 --- a/src/providers/http.tsx +++ b/src/providers/http.tsx @@ -24,38 +24,52 @@ interface IHTTPContext { options: (demo?: boolean) => AxiosRequestConfig; } +interface Props extends PropsWithChildren{ + setGotToken: React.Dispatch>; +} + export const HTTPContext = createContext({} as IHTTPContext); -export default function HTTPProvider(props: PropsWithChildren) { - const { children } = props; +export default function HTTPProvider(props: Props) { + const { children, setGotToken } = props; const { isAuthenticated, /*token,*/ getAccessTokenSilently } = useAuth0(); const [token, setToken] = useState(""); useEffect(() => { if (isAuthenticated) getAccessTokenSilently().then(t => { setToken(t) + }).finally(() => { + setGotToken(true) }) }, [setToken, isAuthenticated]) const defaultOptions = (demo: boolean = false) => { - if (demo || !isAuthenticated || !token) { - return { - headers: { - "Content-Type": "application/json" - } - }; - } + // if (demo || !isAuthenticated || !token) { + // console.log("demo: ", demo) + // console.log("Authenticated: ", isAuthenticated) + // console.log("token: ", token) + // return { + // headers: { + // "Content-Type": "application/json" + // } + // }; + // } - return { - headers: { - Authorization: "Bearer " + token, + // console.log("Getting options with Bearer") + // console.log(token) + + const config = { + headers: { + Authorization: `Bearer ${token}`, "Content-Type": "application/json" } }; + return config; }; - function get(url: string, spreadOptions?: AxiosRequestConfig): Promise> { - return axios.get(url, { ...defaultOptions(), ...spreadOptions }); + function get(url: string): Promise> { + console.log(defaultOptions()) + return axios.get(url, {...defaultOptions()}); } function put( diff --git a/src/providers/pond/pond.tsx b/src/providers/pond/pond.tsx index 6eaac36..95efeb2 100644 --- a/src/providers/pond/pond.tsx +++ b/src/providers/pond/pond.tsx @@ -2,7 +2,8 @@ import { PropsWithChildren } from "react"; import UserProvider, { useUserAPI } from "./userAPI"; export const pondURL = (partial: string, demo: boolean = false): string => { - let url = import.meta.env.REACT_APP_API_URL + (demo ? "/demo" : "") + partial; + let url = import.meta.env.VITE_APP_API_URL + (demo ? "/demo" : "") + partial; + console.log(url) // if (isStaging()) url = process.env.REACT_APP_STAGING_API_URL + (demo ? "/demo" : "") + partial; return url; };