added http provider

This commit is contained in:
Carter 2024-10-23 08:49:33 -06:00
parent 99ea402bad
commit a7b417abdf
8 changed files with 575 additions and 23 deletions

110
package-lock.json generated
View file

@ -9,6 +9,8 @@
"version": "0.0.0",
"dependencies": {
"@auth0/auth0-react": "^2.2.4",
"axios": "^1.7.7",
"moment": "^2.30.1",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
@ -1810,6 +1812,23 @@
"node": ">=12"
}
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
"license": "MIT"
},
"node_modules/axios": {
"version": "1.7.7",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
"integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
"license": "MIT",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@ -1974,6 +1993,18 @@
"dev": true,
"license": "MIT"
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"license": "MIT",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@ -2045,6 +2076,15 @@
"dev": true,
"license": "MIT"
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"license": "MIT",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/electron-to-chromium": {
"version": "1.5.41",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.41.tgz",
@ -2513,6 +2553,40 @@
"dev": true,
"license": "ISC"
},
"node_modules/follow-redirects": {
"version": "1.15.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"license": "MIT",
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/form-data": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
"integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
"license": "MIT",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/fsevents": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@ -2834,6 +2908,27 @@
"node": ">=8.6"
}
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"license": "MIT",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"license": "MIT",
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/minimatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@ -2847,6 +2942,15 @@
"node": "*"
}
},
"node_modules/moment": {
"version": "2.30.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
"license": "MIT",
"engines": {
"node": "*"
}
},
"node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@ -3046,6 +3150,12 @@
"node": ">= 0.8.0"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
"license": "MIT"
},
"node_modules/punycode": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",

View file

@ -16,6 +16,8 @@
},
"dependencies": {
"@auth0/auth0-react": "^2.2.4",
"axios": "^1.7.7",
"moment": "^2.30.1",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},

View file

@ -5,10 +5,13 @@ import './App.css'
import { Auth0Provider } from '@auth0/auth0-react'
import { or } from '../utils/types'
import AuthWrapper from '../providers/auth'
import LoginButton from '../providers/LoginButton'
import HTTPProvider from '../providers/http'
import { useUserAPI } from '../providers/pond/userAPI'
// import LoginButton from '../providers/LoginButton'
function App() {
const [count, setCount] = useState(0)
// const userAPI = useUserAPI();
let url: string | undefined = window.location.origin;
let audience: string | undefined;
@ -34,8 +37,10 @@ function App() {
redirect_uri: window.location.origin + "/callback"
}}
>
{/* <AuthWrapper> */}
<LoginButton/>
<AuthWrapper>
<HTTPProvider>
{/* <LoginButton/> */}
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
@ -56,7 +61,8 @@ function App() {
<p className="read-the-docs">
Coming soon
</p>
{/* </AuthWrapper> */}
</HTTPProvider>
</AuthWrapper>
</Auth0Provider>
)

View file

@ -0,0 +1,14 @@
import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';
const LoginButton = () => {
const { loginWithRedirect } = useAuth0();
return (
<button onClick={() => loginWithRedirect()}>
Log In
</button>
);
};
export default LoginButton;

30
src/providers/auth.tsx Normal file
View file

@ -0,0 +1,30 @@
import { useAuth0 } from "@auth0/auth0-react";
import { PropsWithChildren, useEffect } from "react";
export default function AuthWrapper(props: PropsWithChildren<{}>) {
const { children } = props;
const { isLoading, loginWithRedirect, isAuthenticated, user } = useAuth0();
useEffect(() => {
if (!isAuthenticated && !isLoading) {
loginWithRedirect();
}
}, [isAuthenticated, loginWithRedirect]);
useEffect(() => {
console.log(user)
console.log(user?.sub)
console.log(user?.picture)
}, [user])
// if (isAuthenticated) return (
// children
// )
return (children)
}

128
src/providers/http.tsx Normal file
View file

