Extract base environment (#149)

src-web/hooks/useActiveEnvironment.ts

@@ -1,14 +1,11 @@
 import { getRouteApi, useSearch } from '@tanstack/react-router';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import { useEnvironments } from './useEnvironments';
 
 export function useActiveEnvironment() {
   const [id, setId] = useActiveEnvironmentId();
-  const environments = useEnvironments();
-  const environment = useMemo(
-    () => environments.find((w) => w.id === id) ?? null,
-    [environments, id],
-  );
+  const { subEnvironments } = useEnvironments();
+  const environment = subEnvironments.find((w) => w.id === id) ?? null;
   return [environment, setId] as const;
 }
 

src-web/hooks/useActiveEnvironmentVariables.ts

@@ -1,16 +1,16 @@
 import type { EnvironmentVariable } from '@yaakapp-internal/models';
 import { useMemo } from 'react';
 import { useActiveEnvironment } from './useActiveEnvironment';
-import { useActiveWorkspace } from './useActiveWorkspace';
+import { useEnvironments } from './useEnvironments';
 
 export function useActiveEnvironmentVariables() {
-  const workspace = useActiveWorkspace();
+  const { baseEnvironment } = useEnvironments();
   const [environment] = useActiveEnvironment();
 
   const variables = useMemo(() => {
     const varMap: Record<string, EnvironmentVariable> = {};
 
-    const allVariables = [...(workspace?.variables ?? []), ...(environment?.variables ?? [])];
+    const allVariables = [...(baseEnvironment?.variables ?? []), ...(environment?.variables ?? [])];
 
     for (const v of allVariables) {
       if (!v.enabled || !v.name) continue;
@@ -18,7 +18,7 @@ export function useActiveEnvironmentVariables() {
     }
 
     return Object.values(varMap);
-  }, [workspace, environment]);
+  }, [baseEnvironment?.variables, environment?.variables]);
 
   return variables;
 }

src-web/hooks/useEnvironments.ts

@@ -5,5 +5,11 @@ import { atom } from 'jotai/index';
 export const environmentsAtom = atom<Environment[]>([]);
 
 export function useEnvironments() {
-  return useAtomValue(environmentsAtom);
+  const allEnvironments = useAtomValue(environmentsAtom);
+  const baseEnvironment = allEnvironments.find((e) => e.environmentId == null);
+  const subEnvironments = allEnvironments.filter(
+    (e) => e.environmentId === (baseEnvironment?.id ?? 'n/a'),
+  );
+
+  return { baseEnvironment, subEnvironments, allEnvironments } as const;
 }

src-web/hooks/useRecentEnvironments.ts

@@ -10,7 +10,7 @@ const namespace = 'global';
 const fallback: string[] = [];
 
 export function useRecentEnvironments() {
-  const environments = useEnvironments();
+  const { subEnvironments } = useEnvironments();
   const activeWorkspace = useActiveWorkspace();
   const [activeEnvironment] = useActiveEnvironment();
   const kv = useKeyValue<string[]>({
@@ -30,8 +30,8 @@ export function useRecentEnvironments() {
   }, [activeEnvironment?.id]);
 
   const onlyValidIds = useMemo(
-    () => kv.value?.filter((id) => environments.some((e) => e.id === id)) ?? [],
-    [kv.value, environments],
+    () => kv.value?.filter((id) => subEnvironments.some((e) => e.id === id)) ?? [],
+    [kv.value, subEnvironments],
   );
 
   return onlyValidIds;