fixes, added tests

Author: fehmer

frontend/__tests__/signals/util/loadingStore.spec.ts

@@ -0,0 +1,127 @@
+import { createLoadingStore } from "../../../src/ts/signals/util/loadingStore";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+
+const mockFetcher = vi.fn();
+const initialValue = vi.fn(() => ({ data: null }));
+
+describe("createLoadingStore", () => {
+  beforeEach(() => {
+    mockFetcher.mockClear();
+    initialValue.mockClear();
+  });
+
+  it("should initialize with the correct state", () => {
+    const store = createLoadingStore(mockFetcher, initialValue);
+
+    expect(store.state().state).toBe("unresolved");
+    expect(store.state().loading).toBe(false);
+    expect(store.state().ready).toBe(false);
+    expect(store.state().refreshing).toBe(false);
+    expect(store.state().error).toBeUndefined();
+    expect(store.store).toEqual({ data: null });
+  });
+
+  it("should transition to loading when load is called", async () => {
+    const store = createLoadingStore(mockFetcher, initialValue);
+    store.load();
+
+    expect(store.state().state).toBe("pending");
+    expect(store.state().loading).toBe(true);
+  });
+
+  it("should call the fetcher when load is called", async () => {
+    const store = createLoadingStore(mockFetcher, initialValue);
+    mockFetcher.mockResolvedValueOnce({ data: "test" });
+    store.load();
+
+    await store.ready();
+
+    expect(mockFetcher).toHaveBeenCalledTimes(1);
+    expect(store.state().state).toBe("ready");
+    expect(store.store).toEqual({ data: "test" });
+  });
+
+  it("should handle error when fetcher fails", async () => {
+    mockFetcher.mockRejectedValueOnce(new Error("Failed to load"));
+    const store = createLoadingStore(mockFetcher, initialValue);
+
+    store.load();
+
+    await expect(store.ready()).rejects.toThrow("Failed to load");
+
+    expect(store.state().state).toBe("errored");
+    expect(store.state().error).toEqual(new Error("Failed to load"));
+  });
+
+  it("should transition to refreshing state on refresh", async () => {
+    const store = createLoadingStore(mockFetcher, initialValue);
+    mockFetcher.mockResolvedValueOnce({ data: "test" });
+    store.load();
+
+    store.refresh(); // trigger refresh
+    expect(store.state().state).toBe("refreshing");
+    expect(store.state().refreshing).toBe(true);
+  });
+
+  it("should trigger load when refresh is called and shouldLoad is false", async () => {
+    const store = createLoadingStore(mockFetcher, initialValue);
+    mockFetcher.mockResolvedValueOnce({ data: "test" });
+    expect(store.state().state).toBe("unresolved");
+
+    store.refresh();
+    expect(store.state().state).toBe("refreshing");
+    expect(store.state().refreshing).toBe(true);
+
+    // Wait for the store to be ready after fetching
+    await store.ready();
+
+    // Ensure the store's state is 'ready' after the refresh
+    expect(store.state().state).toBe("ready");
+    expect(store.store).toEqual({ data: "test" });
+  });
+
+  it("should reset the store to its initial value on reset", async () => {
+    const store = createLoadingStore(mockFetcher, initialValue);
+    mockFetcher.mockResolvedValueOnce({ data: "test" });
+    store.load();
+
+    await store.ready();
+
+    expect(store.store).toEqual({ data: "test" });
+
+    store.reset();
+    expect(store.state().state).toBe("unresolved");
+    expect(store.state().loading).toBe(false);
+    expect(store.store).toEqual({ data: null });
+  });
+
+  it("should handle a promise rejection during reset", async () => {
+    const store = createLoadingStore(mockFetcher, initialValue);
+
+    // Mock the fetcher to resolve with data
+    mockFetcher.mockResolvedValueOnce({ data: "test" });
+
+    // Trigger loading the store
+    store.load();
+
+    // Wait for the store to be ready
+    await store.ready();
+
+    // Ensure the store state after loading
+    expect(store.state().state).toBe("ready");
+    expect(store.store).toEqual({ data: "test" });
+
+    // Now call reset, which should reject the ready promise
+    const readyPromise = store.ready(); // Grab the current ready promise
+
+    store.reset(); // Call reset, which should reject the promise
+
+    // Ensure the promise rejects as expected
+    await expect(readyPromise).rejects.toThrow("Reset");
+
+    // Ensure the state is reset
+    expect(store.state().state).toBe("unresolved");
+    expect(store.state().loading).toBe(false);
+    expect(store.store).toEqual({ data: null });
+  });
+});

