Fix environment activation and setting active cookie jar

src-web/hooks/useActiveCookieJar.ts

@@ -36,6 +36,7 @@ export function useEnsureActiveCookieJar() {
   // Set the active cookie jar to the first one, if none set
   useEffect(() => {
     if (cookieJars == null) return; // Hasn't loaded yet
+
     if (cookieJars.find((j) => j.id === activeCookieJarId)) {
       return; // There's an active jar
     }
@@ -47,7 +48,13 @@ export function useEnsureActiveCookieJar() {
     }
 
     // There's no active jar, so set it to the first one
-    console.log('Setting active cookie jar to', cookieJars, activeCookieJarId, firstJar.id);
+    console.log('Defaulting active cookie jar to first jar', firstJar);
     setWorkspaceSearchParams({ cookie_jar_id: firstJar.id });
-  }, [activeCookieJarId, cookieJars]);
+
+    // NOTE: We only run this on cookieJars to prevent data races when switching workspaces since a lot of
+    //  things change when switching workspaces, and we don't currently have a good way to ensure that all
+    //  stores have updated.
+    // TODO: Create a global data store that can handle this case
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cookieJars]);
 }

src-web/hooks/useActiveEnvironment.ts

@@ -2,9 +2,8 @@ import { useSearch } from '@tanstack/react-router';
 import type { Environment } from '@yaakapp-internal/models';
 import { useAtomValue } from 'jotai';
 import { atom } from 'jotai/index';
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
 import { jotaiStore } from '../lib/jotai';
-import { setWorkspaceSearchParams } from '../lib/setWorkspaceSearchParams';
 import { environmentsAtom } from './useEnvironments';
 
 export const QUERY_ENVIRONMENT_ID = 'environment_id';
@@ -17,12 +16,7 @@ export const activeEnvironmentAtom = atom<Environment | null>((get) => {
 });
 
 export function useActiveEnvironment() {
-  const setId = useCallback(
-    (id: string | null) => setWorkspaceSearchParams({ environment_id: id }),
-    [],
-  );
-  const environment = useAtomValue(activeEnvironmentAtom);
-  return [environment, setId] as const;
+  return useAtomValue(activeEnvironmentAtom);
 }
 
 export function getActiveEnvironment() {

src-web/hooks/useCookieJars.ts

@@ -3,9 +3,9 @@ import { atom, useAtomValue } from 'jotai';
 
 export const cookieJarsAtom = atom<CookieJar[] | undefined>();
 
-export const sortedCookieJars = atom((get) =>
-  get(cookieJarsAtom)?.sort((a, b) => a.name.localeCompare(b.name)),
-);
+export const sortedCookieJars = atom((get) => {
+  return get(cookieJarsAtom)?.sort((a, b) => a.name.localeCompare(b.name));
+});
 
 export function useCookieJars() {
   return useAtomValue(sortedCookieJars);

src-web/hooks/useCreateEnvironment.ts

@@ -1,14 +1,12 @@
 import type { Environment } from '@yaakapp-internal/models';
 import { trackEvent } from '../lib/analytics';
 import { showPrompt } from '../lib/prompt';
+import { setWorkspaceSearchParams } from '../lib/setWorkspaceSearchParams';
 import { invokeCmd } from '../lib/tauri';
-import { useActiveEnvironment } from './useActiveEnvironment';
 import { getActiveWorkspaceId } from './useActiveWorkspace';
 import { useFastMutation } from './useFastMutation';
 
 export function useCreateEnvironment() {
-  const [, setActiveEnvironmentId] = useActiveEnvironment();
-
   return useFastMutation<Environment | null, unknown, Environment | null>({
     mutationKey: ['create_environment'],
     mutationFn: async (baseEnvironment) => {
@@ -38,7 +36,7 @@ export function useCreateEnvironment() {
     onSettled: () => trackEvent('environment', 'create'),
     onSuccess: async (environment) => {
       if (environment == null) return;
-      await setActiveEnvironmentId(environment.id);
+      setWorkspaceSearchParams({ environment_id: environment.id });
     },
   });
 }

src-web/hooks/useGrpc.ts

@@ -19,7 +19,7 @@ export function useGrpc(
   protoFiles: string[],
 ) {
   const requestId = req?.id ?? 'n/a';
-  const [environment] = useActiveEnvironment();
+  const environment = useActiveEnvironment();
 
   const go = useMutation<void, string>({
     mutationKey: ['grpc_go', conn?.id],

src-web/hooks/useIntrospectGraphQL.ts

@@ -20,7 +20,7 @@ export function useIntrospectGraphQL(
   // Debounce the request because it can change rapidly and we don't
   // want to send so too many requests.
   const request = useDebouncedValue(baseRequest);
-  const [activeEnvironment] = useActiveEnvironment();
+  const activeEnvironment = useActiveEnvironment();
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [error, setError] = useState<string>();
 

src-web/hooks/useRenderTemplate.ts

@@ -5,7 +5,7 @@ import { useActiveWorkspace } from './useActiveWorkspace';
 
 export function useRenderTemplate(template: string) {
   const workspaceId = useActiveWorkspace()?.id ?? 'n/a';
-  const environmentId = useActiveEnvironment()[0]?.id ?? null;
+  const environmentId = useActiveEnvironment()?.id ?? null;
   return useQuery<string>({
     placeholderData: (prev) => prev, // Keep previous data on refetch
     refetchOnWindowFocus: false,

src-web/hooks/useSyncWorkspaceRequestTitle.ts

@@ -10,7 +10,7 @@ import { useOsInfo } from './useOsInfo';
 
 export function useSyncWorkspaceRequestTitle() {
   const activeWorkspace = useActiveWorkspace();
-  const [activeEnvironment] = useActiveEnvironment();
+  const activeEnvironment = useActiveEnvironment();
   const osInfo = useOsInfo();
   const appInfo = useAppInfo();