feat: magicbox

Author: drew-harris

frontends/dashboard/package.json

@@ -13,6 +13,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "cva": "npm:class-variance-authority",
     "@nozbe/microfuzz": "^1.0.0",
     "@sentry/browser": "^7.110.0",
     "@solidjs/router": "^0.10.1",

frontends/dashboard/src/components/MagicBox.tsx

@@ -0,0 +1,78 @@
+import { CreateQueryResult } from "@tanstack/solid-query";
+import { cva, VariantProps } from "cva";
+import { children, createMemo, JSX } from "solid-js";
+import { Show } from "solid-js";
+
+interface MagicBoxProps<D extends CreateQueryResult>
+  extends VariantProps<typeof container> {
+  class?: string;
+  fallback?: JSX.Element;
+  id?: string;
+  heightKey?: string;
+  query: D;
+  children: (data: NonNullable<D["data"]>) => JSX.Element;
+}
+
+const container = cva([], {
+  variants: {
+    styled: {
+      true: "bg-white border border-neutral-300 p-4 shadow-sm",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    styled: true,
+  },
+});
+
+export const MagicBox = <D extends CreateQueryResult>(
+  props: MagicBoxProps<D>,
+) => {
+  const children = createMemo(() => {
+    return props.children(props.query.data as NonNullable<D["data"]>);
+  });
+
+  const skeletonHeight = createMemo(() => {
+    if (props.heightKey) {
+      if (props.query.status === "success") {
+        console.log("saving height");
+        // save height of div to local storage
+        const height = document.getElementById(`skeleton-${props.heightKey}`)
+          ?.clientHeight;
+        if (height) {
+          console.log("saving height", height);
+          localStorage.setItem(
+            `skeleton-${props.heightKey}`,
+            height.toString(),
+          );
+        }
+      } else {
+        // get height from local storage
+        const height = localStorage.getItem(`skeleton-${props.heightKey}`);
+        if (height) {
+          console.log("restoring height", height);
+          return `${height}px`;
+        } else {
+          return "auto";
+        }
+      }
+    } else {
+      return "auto";
+    }
+  });
+
+  return (
+    <div
+      style={{ height: skeletonHeight() }}
+      id={`skeleton-${props.heightKey}`}
+      class={container({ ...props, class: props.class })}
+    >
+      <Show
+        fallback={props.fallback || <div>Loading...</div>}
+        when={props.query.data}
+      >
+        {children()}
+      </Show>
+    </div>
+  );
+};

frontends/dashboard/src/layouts/NavbarLayout.tsx

@@ -1,6 +1,5 @@
-import { JSX, useContext } from "solid-js";
-import { UserContext } from "../contexts/UserContext";
-import { A, useNavigate } from "@solidjs/router";
+import { JSX } from "solid-js";
+import { A } from "@solidjs/router";
 import { BiRegularLinkExternal } from "solid-icons/bi";
 
 interface NavbarLayoutProps {
@@ -42,7 +41,7 @@ export const NavbarLayout = (props: NavbarLayoutProps) => {
           </a>
         </div>
       </div>
-      <div class="flex grow flex-col overflow-scroll bg-purple-200">
+      <div class="flex grow flex-col overflow-scroll bg-neutral-100">
         {props.children}
       </div>
     </div>

frontends/dashboard/src/pages/dataset/DatasetHomepage.tsx

@@ -1,12 +1,38 @@
-import { useContext } from "solid-js";
+import { For, useContext } from "solid-js";
 import { DatasetContext } from "../../contexts/DatasetContext";
+import { createQuery } from "@tanstack/solid-query";
+import { MagicBox } from "../../components/MagicBox";
+
+const slowFetchRandomNumber = (delay: number): Promise<number[]> => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve([23, 23, 24]);
+    }, delay);
+  });
+};
 
 export const DatasetHomepage = () => {
   const { datasetId } = useContext(DatasetContext);
+
+  const numQuery = createQuery(() => ({
+    queryKey: ["randomNumber"],
+    queryFn: () => slowFetchRandomNumber(2000),
+  }));
+
   return (
-    <div>
+    <div class="p-4">
       <div>Dataset Homepage</div>
       <div class="m-3 bg-orange-700">ID: {datasetId}</div>
+      <MagicBox heightKey="big-tes" query={numQuery}>
+        {(d) => (
+          <div>
+            testing
+            <For each={d}>
+              {(num) => <div class="m-3 bg-orange-700">{num}</div>}
+            </For>
+          </div>
+        )}
+      </MagicBox>
     </div>
   );
 };