@ -0,0 +1,128 @@
import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
// import { useAuth } from "hooks";
import moment from "moment";
import { createContext, PropsWithChildren, useContext, useEffect, useState } from "react";
// import BillingProvider from "./billing";
// import GitlabProvider from "./gitlab";
import PondProvider from "./pond/pond";
// import SecurityProvider from "./security";
import { useAuth0 } from "@auth0/auth0-react";
interface IHTTPContext {
get: <T>(url: string, spreadOptions?: AxiosRequestConfig) => Promise<AxiosResponse<T>>;
put: <T>(
url: string,
data?: any,
spreadOptions?: AxiosRequestConfig
) => Promise<AxiosResponse<T>>;
post: <T>(
url: string,
data?: any,
spreadOptions?: AxiosRequestConfig
) => Promise<AxiosResponse<T>>;
del: <T>(url: string, spreadOptions?: AxiosRequestConfig) => Promise<AxiosResponse<T>>;
options: (demo?: boolean) => AxiosRequestConfig;
}
export const HTTPContext = createContext<IHTTPContext>({} as IHTTPContext);
export default function HTTPProvider(props: PropsWithChildren<any>) {
const { children } = props;
const { isAuthenticated, /*token,*/ getAccessTokenSilently } = useAuth0();
const [token, setToken] = useState("");
useEffect(() => {
if (isAuthenticated) getAccessTokenSilently().then(t => {
setToken(t)
})
}, [setToken, isAuthenticated])
useEffect(() => {
console.log(token)
}, [token])
const defaultOptions = (demo: boolean = false) => {
if (demo || !isAuthenticated || !token) {
return {
headers: {
"Content-Type": "application/json"
}
};
}
return {
headers: {
Authorization: "Bearer " + token,
"Content-Type": "application/json"
}
};
};
function get<T>(url: string, spreadOptions?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
return axios.get(url, { ...defaultOptions(), ...spreadOptions });
}
function put<T>(
url: string,
data?: any,
spreadOptions?: AxiosRequestConfig
): Promise<AxiosResponse<T>> {
return axios.put(url, data, { ...defaultOptions(), ...spreadOptions });
}
function post<T>(
url: string,
data?: any,
spreadOptions?: AxiosRequestConfig
): Promise<AxiosResponse<T>> {
return axios.post(url, data, { ...defaultOptions(), ...spreadOptions });
}
function del<T>(url: string, spreadOptions?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
return axios.delete(url, { ...defaultOptions(), ...spreadOptions });
}
return (
<HTTPContext.Provider
value={{
get,
put,
post,
del,
options: defaultOptions
}}>
{/* <BillingProvider> */}
<PondProvider>
{children}
{/* <SecurityProvider> */}
{/* <GitlabProvider>{children}</GitlabProvider> */}
{/* </SecurityProvider> */}
</PondProvider>
{/* </BillingProvider> */}
</HTTPContext.Provider>
);
}
export const useHTTP = () => useContext(HTTPContext);
//returns a string depending on the given start and end to be used in a url query
export function dateRange(start: any, end: any): string {
start = moment(start).toISOString();
end = moment(end).toISOString();
var queryRange = "";
if (
typeof start !== "undefined" &&
start !== null &&
typeof end !== "undefined" &&
end !== null
) {
queryRange = "?start=" + start + "&end=" + end;
} else if (typeof start !== "undefined" && start !== null) {
queryRange = "?start=" + start;
} else if (typeof end !== "undefined" && end !== null) {
queryRange += "?end=" + end;
}
return queryRange;
}

View file

@ -0,0 +1,26 @@
import { PropsWithChildren } from "react";
import UserProvider, { useUserAPI } from "./userAPI";
export const pondURL = (partial: string, demo: boolean = false): string => {
let url = process.env.REACT_APP_API_URL + (demo ? "/demo" : "") + partial;
// if (isStaging()) url = process.env.REACT_APP_STAGING_API_URL + (demo ? "/demo" : "") + partial;
return url;
};
// export const objectQueryParams = (scope: Scope) => {
// return "?" + scope.kind + "_id=" + scope.key;
// };
export default function PondProvider(props: PropsWithChildren<any>) {
const { children } = props;
return (
<UserProvider>
{children}
</UserProvider>
);
}
export {
useUserAPI,
};

