Function ProxyProvider

site/src/contexts/ProxyContext.tsx:93–196

({ children })

 * ProxyProvider interacts with local storage to indicate the preferred workspace proxy.
 */
export const ProxyProvider: FC<PropsWithChildren> = ({ children }) => {
	// Using a useState so the caller always has the latest user saved
	// proxy.
	const [userSavedProxy, setUserSavedProxy] = useState(loadUserSelectedProxy());

	const { permissions } = useAuthenticated();
	const { metadata } = useEmbeddedMetadata();

	const {
		data: proxiesResp,
		error: proxiesError,
		isLoading: proxiesLoading,
		isFetched: proxiesFetched,
	} = useQuery(
		cachedQuery({
			metadata: metadata.regions,
			queryKey: ["get-proxies"],
			queryFn: async (): Promise<readonly Region[]> => {
				const apiCall = permissions.editWorkspaceProxies
					? API.getWorkspaceProxies
					: API.getWorkspaceProxyRegions;

				const resp = await apiCall();
				return resp.regions;
			},
		}),
	);

	// Every time we get a new proxiesResponse, update the latency check
	// to each workspace proxy.
	const {
		proxyLatencies,
		refetch: refetchProxyLatencies,
		loaded: latenciesLoaded,
	} = useProxyLatency(proxiesResp);

	const proxy = useMemo(
		() =>
			getPreferredProxy(
				proxiesResp ?? [],
				userSavedProxy,
				proxyLatencies,
				// Do not auto select based on latencies, as inconsistent
				// latencies can cause this to change on each call. The proxy
				// value should be stable to prevent flickering.
				false,
			),
		[proxiesResp, userSavedProxy, proxyLatencies],
	);

	// This useEffect will auto select the best proxy if the user has not selected one.
	// It must wait until all latencies are loaded to select based on latency. This does mean
	// the first time a user loads the page, the proxy will "flicker" to the best proxy.
	//
	// Once the page is loaded, or the user selects a proxy, this will not run again.
	useEffect(() => {
		if (loadUserSelectedProxy() !== undefined) {
			return; // User has selected a proxy, do not auto select.