Start on plugin ctx API (#64)

src-web/hooks/useActiveEnvironment.ts

@@ -1,10 +1,38 @@
-import { useMemo } from 'react';
-import type { Environment } from '@yaakapp/api';
-import { useActiveEnvironmentId } from './useActiveEnvironmentId';
+import { useCallback, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { useEnvironments } from './useEnvironments';
 
-export function useActiveEnvironment(): Environment | null {
-  const id = useActiveEnvironmentId();
+export function useActiveEnvironment() {
+  const [id, setId] = useActiveEnvironmentId();
   const environments = useEnvironments();
-  return useMemo(() => environments.find((w) => w.id === id) ?? null, [environments, id]);
+  const environment = useMemo(
+    () => environments.find((w) => w.id === id) ?? null,
+    [environments, id],
+  );
+  return [environment, setId] as const;
+}
+
+export const QUERY_ENVIRONMENT_ID = 'environment_id';
+
+export function useActiveEnvironmentId() {
+  // NOTE: This query param is accessed from Rust side, so do not change
+  const [params, setParams] = useSearchParams();
+  const id = params.get(QUERY_ENVIRONMENT_ID);
+
+  const setId = useCallback(
+    (id: string | null) => {
+      setParams((p) => {
+        const existing = Object.fromEntries(p);
+        if (id == null) {
+          delete existing[QUERY_ENVIRONMENT_ID];
+        } else {
+          existing[QUERY_ENVIRONMENT_ID] = id;
+        }
+        return existing;
+      });
+    },
+    [setParams],
+  );
+
+  return [id, setId] as const;
 }