Updating environments!

src-web/components/WorkspaceHeader.tsx

@@ -12,6 +12,7 @@ import { useDialog } from './DialogContext';
 import { useEnvironments } from '../hooks/useEnvironments';
 import type { Environment } from '../lib/models';
 import { Editor } from './core/Editor';
+import { useUpdateEnvironment } from '../hooks/useUpdateEnvironment';
 
 interface Props {
   className?: string;
@@ -19,6 +20,7 @@ interface Props {
 
 export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Props) {
   const environments = useEnvironments();
+  const updateEnvironment = useUpdateEnvironment();
   const activeRequest = useActiveRequest();
   const dialog = useDialog();
 
@@ -34,12 +36,14 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
         <Button onClick={() => {
           dialog.show({
             title: 'Environments',
-            render: () => <EnvironmentList
-              environments={environments}
-              onChange={data => {
-                console.log('data', data);
-              }}
-            />
+            render: () => <div>
+              {environments.map(e => (
+                <EnvironmentList
+                  key={e.id}
+                  environment={e}
+                />
+              ))}
+            </div>
           })
         }}>
           Environments
@@ -65,25 +69,22 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
 });
 
 interface EnvironmentListProps {
-  environments: Environment[];
-  onChange: (data: string) => void;
+  environment: Environment;
 }
 
-const EnvironmentList = function({ environments, onChange }: EnvironmentListProps) {
-  // For some reason useActiveWorkspaceId() doesn't work in modals (?)
-  return <ul className="inline">
-    {environments.map(e => (
-      <li key={e.id}>
-        <div>
-          {e.name}
-        </div>
-        <Editor
-          contentType="application/json"
-          className='w-full h-[400px] !bg-gray-50'
-          defaultValue={JSON.stringify(e.data, null, 2)}
-          onChange={onChange}
-        />
-      </li>
-    ))}
-  </ul>
+const EnvironmentList = function({ environment }: EnvironmentListProps) {
+  const updateEnvironment = useUpdateEnvironment(environment.id)
+  return (
+    <div>
+      <h1>{environment.name}</h1>
+      <Editor
+        contentType="application/json"
+        className='w-full h-[400px] !bg-gray-50'
+        defaultValue={JSON.stringify(environment.data, null, 2)}
+        onChange={data => {
+          updateEnvironment.mutate({ data: JSON.parse(data) });
+        }}
+      />
+    </div>
+  );
 };

src-web/hooks/useEnvironments.ts

@@ -15,7 +15,7 @@ export function useEnvironments() {
       queryKey: environmentsQueryKey({ workspaceId: workspaceId ?? 'n/a' }),
       queryFn: async () => {
         if (workspaceId == null) return [];
-        return (await invoke('environments', { workspaceId })) as Environment[];
+        return (await invoke('list_environments', { workspaceId })) as Environment[];
       },
     }).data ?? []
   );

src-web/hooks/useRequests.ts

@@ -15,7 +15,7 @@ export function useRequests() {
       queryKey: requestsQueryKey({ workspaceId: workspaceId ?? 'n/a' }),
       queryFn: async () => {
         if (workspaceId == null) return [];
-        return (await invoke('requests', { workspaceId })) as HttpRequest[];
+        return (await invoke('list_requests', { workspaceId })) as HttpRequest[];
       },
     }).data ?? []
   );

src-web/hooks/useResponses.ts

@@ -13,7 +13,7 @@ export function useResponses(requestId: string | null) {
       initialData: [],
       queryKey: responsesQueryKey({ requestId: requestId ?? 'n/a' }),
       queryFn: async () => {
-        return (await invoke('responses', {
+        return (await invoke('list_responses', {
           requestId,
         })) as HttpResponse[];
       },

src-web/hooks/useUpdateEnvironment.ts

@@ -0,0 +1,29 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { invoke } from '@tauri-apps/api';
+import type { Environment } from '../lib/models';
+import { getEnvironment } from '../lib/store';
+import { environmentsQueryKey } from './useEnvironments';
+
+export function useUpdateEnvironment(id: string | null) {
+  const queryClient = useQueryClient();
+  return useMutation<void, unknown, Partial<Environment> | ((r: Environment) => Environment)>({
+    mutationFn: async (v) => {
+      const environment = await getEnvironment(id);
+      if (environment == null) {
+        throw new Error("Can't update a null environment");
+      }
+
+      const newEnvironment = typeof v === 'function' ? v(environment) : { ...environment, ...v };
+      await invoke('update_environment', { environment: newEnvironment });
+    },
+    onMutate: async (v) => {
+      const environment = await getEnvironment(id);
+      if (environment === null) return;
+
+      const newEnvironment = typeof v === 'function' ? v(environment) : { ...environment, ...v };
+      queryClient.setQueryData<Environment[]>(environmentsQueryKey(environment), (environments) =>
+        (environments ?? []).map((r) => (r.id === newEnvironment.id ? newEnvironment : r)),
+      );
+    },
+  });
+}

src-web/hooks/useWorkspaces.ts

@@ -10,7 +10,7 @@ export function workspacesQueryKey(_?: {}) {
 export function useWorkspaces() {
   return (
     useQuery(workspacesQueryKey(), async () => {
-      return (await invoke('workspaces')) as Workspace[];
+      return (await invoke('list_workspaces')) as Workspace[];
     }).data ?? []
   );
 }

src-web/lib/store.ts

@@ -1,5 +1,5 @@
 import { invoke } from '@tauri-apps/api';
-import type { HttpRequest, Workspace } from './models';
+import type { Environment, HttpRequest, Workspace } from './models';
 
 export async function getRequest(id: string | null): Promise<HttpRequest | null> {
   if (id === null) return null;
@@ -10,6 +10,15 @@ export async function getRequest(id: string | null): Promise<HttpRequest | null>
   return request;
 }
 
+export async function getEnvironment(id: string | null): Promise<Environment | null> {
+  if (id === null) return null;
+  const environment: Environment = (await invoke('get_environment', { id })) ?? null;
+  if (environment == null) {
+    return null;
+  }
+  return environment;
+}
+
 export async function getWorkspace(id: string | null): Promise<Workspace | null> {
   if (id === null) return null;
   const workspace: Workspace = (await invoke('get_workspace', { id })) ?? null;