Switch to authClient.inviteMember for invitations

Author: Prathamesh-chougale-17

apps/web/components/users-workspace.tsx

@@ -30,8 +30,7 @@ import {
 import type { AuthRole, CreateInvitationInput, CurrentUserDto } from '@acme/shared';
 
 import { authClient } from '@/lib/auth-client';
-import { ApiClientError } from '@/lib/api-client';
-import { useCreateInvitationMutation, useUsersWorkspaceQuery } from '@/lib/queries';
+import { useUsersWorkspaceQuery } from '@/lib/queries';
 
 const getErrorMessage = (error: unknown) =>
   error instanceof Error ? error.message : 'Unable to complete the request';
@@ -77,43 +76,47 @@ export function UsersWorkspace({
   const [notice, setNotice] = useState<string | null>(null);
   const [setupError, setSetupError] = useState<string | null>(null);
   const [isProvisioning, startProvisioning] = useTransition();
+  const [isInviting, setIsInviting] = useState(false);
   const workspaceQuery = useUsersWorkspaceQuery();
-  const createInvitationMutation = useCreateInvitationMutation();
 
   const workspace = workspaceQuery.data;
   const effectiveViewer = workspace?.viewer ?? viewer;
   const members = workspace?.members ?? [];
   const invitations = workspace?.invitations ?? [];
   const canInviteMembers = canManageMembers(effectiveViewer.role);
-  const errorMessage = createInvitationMutation.isError
-    ? getErrorMessage(createInvitationMutation.error)
-    : workspaceQuery.isError
-      ? getErrorMessage(workspaceQuery.error)
-      : null;
+  const errorMessage = workspaceQuery.isError ? getErrorMessage(workspaceQuery.error) : null;
 
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setNotice(null);
+    setSetupError(null);
     const submittedInvite = { ...inviteForm };
 
     try {
-      await createInvitationMutation.mutateAsync(submittedInvite);
+      setIsInviting(true);
+      const invitationResponse = (await authClient.organization.inviteMember({
+        email: submittedInvite.email,
+        role: submittedInvite.role,
+        organizationId: effectiveViewer.organization?.id,
+        resend: true,
+      })) as {
+        error?: {
+          message?: string;
+        } | null;
+      };
+
+      if (invitationResponse.error) {
+        setSetupError(invitationResponse.error.message ?? 'Unable to send invitation');
+        return;
+      }
+
       setInviteForm({ email: '', role: 'member' });
       setNotice(`Invitation queued for ${submittedInvite.email}`);
+      await workspaceQuery.refetch();
     } catch (error) {
-      if (error instanceof ApiClientError && error.code === 'REQUEST_TIMEOUT') {
-        const refreshedWorkspace = await workspaceQuery.refetch();
-        const invitationWasCreated = refreshedWorkspace.data?.invitations.some(
-          (invitation) => invitation.email === submittedInvite.email,
-        );
-
-        if (invitationWasCreated) {
-          setInviteForm({ email: '', role: 'member' });
-          setNotice(
-            `Invitation queued for ${submittedInvite.email}. Delivery took longer than the browser wait, but the pending invite was created successfully.`,
-          );
-        }
-      }
+      setSetupError(getErrorMessage(error));
+    } finally {
+      setIsInviting(false);
     }
   };
 
@@ -270,11 +273,9 @@ export function UsersWorkspace({
                   <Button
                     type="submit"
                     className="w-full"
-                    disabled={createInvitationMutation.isPending}
+                    disabled={isInviting}
                   >
-                    {createInvitationMutation.isPending
-                      ? 'Sending invitation...'
-                      : 'Send invitation'}
+                    {isInviting ? 'Sending invitation...' : 'Send invitation'}
                   </Button>
                 </form>
                 {notice ? (
@@ -283,10 +284,10 @@ export function UsersWorkspace({
                     <AlertDescription>{notice}</AlertDescription>
                   </Alert>
                 ) : null}
-                {errorMessage ? (
+                {setupError ?? errorMessage ? (
                   <Alert variant="destructive">
                     <AlertTitle>Unable to send invitation</AlertTitle>
-                    <AlertDescription>{errorMessage}</AlertDescription>
+                    <AlertDescription>{setupError ?? errorMessage}</AlertDescription>
                   </Alert>
                 ) : null}
               </>

apps/web/lib/api-client.ts

@@ -1,15 +1,12 @@
 import {
-  CreateInvitationInputSchema,
   CurrentUserDtoSchema,
   HealthDtoSchema,
   UsersWorkspaceDtoSchema,
   type ApiResponse,
-  type CreateInvitationInput,
   type CurrentUserDto,
   type HealthDto,
   type UsersWorkspaceDto,
 } from '@acme/shared';
-import { z } from 'zod';
 
 export class ApiClientError extends Error {
   constructor(
@@ -23,7 +20,6 @@ export class ApiClientError extends Error {
 }
 
 const REQUEST_TIMEOUT_MS = 8_000;
-const INVITATION_REQUEST_TIMEOUT_MS = 20_000;
 
 const parseApiResponse = async (response: Response): Promise<ApiResponse<unknown> | undefined> => {
   const text = await response.text();
@@ -42,7 +38,7 @@ const parseApiResponse = async (response: Response): Promise<ApiResponse<unknown
 const request = async <T>(
   path: string,
   init: RequestInit,
-  schema: z.ZodType<T>,
+  schema: { parse(data: unknown): T },
   options?: {
     timeoutMs?: number;
     timeoutMessage?: string;
@@ -102,20 +98,4 @@ export const apiClient = {
   getMe: () => request<CurrentUserDto>('/api/v1/me', { method: 'GET' }, CurrentUserDtoSchema),
   getUsersWorkspace: () =>
     request<UsersWorkspaceDto>('/api/v1/users', { method: 'GET' }, UsersWorkspaceDtoSchema),
-  createInvitation: (input: CreateInvitationInput) =>
-    request(
-      '/api/v1/invitations',
-      {
-        method: 'POST',
-        body: JSON.stringify(CreateInvitationInputSchema.parse(input)),
-      },
-      z.object({
-        invitationId: z.uuid(),
-      }),
-      {
-        timeoutMs: INVITATION_REQUEST_TIMEOUT_MS,
-        timeoutMessage:
-          'Invitation delivery is taking longer than expected. We will check whether the invite was still created before showing an error.',
-      },
-    ),
 };

apps/web/lib/auth-client.ts

@@ -29,6 +29,7 @@ export const authClient = createAuthClient({
     create: AsyncClientMethod;
     acceptInvitation: AsyncClientMethod;
     getInvitation: AsyncClientMethod;
+    inviteMember: AsyncClientMethod;
     list: AsyncClientMethod;
     setActive: AsyncClientMethod;
   };

apps/web/lib/queries.ts

@@ -1,19 +1,8 @@
 'use client';
 
-import {
-  useMutation,
-  useQuery,
-  useQueryClient,
-  type UseMutationResult,
-  type UseQueryResult,
-} from '@tanstack/react-query';
+import { useQuery, type UseQueryResult } from '@tanstack/react-query';
 
-import type {
-  CreateInvitationInput,
-  CurrentUserDto,
-  HealthDto,
-  UsersWorkspaceDto,
-} from '@acme/shared';
+import type { CurrentUserDto, HealthDto, UsersWorkspaceDto } from '@acme/shared';
 
 import { apiClient } from '@/lib/api-client';
 import { queryKeys } from '@/lib/query-keys';
@@ -36,20 +25,3 @@ export const useUsersWorkspaceQuery = (): UseQueryResult<UsersWorkspaceDto> =>
     queryKey: queryKeys.users.workspace,
     queryFn: apiClient.getUsersWorkspace,
   });
-
-export const useCreateInvitationMutation = (): UseMutationResult<
-  { invitationId: string },
-  Error,
-  CreateInvitationInput
-> => {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: apiClient.createInvitation,
-    onSuccess() {
-      void queryClient.invalidateQueries({
-        queryKey: queryKeys.users.workspace,
-      });
-    },
-  });
-};