clan-api: wrap all api responses with error/success envelop type

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

@@ -8,9 +8,8 @@ import {
 import { OperationResponse, pyApi } from "./message";
 
 export const makeCountContext = () => {
-  const [machines, setMachines] = createSignal<
-    OperationResponse<"list_machines">
-  >([]);
+  const [machines, setMachines] =
+    createSignal<OperationResponse<"list_machines">>();
   const [loading, setLoading] = createSignal(false);
 
   pyApi.list_machines.receive((machines) => {
@@ -41,7 +40,7 @@ export const CountContext = createContext<CountContextType>([
     loading: () => false,
 
     // eslint-disable-next-line
-    machines: () => ([]),
+    machines: () => undefined,
   },
   {
     // eslint-disable-next-line

pkgs/webview-ui/app/src/message.ts

@@ -72,6 +72,12 @@ const deserialize =
 // Create the API object
 
 const pyApi: PyApi = {} as PyApi;
+
+pyApi.create_clan.receive((r) => {
+  if (r.status === "success") {
+    r.status;
+  }
+});
 operationNames.forEach((opName) => {
   const name = opName as OperationNames;
   // @ts-expect-error - TODO: Fix this. Typescript is not recognizing the receive function correctly

pkgs/webview-ui/app/src/routes/machines/view.tsx

@@ -1,13 +1,30 @@
-import { For, Match, Switch, createEffect, type Component } from "solid-js";
+import {
+  For,
+  Match,
+  Switch,
+  createEffect,
+  createSignal,
+  type Component,
+} from "solid-js";
 import { useCountContext } from "../../Config";
 import { route } from "@/src/App";
 
 export const MachineListView: Component = () => {
   const [{ machines, loading }, { getMachines }] = useCountContext();
 
+  const [data, setData] = createSignal<string[]>([]);
   createEffect(() => {
     if (route() === "machines") getMachines();
   });
+
+  createEffect(() => {
+    const response = machines();
+    if (response?.status === "success") {
+      console.log(response.data);
+      setData(response.data);
+    }
+  });
+
   return (
     <div class="max-w-screen-lg">
       <div class="tooltip" data-tip="Refresh ">
@@ -32,12 +49,12 @@ export const MachineListView: Component = () => {
             </div>
           </div>
         </Match>
-        <Match when={!loading() && machines().length === 0}>
+        <Match when={!loading() && data().length === 0}>
           No machines found
         </Match>
         <Match when={!loading()}>
           <ul>
-            <For each={machines()}>
+            <For each={data()}>
               {(entry) => (
                 <li>
                   <div class="card card-side m-2 bg-base-100 shadow-lg">