disecting everything to see where I broke it

khill-fbmc · Oct 14, 2024 · 086cb13 · 086cb13
1 parent 9bc29cc
commit 086cb13
Show file tree

Hide file tree

Showing 15 changed files with 150 additions and 122 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,4 @@
 {
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "typescript.tsdk": "node_modules/typescript/lib"
 }
diff --git a/src/hooks/useActiveApp.ts b/src/hooks/useActiveApp.ts
@@ -1,9 +1,8 @@
 import { useExtensionState } from "./useExtensionState";
 
 export function useActiveApp() {
-  const app = useExtensionState((s) => s.getActiveApp());
-  const updateActiveApp = useExtensionState((s) => s.updateActiveApp);
-  const setActiveApp = useExtensionState((s) => s.setActiveApp);
+  const apps = useExtensionState((s) => s.apps);
+  const activeAppName = useExtensionState((s) => s.activeAppName);
 
-  return { app, updateActiveApp, setActiveApp };
+  return apps.find((app) => app.name === activeAppName);
 }
diff --git a/src/hooks/useActiveAppUrl.ts b/src/hooks/useActiveAppUrl.ts
diff --git a/src/hooks/useExtensionState.ts b/src/hooks/useExtensionState.ts
@@ -42,37 +42,37 @@ const initialState: State = {
 };
 
 export const useExtensionState = create<State & Actions>()(
-  persist(
-    (set, get) => ({
-      ...initialState,
-      setDomain: (domain) => set(() => ({ domain })),
-      setEditMode: (isEditing) => set(() => ({ isEditing })),
-      setActiveApp: (activeAppName) => set(() => ({ activeAppName })),
-      addApp: (app) => set((state) => ({ apps: [...state.apps, app] })),
-      updateApp: (name, props) => {
-        set((state) => ({
-          apps: state.apps.map((app) => {
-            return app.name === name ? { ...app, ...props } : app;
-          }),
-        }));
-      },
-      updateActiveApp: (props) => {
-        const name = get().activeAppName;
-        if (name) {
-          get().updateApp(name, props);
-        }
-      },
-      updateWorkflow: (props) =>
-        set((state) => ({
-          ...state,
-          workflow: { ...state.workflow, ...props },
-        })),
-    }),
-    {
-      name: STORAGE_KEY,
-      storage: createJSONStorage(() => ChromeStateStorage),
-    }
-  )
+  // persist(
+  (set, get) => ({
+    ...initialState,
+    setDomain: (domain) => set(() => ({ domain })),
+    setEditMode: (isEditing) => set(() => ({ isEditing })),
+    setActiveApp: (activeAppName) => set(() => ({ activeAppName })),
+    addApp: (app) => set((state) => ({ apps: [...state.apps, app] })),
+    updateApp: (name, props) => {
+      set((state) => ({
+        apps: state.apps.map((app) => {
+          return app.name === name ? { ...app, ...props } : app;
+        }),
+      }));
+    },
+    updateActiveApp: (props) => {
+      const name = get().activeAppName;
+      if (name) {
+        get().updateApp(name, props);
+      }
+    },
+    updateWorkflow: (props) =>
+      set((state) => ({
+        ...state,
+        workflow: { ...state.workflow, ...props },
+      })),
+  })
+  //   {
+  //     name: STORAGE_KEY,
+  //     storage: createJSONStorage(() => ChromeStateStorage),
+  //   }
+  // )
 );
 
 export const getActiveApp = () => {

diff --git a/src/hooks/useRetoolAppUrl.ts → src/hooks/useRetoolUrl.ts b/src/hooks/useRetoolAppUrl.ts → src/hooks/useRetoolUrl.ts
@@ -1,11 +1,13 @@
 import type { RetoolApp } from "@/types/extension";
 
-function useRetoolAppUrl(domain: string, app: RetoolApp): string;
-function useRetoolAppUrl(domain: string): (app: RetoolApp) => string;
-function useRetoolAppUrl(domain: string, app?: RetoolApp) {
-  return app
-    ? composeAppUrl(domain, app)
-    : (app: RetoolApp) => composeAppUrl(domain, app);
+function useRetoolUrl(domain: string): (app: RetoolApp) => string;
+function useRetoolUrl(domain: string, app?: RetoolApp): string;
+function useRetoolUrl(domain: string, app?: RetoolApp) {
+  if (!app) {
+    return (app: RetoolApp) => composeAppUrl(domain, app);
+  } else {
+    return composeAppUrl(domain, app);
+  }
 }
 
 function composeAppUrl(domain: string, app: RetoolApp) {
@@ -26,4 +28,4 @@ function composeAppUrl(domain: string, app: RetoolApp) {
   return `${url.toString()}#${hashParams.toString()}`;
 }
 
-export { useRetoolAppUrl };
+export { useRetoolUrl };
diff --git a/src/hooks/useWorkflow2.ts b/src/hooks/useWorkflow2.ts
@@ -1,14 +1,14 @@
 import useSWR from "swr";
 
 import type { RetoolApp } from "@/types/extension";
+import { WorkflowDataFetcher } from "@/lib/WorkflowDataFetcher";
 
 export function useWorkflow(
   apiKey: string,
   url: string | undefined | null | false
 ) {
-  const key = () => url;
-
-  const fetcher = async (url: string) => {
+  const fetch = async () => {
+    const data = await WorkflowDataFetcher(url) {
     const res = await fetch(url, {
       method: "POST",
       headers: {
@@ -25,8 +25,8 @@ export function useWorkflow(
       );
     }
 
-    return { apps: data.apps };
-  };
+    return data;
+  }
 
-  return useSWR<{ apps: RetoolApp[] }>(key, fetcher);
+  return useSWR<{ apps: RetoolApp[] }>(url, WorkflowDataFetcher);
 }
diff --git a/src/lib/WorkflowDataFetcher.ts b/src/lib/WorkflowDataFetcher.ts
@@ -0,0 +1,18 @@
+import type { RetoolApp } from "@/types/extension";
+
+export async function WorkflowDataFetcher(
+  apiKey: string,
+  url: string
+): Promise<{ apps: RetoolApp[] }> {
+  return fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "X-Workflow-Api-Key": apiKey,
+    },
+  }).then((res) => {
+    const json = res.json();
+    console.log(json);
+    return json;
+  });
+}
diff --git a/src/pages/Options/Options.tsx b/src/pages/Options/Options.tsx
@@ -40,14 +40,14 @@ function Options() {
                 </Alert> */}
               </Col>
             </Row>
-            <OptionsForm />
+            {/* <OptionsForm /> */}
           </Container>
         </Tab>
         <Tab eventKey="storage" title="Storage">
-          <StorageTab />
+          {/* <StorageTab /> */}
         </Tab>
         <Tab eventKey="workflow" title="Workflow">
-          {/* <WorkflowTab /> */}
+          <WorkflowTab />
         </Tab>
         <Tab eventKey="json" title="JSON">
           <JSONTab />

diff --git a/src/pages/Options/Tabs/ConfigTab.tsx b/src/pages/Options/Tabs/ConfigTab.tsx
@@ -6,8 +6,8 @@ import { useEditMode } from "@/hooks/useEditMode";
 import { getActiveApp, useExtensionState } from "@/hooks/useExtensionState";
 
 import AppCard from "../components/AppCard";
-import DomainInput from "../components/DomainInput";
 import AppForm from "../components/AppForm";
+import DomainInput from "../components/DomainInput";
 
 import type { RetoolApp } from "@/types/extension";
 
@@ -27,7 +27,12 @@ function ConfigTab() {
           <h3 className="mt-2">Current App</h3>
           {!isEditing ? (
             <Container className="pt-2">
-              <AppCard editable app={app!} onEdit={() => startEditMode()} />
+              <AppCard
+                isActive={false}
+                editable
+                app={app!}
+                onEdit={() => startEditMode()}
+              />
             </Container>
           ) : (
             <FormProvider {...methods}>

diff --git a/src/pages/Options/Tabs/StorageTab.tsx b/src/pages/Options/Tabs/StorageTab.tsx
@@ -7,6 +7,7 @@ import AppCard from "../components/AppCard";
 
 function StorageTab() {
   const apps = useExtensionState((s) => s.apps);
+  const activeAppName = useExtensionState((s) => s.activeAppName);
 
   return (
     <Container className="px-5 pb-5 mt-4">
@@ -28,7 +29,7 @@ function StorageTab() {
         {apps.length > 0 &&
           apps.map((app) => (
             <Col key={app.name} md={12} lg={6} className="p-1">
-              <AppCard app={app} />
+              <AppCard isActive={app.name === activeAppName} app={app} />
             </Col>
           ))}
       </Row>

diff --git a/src/pages/Options/Tabs/WorkflowTab.tsx b/src/pages/Options/Tabs/WorkflowTab.tsx
@@ -1,21 +1,42 @@
 import JsonView from "@uiw/react-json-view";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Alert, Col, Row } from "react-bootstrap";
 import Button from "react-bootstrap/Button";
 import Card from "react-bootstrap/Card";
 import Container from "react-bootstrap/Container";
 import Form from "react-bootstrap/Form";
+import useSWR from "swr";
 
 import { useExtensionState } from "@/hooks/useExtensionState";
-import { useWorkflow } from "@/hooks/useWorkflow2";
+import { WorkflowDataFetcher } from "@/lib/WorkflowDataFetcher";
+
+import type { RetoolApp } from "@/types/extension";
 
 function WorkflowTab() {
-  const workflow = useExtensionState((s) => s.workflow);
+  const { apiKey, url } = useExtensionState((s) => s.workflow);
   const updateWorkflow = useExtensionState((s) => s.updateWorkflow);
 
   const [useWorkflowProvider, setUseWorkflowProvider] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [workflowData, setWorkflowData] = useState<RetoolApp[]>([]);
+  const [workflowError, setWorkflowError] = useState<string | undefined>();
 
-  const { data, error, isLoading } = useWorkflow(workflow.apiKey, workflow.url);
+  useEffect(() => {
+    const fetch = async () => {
+      setIsLoading(true);
+      try {
+        const reply = await WorkflowDataFetcher(apiKey, url);
+        if (reply.apps) {
+          setWorkflowData(reply.apps);
+        }
+        console.log(reply);
+      } catch (e) {
+        setWorkflowError((e as Error).message);
+      }
+      setIsLoading(false);
+    };
+    if (url && apiKey) fetch();
+  }, [apiKey, url]);
 
   return (
     <Container>
@@ -50,7 +71,7 @@ function WorkflowTab() {
                 </p>
                 <Form.Label>Workflow URL</Form.Label>
                 <Form.Control
-                  value={workflow?.url}
+                  value={url}
                   disabled={!useWorkflowProvider}
                   onChange={(e) => updateWorkflow({ url: e.target.value })}
                 />
@@ -63,7 +84,7 @@ function WorkflowTab() {
                 <Form.Label>Workflow API Key</Form.Label>
                 <Form.Control
                   type="password"
-                  value={workflow?.apiKey}
+                  value={apiKey}
                   disabled={!useWorkflowProvider}
                   onChange={(e) => updateWorkflow({ apiKey: e.target.value })}
                 />
@@ -90,12 +111,14 @@ function WorkflowTab() {
                     <small className="text-muted">❌ Disabled</small>
                   ) : isLoading ? (
                     <small className="text-muted">🚀 Fetching...</small>
-                  ) : error ? (
-                    <small className="text-danger">💣 Error! {error}</small>
-                  ) : data ? (
+                  ) : workflowError ? (
+                    <small className="text-danger">
+                      💣 Error! {workflowError}
+                    </small>
+                  ) : workflowData.length > 0 ? (
                     <small className="text-muted">
                       ✅ <span className="text-success">Success.</span> Loaded{" "}
-                      {data.apps.length} app names.
+                      {workflowData.length} app names.
                     </small>
                   ) : (
                     <small className="text-muted">
@@ -108,33 +131,37 @@ function WorkflowTab() {
           </Card>
         </Col>
 
-        <Col>2</Col>
-
         <Col>
           <Card className="shadow">
             <Card.Header>
               <div className="d-flex gap-2">
                 <i className="bi bi-cloud"></i>
-                Workflow Details
+                Workflow Data
               </div>
             </Card.Header>
             <Card.Body>
-              <JsonView value={data} />
+              {workflowData.length === 0 ? (
+                <JsonView value={workflowData} />
+              ) : (
+                <Alert>No Apps Returned From Workflow</Alert>
+              )}
             </Card.Body>
             <Card.Footer>
               <div className="d-flex justify-content-between">
-                <small className="text-muted">Last updated 3 mins ago</small>
+                <small className="text-muted">Last update: 3 mins ago</small>
                 <div>
                   {!useWorkflowProvider ? (
                     <small className="text-muted">❌ Disabled</small>
                   ) : isLoading ? (
                     <small className="text-muted">🚀 Fetching...</small>
-                  ) : error ? (
-                    <small className="text-danger">💣 Error! {error}</small>
-                  ) : data ? (
+                  ) : workflowError ? (
+                    <small className="text-danger">
+                      💣 Error! {workflowError}
+                    </small>
+                  ) : workflowData.length > 0 ? (
                     <small className="text-muted">
                       ✅ <span className="text-success">Success.</span> Loaded{" "}
-                      {data.apps.length} app names.
+                      {workflowData.length} app names.
                     </small>
                   ) : (
                     <small className="text-muted">
@@ -146,6 +173,8 @@ function WorkflowTab() {
             </Card.Footer>
           </Card>
         </Col>
+
+        <Col>3</Col>
       </Row>
     </Container>
   );