Add superjson back in, loading states, placeholder/initial data, Flex…

…Col UI component - still not sure how I feel about this, it makes the API really only "usable" by clients that can load the superjson transformer which kind of sucks
solomonhawk · Oct 25, 2024 · c8921e0 · c8921e0
1 parent 0f7b0cb
commit c8921e0
Show file tree

Hide file tree

Showing 22 changed files with 238 additions and 123 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -35,6 +35,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.1",
     "react-router-dom": "^6.27.0",
+    "superjson": "^2.2.1",
     "ts-pattern": "^5.5.0"
   },
   "devDependencies": {

diff --git a/apps/web/src/auth-test.tsx b/apps/web/src/auth-test.tsx
diff --git a/apps/web/src/features/auth/components/auth-guard.tsx b/apps/web/src/features/auth/components/auth-guard.tsx
@@ -1,12 +1,17 @@
 import { useSession } from "@manifold/auth/client";
+import { LoadingIndicator } from "@manifold/ui/components/loading-indicator";
+import { FlexCol } from "@manifold/ui/components/ui/flex";
 import { Navigate, Outlet } from "react-router-dom";
 
 export function AuthGuard() {
   const { status } = useSession();
 
   if (status === "loading") {
-    // @TODO: better loading state, suspense, router?
-    return null;
+    return (
+      <FlexCol className="items-center justify-center">
+        <LoadingIndicator />
+      </FlexCol>
+    );
   }
 
   if (status === "authenticated") {

diff --git a/apps/web/src/features/dashboard/components/table-list/index.tsx b/apps/web/src/features/dashboard/components/table-list/index.tsx
@@ -5,6 +5,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@manifold/ui/components/ui/card";
+import { cn } from "@manifold/ui/lib/utils";
 import { formatRelative } from "date-fns";
 import { Link } from "react-router-dom";
 
@@ -29,7 +30,14 @@ export function TableList() {
         <CardTitle>Recently Edited:</CardTitle>
       </CardHeader>
 
-      <CardContent className="grid grid-cols-[repeat(auto-fill,minmax(150px,200px))] gap-12 sm:gap-16">
+      <CardContent
+        className={cn(
+          "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-[repeat(auto-fill,minmax(150px,200px))] gap-12 sm:gap-16 transition-opacity",
+          {
+            "opacity-50": query.isRefetching,
+          },
+        )}
+      >
         {data.map((table) => {
           return (
             <div key={table.id} className="border rounded-sm">
@@ -39,7 +47,10 @@ export function TableList() {
                   variant="link"
                   asChild
                 >
-                  <Link to={`/table/${table.id}/edit`}>
+                  <Link
+                    to={query.isRefetching ? "#" : `/table/${table.id}/edit`}
+                    state={{ table }}
+                  >
                     <h3 className="text-lg sm:text-xl group-hover:underline decoration-from-font underline-offset-2 text-center whitespace-normal">
                       {table.title}
                     </h3>

diff --git a/apps/web/src/features/dashboard/pages/root/page.tsx b/apps/web/src/features/dashboard/pages/root/page.tsx
@@ -1,12 +1,14 @@
+import { FlexCol } from "@manifold/ui/components/ui/flex";
+
 import { DashboardHeader } from "~features/dashboard/components/dashboard-header";
 import { TableList } from "~features/dashboard/components/table-list";
 
 export function DashboardRoot() {
   return (
-    <div className="flex flex-col grow p-12 sm:p-16 min-h-0 space-y-12 sm:space-y-16">
+    <FlexCol className="p-12 sm:p-16 space-y-12 sm:space-y-16">
       <DashboardHeader />
       <TableList />
-    </div>
+    </FlexCol>
   );
 }
 

diff --git a/apps/web/src/features/editor/editor.tsx b/apps/web/src/features/editor/editor.tsx
@@ -1,3 +1,4 @@
+import { FlexCol } from "@manifold/ui/components/ui/flex";
 import {
   ResizableHandle,
   ResizablePanel,
@@ -36,35 +37,34 @@ export function Editor({
   }, []);
 
   return (
-    <ResizablePanelGroup
-      direction="horizontal"
-      className="flex h-full min-h-0 border"
-    >
-      <ResizablePanel
-        minSize={20}
-        defaultSize={50}
-        className="flex flex-col flex-1 lg:flex-initial"
-      >
-        <InputPanel
-          inputRef={inputRef as MutableRefObject<HTMLTextAreaElement>}
-          name={name}
-          value={value ?? ""}
-          onChange={onChange}
-          onBlur={onBlur}
-          refCallback={refCallback}
-          onParseError={onParseError}
-          onParseSuccess={onParseSuccess}
-        />
-      </ResizablePanel>
+    <FlexCol asChild>
+      <ResizablePanelGroup direction="horizontal" className="border">
+        <ResizablePanel
+          minSize={20}
+          defaultSize={50}
+          className="flex flex-col flex-1 lg:flex-initial"
+        >
+          <InputPanel
+            inputRef={inputRef as MutableRefObject<HTMLTextAreaElement>}
+            name={name}
+            value={value ?? ""}
+            onChange={onChange}
+            onBlur={onBlur}
+            refCallback={refCallback}
+            onParseError={onParseError}
+            onParseSuccess={onParseSuccess}
+          />
+        </ResizablePanel>
 
-      <ResizableHandle withHandle />
+        <ResizableHandle withHandle />
 
-      <ResizablePanel minSize={50} className="flex flex-col flex-1">
-        <div className="flex flex-1 flex-col min-h-0 @container bg-background/60">
-          <AvailableTables inputRef={inputRef} onRoll={handleRoll} />
-          <RollResults listRef={listRef} />
-        </div>
-      </ResizablePanel>
-    </ResizablePanelGroup>
+        <ResizablePanel minSize={50} className="flex flex-col flex-1">
+          <FlexCol className="@container bg-background/60">
+            <AvailableTables inputRef={inputRef} onRoll={handleRoll} />
+            <RollResults listRef={listRef} />
+          </FlexCol>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </FlexCol>
   );
 }
diff --git a/apps/web/src/features/editor/input-panel.tsx b/apps/web/src/features/editor/input-panel.tsx
@@ -7,7 +7,7 @@ import {
 } from "react";
 import type { RefCallBack } from "react-hook-form";
 
-import { currentTableHash, currentTableMetadata } from "./state";
+import { currentTableHash, currentTableMetadata, rollHistory } from "./state";
 import { workerInstance } from "./worker";
 
 type Props = {
@@ -32,7 +32,7 @@ export function InputPanel({
   onParseSuccess,
 }: Props) {
   const setTableHash = useSetAtom(currentTableHash);
-
+  const setRollResults = useSetAtom(rollHistory);
   const setTableMetadata = useSetAtom(currentTableMetadata);
 
   const parseAndValidate = useCallback(
@@ -43,11 +43,12 @@ export function InputPanel({
 
           setTableHash(hash);
           setTableMetadata(metadata);
-          onParseSuccess();
         } else {
           setTableHash(null);
           setTableMetadata([]);
         }
+
+        onParseSuccess();
       } catch (e: unknown) {
         console.error(e);
 
@@ -70,6 +71,13 @@ export function InputPanel({
     if (value) {
       parseAndValidate(value);
     }
+
+    return () => {
+      // oof, maybe I can put the jotai atoms into a context?
+      setRollResults([]);
+      setTableHash(null);
+      setTableMetadata([]);
+    };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (

diff --git a/apps/web/src/features/routing/root/layout.tsx b/apps/web/src/features/routing/root/layout.tsx
@@ -55,12 +55,25 @@ export function RootLayout() {
       <CommandPalette
         isOpen={isCommandPaletteOpen}
         onClose={closeCommandPalette}
-        onCreateTable={() => {
+        onCreateTable={async () => {
           closeCommandPalette();
 
           /**
            * @NOTE: Give the dialog a chance to close before navigating so that
            * `autoFocus` works as expected on the subsequent page.
+           *
+           * This raises a warning in the console related to
+           * `@radix-ui/react-dialog` calling `hideOthers` from the
+           * `aria-hidden` package which sets `aria-hidden` on the body element.
+           *
+           * > Blocked aria-hidden on an element because its descendant retained
+           * > focus. The focus must not be hidden from assistive technology
+           * > users. Avoid using aria-hidden on a focused element or its
+           * > ancestor. Consider using the inert attribute instead, which will
+           * > also prevent focus.
+           *
+           * That package supports `inert`, but it hasn't been adopted by Radix
+           * as of right now.
            */
           requestAnimationFrame(() => {
             navigate("/table/new");

diff --git a/apps/web/src/features/table/components/table-create-form/index.tsx b/apps/web/src/features/table/components/table-create-form/index.tsx
@@ -1,3 +1,4 @@
+import type { TableModel } from "@manifold/db/schema/table";
 import {
   Form,
   FormControl,
@@ -20,7 +21,7 @@ type FormData = z.infer<typeof tableCreateInput>;
 export function TableCreateForm({
   onCreate,
 }: {
-  onCreate: (id: string) => void;
+  onCreate: (table: TableModel) => void;
 }) {
   const form = useZodForm({
     schema: tableCreateInput,
@@ -34,7 +35,7 @@ export function TableCreateForm({
 
   const onSubmit: SubmitHandler<FormData> = async (data) => {
     const table = await createTableMutation.mutateAsync(data);
-    onCreate(table.id);
+    onCreate(table);
   };
 
   return (