fix from passing props to using react-query

Author: Peter Nguyen

frontend-nextjs/src/app/[lang]/dashboard/invite/[inviteId]/invite-client.tsx

@@ -2,22 +2,22 @@
 
 import { Button } from "@/components/ui/button";
 import { ApiError } from "@/lib/api";
-import { acceptInvite, InviteDetails } from "@/models/invite";
+import { acceptInvite, inviteQueryOptions } from "@/models/invite";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
 
 type Props = {
   code: string;
-  invite: InviteDetails;
   dict: any;
-  mockMode?: boolean;
 };
 
-export default function InviteClient({ code, invite, dict, mockMode = false }: Props) {
+export default function InviteClient({ code, dict }: Props) {
   const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
   const [message, setMessage] = useState<string | null>(null);
   const router = useRouter();
+  const { data: invite } = useQuery(inviteQueryOptions(code));
 
   // After successful acceptance, redirect after a short delay.
   useEffect(() => {
@@ -32,43 +32,51 @@ export default function InviteClient({ code, invite, dict, mockMode = false }: P
   const handleAccept = async () => {
     setStatus("loading");
     setMessage(null);
-    try {
-      if (!mockMode) {
-        await acceptInvite(code);
-      }
-      setStatus("success");
-      setMessage(dict.dashboard.invite.accepted);
-    } catch (err) {
-      setStatus("error");
-      if (err instanceof ApiError) {
-        if (err.status === 401) {
-          setMessage(dict.dashboard.invite.login_required ?? "Please log in to accept this invite.");
+
+    acceptInvite(code)
+      .then(() => {
+        setStatus("success");
+        setMessage(dict.dashboard.invite.accepted);
+      })
+      .catch((err) => {
+        setStatus("error");
+        if (err instanceof ApiError) {
+          if (err.status === 401) {
+            setMessage(dict.dashboard.invite.login_required ?? "Please log in to accept this invite.");
+          } else {
+            setMessage(err.message);
+          }
         } else {
-          setMessage(err.message);
+          setMessage("Something went wrong. Please try again.");
         }
-      } else {
-        setMessage("Something went wrong. Please try again.");
-      }
-    }
+      });
   };
 
-  const inviteInvalid = invite.expired || invite.used || status === "success";
+  const inviteInvalid = !invite || invite.expired || invite.used || status === "success";
 
   return (
     <div className="max-w-xl mx-auto p-6 flex flex-col gap-4">
       <h1 className="text-2xl font-bold">{dict.dashboard.invite.title}</h1>
       <p className="text-sm text-muted-foreground">
-        {dict.dashboard.invite.invited_by.replace("{org}", invite.organisation_name)}
-      </p>
-      <p className="text-sm text-muted-foreground">
-        {dict.dashboard.invite.sent_to}: <span className="font-medium">{invite.email}</span>
+        {invite
+          ? dict.dashboard.invite.invited_by.replace("{org}", invite.organisation_name)
+          : dict?.common?.loading ?? "Loading..."}
       </p>
-      {invite.expired && (
+      {/* Show the email the invite was sent to */}
+      {invite && (
+        <p className="text-sm text-muted-foreground">
+          {dict.dashboard.invite.sent_to}: <span className="font-medium">{invite.email}</span>
+        </p>
+      )}
+      {/* Show the expired message if the invite has expired */}
+      {invite?.expired && (
         <p className="text-sm text-red-600">{dict.dashboard.invite.expired}</p>
       )}
-      {invite.used && (
+      {/* Show the used message if the invite has been used */}
+      {invite?.used && (
         <p className="text-sm text-red-600">{dict.dashboard.invite.used}</p>
       )}
+      {/* Show the message if there is an error */}
       {message && (
         <p className={`text-sm ${status === "success" ? "text-green-600" : "text-red-600"}`}>
           {message}
@@ -87,6 +95,7 @@ export default function InviteClient({ code, invite, dict, mockMode = false }: P
         >
           {status === "loading" ? "Loading..." : dict.dashboard.invite.accept_cta}
         </Button>
+        {/* Show the wrong account message if the account is not invited */}
         <p className="text-xs text-muted-foreground">
           {dict.dashboard.invite.wrong_account}
         </p>

frontend-nextjs/src/app/[lang]/dashboard/invite/[inviteId]/page.tsx

@@ -1,5 +1,6 @@
 import { getDictionary } from "@/app/[lang]/dictionaries";
-import { getInvite } from "@/models/invite";
+import { inviteQueryOptions } from "@/models/invite";
+import { HydrationBoundary, QueryClient, dehydrate } from "@tanstack/react-query";
 import { notFound } from "next/navigation";
 import InviteClient from "./invite-client";
 
@@ -10,14 +11,18 @@ export default async function Page({ params }: { params: Params }) {
 
   const dict = await getDictionary(lang);
 
-  let invite;
   try {
-    invite = await getInvite(inviteId);
+    const queryClient = new QueryClient();
+    await queryClient.prefetchQuery(inviteQueryOptions(inviteId));
+
+    return (
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <InviteClient code={inviteId} dict={dict} />
+      </HydrationBoundary>
+    );
   } catch {
     return notFound();
   }
-
-  return <InviteClient code={inviteId} invite={invite} dict={dict} />;
 }
 
 

frontend-nextjs/src/models/invite.ts

@@ -1,4 +1,5 @@
 import { apiRequest } from "@/lib/api";
+import type { QueryKey } from "@tanstack/react-query";
 import { AppMessage } from "./app";
 
 export type InviteDetails = {
@@ -33,4 +34,21 @@ export async function acceptInvite(code: string): Promise<AppMessage> {
   });
 }
 
+/**
+ * Gets the query key for the invite.
+ * @param code - The invite code
+ * @returns The query key
+ */
+export const inviteQueryKey = (code: string): QueryKey => ["invite", code];
+
+/**
+ * Gets the query options for the invite.
+ * @param code - The invite code
+ * @returns The query options
+ */
+export const inviteQueryOptions = (code: string) => ({
+  queryKey: inviteQueryKey(code),
+  queryFn: () => getInvite(code),
+});
+