refactor: solid leaderboards (@fehmer)

frontend/src/ts/ape/server-configuration.ts

@@ -1,8 +1,7 @@
 import { Configuration } from "@monkeytype/schemas/configuration";
-import Ape from ".";
 import { promiseWithResolvers } from "../utils/misc";
-
-let config: Configuration | undefined = undefined;
+import { queryClient } from "../queries";
+import { getServerConfigurationQueryOptions } from "../queries/server-configuration";
 
 const {
   promise: configurationPromise,
@@ -13,19 +12,16 @@ const {
 export { configurationPromise };
 
 export function get(): Configuration | undefined {
-  return config;
+  return queryClient.getQueryData(
+    getServerConfigurationQueryOptions().queryKey,
+  );
 }
 
 export async function sync(): Promise<void> {
-  const response = await Ape.configuration.get();
-
-  if (response.status !== 200) {
-    const message = `Could not fetch configuration: ${response.body.message}`;
-    console.error(message);
-    reject(message);
-    return;
-  } else {
-    config = response.body.data ?? undefined;
+  try {
+    await queryClient.fetchQuery(getServerConfigurationQueryOptions());
     resolve(true);
+  } catch (e) {
+    reject(e);
   }
 }

frontend/src/ts/components/common/Button.tsx

@@ -1,4 +1,4 @@
-import { JSXElement, Show } from "solid-js";
+import { JSX, JSXElement, Show } from "solid-js";
 
 import { Conditional } from "./Conditional";
 import { Fa, FaProps } from "./Fa";
@@ -7,19 +7,23 @@ type BaseProps = {
   text?: string;
   fa?: FaProps;
   class?: string;
+  classList?: JSX.HTMLAttributes<HTMLButtonElement>["classList"];
   type?: "text" | "button";
+  active?: boolean;
   children?: JSXElement;
 };
 
 type ButtonProps = BaseProps & {
   onClick: () => void;
   href?: never;
   sameTarget?: true;
+  disabled?: boolean;
 };
 
 type AnchorProps = BaseProps & {
   href: string;
   onClick?: never;
+  disabled?: never;
 };
 
 export function Button(props: ButtonProps | AnchorProps): JSXElement {
@@ -36,10 +40,13 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
     </>
   );
 
-  const getClassList = (): Record<string, boolean> => {
+  const getClassList = (): Record<string, boolean | undefined> => {
     return {
       [(props.type ?? "button") === "text" ? "textButton" : buttonClass]: true,
       [props.class ?? ""]: props.class !== undefined,
+      "bg-main": props.active,
+      "text-bg": props.active,
+      ...props.classList,
     };
   };
 
@@ -61,6 +68,7 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
           type="button"
           classList={getClassList()}
           onClick={() => props.onClick?.()}
+          disabled={props.disabled ?? false}
         >
           {content}
         </button>

frontend/src/ts/components/common/Fa.tsx

@@ -12,13 +12,13 @@ export function Fa(props: FaProps): JSXElement {
   const variant = (): string => props.variant ?? "solid";
   return (
     <i
-      class={props.icon}
       classList={{
         ["fas"]: variant() === "solid",
         ["far"]: variant() === "regular",
         ["fab"]: variant() === "brand",
         ["fa-fw"]: props.fixedWidth === true,
         ["fa-spin"]: props.spin === true,
+        [props.icon]: true,
       }}
       style={{
         "font-size": props.size !== undefined ? `${props.size}em` : undefined,

frontend/src/ts/components/common/Headers.tsx

@@ -0,0 +1,58 @@
+import { JSXElement, Show } from "solid-js";
+
+import { cn } from "../../utils/cn";
+
+import { Fa, FaProps } from "./Fa";
+
+export function H1(props: {
+  class?: string;
+  text: string;
+  fa?: FaProps;
+}): JSXElement {
+  return (
+    <h1
+      class={cn(
+        "flex place-items-center gap-4 pb-4 text-4xl text-sub",
+        props.class,
+      )}
+    >
+      <Show when={props.fa}>
+        <Fa {...(props.fa as FaProps)} />
+      </Show>
+      {props.text}
+    </h1>
+  );
+}
+
+export function H2(props: {
+  class?: string;
+  text: string;
+  fa?: FaProps;
+}): JSXElement {
+  return (
+    <h2
+      class={cn(
+        "flex place-items-center gap-4 pb-4 text-2xl text-sub",
+        props.class,
+      )}
+    >
+      <Show when={props.fa}>
+        <Fa {...(props.fa as FaProps)} />
+      </Show>
+      {props.text}
+    </h2>
+  );
+}
+
+export function H3(props: {
+  class?: string;
+  text: string;
+  fa: FaProps;
+}): JSXElement {
+  return (
+    <h3 class={cn("flex place-items-center gap-2 pb-2 text-sub", props.class)}>
+      <Fa {...props.fa} />
+      {props.text}
+    </h3>
+  );
+}

frontend/src/ts/components/common/LoadingCircle.tsx

@@ -0,0 +1,12 @@
+import { JSXElement } from "solid-js";
+
+import { cn } from "../../utils/cn";
+
+import { Fa } from "./Fa";
+export function LoadingCircle(props: { class?: string }): JSXElement {
+  return (
+    <div class={cn("preloader text-main", props.class)}>
+      <Fa icon="fa-circle-notch" fixedWidth spin />
+    </div>
+  );
+}

frontend/src/ts/components/mount.tsx

@@ -10,11 +10,11 @@ import { Theme } from "./core/Theme";
 import { Footer } from "./layout/footer/Footer";
 import { Overlays } from "./layout/overlays/Overlays";
 import { Modals } from "./modals/Modals";
-import { AboutPage } from "./pages/AboutPage";
+import { LeaderboardPage } from "./pages/leaderboard/LeaderboardPage";
 
 const components: Record<string, () => JSXElement> = {
   footer: () => <Footer />,
-  aboutpage: () => <AboutPage />,
+  aboutpage: () => <LeaderboardPage />,
   modals: () => <Modals />,
   overlays: () => <Overlays />,
   theme: () => <Theme />,