View file

@ -0,0 +1,236 @@
// import { useHTTP } from "hooks";
// import { Scope, User } from "models";
// import { pond } from "protobuf-ts/pond";
import { createContext, PropsWithChildren, useContext } from "react";
// import { objectQueryParams, pondURL } from "./pond";
// import { or } from "utils";
// import { useGlobalState } from "providers";
import { AxiosResponse } from "axios";
import { useHTTP } from "../http";
import { pondURL } from "./pond";
// export interface ListUsersResponse {
// users: User[];
// nextOffset: number;
// total: number;
// }
export interface IUserAPIContext {
// listUsers: (
// limit: number,
// offset: number,
// order?: "asc" | "desc",
// by?: string,
// search?: string
// ) => Promise<ListUsersResponse>;
// listProfiles: () => Promise<pond.UserProfile[]>;
// listObjectUsers: (scope: Scope) => Promise<any>;
// updateObjectUsers: (scope: Scope, users: pond.IUser[]) => Promise<any>;
getUser: (id: string) => Promise<any>;
// getUserWithTeam: (
// id: string,
// team?: string,
// scope?: Scope
// ) => Promise<AxiosResponse<pond.GetUserWithTeamResponse>>;
// getProfile: (id: string) => Promise<pond.UserProfile>;
// getUsers: (ids: string[]) => Promise<User[]>;
// getProfiles: (ids: string[]) => Promise<pond.UserProfile[]>;
// getUserSettings: (userID: string) => Promise<any>;
// updateUserSettings: (userID: string, body: pond.IUserSettings) => Promise<any>;
// updateUserStatus: (userID: string, body: pond.IUserStatus) => Promise<any>;
// updateUser: (id: string, body: pond.User) => Promise<any>;
// getUserObjectHistory: (
// id: string,
// objects: number[],
// start: string,
// end: string
// ) => Promise<AxiosResponse<pond.GetUserObjectHistoriesResponse>>;
}
export const UserAPIContext = createContext<IUserAPIContext>({} as IUserAPIContext);
export default function UserProvider(props: PropsWithChildren<any>) {
const { children } = props;
const { get, put } = useHTTP();
// const [{ as }] = useGlobalState();
// const listUsers = (
// limit: number,
// offset: number,
// order?: "asc" | "desc",
// by?: string,
// search?: string
// ): Promise<ListUsersResponse> => {
// return new Promise((resolve, reject) => {
// get(
// pondURL(
// "/users?limit=" +
// limit +
// "&offset=" +
// offset +
// ("&order=" + (order ? order : "asc")) +
// ("&by=" + (by ? by : "name")) +
// (search ? "&search=" + search : "")
// )
// )
// .then((res: any) => {
// let users: User[] = [];
// if (res && res.data && res.data.users) {
// res.data.users.forEach((raw: any) => users.push(User.any(raw)));
// }
// resolve({
// users: users,
// nextOffset: or(res.data.nextOffset, 0),
// total: or(res.data.total, 0)
// });
// })
// .catch((err: any) => reject(err));
// });
// };
// const listProfiles = (): Promise<pond.UserProfile[]> => {
// return new Promise((resolve, reject) => {
// get(pondURL("/profiles/"))
// .then((res: any) => {
// let profiles: pond.UserProfile[] = [];
// if (res && res.data && res.data.users) {
// res.data.users.forEach((raw: any) => profiles.push(pond.UserProfile.fromObject(raw)));
// }
// resolve(profiles);
// })
// .catch((err: any) => reject(err));
// });
// };
// const listObjectUsers = (scope: Scope) => {
// let sql = "/" + scope.kind + "s/" + scope.key + "/users";
// if (as) sql = sql + "?as=" + as;
// return get(pondURL(sql));
// };
// const updateObjectUsers = (scope: Scope, users: pond.IUser[]) => {
// return put(pondURL("/users" + objectQueryParams(scope)), { users });
// };
// const getUser = (id: string): Promise<User> => {
const getUser = (id: string): Promise<any> => {
let partial = "/users/" + id;
// if (scope) partial += "?kind=" + scope.kind + "&key=" + scope.key;
return new Promise(function(resolve, reject) {
get(pondURL(partial))
.then((response: any) => resolve(response.data))
.catch((error: any) => reject(error));
});
};
// const getUserWithTeam = (
// id: string,
// team?: string,
// scope?: Scope
// ): Promise<AxiosResponse<pond.GetUserWithTeamResponse>> => {
// let partial = "/userWithTeam/" + id;
// if (scope) partial += "?kind=" + scope.kind + "&key=" + scope.key;
// if (team) {
// if (partial.includes("?")) {
// partial += "&team=" + team;
// } else {
// partial += "?team=" + team;
// }
// }
// return new Promise(function(resolve, reject) {
// get(pondURL(partial))
// .then((response: any) => resolve(response))
// .catch((error: any) => reject(error));
// });
// };
// const getProfile = (id: string): Promise<pond.UserProfile> => {
// return new Promise((resolve, reject) => {
// get(pondURL("/profiles/" + id))
// .then((res: any) => resolve(pond.UserProfile.fromObject(res.data)))
// .catch((err: any) => reject(err));
// });
// };
// const getUsers = (ids: string[]): Promise<User[]> => {
// return new Promise((resolve, reject) => {
// get(pondURL("/users/?ids=" + ids.join(",")))
// .then((res: any) => {
// let users: User[] = [];
// if (res && res.data && res.data.users) {
// users = res.data.users.map((data: any) => User.any(data));
// }
// resolve(users);
// })
// .catch((err: any) => reject(err));
// });
// };
// const getProfiles = (ids: string[]): Promise<pond.UserProfile[]> => {
// return new Promise((resolve, reject) => {
// get(pondURL("/profiles/?ids=" + ids.join(",")))
// .then((res: any) => {
// let profiles: pond.UserProfile[] = [];
// if (res && res.data && res.data.users) {
// profiles = res.data.users.map((raw: any) => pond.UserProfile.fromObject(raw));
// }
// resolve(profiles);
// })
// .catch((err: any) => reject(err));
// });
// };
// const getUserSettings = (userID: string) => {
// return get(pondURL("/users/" + userID + "/settings"));
// };
// const updateUserSettings = (userID: string, body: pond.IUserSettings) => {
// return put(pondURL("/users/" + userID + "/settings"), body);
// };
// const updateUserStatus = (userID: string, body: pond.IUserStatus) => {
// return put(pondURL("/users/" + userID + "/status"), body);
// };
// const updateUser = (id: string, body: pond.User) => {
// return put(pondURL("/users/" + id), body);
// };
// const getUserObjectHistory = (id: string, objects: number[], start: string, end: string) => {
// return get<pond.GetUserObjectHistoriesResponse>(
// pondURL(
// "/users/" +
// id +
// "/objectHistories/?objects=" +
// objects.toString() +
// "&start=" +
// start +
// "&end=" +
// end
// )
// );
// };
return (
<UserAPIContext.Provider
value={{
// listUsers,
// listProfiles,
// listObjectUsers,
// updateObjectUsers,
getUser,
// getUserWithTeam,
// getProfile,
// getUsers,
// getProfiles,
// getUserSettings,
// updateUserSettings,
// updateUserStatus,
// updateUser,
// getUserObjectHistory
}}>
{children}
</UserAPIContext.Provider>
);
}
export const useUserAPI = () => useContext(UserAPIContext);