impr: use tanstack/query on AboutPage (@fehmer) (#7466)

Co-authored-by: Jack <jack@monkeytype.com>

Author: fehmer

frontend/.oxlintrc-plugin.json

@@ -7,8 +7,8 @@
   },
   "overrides": [
     {
-      "jsPlugins": ["eslint-plugin-solid"],
-      "files": ["src/**/*.tsx"],
+      "jsPlugins": ["eslint-plugin-solid", "@tanstack/eslint-plugin-query"],
+      "files": ["src/**/*.tsx", "src/**/*.ts"],
       "rules": {
         "solid/components-return-once": "error",
         "solid/event-handlers": "error",
@@ -32,7 +32,14 @@
             "html": "void"
           }
         ],
-        "solid/style-prop": "error"
+        "solid/style-prop": "error",
+        "@tanstack/query/exhaustive-deps": "error",
+        "@tanstack/query/no-rest-destructuring": "error",
+        "@tanstack/query/stable-query-client": "error",
+        "@tanstack/query/no-unstable-deps": "error",
+        "@tanstack/query/infinite-query-property-order": "error",
+        "@tanstack/query/no-void-query-fn": "error",
+        "@tanstack/query/mutation-property-order": "error"
       }
     }
   ]

frontend/__tests__/components/AsyncContent.spec.tsx

@@ -0,0 +1,154 @@
+import { render, screen, waitFor } from "@solidjs/testing-library";
+import { createResource, Resource, Show } from "solid-js";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import AsyncContent from "../../../src/ts/components/common/AsyncContent";
+import * as Notifications from "../../../src/ts/elements/notifications";
+
+describe("AsyncContent", () => {
+  const addNotificationMock = vi.spyOn(Notifications, "add");
+
+  beforeEach(() => {
+    addNotificationMock.mockClear();
+  });
+  describe("with resource", () => {
+    it("renders loading state while resource is pending", () => {
+      const [resource] = createResource(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        return "data";
+      });
+
+      const { container } = renderWithResource(resource);
+
+      const preloader = container.querySelector(".preloader");
+      expect(preloader).toBeInTheDocument();
+      expect(preloader).toHaveClass("preloader");
+      expect(preloader?.querySelector("i")).toHaveClass(
+        "fas",
+        "fa-fw",
+        "fa-spin",
+        "fa-circle-notch",
+      );
+    });
+
+    it("renders data when resource resolves", async () => {
+      const [resource] = createResource(async () => {
+        return "Test Data";
+      });
+
+      renderWithResource(resource);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("content")).toHaveTextContent("Test Data");
+      });
+    });
+
+    it("renders error message when resource fails", async () => {
+      const [resource] = createResource(async () => {
+        throw new Error("Test error");
+      });
+
+      renderWithResource(resource, "Custom error message");
+
+      await waitFor(() => {
+        expect(screen.getByText(/Custom error message/)).toBeInTheDocument();
+      });
+      expect(addNotificationMock).toHaveBeenCalledWith(
+        "Custom error message: Test error",
+        -1,
+      );
+    });
+
+    it("renders default error message when no custom message provided", async () => {
+      const [resource] = createResource(async () => {
+        throw new Error("Test error");
+      });
+
+      renderWithResource(resource);
+
+      await waitFor(() => {
+        expect(screen.getByText(/An error occurred/)).toBeInTheDocument();
+      });
+      expect(addNotificationMock).toHaveBeenCalledWith(
+        "An error occurred: Test error",
+        -1,
+      );
+    });
+
+    it("renders content while resource is pending if alwaysShowContent", () => {
+      const [resource] = createResource(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        return "data";
+      });
+
+      const { container } = renderWithResource(resource, undefined, true);
+
+      const preloader = container.querySelector(".preloader");
+      expect(preloader).not.toBeInTheDocument();
+      expect(container.querySelector("div")).toHaveTextContent("no data");
+    });
+
+    it("renders data when resource resolves if alwaysShowContent", async () => {
+      const [resource] = createResource(async () => {
+        return "Test Data";
+      });
+
+      const { container } = renderWithResource(resource, undefined, true);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("content")).toHaveTextContent("Test Data");
+      });
+      const preloader = container.querySelector(".preloader");
+      expect(preloader).not.toBeInTheDocument();
+    });
+
+    it("renders error message when resource fails if alwaysShowContent", async () => {
+      const [resource] = createResource(async () => {
+        throw new Error("Test error");
+      });
+
+      const { container } = renderWithResource(
+        resource,
+        "Custom error message",
+        true,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText(/Custom error message/)).toBeInTheDocument();
+      });
+      expect(addNotificationMock).toHaveBeenCalledWith(
+        "Custom error message: Test error",
+        -1,
+      );
+      console.log(container.innerHTML);
+    });
+    function renderWithResource<T>(
+      resource: Resource<T>,
+      errorMessage?: string,
+      alwaysShowContent?: true,
+    ): {
+      container: HTMLElement;
+    } {
+      const { container } = render(() => (
+        <AsyncContent
+          resource={resource}
+          errorMessage={errorMessage}
+          alwaysShowContent={alwaysShowContent}
+        >
+          {(data: T | undefined) => (
+            <>
+              foo
+              <Show when={data !== undefined} fallback={<div>no data</div>}>
+                <div data-testid="content">{String(data)}</div>
+              </Show>
+            </>
+          )}
+        </AsyncContent>
+      ));
+
+      return {
+        container,
+      };
+    }
+  });
+});

frontend/__tests__/components/common/AsyncContent.spec.tsx

@@ -30,6 +30,8 @@
     "@sentry/browser": "9.14.0",
     "@sentry/vite-plugin": "3.3.1",
     "@solidjs/meta": "0.29.4",
+    "@tanstack/solid-query": "5.90.23",
+    "@tanstack/solid-query-devtools": "5.91.3",
     "@tanstack/solid-table": "8.21.3",
     "@ts-rest/core": "3.52.1",
     "animejs": "4.2.2",
@@ -66,6 +68,7 @@
     "@monkeytype/typescript-config": "workspace:*",
     "@solidjs/testing-library": "0.8.10",
     "@tailwindcss/vite": "4.1.18",
+    "@tanstack/eslint-plugin-query": "5.91.4",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/user-event": "14.6.1",

frontend/package.json

@@ -72,5 +72,6 @@
 
     <link rel="stylesheet" href="" id="globalFunBoxTheme" type="text/css" />
     <script type="module" src="ts/index.ts"></script>
+    <mount data-component="devtools"></mount>
   </body>
 </html>