fixes

mattrax · Feb 5, 2024 · 1629147 · 1629147
1 parent bc95dc5
commit 1629147
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 38 deletions.
diff --git a/forge/src/app.tsx b/forge/src/app.tsx
@@ -1,7 +1,13 @@
 // @refresh reload
 import { Router, useNavigate } from "@solidjs/router";
 import { ErrorBoundary, Suspense, lazy, onCleanup } from "solid-js";
-import { QueryCache, QueryClient, onlineManager } from "@tanstack/solid-query";
+import {
+  QueryCache,
+  QueryClient,
+  QueryClientProvider,
+  keepPreviousData,
+  onlineManager,
+} from "@tanstack/solid-query";
 import { Toaster, toast } from "solid-sonner";
 import { broadcastQueryClient } from "@tanstack/query-broadcast-client-experimental";
 import { PersistQueryClientProvider } from "@tanstack/solid-query-persist-client";
@@ -55,6 +61,7 @@ const createQueryClient = (navigate: (to: string) => void) => {
         retry: false,
         gcTime: 1000 * 60 * 60 * 24, // 24 hours
         refetchInterval: 1000 * 60, // 1 minute
+        placeholderData: keepPreviousData,
       },
     },
   });
@@ -107,10 +114,11 @@ export default function App() {
         onCleanup(() => unsubscribe());
 
         return (
-          <PersistQueryClientProvider
-            client={queryClient}
-            persistOptions={{ persister }}
-          >
+          // <PersistQueryClientProvider
+          //   client={queryClient}
+          //   persistOptions={{ persister }}
+          // >
+          <QueryClientProvider client={queryClient}>
             {import.meta.env.DEV && localStorage.getItem("debug") !== null ? (
               <SolidQueryDevtools />
             ) : null}
@@ -145,7 +153,8 @@ export default function App() {
                 {props.children}
               </Suspense>
             </ErrorBoundary>
-          </PersistQueryClientProvider>
+          </QueryClientProvider>
+          // </PersistQueryClientProvider>
         );
       }}
     >

diff --git a/forge/src/components/ui/checkbox.tsx b/forge/src/components/ui/checkbox.tsx
@@ -14,7 +14,12 @@ const Checkbox: Component<CheckboxPrimitive.CheckboxRootProps> = (props) => {
       {...rest}
     >
       <CheckboxPrimitive.Input />
-      <CheckboxPrimitive.Control class="border-primary ring-offset-background focus-visible:ring-ring data-[checked]:bg-primary data-[checked]:text-primary-foreground peer h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[checked]:border-none">
+      <CheckboxPrimitive.Control
+        class="border-primary ring-offset-background focus-visible:ring-ring data-[checked]:bg-primary data-[checked]:text-primary-foreground peer h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[checked]:border-none"
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
         <CheckboxPrimitive.Indicator>
           <TbCheck class="h-4 w-4" />
         </CheckboxPrimitive.Indicator>

diff --git a/forge/src/routes/(dash).tsx b/forge/src/routes/(dash).tsx
@@ -5,6 +5,7 @@ import {
   ParentProps,
   Show,
   Suspense,
+  createEffect,
   createMemo,
 } from "solid-js";
 import LeftSidebar from "~/components/LeftSidebar";
@@ -92,7 +93,7 @@ export default function Layout(props: ParentProps) {
 
       <Suspense fallback={<h1>TODO: Loading...</h1>}>
         {/* TODO: Why does this always suspend even with an `initialValue` available */}
-        <Show when={session.data} keyed>
+        <Show when={session.data}>
           {(session2) => (
             <globalCtx.Provider
               value={{
@@ -102,7 +103,7 @@ export default function Layout(props: ParentProps) {
                 setActiveTenant,
                 refetchSession,
                 get session() {
-                  return session2;
+                  return session2();
                 },
               }}
             >

diff --git a/forge/src/routes/(dash)/[tenant]/groups/[groupId].tsx b/forge/src/routes/(dash)/[tenant]/groups/[groupId].tsx
@@ -2,14 +2,7 @@ import { For, ParentProps, Show, Suspense, createSignal } from "solid-js";
 import { z } from "zod";
 import { As } from "@kobalte/core";
 
-import {
-  Button,
-  Checkbox,
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "~/components/ui";
+import { Button, Checkbox, Tabs, TabsList, TabsTrigger } from "~/components/ui";
 import { trpc } from "~/lib";
 import { useZodParams } from "~/lib/useZodParams";
 
@@ -19,21 +12,19 @@ export default function Page() {
   const group = trpc.group.get.useQuery(() => ({ id: routeParams().groupId }));
 
   return (
-    <Suspense>
-      <Show when={group.data}>
-        {(group) => (
-          <div class="flex-1 m-4">
-            <h1 class="text-xl font-bold">{group().name}</h1>
-            <div class="mt-4 mb-2">
-              <AddMemberSheet groupId={group().id}>
-                <As component={Button}>Add Members</As>
-              </AddMemberSheet>
-            </div>
-            <MembersTable groupId={group().id} />
+    <Show when={group.data}>
+      {(group) => (
+        <div class="flex-1 m-4">
+          <h1 class="text-xl font-bold">{group().name}</h1>
+          <div class="mt-4 mb-2">
+            <AddMemberSheet groupId={routeParams().groupId}>
+              <As component={Button}>Add Members</As>
+            </AddMemberSheet>
           </div>
-        )}
-      </Show>
-    </Suspense>
+          <MembersTable groupId={group().id} />
+        </div>
+      )}
+    </Show>
   );
 }
 
@@ -99,9 +90,10 @@ import {
 } from "~/components/ui";
 
 function MembersTable(props: { groupId: number }) {
-  const members = trpc.group.members.useQuery(() => ({
-    id: props.groupId,
-  }));
+  const members = trpc.group.members.useQuery(
+    () => ({ id: props.groupId }),
+    () => ({ placeholderData: keepPreviousData })
+  );
 
   const table = createSolidTable({
     get data() {
@@ -187,6 +179,7 @@ import {
   SheetTrigger,
 } from "~/components/ui/sheet";
 import { Badge } from "~/components/ui/badge";
+import { keepPreviousData } from "@tanstack/solid-query";
 
 const AddMemberTableOptions = {
   all: "All",
@@ -263,10 +256,12 @@ function AddMemberSheet(props: ParentProps & { groupId: number }) {
               ))}
             </TabsList>
           </Tabs>
-          <Button disabled={!table.getIsSomeRowsSelected()}>
-            Add {table.getSelectedRowModel().rows.length} Member
-            {table.getSelectedRowModel().rows.length !== 1 && "s"}
-          </Button>
+          <Suspense fallback={<Button disabled>Add 0 Members</Button>}>
+            <Button disabled={!table.getIsSomeRowsSelected()}>
+              Add {table.getSelectedRowModel().rows.length} Member
+              {table.getSelectedRowModel().rows.length !== 1 && "s"}
+            </Button>
+          </Suspense>
         </div>
         <Suspense>
           <div class="rounded-md border mt-2">
@@ -299,6 +294,7 @@ function AddMemberSheet(props: ParentProps & { groupId: number }) {
                             <TableCell
                               onClick={(e) => {
                                 e.preventDefault();
+                                e.stopPropagation();
                                 row.toggleSelected();
                               }}
                             >