UI/api: init testing playground

pkgs/webview-ui/app/src/api_test.tsx

@@ -0,0 +1,107 @@
+import {
+  createForm,
+  FieldValues,
+  getValues,
+  SubmitHandler,
+} from "@modular-forms/solid";
+import { TextInput } from "./components/TextInput";
+import { Button } from "./components/button";
+import { callApi } from "./api";
+import { API } from "@/api/API";
+import { createSignal, Match, Switch } from "solid-js";
+import { Typography } from "./components/Typography";
+import { createQuery } from "@tanstack/solid-query";
+import { makePersisted } from "@solid-primitives/storage";
+
+interface APITesterForm extends FieldValues {
+  endpoint: string;
+  payload: string;
+}
+
+export const ApiTester = () => {
+  const [persistedTestData, setPersistedTestData] = makePersisted(
+    createSignal<APITesterForm>(),
+    {
+      name: "_test_data",
+      storage: localStorage,
+    },
+  );
+
+  const [formStore, { Form, Field }] = createForm<APITesterForm>({
+    initialValues: persistedTestData(),
+  });
+
+  const query = createQuery(() => ({
+    // eslint-disable-next-line @tanstack/query/exhaustive-deps
+    queryKey: [],
+    queryFn: async () => {
+      const values = getValues(formStore);
+      return await callApi(
+        values.endpoint as keyof API,
+        JSON.parse(values.payload || ""),
+      );
+    },
+    staleTime: Infinity,
+  }));
+
+  const handleSubmit: SubmitHandler<APITesterForm> = (values) => {
+    console.log(values);
+    setPersistedTestData(values);
+    query.refetch();
+
+    const v = getValues(formStore);
+    console.log(v);
+    // const result = callApi(
+    //   values.endpoint as keyof API,
+    //   JSON.parse(values.payload)
+    // );
+    // setResult(result);
+  };
+  return (
+    <div class="p-2">
+      <h1>API Tester</h1>
+      <Form onSubmit={handleSubmit}>
+        <div class="flex flex-col">
+          <Field name="endpoint">
+            {(field, fieldProps) => (
+              <TextInput
+                label={"endpoint"}
+                value={field.value || ""}
+                inputProps={fieldProps}
+                formStore={formStore}
+              />
+            )}
+          </Field>
+          <Field name="payload">
+            {(field, fieldProps) => (
+              <TextInput
+                label={"payload"}
+                value={field.value || ""}
+                inputProps={fieldProps}
+                formStore={formStore}
+              />
+            )}
+          </Field>
+          <Button class="m-2" disabled={query.isFetching}>
+            Send
+          </Button>
+        </div>
+      </Form>
+      <div>
+        <Typography hierarchy="title" size="default">
+          Result
+        </Typography>
+        <Switch>
+          <Match when={query.isFetching}>
+            <span>loading ...</span>
+          </Match>
+          <Match when={query.isFetched}>
+            <pre>
+              <code>{JSON.stringify(query.data, null, 2)}</code>
+            </pre>
+          </Match>
+        </Switch>
+      </div>
+    </div>
+  );
+};

pkgs/webview-ui/app/src/index.tsx

@@ -18,6 +18,7 @@ import { Toaster } from "solid-toast";
 import { ModuleList } from "./routes/modules/list";
 import { ModuleDetails } from "./routes/modules/details";
 import { ModuleDetails as AddModule } from "./routes/modules/add";
+import { ApiTester } from "./api_test";
 
 export const client = new QueryClient();
 
@@ -138,6 +139,13 @@ export const routes: AppRoute[] = [
     hidden: true,
     component: () => <Welcome />,
   },
+  {
+    path: "/api_testing",
+    label: "api_testing",
+    icon: "bolt",
+    hidden: false,
+    component: () => <ApiTester />,
+  },
 ];
 
 render(