editing, saving, canceling; moving things around

src/hooks/useActiveApp.ts

@@ -1,8 +1,8 @@
 import { useStore } from "./useStore";
 
 export function useActiveApp() {
-  const apps = useStore((s) => s.apps);
-  const activeAppName = useStore((s) => s.activeAppName);
-
-  return apps.find((app) => app.name === activeAppName);
+  const getActiveApp = useStore((s) => s.getActiveApp);
+  const updateActiveApp = useStore((s) => s.updateActiveApp);
+  const app = getActiveApp();
+  return [app, updateActiveApp] as const;
 }

src/hooks/useAppList.ts

@@ -0,0 +1,15 @@
+import { useStore } from "./useStore";
+
+export function useAppList() {
+  const apps = useStore((s) => s.apps);
+  const addApp = useStore((s) => s.addApp);
+  const removeApp = useStore((s) => s.removeApp);
+  const updateApp = useStore((s) => s.updateApp);
+
+  return {
+    apps,
+    addApp,
+    removeApp,
+    updateApp,
+  };
+}

src/hooks/useRetoolAppUrl.ts

@@ -15,18 +15,21 @@ function composeAppUrl(domain: string, app: RetoolApp): URL {
   const path = `${app.public ? "p" : "app"}/${app.name}`;
   const url = new URL(path, base);
 
-  app.query.forEach((q) => url.searchParams.append(q.param, q.value));
+  if (app?.query?.length > 0) {
+    app.query.forEach((q) => url.searchParams.append(q.param, q.value));
+  }
 
   url.searchParams.append("_version", app.version);
   url.searchParams.append("_environment", app.env);
 
-  if (app.hash.length === 0) return url;
-
-  const hashParams = new URLSearchParams(
-    app.hash.map((h) => [h.param, h.value])
-  );
+  if (app?.hash?.length === 0) return url;
 
-  url.hash = hashParams.toString();
+  if (app?.hash?.length > 0) {
+    const hashParams = new URLSearchParams(
+      app.hash.map((h) => [h.param, h.value])
+    );
+    url.hash = hashParams.toString();
+  }
 
   return url;
 }

src/hooks/useStore.ts

@@ -6,7 +6,10 @@ import { DEMO_APPS, INSPECTOR_APP } from "@/lib/EmbeddableApps";
 
 import type { RetoolApp } from "@/types/extension";
 
