[nvim] envrc to flake, setup tanstack query for data loading

src/main.tsx

@@ -1,42 +1,47 @@
-import { StrictMode } from 'react'
-import ReactDOM from 'react-dom/client'
-import { RouterProvider, createRouter } from '@tanstack/react-router'
+import { StrictMode } from "react";
+import ReactDOM from "react-dom/client";
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 // Import the generated route tree
-import { routeTree } from './routeTree.gen'
+import { routeTree } from "./routeTree.gen";
 
-import './styles.css'
-import reportWebVitals from './reportWebVitals.ts'
+import "./styles.css";
+import reportWebVitals from "./reportWebVitals.ts";
+
+const queryClient = new QueryClient();
 
 // Create a new router instance
 const router = createRouter({
   routeTree,
-  context: {},
-  defaultPreload: 'intent',
+  context: { queryClient },
+  defaultPreload: "intent",
   scrollRestoration: true,
   defaultStructuralSharing: true,
   defaultPreloadStaleTime: 0,
-})
+});
 
 // Register the router instance for type safety
-declare module '@tanstack/react-router' {
+declare module "@tanstack/react-router" {
   interface Register {
-    router: typeof router
+    router: typeof router;
   }
 }
 
 // Render the app
-const rootElement = document.getElementById('app')
+const rootElement = document.getElementById("app");
 if (rootElement && !rootElement.innerHTML) {
-  const root = ReactDOM.createRoot(rootElement)
+  const root = ReactDOM.createRoot(rootElement);
   root.render(
     <StrictMode>
-      <RouterProvider router={router} />
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router} />
+      </QueryClientProvider>
     </StrictMode>,
-  )
+  );
 }
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals()
+reportWebVitals();

src/routes/__root.tsx

@@ -1,9 +1,7 @@
 import { Link, Outlet, createRootRoute } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import { AuthProvider, useAuth } from "@/context/auth/AuthContext";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-
-const queryClient = new QueryClient();
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 /**
  * Root header with navigation and user authentication controls.
@@ -69,12 +67,13 @@ function RootHeader() {
 
 export const Route = createRootRoute({
   component: () => (
-    <QueryClientProvider client={queryClient}>
+    <>
       <AuthProvider>
         <RootHeader />
         <Outlet />
-        <TanStackRouterDevtools />
       </AuthProvider>
-    </QueryClientProvider>
+      <TanStackRouterDevtools />
+      <ReactQueryDevtools buttonPosition="bottom-right" />
+    </>
   ),
 });

src/routes/_authenticated/campaigns.$campaignId.tsx

@@ -1,27 +1,53 @@
+import { useCallback } from "react";
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { pb } from "@/lib/pocketbase";
-import type { Campaign } from "@/lib/types";
 import { SessionRow } from "@/components/documents/session/SessionRow";
+import { Button } from "@headlessui/react";
+import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import { Loader } from "@/components/Loader";
 
 export const Route = createFileRoute("/_authenticated/campaigns/$campaignId")({
-  loader: async ({ params }) => {
-    const record = await pb.collection("campaigns").getOne(params.campaignId);
-    // Fetch all documents for this campaign
-    const docs = await pb.collection("documents").getFullList({
-      filter: `campaign = "${params.campaignId}"`,
-    });
-    // Filter to only those with data.session
-    const sessions = docs.filter((doc: any) => doc.data && doc.data.session);
-    return {
-      campaign: { id: record.id, name: record.name } as Campaign,
-      sessions,
-    };
-  },
   component: RouteComponent,
+  pendingComponent: Loader,
 });
 
 function RouteComponent() {
-  const { campaign, sessions } = Route.useLoaderData();
+  const queryClient = useQueryClient();
+  const params = Route.useParams();
+
+  const {
+    data: { campaign, sessions },
+  } = useSuspenseQuery({
+    queryKey: ["campaign"],
+    queryFn: async () => {
+      const campaign = await pb
+        .collection("campaigns")
+        .getOne(params.campaignId);
+      // Fetch all documents for this campaign
+      const docs = await pb.collection("documents").getFullList({
+        filter: `campaign = "${params.campaignId}"`,
+      });
+      // Filter to only those with data.session
+      const sessions = docs.filter((doc: any) => doc.data && doc.data.session);
+      return {
+        campaign,
+        sessions,
+      };
+    },
+  });
+
+  const createNewSession = useCallback(async () => {
+    await pb.collection("documents").create({
+      campaign: campaign.id,
+      data: {
+        session: {
+          strongStart: "",
+        },
+      },
+    });
+    queryClient.invalidateQueries({ queryKey: ["campaign"] });
+  }, [campaign]);
+
   return (
     <div className="max-w-xl mx-auto py-8">
       <div className="mb-2">
@@ -35,7 +61,17 @@ function RouteComponent() {
       <h2 className="text-2xl font-bold mb-4 text-slate-100">
         {campaign.name}
       </h2>
-      <h3 className="text-lg font-semibold mb-2 text-slate-200">Sessions</h3>
+      <div className="flex justify-between">
+        <h3 className="text-lg font-semibold mb-2 text-slate-200">Sessions</h3>
+        <div>
+          <Button
+            onClick={() => createNewSession()}
+            className="inline-flex items-center justify-center rounded bg-violet-600 hover:bg-violet-700 text-white px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-violet-400"
+          >
+            New Session
+          </Button>
+        </div>
+      </div>
       {sessions && sessions.length > 0 ? (
         <div>
           <ul className="space-y-2">
@@ -51,7 +87,6 @@ function RouteComponent() {
           No sessions found for this campaign.
         </div>
       )}
-      {/* More campaign details can go here */}
     </div>
   );
 }

src/routes/_authenticated/campaigns.index.tsx

@@ -9,7 +9,12 @@ import { useRouter } from "@tanstack/react-router";
 export const Route = createFileRoute("/_authenticated/campaigns/")({
   loader: async () => {
     const records = await pb.collection("campaigns").getFullList();
-    return { campaigns: records.map((rec: any) => ({ id: rec.id, name: rec.name })) as Campaign[] };
+    return {
+      campaigns: records.map((rec: any) => ({
+        id: rec.id,
+        name: rec.name,
+      })) as Campaign[],
+    };
   },
   component: RouteComponent,
   pendingComponent: Loader,
@@ -23,24 +28,26 @@ function RouteComponent() {
     await router.invalidate();
   };
 
-  if (!campaigns || campaigns.length === 0) return <div>No campaigns found.</div>;
-
   return (
     <div className="max-w-xl mx-auto py-8">
       <h2 className="text-xl font-bold mb-4 text-slate-100">Your Campaigns</h2>
-      <ul className="space-y-2">
-        {campaigns.map((c) => (
-          <li key={c.id}>
-            <Link
-              to="/campaigns/$campaignId"
-              params={{ campaignId: c.id }}
-              className="block px-4 py-2 rounded bg-slate-800 hover:bg-violet-700 text-slate-100 transition-colors"
-            >
-              {c.name}
-            </Link>
-          </li>
-        ))}
-      </ul>
+      {!campaigns || campaigns.length === 0 ? (
+        <div>No campaigns found.</div>
+      ) : (
+        <ul className="space-y-2">
+          {campaigns.map((c) => (
+            <li key={c.id}>
+              <Link
+                to="/campaigns/$campaignId"
+                params={{ campaignId: c.id }}
+                className="block px-4 py-2 rounded bg-slate-800 hover:bg-violet-700 text-slate-100 transition-colors"
+              >
+                {c.name}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
       <div className="mt-8">
         <CreateCampaignButton onCreated={handleCreated} />
       </div>