Clean up model fetching and loading states

src-web/components/CreateWorkspaceDialog.tsx

@@ -1,8 +1,9 @@
+import type { WorkspaceMeta } from '@yaakapp-internal/models';
 import { useState } from 'react';
 import { upsertWorkspace } from '../commands/upsertWorkspace';
 import { upsertWorkspaceMeta } from '../commands/upsertWorkspaceMeta';
 import { router } from '../lib/router';
-import { getWorkspaceMeta } from '../lib/store';
+import { invokeCmd } from '../lib/tauri';
 import { Button } from './core/Button';
 import { PlainInput } from './core/PlainInput';
 import { VStack } from './core/Stacks';
@@ -29,7 +30,9 @@ export function CreateWorkspaceDialog({ hide }: Props) {
 
         // Do getWorkspaceMeta instead of naively creating one because it might have
         // been created already when the store refreshes the workspace meta after
-        const workspaceMeta = await getWorkspaceMeta(workspace.id);
+        const workspaceMeta = await invokeCmd<WorkspaceMeta>('cmd_get_workspace_meta', {
+          workspaceId: workspace.id,
+        });
         upsertWorkspaceMeta.mutate({ ...workspaceMeta, settingSyncDir });
 
         // Navigate to workspace

src-web/components/GrpcConnectionMessagesPane.tsx

@@ -1,3 +1,4 @@
+import type { GrpcEvent, GrpcRequest } from '@yaakapp-internal/models';
 import classNames from 'classnames';
 import { format } from 'date-fns';
 import type { CSSProperties } from 'react';
@@ -5,8 +6,6 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useGrpcEvents } from '../hooks/useGrpcEvents';
 import { usePinnedGrpcConnection } from '../hooks/usePinnedGrpcConnection';
 import { useStateWithDeps } from '../hooks/useStateWithDeps';
-import type { GrpcEvent, GrpcRequest } from '@yaakapp-internal/models';
-import { isResponseLoading } from '../lib/model_util';
 import { Banner } from './core/Banner';
 import { Button } from './core/Button';
 import { Icon } from './core/Icon';
