fix single query case

Author: Miodec

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

@@ -381,14 +381,17 @@ describe("AsyncContent", () => {
               {...(options as Props<Q>)}
               alwaysShowContent
             >
-              {({ first, second }) => (
+              {(data) => (
                 <>
                   <Show
-                    when={first() !== undefined && second() !== undefined}
+                    when={
+                      data()?.first !== undefined &&
+                      data()?.second !== undefined
+                    }
                     fallback={<div>no data</div>}
                   >
-                    <div data-testid="first">{first()}</div>
-                    <div data-testid="second">{second()}</div>
+                    <div data-testid="first">{data()?.first}</div>
+                    <div data-testid="second">{data()?.second}</div>
                   </Show>
                 </>
               )}
@@ -402,14 +405,16 @@ describe("AsyncContent", () => {
             {...(options as Props<Q>)}
             alwaysShowContent={false}
           >
-            {({ first, second }) => (
+            {(data) => (
               <>
                 <Show
-                  when={first() !== undefined && second() !== undefined}
+                  when={
+                    data().first !== undefined && data().second !== undefined
+                  }
                   fallback={<div>no data</div>}
                 >
-                  <div data-testid="first">{first()}</div>
-                  <div data-testid="second">{second()}</div>
+                  <div data-testid="first">{data().first}</div>
+                  <div data-testid="second">{data().second}</div>
                 </Show>
               </>
             )}

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

@@ -54,8 +54,6 @@ type SingleCollectionProps<T> = {
   collection: Collection<T>;
 };
 
-type AccessorMap<T> = { [K in keyof T]: Accessor<T[K]> };
-
 type DeferredChildren<T extends QueryMapping> = {
   alwaysShowContent?: false;
   children: (data: Accessor<{ [K in keyof T]: T[K] }>) => JSXElement;
@@ -69,37 +67,23 @@ type EagerChildren<T extends QueryMapping> = {
   ) => JSXElement;
 };
 
-type MultiDeferredChildren<T extends QueryMapping> = {
-  alwaysShowContent?: false;
-  children: (data: AccessorMap<{ [K in keyof T]: T[K] }>) => JSXElement;
-};
-
-type MultiEagerChildren<T extends QueryMapping> = {
-  alwaysShowContent: true;
-  showLoader?: true;
-  children: (
-    data: AccessorMap<{ [K in keyof T]: T[K] | undefined }>,
-  ) => JSXElement;
-};
-
 type SingleSource<T> = SingleQueryProps<T> | SingleCollectionProps<T>;
 type MultiSource<T extends QueryMapping> = QueryProps<T> | CollectionProps<T>;
-type SingleChildren<T> = DeferredChildren<T> | EagerChildren<T>;
-type MultiChildren<T extends QueryMapping> =
-  | MultiDeferredChildren<T>
-  | MultiEagerChildren<T>;
+type ChildrenProps<T extends QueryMapping> =
+  | DeferredChildren<T>
+  | EagerChildren<T>;
 
 export type Props<T extends QueryMapping> = BaseProps &
   (SingleSource<T> | MultiSource<T>) &
-  (SingleChildren<T> | MultiChildren<T>);
+  ChildrenProps<T>;
 
 // Single query/collection overloads
 function AsyncContent<T>(
-  props: BaseProps & SingleSource<T> & SingleChildren<T>,
+  props: BaseProps & SingleSource<T> & ChildrenProps<T>,
 ): JSXElement;
 // Multi query/collection overloads
 function AsyncContent<T extends Record<string, unknown>>(
-  props: BaseProps & MultiSource<T> & MultiChildren<T>,
+  props: BaseProps & MultiSource<T> & ChildrenProps<T>,
 ): JSXElement;
 function AsyncContent<T extends QueryMapping>(props: Props<T>): JSXElement {
   //@ts-expect-error this is fine
@@ -173,27 +157,6 @@ function AsyncContent<T extends QueryMapping>(props: Props<T>): JSXElement {
     false,
   );
 
-  // Keys are stable for the component lifetime; per-key closures track
-  // reactivity internally via value()/lastResolvedValue().
-  // oxlint-disable solid/reactivity
-  const multi = !("defaultQuery" in source());
-
-  const eagerAccessorMap = multi
-    ? (Object.fromEntries(
-        typedKeys(source()).map((key) => [key, () => value()?.[key]]),
-      ) as AccessorMap<{ [K in keyof T]: T[K] | undefined }>)
-    : undefined;
-
-  const deferredAccessorMap = multi
-    ? (Object.fromEntries(
-        typedKeys(source()).map((key) => [
-          key,
-          () => lastResolvedValue()?.[key],
-        ]),
-      ) as AccessorMap<{ [K in keyof T]: T[K] }>)
-    : undefined;
-  // oxlint-enable solid/reactivity
-
   const loader = (): JSXElement =>
     props.loader ?? <LoadingCircle class="p-4 text-center text-2xl" />;
 
@@ -221,16 +184,14 @@ function AsyncContent<T extends QueryMapping>(props: Props<T>): JSXElement {
                   {(_) =>
                     // oxlint-disable-next-line typescript/no-explicit-any
                     (props.children as (data: any) => JSXElement)(
-                      multi ? deferredAccessorMap : lastResolvedValue,
+                      lastResolvedValue,
                     )
                   }
                 </Show>
               }
             >
               {/* oxlint-disable-next-line typescript/no-explicit-any */}
-              {(props.children as (data: any) => JSXElement)(
-                multi ? eagerAccessorMap : value,
-              )}
+              {(props.children as (data: any) => JSXElement)(value)}
             </Show>
           </>
         }

frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx

@@ -203,28 +203,31 @@ export function LeaderboardPage(): JSXElement {
               alwaysShowContent
               errorClass="rounded bg-sub-alt p-4"
             >
-              {({ data, rank, config }) => (
-                <UserRank
-                  type={getSelection().type === "weekly" ? "xp" : "speed"}
-                  data={rank()}
-                  friendsOnly={getSelection().friendsOnly}
-                  total={data()?.count}
-                  minWpm={(() => {
-                    const d = data();
-                    return d && "minWpm" in d
-                      ? (d.minWpm as number)
-                      : undefined;
-                  })()}
-                  memoryDifference={getLbMemoryDifference(
-                    getSelection(),
-                    rank()?.rank,
-                  )}
-                  isLbOptOut={getSnapshot()?.lbOptOut ?? false}
-                  isBanned={getSnapshot()?.banned ?? false}
-                  minTimeTyping={config()?.leaderboards.minTimeTyping ?? 0}
-                  userTimeTyping={getSnapshot()?.typingStats.timeTyping ?? 0}
-                />
-              )}
+              {(results) => {
+                const r = results();
+                return (
+                  <UserRank
+                    type={getSelection().type === "weekly" ? "xp" : "speed"}
+                    data={r?.rank}
+                    friendsOnly={getSelection().friendsOnly}
+                    total={r?.data?.count}
+                    minWpm={(() => {
+                      const d = r?.data;
+                      return d && "minWpm" in d
+                        ? (d.minWpm as number)
+                        : undefined;
+                    })()}
+                    memoryDifference={getLbMemoryDifference(
+                      getSelection(),
+                      r?.rank?.rank,
+                    )}
+                    isLbOptOut={getSnapshot()?.lbOptOut ?? false}
+                    isBanned={getSnapshot()?.banned ?? false}
+                    minTimeTyping={r?.config?.leaderboards.minTimeTyping ?? 0}
+                    userTimeTyping={getSnapshot()?.typingStats.timeTyping ?? 0}
+                  />
+                );
+              }}
             </AsyncContent>
           </Show>