begin to implement better revalidation of server side tRPC queries

app/(dashboard)/dashboard/participants/_components/ParticipantModal.tsx

@@ -75,9 +75,6 @@ function ParticipantModal({
       onMutate() {
         setIsLoading(true);
       },
-      async onSuccess() {
-        await utils.participant.get.invalidate();
-      },
       onError(error) {
         setError(error.message);
       },
@@ -112,9 +109,8 @@ function ParticipantModal({
       await createParticipant([data.identifier]);
     }
 
-    await utils.participant.get.invalidate();
-
     if (!error) {
+      await utils.participant.get.invalidate();
       setOpen(false);
       reset();
     }

app/(onboard)/_components/OnboardSteps/Documentation.tsx

@@ -2,30 +2,13 @@
 
 import { Card, CardContent, CardHeader, CardTitle } from '~/components/ui/card';
 import { FileText, Loader2, MonitorPlay } from 'lucide-react';
-import { api } from '~/trpc/client';
-import { useState } from 'react';
 import { FancyButton } from '~/components/ui/FancyButton';
-import { clientRevalidateTag } from '~/utils/clientRevalidate';
 import { useRouter } from 'next/navigation';
+import { experimental_useFormStatus as useFormStatus } from 'react-dom';
+import { setAppConfigured } from '~/app/_actions';
 
 function Documentation() {
-  const [loading, setLoading] = useState(false);
-  const router = useRouter();
-
-  const { mutate: setConfigured } = api.appSettings.setConfigured.useMutation({
-    onMutate: () => {
-      setLoading(true);
-    },
-    onSuccess: () => {
-      clientRevalidateTag('appSettings.get')
-        .then(() => router.refresh())
-        // eslint-disable-next-line no-console
-        .catch((e) => console.error(e));
-    },
-    onError: () => {
-      setLoading(false);
-    },
-  });
+  const { pending: loading } = useFormStatus();
 
   if (loading) {
     return (
@@ -78,9 +61,9 @@ function Documentation() {
       </Card>
 
       <div className="flex justify-start pt-12">
-        <FancyButton type="submit" onClick={() => setConfigured()}>
-          Go to the dashboard!
-        </FancyButton>
+        <form action={setAppConfigured}>
+          <FancyButton type="submit">Go to the dashboard!</FancyButton>
+        </form>
       </div>
     </div>
   );

app/(onboard)/_components/SignInForm.tsx

@@ -9,6 +9,7 @@ import { api } from '~/trpc/client';
 import ActionError from '../../../components/ActionError';
 import type { Route } from 'next';
 import useZodForm from '~/hooks/useZodForm';
+import { useRouter } from 'next/navigation';
 
 type ResponseError = {
   title: string;
@@ -17,6 +18,7 @@ type ResponseError = {
 
 export default function SignInForm({ callbackUrl }: { callbackUrl?: Route }) {
   const [loading, setLoading] = useState(false);
+  const router = useRouter();
 
   const [responseError, setResponseError] = useState<ResponseError | null>(
     null,
@@ -43,8 +45,7 @@ export default function SignInForm({ callbackUrl }: { callbackUrl?: Route }) {
 
       if (result.session) {
         if (callbackUrl) {
-          window.location.replace(callbackUrl);
-          // router.replace(callbackUrl);
+          router.push(callbackUrl);
         }
       }
     },

app/_actions.ts

@@ -10,5 +10,5 @@ export const resetAppSettings = async () => {
 
 export const setAppConfigured = async () => {
   await api.appSettings.setConfigured.mutate();
-  redirect('/');
+  redirect('/dashboard');
 };

app/layout.tsx

@@ -15,8 +15,7 @@ export const metadata = {
 export const dynamic = 'force-dynamic';
 
 async function RootLayout({ children }: { children: React.ReactNode }) {
-  const session = await getServerSession();
-
+  const session = await api.session.get.query();
   const appSettings = await api.appSettings.get.query();
 
   // If this is the first run, app settings must be created

components/RedirectWrapper.tsx

@@ -2,7 +2,7 @@
 
 import type { Session } from 'lucia';
 import type { Route } from 'next';
-import { usePathname, redirect } from 'next/navigation';
+import { usePathname, redirect, useSearchParams } from 'next/navigation';
 import { calculateRedirect } from '~/utils/calculateRedirectedRoutes';
 
 /**
@@ -29,10 +29,12 @@ export default function RedirectWrapper({
   expired: boolean;
 }) {
   const path = usePathname() as Route;
+  const searchParams = useSearchParams();
 
   const shouldRedirect = calculateRedirect({
     session,
     path,
+    searchParams,
     expired,
     configured,
   });

server/routers/session.ts

@@ -6,6 +6,7 @@ import { protectedProcedure, publicProcedure, router } from '../trpc';
 import * as context from 'next/headers';
 import type { inferAsyncReturnType } from '@trpc/server';
 import type { createTRPCContext } from '../context';
+import { revalidateTag } from 'next/cache';
 
 type Context = inferAsyncReturnType<typeof createTRPCContext>;
 
@@ -23,6 +24,8 @@ export const signOutProc = async ({ ctx }: { ctx: Context }) => {
 
   authRequest.setSession(null);
 
+  revalidateTag('session.get');
+
   return {
     success: true,
   };
@@ -83,6 +86,8 @@ export const sessionRouter = router({
 
       authRequest.setSession(session);
 
+      revalidateTag('session.get');
+
       return {
         error: null,
         session,

utils/calculateRedirectedRoutes.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import type { Session } from 'lucia';
 import type { Route } from 'next';
+import { ReadonlyURLSearchParams } from 'next/navigation';
 import { cache } from 'react';
 
 const routeIsLoginPage = (pathname: Route) => {
@@ -26,11 +27,13 @@ const routeIsExpiredPage = (pathname: Route) => {
 export const calculateRedirect = ({
   session,
   path,
+  searchParams,
   expired,
   configured,
 }: {
   session: Session | null;
   path: Route;
+  searchParams: ReadonlyURLSearchParams;
   expired: boolean;
   configured: boolean;
 }): undefined | Route => {
@@ -85,10 +88,18 @@ export const calculateRedirect = ({
 
   // Redirect authed users away from these pages and to the dashboard
   if (isLoginPage || isOnboarding || isLandingPage || isExpiredPage) {
+    if (isLoginPage) {
+      const callbackUrl = searchParams.get('callbackUrl') as Route;
+
+      if (callbackUrl) {
+        return callbackUrl;
+      }
+    }
+
     return '/dashboard';
   }
 
-  // APP IS CONFIGURED AND SESSION EXISTS AND USER IS ON DASHBOARD
+  // APP IS CONFIGURED AND SESSION EXISTS AND USER IS WHERE THEY REQUESTED TO BE
   return;
 };