Generalized frontend model store (#193)

src-web/hooks/useCreateDropdownItems.tsx

@@ -1,13 +1,14 @@
+import { createWorkspaceModel } from '@yaakapp-internal/models';
+import { useAtomValue } from 'jotai';
 import { useMemo } from 'react';
 import { createFolder } from '../commands/commands';
-import { upsertWebsocketRequest } from '../commands/upsertWebsocketRequest';
 import type { DropdownItem } from '../components/core/Dropdown';
 import { Icon } from '../components/core/Icon';
 import { generateId } from '../lib/generateId';
+import { jotaiStore } from '../lib/jotai';
 import { BODY_TYPE_GRAPHQL } from '../lib/model_util';
-import { getActiveRequest } from './useActiveRequest';
-import { getActiveWorkspace } from './useActiveWorkspace';
-import { useCreateGrpcRequest } from './useCreateGrpcRequest';
+import { activeRequestAtom } from './useActiveRequest';
+import { activeWorkspaceIdAtom } from './useActiveWorkspace';
 import { useCreateHttpRequest } from './useCreateHttpRequest';
 
 export function useCreateDropdownItems({
@@ -20,14 +21,13 @@ export function useCreateDropdownItems({
   folderId?: string | null | 'active-folder';
 } = {}): DropdownItem[] {
   const { mutate: createHttpRequest } = useCreateHttpRequest();
-  const { mutate: createGrpcRequest } = useCreateGrpcRequest();
-  const activeWorkspace = getActiveWorkspace();
+  const workspaceId = useAtomValue(activeWorkspaceIdAtom);
 
   const items = useMemo((): DropdownItem[] => {
-    const activeRequest = getActiveRequest();
+    const activeRequest = jotaiStore.get(activeRequestAtom);
     const folderId =
       (folderIdOption === 'active-folder' ? activeRequest?.folderId : folderIdOption) ?? null;
-    if (activeWorkspace == null) return [];
+    if (workspaceId == null) return [];
 
     return [
       {
@@ -51,13 +51,12 @@ export function useCreateDropdownItems({
       {
         label: 'gRPC',
         leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
-        onSelect: () => createGrpcRequest({ folderId }),
+        onSelect: () => createWorkspaceModel({ model: 'grpc_request', workspaceId, folderId }),
       },
       {
         label: 'WebSocket',
         leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
-        onSelect: () =>
-          upsertWebsocketRequest.mutate({ folderId, workspaceId: activeWorkspace.id }),
+        onSelect: () => createWorkspaceModel({ model: 'websocket_request', workspaceId, folderId }),
       },
       ...((hideFolder
         ? []
@@ -70,14 +69,7 @@ export function useCreateDropdownItems({
             },
           ]) as DropdownItem[]),
     ];
-  }, [
-    activeWorkspace,
-    createGrpcRequest,
-    createHttpRequest,
-    folderIdOption,
-    hideFolder,
-    hideIcons,
-  ]);
+  }, [createHttpRequest, folderIdOption, hideFolder, hideIcons, workspaceId]);
 
   return items;
 }