@@ -66,7 +65,7 @@ export function GrpcConnectionMessagesPane({ style, methodType, activeRequest }:
             <HStack className="pl-3 mb-1 font-mono text-sm">
               <HStack space={2}>
                 <span>{events.length} Messages</span>
-                {isResponseLoading(activeConnection) && (
+                {activeConnection.state !== 'closed' && (
                   <Icon icon="refresh" size="sm" spin className="text-text-subtlest" />
                 )}
               </HStack>

src-web/components/RequestPane.tsx

@@ -12,7 +12,6 @@ import { useHttpAuthentication } from '../hooks/useHttpAuthentication';
 import { httpRequestsAtom } from '../hooks/useHttpRequests';
 import { useImportCurl } from '../hooks/useImportCurl';
 import { useImportQuerystring } from '../hooks/useImportQuerystring';
-import { useIsResponseLoading } from '../hooks/useIsResponseLoading';
 import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
 import { useRequestEditor, useRequestEditorEvent } from '../hooks/useRequestEditor';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
@@ -277,7 +276,6 @@ export const RequestPane = memo(function RequestPane({
     ],
   );
 
-  const isLoading = useIsResponseLoading(activeRequestId);
   const { mutate: sendRequest } = useSendAnyHttpRequest();
   const { activeResponse } = usePinnedHttpResponse(activeRequestId);
   const { mutate: cancelResponse } = useCancelHttpResponse(activeResponse?.id ?? null);
@@ -370,7 +368,7 @@ export const RequestPane = memo(function RequestPane({
             onMethodChange={handleMethodChange}
             onUrlChange={handleUrlChange}
             forceUpdateKey={updateKey}
-            isLoading={isLoading}
+            isLoading={activeResponse?.state !== 'closed'}
           />
           <Tabs
             key={activeRequest.id} // Freshen tabs on request change

src-web/components/ResponsePane.tsx

@@ -6,7 +6,7 @@ import { useLocalStorage } from 'react-use';
 import { useContentTypeFromHeaders } from '../hooks/useContentTypeFromHeaders';
 import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
 import { useResponseViewMode } from '../hooks/useResponseViewMode';
-import { isResponseLoading } from '../lib/model_util';
+import { ConfirmLargeResponse } from './ConfirmLargeResponse';
 import { Banner } from './core/Banner';
 import { CountBadge } from './core/CountBadge';
 import { DurationTag } from './core/DurationTag';
@@ -29,7 +29,6 @@ import { ImageViewer } from './responseViewers/ImageViewer';
 import { PdfViewer } from './responseViewers/PdfViewer';
 import { SvgViewer } from './responseViewers/SvgViewer';
 import { VideoViewer } from './responseViewers/VideoViewer';
-import { ConfirmLargeResponse } from './ConfirmLargeResponse';
 
 interface Props {
   style?: CSSProperties;
@@ -92,8 +91,6 @@ export const ResponsePane = memo(function ResponsePane({
     [activeRequestId, setActiveTabs],
   );
 
-  const isLoading = isResponseLoading(activeResponse);
-
   return (
     <div
       style={style}
@@ -127,7 +124,7 @@ export const ResponsePane = memo(function ResponsePane({
                   'whitespace-nowrap w-full pl-3 overflow-x-auto font-mono text-sm',
                 )}
               >
-                {isLoading && <Icon size="sm" icon="refresh" spin />}
+                {activeResponse.state !== 'closed' && <Icon size="sm" icon="refresh" spin />}
                 <StatusTag showReason response={activeResponse} />
                 <span>&bull;</span>
                 <DurationTag
@@ -164,7 +161,11 @@ export const ResponsePane = memo(function ResponsePane({
             >
               <TabContent value={TAB_BODY}>
                 <ConfirmLargeResponse response={activeResponse}>
-                  {!activeResponse.contentLength ? (
+                  {activeResponse.state === 'initialized' ? (
+                    <EmptyStateText>
+                      <Icon size="xl" spin icon="refresh" className="text-text-subtlest" />
+                    </EmptyStateText>
+                  ) : activeResponse.state === 'closed' && activeResponse.contentLength === 0 ? (
                     <div className="pb-2 h-full">
                       <EmptyStateText>Empty Body</EmptyStateText>
                     </div>

src-web/components/SidebarItem.tsx

@@ -14,7 +14,6 @@ import { useSidebarItemCollapsed } from '../hooks/useSidebarItemCollapsed';
 import { useUpdateAnyGrpcRequest } from '../hooks/useUpdateAnyGrpcRequest';
 import { useUpdateAnyHttpRequest } from '../hooks/useUpdateAnyHttpRequest';
 import { jotaiStore } from '../lib/jotai';
-import { isResponseLoading } from '../lib/model_util';
 import { HttpMethodTag } from './core/HttpMethodTag';
 import { Icon } from './core/Icon';
 import { StatusTag } from './core/StatusTag';
@@ -277,13 +276,13 @@ export const SidebarItem = memo(function SidebarItem({
           </div>
           {latestGrpcConnection ? (
             <div className="ml-auto">
-              {isResponseLoading(latestGrpcConnection) && (
+              {latestGrpcConnection.state !== 'closed' && (
                 <Icon spin size="sm" icon="update" className="text-text-subtlest" />
               )}
             </div>
           ) : latestHttpResponse ? (
             <div className="ml-auto">
-              {isResponseLoading(latestHttpResponse) ? (
+              {latestHttpResponse.state !== 'closed' ? (
                 <Icon spin size="sm" icon="refresh" className="text-text-subtlest" />
               ) : (
                 <StatusTag className="text-xs" response={latestHttpResponse} />

src-web/components/SidebarItemContextMenu.tsx

@@ -13,12 +13,12 @@ import { useSendManyRequests } from '../hooks/useSendManyRequests';
 import { useWorkspaces } from '../hooks/useWorkspaces';
 
 import { showDialog } from '../lib/dialog';
-import { getHttpRequest } from '../lib/store';
 import type { DropdownItem } from './core/Dropdown';
 import { ContextMenu } from './core/Dropdown';
 import { Icon } from './core/Icon';
 import { FolderSettingsDialog } from './FolderSettingsDialog';
 import type { SidebarTreeNode } from './Sidebar';
+import { getHttpRequest } from '../hooks/useHttpRequests';
 
 interface Props {
   child: SidebarTreeNode;
@@ -97,7 +97,7 @@ export function SidebarItemContextMenu({ child, show, close }: Props) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 leftSlot: <Icon icon={(a.icon as any) ?? 'empty'} />,
                 onSelect: async () => {
-                  const request = await getHttpRequest(child.id);
+                  const request = getHttpRequest(child.id);
                   if (request != null) await a.call(request);
                 },
               })),

src-web/components/WorkspaceActionsDropdown.tsx

@@ -8,11 +8,10 @@ import { useCreateWorkspace } from '../hooks/useCreateWorkspace';
 import { useDeleteSendHistory } from '../hooks/useDeleteSendHistory';
 import { settingsAtom } from '../hooks/useSettings';
 import { useWorkspaceMeta } from '../hooks/useWorkspaceMeta';
-import { useWorkspaces } from '../hooks/useWorkspaces';
+import { getWorkspace, useWorkspaces } from '../hooks/useWorkspaces';
 import { showDialog } from '../lib/dialog';
 import { jotaiStore } from '../lib/jotai';
 import { revealInFinderText } from '../lib/reveal';
-import { getWorkspace } from '../lib/store';
 import type { ButtonProps } from './core/Button';
 import { Button } from './core/Button';
 import type { DropdownItem } from './core/Dropdown';
@@ -106,7 +105,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
       return;
     }
 
-    const workspace = await getWorkspace(workspaceId);
+    const workspace = getWorkspace(workspaceId);
     if (workspace == null) return;
 
     showDialog({

src-web/components/core/Icon.tsx

@@ -94,7 +94,7 @@ const icons = {
 export interface IconProps {
   icon: keyof typeof icons;
   className?: string;
-  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg';
+  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   spin?: boolean;
   title?: string;
 }
@@ -107,6 +107,7 @@ export const Icon = memo(function Icon({ icon, spin, size = 'md', className, tit
       className={classNames(
         className,
         'text-inherit flex-shrink-0',
+        size === 'xl' && 'h-6 w-6',
         size === 'lg' && 'h-5 w-5',
         size === 'md' && 'h-4 w-4',
         size === 'sm' && 'h-3.5 w-3.5',

src-web/components/responseViewers/BinaryViewer.tsx

@@ -16,7 +16,7 @@ export function BinaryViewer({ response }: Props) {
   const contentType = getContentTypeHeader(response.headers) ?? 'unknown';
 
   // Wait until the response has been fully-downloaded
-  if (response.state !== 'closed') {
+  if (response.state === 'closed') {
     return (
       <EmptyStateText>
         <Icon icon="refresh" spin />

src-web/components/responseViewers/HTMLOrTextViewer.tsx

@@ -19,10 +19,11 @@ export function HTMLOrTextViewer({ response, pretty, textViewerClassName }: Prop
     rawTextBody.data ?? '',
   );
 
-  if (rawTextBody.isLoading) {
+  if (rawTextBody.isLoading || response.state === 'initialized') {
     return null;
   }
 
+  console.log("HELLO", rawTextBody.data, response);
   // Wasn't able to decode as text, so it must be binary
   if (rawTextBody.data == null) {
     return <BinaryViewer response={response} />;

src-web/font-size.ts

@@ -1,7 +1,7 @@
 // Listen for settings changes, the re-compute theme
 import { listen } from '@tauri-apps/api/event';
-import type { ModelPayload } from '@yaakapp-internal/models';
-import { getSettings } from './lib/store';
+import type { ModelPayload, Settings } from '@yaakapp-internal/models';
+import { invokeCmd } from './lib/tauri';
 
 function setFontSizeOnDocument(fontSize: number) {
   document.documentElement.style.fontSize = `${fontSize}px`;
@@ -12,4 +12,6 @@ listen<ModelPayload>('upserted_model', async (event) => {
   setFontSizeOnDocument(event.payload.model.interfaceFontSize);
 }).catch(console.error);
 
-getSettings().then((settings) => setFontSizeOnDocument(settings.interfaceFontSize));
+invokeCmd<Settings>('cmd_get_settings').then((settings) =>
+  setFontSizeOnDocument(settings.interfaceFontSize),
+);

src-web/hooks/useActiveWorkspace.ts

@@ -1,31 +1,31 @@
-import { useParams } from '@tanstack/react-router';
-import type { Workspace } from '@yaakapp-internal/models';
-import { atom, useAtomValue } from 'jotai/index';
-import { useEffect } from 'react';
-import { jotaiStore } from '../lib/jotai';
-import { workspacesAtom } from './useWorkspaces';
+import {useParams} from '@tanstack/react-router';
+import type {Workspace} from '@yaakapp-internal/models';
+import {atom, useAtomValue} from 'jotai/index';
+import {useEffect} from 'react';
+import {jotaiStore} from '../lib/jotai';
+import {workspacesAtom} from './useWorkspaces';
 
 export const activeWorkspaceIdAtom = atom<string>();
 
 export const activeWorkspaceAtom = atom<Workspace | null>((get) => {
-  const activeWorkspaceId = get(activeWorkspaceIdAtom);
-  const workspaces = get(workspacesAtom);
-  return workspaces.find((w) => w.id === activeWorkspaceId) ?? null;
+    const activeWorkspaceId = get(activeWorkspaceIdAtom);
+    const workspaces = get(workspacesAtom);
+    return workspaces.find((w) => w.id === activeWorkspaceId) ?? null;
 });
 
 export function useActiveWorkspace(): Workspace | null {
-  return useAtomValue(activeWorkspaceAtom);
+    return useAtomValue(activeWorkspaceAtom);
 }
 
 export function getActiveWorkspaceId() {
-  return jotaiStore.get(activeWorkspaceIdAtom) ?? null;
+    return jotaiStore.get(activeWorkspaceIdAtom) ?? null;
 }
 
 export function getActiveWorkspace() {
-  return jotaiStore.get(activeWorkspaceAtom) ?? null;
+    return jotaiStore.get(activeWorkspaceAtom) ?? null;
 }
 
 export function useSubscribeActiveWorkspaceId() {
-  const { workspaceId } = useParams({ strict: false });
-  useEffect(() => jotaiStore.set(activeWorkspaceIdAtom, workspaceId), [workspaceId]);
+    const {workspaceId} = useParams({strict: false});
+    useEffect(() => jotaiStore.set(activeWorkspaceIdAtom, workspaceId), [workspaceId]);
 }

src-web/hooks/useCookieJars.ts

@@ -1,5 +1,6 @@
 import type { CookieJar } from '@yaakapp-internal/models';
 import { atom, useAtomValue } from 'jotai';
+import { jotaiStore } from '../lib/jotai';
 
 export const cookieJarsAtom = atom<CookieJar[] | undefined>();
 
@@ -10,3 +11,7 @@ export const sortedCookieJars = atom((get) => {
 export function useCookieJars() {
   return useAtomValue(sortedCookieJars);
 }
+
+export function getCookieJar(id: string | null) {
+  return jotaiStore.get(cookieJarsAtom)?.find((e) => e.id === id) ?? null;
+}

src-web/hooks/useDeleteAnyGrpcRequest.tsx

@@ -3,15 +3,15 @@ import { InlineCode } from '../components/core/InlineCode';
 import { trackEvent } from '../lib/analytics';
 import { showConfirm } from '../lib/confirm';
 import { fallbackRequestName } from '../lib/fallbackRequestName';
-import { getGrpcRequest } from '../lib/store';
 import { invokeCmd } from '../lib/tauri';
 import { useFastMutation } from './useFastMutation';
+import { getGrpcRequest } from './useGrpcRequests';
 
 export function useDeleteAnyGrpcRequest() {
   return useFastMutation<GrpcRequest | null, string, string>({
     mutationKey: ['delete_any_grpc_request'],
     mutationFn: async (id) => {
-      const request = await getGrpcRequest(id);
+      const request = getGrpcRequest(id);
       if (request == null) return null;
 
       const confirmed = await showConfirm({

src-web/hooks/useDeleteAnyHttpRequest.tsx

@@ -3,15 +3,15 @@ import { InlineCode } from '../components/core/InlineCode';
 import { trackEvent } from '../lib/analytics';
 import { showConfirm } from '../lib/confirm';
 import { fallbackRequestName } from '../lib/fallbackRequestName';
-import { getHttpRequest } from '../lib/store';
 import { invokeCmd } from '../lib/tauri';
 import { useFastMutation } from './useFastMutation';
+import { getHttpRequest } from './useHttpRequests';
 
 export function useDeleteAnyHttpRequest() {
   return useFastMutation<HttpRequest | null, string, string>({
     mutationKey: ['delete_any_http_request'],
     mutationFn: async (id) => {
-      const request = await getHttpRequest(id);
+      const request = getHttpRequest(id);
       if (request == null) return null;
 
       const confirmed = await showConfirm({

src-web/hooks/useDeleteFolder.tsx

@@ -3,10 +3,9 @@ import { useSetAtom } from 'jotai';
 import { InlineCode } from '../components/core/InlineCode';
 import { trackEvent } from '../lib/analytics';
 import { showConfirm } from '../lib/confirm';
-import { getFolder } from '../lib/store';
 import { invokeCmd } from '../lib/tauri';
 import { useFastMutation } from './useFastMutation';
-import { foldersAtom } from './useFolders';
+import {foldersAtom, getFolder} from './useFolders';
 import { removeModelById } from './useSyncModelStores';
 
 export function useDeleteFolder(id: string | null) {
@@ -15,7 +14,7 @@ export function useDeleteFolder(id: string | null) {
   return useFastMutation<Folder | null, string>({
     mutationKey: ['delete_folder', id],
     mutationFn: async () => {
-      const folder = await getFolder(id);
+      const folder = getFolder(id);
       const confirmed = await showConfirm({
         id: 'delete-folder',
         title: 'Delete Folder',

src-web/hooks/useEnvironments.ts

@@ -1,6 +1,7 @@
 import type { Environment } from '@yaakapp-internal/models';
 import { useAtomValue } from 'jotai';
 import { atom } from 'jotai/index';
+import { jotaiStore } from '../lib/jotai';
 
 export const environmentsAtom = atom<Environment[]>([]);
 
@@ -23,3 +24,7 @@ export const environmentsBreakdownAtom = atom<{
 export function useEnvironments() {
   return useAtomValue(environmentsBreakdownAtom);
 }
+
+export function getEnvironment(id: string | null) {
+  return jotaiStore.get(environmentsAtom).find((e) => e.id === id) ?? null;
+}

src-web/hooks/useFolders.ts

@@ -1,9 +1,14 @@
 import type { Folder } from '@yaakapp-internal/models';
 import { useAtomValue } from 'jotai';
 import { atom } from 'jotai/index';
+import { jotaiStore } from '../lib/jotai';
 
 export const foldersAtom = atom<Folder[]>([]);
 
 export function useFolders() {
   return useAtomValue(foldersAtom);
 }
+
+export function getFolder(id: string | null) {
+  return jotaiStore.get(foldersAtom).find((v) => v.id === id) ?? null;
+}

src-web/hooks/useGrpc.ts

@@ -3,7 +3,6 @@ import { emit } from '@tauri-apps/api/event';
 import type { GrpcConnection, GrpcRequest } from '@yaakapp-internal/models';
 import { trackEvent } from '../lib/analytics';
 import { minPromiseMillis } from '../lib/minPromiseMillis';
-import { isResponseLoading } from '../lib/model_util';
 import { invokeCmd } from '../lib/tauri';
 import { useActiveEnvironment } from './useActiveEnvironment';
 import { useDebouncedValue } from './useDebouncedValue';
@@ -64,7 +63,7 @@ export function useGrpc(
     reflect,
     cancel,
     commit,
-    isStreaming: isResponseLoading(conn),
+    isStreaming: conn != null && conn.state !== 'closed',
     send,
   };
 }

src-web/hooks/useGrpcRequests.ts

@@ -1,8 +1,13 @@
 import type { GrpcRequest } from '@yaakapp-internal/models';
 import { atom, useAtomValue } from 'jotai';
+import { jotaiStore } from '../lib/jotai';
 
 export const grpcRequestsAtom = atom<GrpcRequest[]>([]);
 
 export function useGrpcRequests() {
   return useAtomValue(grpcRequestsAtom);
 }
+
+export function getGrpcRequest(id: string) {
+  return jotaiStore.get(grpcRequestsAtom).find((r) => r.id === id) ?? null;
+}

src-web/hooks/useHttpRequests.ts

@@ -1,8 +1,13 @@
-import type { HttpRequest } from '@yaakapp-internal/models';
-import { atom, useAtomValue } from 'jotai';
+import type {HttpRequest} from '@yaakapp-internal/models';
+import {atom, useAtomValue} from 'jotai';
+import {jotaiStore} from "../lib/jotai";
 
 export const httpRequestsAtom = atom<HttpRequest[]>([]);
 
 export function useHttpRequests() {
-  return useAtomValue(httpRequestsAtom);
+    return useAtomValue(httpRequestsAtom);
+}
+
+export function getHttpRequest(id: string) {
+    return jotaiStore.get(httpRequestsAtom).find(r => r.id === id) ?? null;
 }

src-web/hooks/useImportQuerystring.ts

@@ -1,10 +1,10 @@
 import type { HttpUrlParameter } from '@yaakapp-internal/models';
 import { generateId } from '../lib/generateId';
 import { pluralize } from '../lib/pluralize';
-import { getHttpRequest } from '../lib/store';
-import { useFastMutation } from './useFastMutation';
-import { useRequestEditor } from './useRequestEditor';
 import { showToast } from '../lib/toast';
+import { useFastMutation } from './useFastMutation';
+import { getHttpRequest } from './useHttpRequests';
+import { useRequestEditor } from './useRequestEditor';
 import { useUpdateAnyHttpRequest } from './useUpdateAnyHttpRequest';
 
 export function useImportQuerystring(requestId: string) {
@@ -19,7 +19,7 @@ export function useImportQuerystring(requestId: string) {
       const querystring = split[1] ?? '';
       if (!querystring) return;
 
-      const request = await getHttpRequest(requestId);
+      const request = getHttpRequest(requestId);
       if (request == null) return;
 
       const parsedParams = Array.from(new URLSearchParams(querystring).entries());

src-web/hooks/useIsResponseLoading.ts

@@ -1,8 +0,0 @@
-import { isResponseLoading } from '../lib/model_util';
-import { useLatestHttpResponse } from './useLatestHttpResponse';
-
-export function useIsResponseLoading(requestId: string | null): boolean {
-  const response = useLatestHttpResponse(requestId);
-  if (response === null) return false;
-  return isResponseLoading(response);
-}

src-web/hooks/usePlugins.ts

@@ -2,7 +2,6 @@ import {useMutation} from "@tanstack/react-query";
 import type { Plugin } from '@yaakapp-internal/models';
 import { atom, useAtomValue, useSetAtom } from 'jotai';
 import { minPromiseMillis } from '../lib/minPromiseMillis';
-import { listPlugins } from '../lib/store';
 import { invokeCmd } from '../lib/tauri';
 
 const plugins = await listPlugins();
@@ -36,3 +35,8 @@ export function useRefreshPlugins() {
     },
   });
 }
+
+async function listPlugins(): Promise<Plugin[]> {
+  const plugins: Plugin[] = (await invokeCmd('cmd_list_plugins')) ?? [];
+  return plugins;
+}

src-web/hooks/useSaveResponse.tsx

@@ -4,10 +4,10 @@ import mime from 'mime';
 import slugify from 'slugify';
 import { InlineCode } from '../components/core/InlineCode';
 import { getContentTypeHeader } from '../lib/model_util';
-import { getHttpRequest } from '../lib/store';
 import { invokeCmd } from '../lib/tauri';
-import { useFastMutation } from './useFastMutation';
 import { showToast } from '../lib/toast';
+import { useFastMutation } from './useFastMutation';
+import { getHttpRequest } from './useHttpRequests';
 
 export function useSaveResponse(response: HttpResponse) {
   return useFastMutation({

src-web/hooks/useSendAnyHttpRequest.ts

@@ -1,16 +1,16 @@
 import type { HttpResponse } from '@yaakapp-internal/models';
 import { trackEvent } from '../lib/analytics';
-import { getHttpRequest } from '../lib/store';
 import { invokeCmd } from '../lib/tauri';
 import { getActiveCookieJar } from './useActiveCookieJar';
 import { getActiveEnvironment } from './useActiveEnvironment';
 import { useFastMutation } from './useFastMutation';
+import { getHttpRequest } from './useHttpRequests';
 
 export function useSendAnyHttpRequest() {
   return useFastMutation<HttpResponse | null, string, string | null>({
     mutationKey: ['send_any_request'],
     mutationFn: async (id) => {
-      const request = await getHttpRequest(id);
+      const request = getHttpRequest(id ?? 'n/a');
       if (request == null) {
         return null;
       }

src-web/hooks/useSettings.ts

@@ -1,11 +1,16 @@
 import type { Settings } from '@yaakapp-internal/models';
 import { useAtomValue } from 'jotai';
 import { atom } from 'jotai/index';
-import { getSettings } from '../lib/store';
+import {jotaiStore} from "../lib/jotai";
+import { invokeCmd } from '../lib/tauri';
 
-const settings = await getSettings();
+const settings = await invokeCmd<Settings>('cmd_get_settings');
 export const settingsAtom = atom<Settings>(settings);
 
 export function useSettings() {
   return useAtomValue(settingsAtom);
 }
+
+export function getSettings() {
+  return jotaiStore.get(settingsAtom);
+}

src-web/hooks/useSyncWorkspaceChildModels.ts

@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
 import { jotaiStore } from '../lib/jotai';
-import { getWorkspaceMeta } from '../lib/store';
 import { invokeCmd } from '../lib/tauri';
 import { activeWorkspaceIdAtom, getActiveWorkspaceId } from './useActiveWorkspace';
 import { cookieJarsAtom } from './useCookieJars';
@@ -42,5 +41,5 @@ async function sync() {
   jotaiStore.set(environmentsAtom, await invokeCmd('cmd_list_environments', args));
 
   // Single models
-  jotaiStore.set(workspaceMetaAtom, await getWorkspaceMeta(workspaceId));
+  jotaiStore.set(workspaceMetaAtom, await invokeCmd('cmd_get_workspace_meta', { workspaceId }));
 }

src-web/hooks/useUpdateAnyFolder.ts

@@ -1,17 +1,16 @@
-import { useFastMutation } from './useFastMutation';
 import type { Folder } from '@yaakapp-internal/models';
-import {useSetAtom} from "jotai/index";
-import { getFolder } from '../lib/store';
+import { useSetAtom } from 'jotai/index';
 import { invokeCmd } from '../lib/tauri';
-import {foldersAtom} from "./useFolders";
-import {updateModelList} from "./useSyncModelStores";
+import { useFastMutation } from './useFastMutation';
+import { foldersAtom, getFolder } from './useFolders';
+import { updateModelList } from './useSyncModelStores';
 
 export function useUpdateAnyFolder() {
   const setFolders = useSetAtom(foldersAtom);
   return useFastMutation<Folder, unknown, { id: string; update: (r: Folder) => Folder }>({
     mutationKey: ['update_any_folder'],
     mutationFn: async ({ id, update }) => {
-      const folder = await getFolder(id);
+      const folder = getFolder(id);
       if (folder === null) {
         throw new Error("Can't update a null folder");
       }
@@ -20,6 +19,6 @@ export function useUpdateAnyFolder() {
     },
     onSuccess: async (folder) => {
       setFolders(updateModelList(folder));
-    }
+    },
   });
 }

src-web/hooks/useUpdateAnyGrpcRequest.ts

@@ -1,9 +1,8 @@
-import { useFastMutation } from './useFastMutation';
 import type { GrpcRequest } from '@yaakapp-internal/models';
 import { useSetAtom } from 'jotai/index';
-import { getGrpcRequest } from '../lib/store';
 import { invokeCmd } from '../lib/tauri';
-import { grpcRequestsAtom } from './useGrpcRequests';
+import { useFastMutation } from './useFastMutation';
+import { getGrpcRequest, grpcRequestsAtom } from './useGrpcRequests';
 import { updateModelList } from './useSyncModelStores';
 
 export function useUpdateAnyGrpcRequest() {
@@ -15,7 +14,7 @@ export function useUpdateAnyGrpcRequest() {
   >({
     mutationKey: ['update_any_grpc_request'],
     mutationFn: async ({ id, update }) => {
-      const request = await getGrpcRequest(id);
+      const request = getGrpcRequest(id);
       if (request === null) {
         throw new Error("Can't update a null request");
       }

src-web/hooks/useUpdateAnyHttpRequest.ts

@@ -1,10 +1,9 @@
-import { useFastMutation } from './useFastMutation';
 import type { HttpRequest } from '@yaakapp-internal/models';
-import {useSetAtom} from "jotai/index";
-import { getHttpRequest } from '../lib/store';
+import { useSetAtom } from 'jotai/index';
 import { invokeCmd } from '../lib/tauri';
-import {httpRequestsAtom} from "./useHttpRequests";
-import {updateModelList} from "./useSyncModelStores";
+import { useFastMutation } from './useFastMutation';
+import { getHttpRequest, httpRequestsAtom } from './useHttpRequests';
+import { updateModelList } from './useSyncModelStores';
 
 export function useUpdateAnyHttpRequest() {
   const setHttpRequests = useSetAtom(httpRequestsAtom);
@@ -15,7 +14,7 @@ export function useUpdateAnyHttpRequest() {
   >({
     mutationKey: ['update_any_http_request'],
     mutationFn: async ({ id, update }) => {
-      const request = await getHttpRequest(id);
+      const request = getHttpRequest(id);
       if (request === null) {
         throw new Error("Can't update a null request");
       }
@@ -26,6 +25,6 @@ export function useUpdateAnyHttpRequest() {
     },
     onSuccess: async (request) => {
       setHttpRequests(updateModelList(request));
-    }
+    },
   });
 }

src-web/hooks/useUpdateCookieJar.ts

@@ -1,9 +1,8 @@
 import { useFastMutation } from './useFastMutation';
 import type { CookieJar } from '@yaakapp-internal/models';
 import { useSetAtom } from 'jotai/index';
-import { getCookieJar } from '../lib/store';
 import { invokeCmd } from '../lib/tauri';
-import { cookieJarsAtom } from './useCookieJars';
+import { cookieJarsAtom, getCookieJar } from './useCookieJars';
 import { updateModelList } from './useSyncModelStores';
 
 export function useUpdateCookieJar(id: string | null) {
@@ -11,7 +10,7 @@ export function useUpdateCookieJar(id: string | null) {
   return useFastMutation<CookieJar, unknown, Partial<CookieJar> | ((j: CookieJar) => CookieJar)>({
     mutationKey: ['update_cookie_jar', id],
     mutationFn: async (v) => {
-      const cookieJar = await getCookieJar(id);
+      const cookieJar = getCookieJar(id);
       if (cookieJar == null) {
         throw new Error("Can't update a null workspace");
       }

src-web/hooks/useUpdateEnvironment.ts

@@ -1,10 +1,9 @@
-import { useFastMutation } from './useFastMutation';
 import type { Environment } from '@yaakapp-internal/models';
 import { useSetAtom } from 'jotai/index';
-import { getEnvironment } from '../lib/store';
 import { invokeCmd } from '../lib/tauri';
-import { environmentsAtom } from './useEnvironments';
-import {updateModelList} from "./useSyncModelStores";
+import { environmentsAtom, getEnvironment } from './useEnvironments';
+import { useFastMutation } from './useFastMutation';
+import { updateModelList } from './useSyncModelStores';
 
 export function useUpdateEnvironment(id: string | null) {
   const setEnvironments = useSetAtom(environmentsAtom);
@@ -15,7 +14,7 @@ export function useUpdateEnvironment(id: string | null) {
   >({
     mutationKey: ['update_environment', id],
     mutationFn: async (v) => {
-      const environment = await getEnvironment(id);
+      const environment = getEnvironment(id);
       if (environment == null) {
         throw new Error("Can't update a null environment");
       }

src-web/hooks/useUpdateSettings.ts

@@ -1,16 +1,15 @@
-import { useFastMutation } from './useFastMutation';
 import type { Settings } from '@yaakapp-internal/models';
 import { useSetAtom } from 'jotai';
-import { getSettings } from '../lib/store';
 import { invokeCmd } from '../lib/tauri';
-import { settingsAtom } from './useSettings';
+import { useFastMutation } from './useFastMutation';
+import { getSettings, settingsAtom } from './useSettings';
 
 export function useUpdateSettings() {
   const setSettings = useSetAtom(settingsAtom);
   return useFastMutation<Settings, unknown, Partial<Settings>>({
     mutationKey: ['update_settings'],
     mutationFn: async (patch) => {
-      const settings = await getSettings();
+      const settings = getSettings();
       const newSettings: Settings = { ...settings, ...patch };
       return invokeCmd<Settings>('cmd_update_settings', { settings: newSettings });
     },

src-web/hooks/useWorkspaceMeta.ts

@@ -1,8 +1,13 @@
 import type { WorkspaceMeta } from '@yaakapp-internal/models';
 import { atom, useAtomValue } from 'jotai';
+import { jotaiStore } from '../lib/jotai';
 
 export const workspaceMetaAtom = atom<WorkspaceMeta | null>(null);
 
 export function useWorkspaceMeta() {
   return useAtomValue(workspaceMetaAtom);
 }
+
+export function getWorkspaceMeta() {
+  return jotaiStore.get(workspaceMetaAtom);
+}

src-web/hooks/useWorkspaces.ts

@@ -1,9 +1,11 @@
 import type { Workspace } from '@yaakapp-internal/models';
 import { atom, useAtomValue } from 'jotai';
-import { listWorkspaces } from '../lib/store';
+import { jotaiStore } from '../lib/jotai';
+import { invokeCmd } from '../lib/tauri';
 
-const workspaces = await listWorkspaces();
-export const workspacesAtom = atom<Workspace[]>(workspaces);
+export const workspacesAtom = atom<Workspace[]>(
+  await invokeCmd<Workspace[]>('cmd_list_workspaces'),
+);
 
 export const sortedWorkspacesAtom = atom((get) =>
   get(workspacesAtom).sort((a, b) => a.name.localeCompare(b.name)),
@@ -12,3 +14,7 @@ export const sortedWorkspacesAtom = atom((get) =>
 export function useWorkspaces() {
   return useAtomValue(sortedWorkspacesAtom);
 }
+
+export function getWorkspace(id: string | null) {
+  return jotaiStore.get(workspacesAtom).find((v) => v.id === id) ?? null;
+}

src-web/lib/model_util.ts

@@ -1,10 +1,4 @@
-import type {
-  AnyModel,
-  Cookie,
-  GrpcConnection,
-  HttpResponse,
-  HttpResponseHeader,
-} from '@yaakapp-internal/models';
+import type { AnyModel, Cookie, HttpResponseHeader } from '@yaakapp-internal/models';
 import { getMimeTypeFromContentType } from './contentType';
 
 export const BODY_TYPE_NONE = null;
@@ -29,13 +23,6 @@ export function cookieDomain(cookie: Cookie): string {
   return 'unknown';
 }
 
-export function isResponseLoading(
-  response: Pick<HttpResponse | GrpcConnection, 'state'> | null,
-): boolean {
-  if (response == null) return false;
-  return response.state !== 'closed';
-}
-
 export function modelsEq(a: AnyModel, b: AnyModel) {
   if (a.model != b.model) {
     return false;

src-web/lib/store.ts

@@ -1,84 +0,0 @@
-import type {
-  CookieJar,
-  Environment,
-  Folder,
-  GrpcRequest,
-  HttpRequest,
-  Plugin,
-  Settings,
-  Workspace,
-  WorkspaceMeta,
-} from '@yaakapp-internal/models';
-import { invokeCmd } from './tauri';
-
-export async function getSettings(): Promise<Settings> {
-  return invokeCmd('cmd_get_settings', {});
-}
-
-export async function getGrpcRequest(id: string | null): Promise<GrpcRequest | null> {
-  if (id === null) return null;
-  const request: GrpcRequest = (await invokeCmd('cmd_get_grpc_request', { id })) ?? null;
-  if (request == null) {
-    return null;
-  }
-  return request;
-}
-
-export async function getHttpRequest(id: string | null): Promise<HttpRequest | null> {
-  if (id === null) return null;
-  const request: HttpRequest = (await invokeCmd('cmd_get_http_request', { id })) ?? null;
-  if (request == null) {
-    return null;
-  }
-  return request;
-}
-
-export async function getEnvironment(id: string | null): Promise<Environment | null> {
-  if (id === null) return null;
-  const environment: Environment = (await invokeCmd('cmd_get_environment', { id })) ?? null;
-  if (environment == null) {
-    return null;
-  }
-  return environment;
-}
-
-export async function getFolder(id: string | null): Promise<Folder | null> {
-  if (id === null) return null;
-  const folder: Folder = (await invokeCmd('cmd_get_folder', { id })) ?? null;
-  if (folder == null) {
-    return null;
-  }
-  return folder;
-}
-
-export async function getWorkspace(id: string | null): Promise<Workspace | null> {
-  if (id === null) return null;
-  const workspace: Workspace = (await invokeCmd('cmd_get_workspace', { id })) ?? null;
-  if (workspace == null) {
-    return null;
-  }
-  return workspace;
-}
-
-export async function getWorkspaceMeta(workspaceId: string) {
-  return invokeCmd<WorkspaceMeta>('cmd_get_workspace_meta', { workspaceId });
-}
-
-export async function listWorkspaces(): Promise<Workspace[]> {
-  const workspaces: Workspace[] = (await invokeCmd('cmd_list_workspaces')) ?? [];
-  return workspaces;
-}
-
-export async function listPlugins(): Promise<Plugin[]> {
-  const plugins: Plugin[] = (await invokeCmd('cmd_list_plugins')) ?? [];
-  return plugins;
-}
-
-export async function getCookieJar(id: string | null): Promise<CookieJar | null> {
-  if (id === null) return null;
-  const cookieJar: CookieJar = (await invokeCmd('cmd_get_cookie_jar', { id })) ?? null;
-  if (cookieJar == null) {
-    return null;
-  }
-  return cookieJar;
-}

src-web/theme.ts

@@ -1,7 +1,7 @@
 import { emit, listen } from '@tauri-apps/api/event';
 import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
-import type { ModelPayload } from '@yaakapp-internal/models';
-import { getSettings } from './lib/store';
+import type { ModelPayload, Settings } from '@yaakapp-internal/models';
+import { invokeCmd } from './lib/tauri';
 import type { Appearance } from './lib/theme/appearance';
 import { getCSSAppearance, subscribeToPreferredAppearance } from './lib/theme/appearance';
 import { getResolvedTheme } from './lib/theme/themes';
@@ -32,7 +32,7 @@ listen<ModelPayload>('upserted_model', async (event) => {
 }).catch(console.error);
 
 async function configureTheme() {
-  const settings = await getSettings();
+  const settings = await invokeCmd<Settings>('cmd_get_settings');
   const theme = getResolvedTheme(
     preferredAppearance,
     settings.appearance,