frontend/src/ts/signals/util/loadingStore.ts

@@ -0,0 +1,132 @@
+import { createSignal, createResource, createEffect } from "solid-js";
+import { createStore, Store } from "solid-js/store";
+import type { Accessor, Resource } from "solid-js";
+import { promiseWithResolvers } from "../../utils/misc";
+
+type State = Pick<Resource<unknown>, "loading" | "error" | "state"> & {
+  ready: boolean;
+  refreshing: boolean;
+};
+
+export type LoadingStore<T> = {
+  /**
+   * request store to be loaded
+   */
+  load: () => void;
+
+  /**
+   * request store to be refreshed
+   */
+  refresh: () => void;
+
+  /**
+   * reset the resource +  store
+   */
+  reset: () => void;
+
+  /**
+   * store state
+   */
+  state: Accessor<State>;
+
+  /**
+   * the data store
+   */
+  store: Store<T>;
+
+  /**
+   * promise that resolves when the store is ready.
+   * rejects if shouldLoad is false
+   */
+  ready: () => Promise<void>;
+};
+
+export function createLoadingStore<T extends object>(
+  fetcher: () => Promise<T>,
+  initialValue: () => T,
+): LoadingStore<T> {
+  const [shouldLoad, setShouldLoad] = createSignal(false);
+  const [getState, setState] = createSignal<State>({
+    state: "unresolved",
+    loading: false,
+    ready: false,
+    refreshing: false,
+    error: undefined,
+  });
+
+  const [resource, { refetch }] = createResource(
+    () => (shouldLoad() ? true : null),
+    async () => {
+      return fetcher();
+    },
+  );
+
+  const [store, setStore] = createStore<T>(initialValue());
+  let ready = promiseWithResolvers();
+
+  const updateState = (
+    state: Resource<unknown>["state"],
+    // oxlint-disable-next-line typescript/no-explicit-any
+    error?: any,
+  ): void => {
+    setState({
+      state,
+      loading: state === "pending",
+      ready: state === "ready",
+      refreshing: state === "refreshing",
+      // oxlint-disable-next-line typescript/no-explicit-any typescript/no-unsafe-assignment
+      error: error,
+    });
+  };
+
+  createEffect(() => {
+    if (!shouldLoad()) {
+      updateState("unresolved");
+      return;
+    }
+    updateState("pending");
+
+    if (resource.error !== undefined) {
+      updateState("errored", resource.error);
+      ready.reject(resource.error);
+      ready = promiseWithResolvers();
+      return;
+    }
+
+    const value = resource();
+    if (value !== undefined) {
+      setStore(value);
+      updateState("ready");
+      ready.resolve();
+      ready = promiseWithResolvers();
+    }
+  });
+
+  return {
+    load: () => {
+      if (!shouldLoad()) setShouldLoad(true);
+    },
+    refresh: () => {
+      if (!shouldLoad()) {
+        setShouldLoad(true);
+      }
+      ready = promiseWithResolvers();
+      updateState("refreshing");
+      void refetch();
+    },
+    reset: () => {
+      setShouldLoad(false);
+
+      setStore(initialValue());
+
+      // reject any waiters
+      //if (ready.state === "pending") {
+      ready.reject(new Error("Reset"));
+      //}
+      ready = promiseWithResolvers();
+    },
+    state: getState,
+    store,
+    ready: async () => ready.promise,
+  };
+}