chore: move api state out of zustand (#16)

Co-authored-by: JonathanLab <[email protected]>
Co-authored-by: Claude <[email protected]>

Author: 3 people

README.md

@@ -38,7 +38,7 @@ pnpm run lint       # Linting
 You can set these environment variables instead of entering credentials in the app:
 
 - `POSTHOG_API_KEY` - Your PostHog personal API key
-- `POSTHOG_API_HOST` - PostHog instance URL (defaults to https://app.posthog.com)
+- `POSTHOG_API_HOST` - PostHog instance URL (defaults to https://us.posthog.com)
 
 ## Architecture
 

package.json

@@ -62,13 +62,15 @@
     "@posthog/agent": "^1.3.1",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/themes": "^3.2.1",
+    "@tanstack/react-query": "^5.90.2",
     "axios": "^1.6.7",
     "clsx": "^2.1.0",
     "cmdk": "^1.1.1",
     "date-fns": "^3.3.1",
     "radix-themes-tw": "0.2.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.64.0",
     "react-hotkeys-hook": "^4.4.4",
     "socket.io-client": "^4.7.4",
     "uuid": "^9.0.1",

pnpm-lock.yaml

@@ -64,6 +64,7 @@ export class PostHogAPIClient {
     title: string,
     description: string,
     repositoryConfig?: { organization: string; repository: string },
+    workflowId?: string,
   ) {
     const teamId = await this.getTeamId();
 
@@ -72,6 +73,7 @@ export class PostHogAPIClient {
       description,
       origin_product: "user_created" as const,
       ...(repositoryConfig && { repository_config: repositoryConfig }),
+      ...(workflowId && { workflow: workflowId }),
     };
 
     const data = await this.api.post(`/api/projects/{project_id}/tasks/`, {

src/api/posthogClient.ts

@@ -96,7 +96,7 @@ export function AuthScreen() {
                           type="url"
                           value={apiHost}
                           onChange={(e) => setApiHost(e.target.value)}
-                          placeholder="https://app.posthog.com"
+                          placeholder="https://us.posthog.com"
                           required
                         />
                       </Flex>

src/renderer/components/AuthScreen.tsx

@@ -17,8 +17,6 @@ interface ComboboxProps {
   emptyMessage?: string;
   size?: "1" | "2" | "3";
   variant?: "classic" | "surface" | "soft" | "ghost";
-  allowNone?: boolean;
-  noneLabel?: string;
   renderItem?: (item: ComboboxItem) => ReactNode;
   side?: "top" | "bottom" | "left" | "right";
   align?: "start" | "center" | "end";
@@ -33,31 +31,21 @@ export function Combobox({
   emptyMessage = "No items found",
   size = "2",
   variant = "surface",
-  allowNone = true,
-  noneLabel = "None",
   renderItem,
   side = "bottom",
   align = "start",
 }: ComboboxProps) {
   const [open, setOpen] = useState(false);
 
   const selectedItem = useMemo(() => {
-    if (!value || value === "__none__") return null;
+    if (!value) return null;
     return items.find((item) => item.value === value);
   }, [value, items]);
 
-  const displayValue = selectedItem
-    ? selectedItem.label
-    : value === "__none__"
-      ? noneLabel
-      : placeholder;
+  const displayValue = selectedItem ? selectedItem.label : placeholder;
 
   const handleSelect = (selectedValue: string) => {
-    if (selectedValue === value) {
-      onValueChange("__none__");
-    } else {
-      onValueChange(selectedValue);
-    }
+    onValueChange(selectedValue);
     setOpen(false);
   };
 
@@ -77,24 +65,6 @@ export function Combobox({
           <Command.List>
             <Command.Empty>{emptyMessage}</Command.Empty>
             <Command.Group>
-              {allowNone && (
-                <Command.Item
-                  value="__none__"
-                  onSelect={() => handleSelect("__none__")}
-                >
-                  <Flex justify="between" align="center" gap="2" width="100%">
-                    <Text size={size} color="gray">
-                      {noneLabel}
-                    </Text>
-                    <CheckIcon
-                      className="mr-2 h-4 w-4"
-                      style={{
-                        opacity: value === "__none__" ? 1 : 0,
-                      }}
-                    />
-                  </Flex>
-                </Command.Item>
-              )}
               {items.map((item) => {
                 const isSelected = value === item.value;
                 return (

src/renderer/components/Combobox.tsx

@@ -1,8 +1,8 @@
 import { Box, Flex } from "@radix-ui/themes";
 import type { Task } from "@shared/types";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
-import { useIntegrationStore } from "../stores/integrationStore";
+import { useIntegrations } from "../hooks/useIntegrations";
 import { useTabStore } from "../stores/tabStore";
 import { CommandMenu } from "./command";
 import { StatusBar } from "./StatusBar";
@@ -15,19 +15,11 @@ import { WorkflowView } from "./WorkflowView";
 
 export function MainLayout() {
   const { activeTabId, tabs, createTab, setActiveTab } = useTabStore();
-  const { fetchIntegrations } = useIntegrationStore();
+  useIntegrations();
   const [commandMenuOpen, setCommandMenuOpen] = useState(false);
   const [taskCreateOpen, setTaskCreateOpen] = useState(false);
   const [workflowCreateOpen, setWorkflowCreateOpen] = useState(false);
 
-  useEffect(() => {
-    fetchIntegrations();
-  }, [fetchIntegrations]);
-
-  useEffect(() => {
-    fetchIntegrations();
-  }, [fetchIntegrations]);
-
   useHotkeys("mod+k", () => setCommandMenuOpen((prev) => !prev), {
     enabled: !commandMenuOpen,
   });