Cleanup args to take just the selected proxy

Emyrk · Emyrk · commit edbe6e480a44 · 2023-04-28T12:50:21.000-05:00
Delete extra hook
Renames regions -&gt; proxies
diff --git a/site/src/contexts/ProxyContext.tsx b/site/src/contexts/ProxyContext.tsx
@@ -12,9 +12,13 @@ import {
 
 interface ProxyContextValue {
   proxy: PreferredProxy
+  proxies?: Region[]
+  // isfetched is true when the proxy api call is complete.
+  isFetched: boolean
+  // isLoading is true if the proxy is in the process of being fetched.
   isLoading: boolean
   error?: Error | unknown
-  setProxy: (proxies: Region[], selectedProxy: Region | undefined) => void
+  setProxy: (selectedProxy: Region) => void
 }
 
 interface PreferredProxy {
@@ -30,6 +34,8 @@ interface PreferredProxy {
   preferredWildcardHostname: string
 }
 
+export const ProxyContext = createContext<ProxyContextValue | undefined>(undefined)
+
 /**
  * ProxyProvider interacts with local storage to indicate the preferred workspace proxy.
  */
@@ -44,33 +50,37 @@ export const ProxyProvider: FC<PropsWithChildren> = ({ children }) => {
   }
 
   const [proxy, setProxy] = useState<PreferredProxy>(savedProxy)
-  const setAndSaveProxy = (
-    proxies: Region[],
-    selectedProxy: Region | undefined,
-  ) => {
-    const preferred = getPreferredProxy(proxies, selectedProxy)
-    // Save to local storage to persist the user's preference across reloads
-    // and other tabs.
-    savePreferredProxy(preferred)
-    // Set the state for the current context.
-    setProxy(preferred)
-  }
+
 
   const dashboard = useDashboard()
   const experimentEnabled = !dashboard?.experiments.includes("moons")
-  const queryKey = ["get-regions"]
-  const { error: regionsError, isLoading: regionsLoading } = useQuery({
+  const queryKey = ["get-proxies"]
+  const { data: proxies, error: proxiesError, isLoading: proxiesLoading, isFetched: proxiesFetched } = useQuery({
     queryKey,
     queryFn: getWorkspaceProxies,
     // This onSuccess ensures the local storage is synchronized with the
     // regions returned by coderd. If the selected region is not in the list,
     // then the user selection is removed.
-    onSuccess: (data) => {
-      setAndSaveProxy(data.regions, proxy.selectedProxy)
+    onSuccess: () => {
+      setAndSaveProxy(proxy.selectedProxy)
     },
     enabled: experimentEnabled,
   })
 
+  const setAndSaveProxy = (
+    selectedProxy?: Region,
+  ) => {
+    if (!proxies) {
+      throw new Error("proxies are not yet loaded, so selecting a region makes no sense. How did you get here?")
+    }
+    const preferred = getPreferredProxy(proxies.regions, selectedProxy)
+    // Save to local storage to persist the user's preference across reloads
+    // and other tabs.
+    savePreferredProxy(preferred)
+    // Set the state for the current context.
+    setProxy(preferred)
+  }
+
   // ******************************* //
   // ** This code can be removed  **
   // ** when the experimental is  **
@@ -80,6 +90,7 @@ export const ProxyProvider: FC<PropsWithChildren> = ({ children }) => {
     data: applicationHostResult,
     error: appHostError,
     isLoading: appHostLoading,
+    isFetched: appsFetched,
   } = useQuery({
     queryKey: appHostQueryKey,
     queryFn: getApplicationsHost,
@@ -94,13 +105,15 @@ export const ProxyProvider: FC<PropsWithChildren> = ({ children }) => {
     return (
       <ProxyContext.Provider
         value={{
+          proxies: [],
           proxy: {
             ...value,
             preferredWildcardHostname:
               applicationHostResult?.host || value.preferredWildcardHostname,
           },
           isLoading: appHostLoading,
           error: appHostError,
+          isFetched: appsFetched,
           setProxy: () => {
             // Does a noop
           },
@@ -118,9 +131,11 @@ export const ProxyProvider: FC<PropsWithChildren> = ({ children }) => {
   return (
     <ProxyContext.Provider
       value={{
-        proxy: proxy,
-        isLoading: regionsLoading,
-        error: regionsError,
+        proxy,
+        proxies: proxies?.regions,
+        isLoading: proxiesLoading,
+        isFetched: proxiesFetched,
+        error: proxiesError,
         // A function that takes the new regions and selected region and updates
         // the state with the appropriate urls.
         setProxy: setAndSaveProxy,
@@ -146,57 +161,49 @@ export const useProxy = (): ProxyContextValue => {
  * assumed no proxy is configured and relative paths should be used.
  * Exported for testing.
  *
- * @param regions Is the list of regions returned by coderd. If this is empty, default behavior is used.
- * @param selectedRegion Is the region the user has selected. If this is undefined, default behavior is used.
+ * @param proxies Is the list of regions returned by coderd. If this is empty, default behavior is used.
+ * @param selectedProxy Is the region the user has selected. If this is undefined, default behavior is used.
  */
 export const getPreferredProxy = (
-  regions: Region[],
-  selectedRegion?: Region,
+  proxies: Region[],
+  selectedProxy?: Region,
 ): PreferredProxy => {
   // By default we set the path app to relative and disable wildcard hostnames.
   // We will set these values if we find a proxy we can use that supports them.
   let pathAppURL = ""
   let wildcardHostname = ""
 
-  // If a region is selected, make sure it is in the list of regions. If it is not
+  // If a proxy is selected, make sure it is in the list of proxies. If it is not
   // we should default to the primary.
-  selectedRegion = regions.find(
-    (region) => selectedRegion && region.id === selectedRegion.id,
+  selectedProxy = proxies.find(
+    (proxy) => selectedProxy && proxy.id === selectedProxy.id,
   )
 
-  if (!selectedRegion) {
-    // If no region is selected, default to the primary region.
-    selectedRegion = regions.find((region) => region.name === "primary")
+  if (!selectedProxy) {
+    // If no proxy is selected, default to the primary proxy.
+    selectedProxy = proxies.find((proxy) => proxy.name === "primary")
   }
 
-  // Only use healthy regions.
-  if (selectedRegion && selectedRegion.healthy) {
-    // By default use relative links for the primary region.
+  // Only use healthy proxies.
+  if (selectedProxy && selectedProxy.healthy) {
+    // By default use relative links for the primary proxy.
     // This is the default, and we should not change it.
-    if (selectedRegion.name !== "primary") {
-      pathAppURL = selectedRegion.path_app_url
+    if (selectedProxy.name !== "primary") {
+      pathAppURL = selectedProxy.path_app_url
     }
-    wildcardHostname = selectedRegion.wildcard_hostname
+    wildcardHostname = selectedProxy.wildcard_hostname
   }
 
-  // TODO: @emyrk Should we notify the user if they had an unhealthy region selected?
+  // TODO: @emyrk Should we notify the user if they had an unhealthy proxy selected?
 
   return {
-    selectedProxy: selectedRegion,
+    selectedProxy: selectedProxy,
     // Trim trailing slashes to be consistent
     preferredPathAppURL: pathAppURL.replace(/\/$/, ""),
     preferredWildcardHostname: wildcardHostname,
   }
 }
 
-export const ProxyContext = createContext<ProxyContextValue>({
-  proxy: getPreferredProxy([]),
-  isLoading: false,
-  setProxy: () => {
-    // Does a noop
-  },
-})
-
 // Local storage functions
 
 export const savePreferredProxy = (saved: PreferredProxy): void => {
@@ -209,9 +216,5 @@ const loadPreferredProxy = (): PreferredProxy | undefined => {
     return undefined
   }
 
-  const proxy: PreferredProxy = JSON.parse(str)
-  if (proxy.selectedProxy === undefined || proxy.selectedProxy === null) {
-    return undefined
-  }
-  return proxy
+  return JSON.parse(str)
 }
diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage.tsx
@@ -2,7 +2,6 @@ import { FC, PropsWithChildren } from "react"
 import { Section } from "components/SettingsLayout/Section"
 import { WorkspaceProxyView } from "./WorkspaceProxyView"
 import makeStyles from "@material-ui/core/styles/makeStyles"
-import { useWorkspaceProxiesData } from "./hooks"
 import { displayError } from "components/GlobalSnackbar/utils"
 import { useProxy } from "contexts/ProxyContext"
 
@@ -14,14 +13,8 @@ export const WorkspaceProxyPage: FC<PropsWithChildren<unknown>> = () => {
     "workspace. To get the best experience, choose the workspace proxy that is" +
     "closest located to you."
 
-  const { proxy, setProxy } = useProxy()
+  const { proxies, error: proxiesError, isFetched: proxiesFetched, isLoading: proxiesLoading, proxy, setProxy } = useProxy()
 
-  const {
-    data: proxiesResponse,
-    error: getProxiesError,
-    isFetching,
-    isFetched,
-  } = useWorkspaceProxiesData()
 
   return (
     <Section
@@ -31,19 +24,18 @@ export const WorkspaceProxyPage: FC<PropsWithChildren<unknown>> = () => {
       layout="fluid"
     >
       <WorkspaceProxyView
-        proxies={proxiesResponse?.regions}
-        isLoading={isFetching}
-        hasLoaded={isFetched}
-        getWorkspaceProxiesError={getProxiesError}
+        proxies={proxies}
+        isLoading={proxiesLoading}
+        hasLoaded={proxiesFetched}
+        getWorkspaceProxiesError={proxiesError}
         preferredProxy={proxy.selectedProxy}
         onSelect={(proxy) => {
           if (!proxy.healthy) {
             displayError("Please select a healthy workspace proxy.")
             return
           }
 
-          // Set the fetched regions + the selected proxy
-          setProxy(proxiesResponse ? proxiesResponse.regions : [], proxy)
+          setProxy(proxy)
         }}
       />
     </Section>
diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/hooks.ts b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/hooks.ts
