refactor: solid leaderboards (@fehmer)

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

@@ -47,11 +47,13 @@ describe("AsyncContent", () => {
     });
 
     it("renders on resolve", async () => {
-      renderWithQuery({ result: "Test Data" });
+      const { container } = renderWithQuery({ result: "Test Data" });
 
       await waitFor(() => {
         expect(screen.getByTestId("content")).toHaveTextContent("Test Data");
       });
+      const preloader = container.querySelector(".preloader");
+      expect(preloader).not.toBeInTheDocument();
     });
 
     it("renders default error message on fail", async () => {
@@ -205,14 +207,19 @@ describe("AsyncContent", () => {
     });
 
     it("renders on resolve", async () => {
-      renderWithQuery({ first: "First Data", second: "Second Data" });
+      const { container } = renderWithQuery({
+        first: "First Data",
+        second: "Second Data",
+      });
 
       await waitFor(() => {
         expect(screen.getByTestId("first")).toHaveTextContent("First Data");
       });
       await waitFor(() => {
         expect(screen.getByTestId("second")).toHaveTextContent("Second Data");
       });
+      const preloader = container.querySelector(".preloader");
+      expect(preloader).not.toBeInTheDocument();
     });
 
     it("renders default error message on fail", async () => {

frontend/__tests__/components/ui/table/DataTable.spec.tsx

@@ -30,12 +30,14 @@ type Person = {
 
 const columns = [
   {
+    id: "name",
     accessorKey: "name",
     header: "Name",
     cell: (info: any) => info.getValue(),
-    meta: { breakpoint: "xxs" },
+    meta: { maxBreakpoint: "sm" },
   },
   {
+    id: "age",
     accessorKey: "age",
     header: "Age",
     cell: (info: any) => info.getValue(),
@@ -144,8 +146,13 @@ describe("DataTable", () => {
     });
 
     render(() => <DataTable id="breakpoints" columns={columns} data={data} />);
-
-    expect(screen.getByText("Name")).toBeInTheDocument();
-    expect(screen.queryByText("Age")).not.toBeInTheDocument();
+    const nameHeader = screen.getByRole("button", {
+      name: "Name",
+    }).parentElement;
+    const ageHeader = screen.getByRole("button", { name: "Age" }).parentElement;
+
+    expect(nameHeader).not.toHaveClass("hidden");
+    expect(nameHeader).toHaveClass("sm:hidden");
+    expect(ageHeader).toHaveClass("hidden sm:table-cell");
   });
 });

frontend/src/index.html

@@ -58,7 +58,9 @@
         <load src="html/pages/404.html" />
         <load src="html/pages/account-settings.html" />
         <load src="html/pages/friends.html" />
-        <load src="html/pages/leaderboards.html" />
+        <div class="page pageLeaderboards hidden" id="pageLeaderboards">
+          <mount data-component="leaderboardpage"></mount>
+        </div>
       </main>
       <mount data-component="footer"></mount>
       <div

frontend/src/styles/index.scss

@@ -19,7 +19,7 @@
   @import "buttons", "404", "ads", "account", "animations", "caret",
     "commandline", "core", "fonts", "inputs", "keymap", "login", "monkey",
     "nav", "notifications", "popups", "scroll", "settings", "account-settings",
-    "leaderboards", "test", "loading", "friends", "media-queries";
+    "test", "loading", "friends", "media-queries";
 
   .chartCanvas {
     width: 100% !important;