Split codebase (#455)

apps/yaak-client/hooks/useCreateDropdownItems.tsx

@@ -0,0 +1,118 @@
+import type { HttpRequest, WebsocketRequest } from "@yaakapp-internal/models";
+import type { GrpcRequest } from "@yaakapp-internal/sync";
+import { useAtomValue } from "jotai";
+import { useMemo } from "react";
+import { createFolder } from "../commands/commands";
+import type { DropdownItem } from "../components/core/Dropdown";
+import { Icon } from "@yaakapp-internal/ui";
+import { createRequestAndNavigate } from "../lib/createRequestAndNavigate";
+import { generateId } from "../lib/generateId";
+import { BODY_TYPE_GRAPHQL } from "../lib/model_util";
+import { activeRequestAtom } from "./useActiveRequest";
+import { activeWorkspaceIdAtom } from "./useActiveWorkspace";
+
+export function useCreateDropdownItems({
+  hideFolder,
+  hideIcons,
+  folderId,
+}: {
+  hideFolder?: boolean;
+  hideIcons?: boolean;
+  folderId?: string | null;
+} = {}): DropdownItem[] {
+  const workspaceId = useAtomValue(activeWorkspaceIdAtom);
+  const activeRequest = useAtomValue(activeRequestAtom);
+
+  const items = useMemo((): DropdownItem[] => {
+    return getCreateDropdownItems({ hideFolder, hideIcons, folderId, activeRequest, workspaceId });
+  }, [activeRequest, folderId, hideFolder, hideIcons, workspaceId]);
+
+  return items;
+}
+
+export function getCreateDropdownItems({
+  hideFolder,
+  hideIcons,
+  folderId: folderIdOption,
+  workspaceId,
+  activeRequest,
+  onCreate,
+}: {
+  hideFolder?: boolean;
+  hideIcons?: boolean;
+  folderId?: string | null;
+  workspaceId: string | null;
+  activeRequest: HttpRequest | GrpcRequest | WebsocketRequest | null;
+  onCreate?: (
+    model: "http_request" | "grpc_request" | "websocket_request" | "folder",
+    id: string,
+  ) => void;
+}): DropdownItem[] {
+  const folderId =
+    (folderIdOption === "active-folder" ? activeRequest?.folderId : folderIdOption) ?? null;
+
+  if (workspaceId == null) {
+    return [];
+  }
+
+  return [
+    {
+      label: "HTTP",
+      leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
+      onSelect: async () => {
+        const id = await createRequestAndNavigate({ model: "http_request", workspaceId, folderId });
+        onCreate?.("http_request", id);
+      },
+    },
+    {
+      label: "GraphQL",
+      leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
+      onSelect: async () => {
+        const id = await createRequestAndNavigate({
+          model: "http_request",
+          workspaceId,
+          folderId,
+          bodyType: BODY_TYPE_GRAPHQL,
+          method: "POST",
+          headers: [{ name: "Content-Type", value: "application/json", id: generateId() }],
+        });
+        onCreate?.("http_request", id);
+      },
+    },
+    {
+      label: "gRPC",
+      leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
+      onSelect: async () => {
+        const id = await createRequestAndNavigate({ model: "grpc_request", workspaceId, folderId });
+        onCreate?.("grpc_request", id);
+      },
+    },
+    {
+      label: "WebSocket",
+      leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
+      onSelect: async () => {
+        const id = await createRequestAndNavigate({
+          model: "websocket_request",
+          workspaceId,
+          folderId,
+        });
+        onCreate?.("websocket_request", id);
+      },
+    },
+    ...((hideFolder
+      ? []
+      : [
+          { type: "separator" },
+          {
+            label: "Folder",
+            leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
+            onSelect: async () => {
+              const id = await createFolder.mutateAsync({ folderId });
+              if (id != null) {
+                onCreate?.("folder", id);
+              }
+            },
+          },
+        ]) as DropdownItem[]),
+  ];
+}