+type TabKeys = "config" | "storage" | "workflow" | "json";
+
 export type State = {
+  currentTab: TabKeys;
   domain: string;
   isEditing: boolean;
   activeAppName: RetoolApp["name"] | undefined;
@@ -19,21 +22,24 @@ export type State = {
 };
 
 export type Actions = {
-  setDomain: (domain: State["domain"]) => void;
-  setActiveApp: (activeAppName: State["activeAppName"]) => void;
+  reset: () => void;
   addApp: (app: RetoolApp) => void;
-  updateApp: (name: string, props: Partial<RetoolApp>) => void;
+  removeApp: (name: RetoolApp["name"]) => void;
+  updateApp: (name: RetoolApp["name"], props: Partial<RetoolApp>) => void;
   updateActiveApp: (props: Partial<RetoolApp>) => void;
+  setDomain: (domain: State["domain"]) => void;
+  getActiveApp: () => RetoolApp | undefined;
+  setActiveApp: (activeAppName: State["activeAppName"]) => void;
   setEditMode: (state: boolean) => void;
+  setActiveTab: (tab: TabKeys) => void;
   updateWorkflow: (workflow: Partial<State["workflow"]>) => void;
-  getActiveApp: () => RetoolApp | undefined;
-  reset: () => void;
 };
 
-export const STORAGE_KEY = "app-embedder-for-retool2";
+export const STORAGE_KEY = "app-embedder-for-retool4";
 
 const initialState: State = {
   domain: "fortunabmc",
+  currentTab: "config",
   isEditing: false,
   activeAppName: INSPECTOR_APP["name"],
   workflow: {
@@ -48,17 +54,29 @@ export const useStore = create<State & Actions>()(
     (set, get) => ({
       ...initialState,
       reset: () => set(initialState),
+      setActiveTab: (tab) => set({ currentTab: tab }),
       setDomain: (domain) => set(() => ({ domain })),
       setEditMode: (isEditing) => set(() => ({ isEditing })),
-      setActiveApp: (activeAppName) => set(() => ({ activeAppName })),
       addApp: (app) => set((state) => ({ apps: [...state.apps, app] })),
+      removeApp: (name) => {
+        set((state) => ({
+          apps: state.apps.filter((app) => app.name !== name),
+        }));
+      },
       updateApp: (name, props) => {
         set((state) => ({
           apps: state.apps.map((app) => {
             return app.name === name ? { ...app, ...props } : app;
           }),
         }));
       },
+      getActiveApp: () => {
+        const activeAppName = get().activeAppName;
+        return get().apps.find((app) => app.name === activeAppName);
+      },
+      setActiveApp: (name) => {
+        set(() => ({ activeAppName: name }));
+      },
       updateActiveApp: (props) => {
         const name = get().activeAppName;
         if (name) {
@@ -71,10 +89,6 @@ export const useStore = create<State & Actions>()(
           workflow: { ...state.workflow, ...props },
         }));
       },
-      getActiveApp: () => {
-        const activeAppName = get().activeAppName;
-        return get().apps.find((app) => app.name === activeAppName);
-      },
     }),
     {
       name: STORAGE_KEY,

src/hooks/useTabs.ts

@@ -0,0 +1,7 @@
+import { useStore } from "./useStore";
+
+export function useTabs() {
+  const currentTab = useStore((s) => s.currentTab);
+  const setCurrentTab = useStore((s) => s.setActiveTab);
+  return [currentTab, setCurrentTab] as const;
+}

src/hooks/useWorkflow.ts

@@ -1,46 +1,39 @@
 import { useState } from "react";
-import useSWR from "swr";
 
 import type { RetoolApp } from "@/types/extension";
 
-export function useWorkflow(url: string, apiKey: string) {
-  const [workflowUrl, setWorkflowUrl] = useState<string>(url);
-  const [workflowApiKey, setWorkflowApiKey] = useState<string>(apiKey);
+export function useWorkflowData(apiKey: string, id: string) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [workflowData, setWorkflowData] = useState<RetoolApp[]>([]);
+  const [workflowError, setWorkflowError] = useState<string | undefined>();
+
+  const fetchWorkflowData = async () => {
+    setIsLoading(true);
+    try {
+      const url = `https://api.retool.com/v1/workflows/${id}/startTrigger`;
+      const res = await fetch(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Workflow-Api-Key": apiKey,
+        },
+      });
+
+      const result = (await res.json()) as { apps: RetoolApp[] };
+
+      setWorkflowData(result?.apps);
+    } catch (e) {
+      setWorkflowError((e as Error).message);
+    }
+    setIsLoading(false);
+  };
 
   return {
-    state: {
-      workflowUrl,
-      workflowApiKey,
+    fetchWorkflowData,
+    workflow: {
+      isLoading,
+      data: workflowData,
+      error: workflowError,
     },
-    setWorkflowUrl,
-    setWorkflowApiKey,
-    ...useSWR<WorkflowResult>(url, () => callWorkflow(url, workflowApiKey)),
   };
 }
-
-async function callWorkflow(
-  url: string,
-  workflowApiKey: string
-): Promise<WorkflowResult> {
-  const res = await fetch(url, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      "X-Workflow-Api-Key": workflowApiKey,
-    },
-  });
-
-  const data = (await res.json()) as { apps: RetoolApp[] };
-
-  if (!data?.apps) {
-    throw new Error(
-      "The returned object from the workflow must have `apps` as a property."
-    );
-  }
-
-  return { apps: data.apps };
-}
-
-type WorkflowResult = {
-  apps: RetoolApp[];
-};

src/lib/toast.ts

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-named-as-default
-import toast, { type ToastOptions, type ToastType } from "react-hot-toast";
+import toast from "react-hot-toast";
 
 type Message = Parameters<typeof toast>[0];