wip

Author: fehmer

frontend/src/ts/components/pages/AboutPage.tsx

@@ -44,21 +44,14 @@ export function AboutPage(): JSXElement {
         <Button onClick={() => connections.reload()} text="reload" />
         <Button onClick={() => connections.reset()} text="reset" />
       </Show>
-      <Show when={connections.shouldLoad}>
-        <AsyncContent
-          resource={connections.resource}
-          errorMessage="error loading connections"
-        >
-          {(data) => (
-            <For each={data}>
-              {(connection) => (
-                <p>
-                  {connection.initiatorName} to {connection.receiverName}
-                </p>
-              )}
-            </For>
+      <Show when={connections.shouldLoad() && !connections.loading()}>
+        <For each={connections.store}>
+          {(connection) => (
+            <p>
+              {connection.initiatorName} to {connection.receiverName}
+            </p>
           )}
-        </AsyncContent>
+        </For>
       </Show>
 
       <div class="created">

frontend/src/ts/signals/connections.ts

@@ -24,5 +24,12 @@ createEffect(() => {
   }
 });
 
+createEffect(() => {
+  const loading = connections.loading();
+  const error = connections.error();
+
+  console.log("#### change in resource: ", { loading, error });
+});
+
 //from legacy code
 //await connections.ready;

frontend/src/ts/signals/util/resourceBackedStore.ts

@@ -1,6 +1,6 @@
 import { createSignal, createResource, createEffect } from "solid-js";
 import { createStore, Store } from "solid-js/store";
-import type { Accessor, Resource } from "solid-js";
+import type { Accessor } from "solid-js";
 
 export type ResourceBackedStore<T> = {
   /**
@@ -24,9 +24,14 @@ export type ResourceBackedStore<T> = {
   reset: () => void;
 
   /**
-   * resource to be used to get loading and error states
+   * store is loading
    */
-  resource: Resource<T>;
+  loading: Accessor<boolean>;
+
+  /**
+   * loading error
+   */
+  error: Accessor<unknown | undefined>;
 
   /**
    * the data store
@@ -51,40 +56,39 @@ export function createResourceBackedStore<T extends object>(
   initialValue: () => T,
 ): ResourceBackedStore<T> {
   const [shouldLoad, setShouldLoad] = createSignal(false);
+  const [loading, setLoading] = createSignal(false);
+  const [error, setError] = createSignal<unknown>(undefined);
 
-  const [resource, { refetch, mutate }] = createResource(
-    shouldLoad,
-    async (load) => {
-      if (!load) {
-        throw new Error("Load not requested");
-      }
-      const result = await fetcher();
-
-      //@ts-expect-error TODO
-      mutate(result);
-
-      return result;
+  const [resource, { refetch }] = createResource(
+    () => (shouldLoad() ? true : null),
+    async () => {
+      return fetcher();
     },
   );
 
   const [store, setStore] = createStore<T>(initialValue());
   let ready = createReadyPromise();
 
   createEffect(() => {
-    console.log("watch resource", resource.state);
-    if (resource.state === "pending") return;
+    if (!shouldLoad()) {
+      setLoading(false);
+      setError(undefined);
+      return;
+    }
+
+    setLoading(resource.loading);
 
     if (resource.error !== undefined) {
-      //TODO figure out why this is causes logout
-      //ready.reject(resource.error);
-      //reset for next attempt
+      setError(resource.error);
+      //reset store?
       ready = createReadyPromise();
       return;
     }
 
     const value = resource();
     if (value !== undefined) {
       setStore(value);
+      setError(undefined);
       ready.resolve();
     }
   });
@@ -104,17 +108,18 @@ export function createResourceBackedStore<T extends object>(
     reset: () => {
       console.log("### reset");
       setShouldLoad(false);
+      setLoading(false);
+      setError(undefined);
 
-      // reset resource + store
-      mutate(undefined);
       setStore(initialValue());
 
       // reject any waiters
       //TODO figure out why this is uncaught
       //ready.reject(new Error("Reset"));
       ready = createReadyPromise();
     },
-    resource,
+    loading,
+    error,
     store,
     ready: async () => ready.promise,
   };