refactor(unsubscribe): migrate page to React Query

Replace the hand-rolled useState+useEffect+requestJson server-state in the
unsubscribe page with React Query hooks. Add useUnsubscribe (validation/load
query, keyed by email+token, auto-runs on mount via enabled) and
useUnsubscribeMutation (unsubscribe action, reconciles cached preferences on
success) in hooks/queries/unsubscribe.ts with a hierarchical key factory.

Export UnsubscribeData/UnsubscribeActionResponse/UnsubscribeType type aliases
from the existing user contract; loading/error/success now derive from the
query and mutation objects with no local server-state mirror.

Author: waleedlatif1

apps/sim/app/unsubscribe/unsubscribe.tsx

@@ -1,91 +1,38 @@
 'use client'
 
-import { Suspense, useEffect, useState } from 'react'
+import { Suspense } from 'react'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useSearchParams } from 'next/navigation'
 import { Loader } from '@/components/emcn'
-import { requestJson } from '@/lib/api/client/request'
-import type { ContractJsonResponse } from '@/lib/api/contracts'
-import { unsubscribeGetContract, unsubscribePostContract } from '@/lib/api/contracts/user'
+import type { UnsubscribeType } from '@/lib/api/contracts/user'
 import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes'
 import { InviteLayout } from '@/app/invite/components'
-
-type UnsubscribeData = ContractJsonResponse<typeof unsubscribeGetContract>
+import { useUnsubscribe, useUnsubscribeMutation } from '@/hooks/queries/unsubscribe'
 
 function UnsubscribeContent() {
   const searchParams = useSearchParams()
-  const [loading, setLoading] = useState(true)
-  const [data, setData] = useState<UnsubscribeData | null>(null)
-  const [error, setError] = useState<string | null>(null)
-  const [processing, setProcessing] = useState(false)
-  const [unsubscribed, setUnsubscribed] = useState(false)
-
   const email = searchParams.get('email')
   const token = searchParams.get('token')
 
-  useEffect(() => {
-    if (!email || !token) {
-      setError('Missing email or token in URL')
-      setLoading(false)
-      return
-    }
-
-    requestJson(unsubscribeGetContract, { query: { email, token } })
-      .then((response) => {
-        setData(response)
-      })
-      .catch((err: unknown) => {
-        const message = getErrorMessage(err, 'Failed to validate unsubscribe link')
-        setError(message)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [email, token])
-
-  const handleUnsubscribe = async (type: 'all' | 'marketing' | 'updates' | 'notifications') => {
+  const hasParams = Boolean(email) && Boolean(token)
+  const query = useUnsubscribe(email ?? undefined, token ?? undefined)
+  const unsubscribe = useUnsubscribeMutation()
+
+  const data = query.data ?? null
+  const loading = hasParams && query.isLoading
+  const processing = unsubscribe.isPending
+  const unsubscribed = unsubscribe.isSuccess
+  const error = !hasParams
+    ? 'Missing email or token in URL'
+    : query.isError
+      ? getErrorMessage(query.error, 'Failed to validate unsubscribe link')
+      : unsubscribe.isError
+        ? getErrorMessage(unsubscribe.error, 'Failed to process unsubscribe request')
+        : null
+
+  const handleUnsubscribe = (type: UnsubscribeType) => {
     if (!email || !token) return
-
-    setProcessing(true)
-
-    try {
-      await requestJson(unsubscribePostContract, {
-        body: { email, token, type },
-      })
-
-      setUnsubscribed(true)
-      if (data) {
-        const validTypes = ['all', 'marketing', 'updates', 'notifications'] as const
-        if (validTypes.includes(type)) {
-          if (type === 'all') {
-            setData({
-              ...data,
-              currentPreferences: {
-                ...data.currentPreferences,
-                unsubscribeAll: true,
-              },
-            })
-          } else {
-            const propertyKey = `unsubscribe${type.charAt(0).toUpperCase()}${type.slice(1)}` as
-              | 'unsubscribeMarketing'
-              | 'unsubscribeUpdates'
-              | 'unsubscribeNotifications'
-            setData({
-              ...data,
-              currentPreferences: {
-                ...data.currentPreferences,
-                [propertyKey]: true,
-              },
-            })
-          }
-        }
-      }
-    } catch (err: unknown) {
-      const message = getErrorMessage(err, 'Failed to process unsubscribe request')
-      setError(message)
-    } finally {
-      setProcessing(false)
-    }
+    unsubscribe.mutate({ email, token, type })
   }
 
   if (loading) {

apps/sim/hooks/queries/unsubscribe.ts

@@ -0,0 +1,76 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { requestJson } from '@/lib/api/client/request'
+import {
+  type UnsubscribeActionResponse,
+  type UnsubscribeData,
+  type UnsubscribeType,
+  unsubscribeGetContract,
+  unsubscribePostContract,
+} from '@/lib/api/contracts/user'
+
+export const unsubscribeKeys = {
+  all: ['unsubscribe'] as const,
+  details: () => [...unsubscribeKeys.all, 'detail'] as const,
+  detail: (email?: string, token?: string) =>
+    [...unsubscribeKeys.details(), email ?? '', token ?? ''] as const,
+}
+
+async function fetchUnsubscribe(
+  email: string,
+  token: string,
+  signal?: AbortSignal
+): Promise<UnsubscribeData> {
+  return requestJson(unsubscribeGetContract, { query: { email, token }, signal })
+}
+
+/**
+ * Validates an unsubscribe link and loads the recipient's current email preferences.
+ * Auto-runs on mount once both `email` and `token` are present.
+ */
+export function useUnsubscribe(email?: string, token?: string) {
+  return useQuery({
+    queryKey: unsubscribeKeys.detail(email, token),
+    queryFn: ({ signal }) => fetchUnsubscribe(email as string, token as string, signal),
+    enabled: Boolean(email) && Boolean(token),
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+  })
+}
+
+interface UnsubscribeVariables {
+  email: string
+  token: string
+  type: UnsubscribeType
+}
+
+/**
+ * Submits an unsubscribe action and reconciles the cached preferences so the
+ * affected option immediately reflects the unsubscribed state.
+ */
+export function useUnsubscribeMutation() {
+  const queryClient = useQueryClient()
+  return useMutation<UnsubscribeActionResponse, Error, UnsubscribeVariables>({
+    mutationFn: ({ email, token, type }) =>
+      requestJson(unsubscribePostContract, { body: { email, token, type } }),
+    onSuccess: (_data, { email, token, type }) => {
+      const key = unsubscribeKeys.detail(email, token)
+      queryClient.setQueryData<UnsubscribeData>(key, (previous) => {
+        if (!previous) return previous
+        const preferenceKey =
+          type === 'all'
+            ? 'unsubscribeAll'
+            : (`unsubscribe${type.charAt(0).toUpperCase()}${type.slice(1)}` as
+                | 'unsubscribeMarketing'
+                | 'unsubscribeUpdates'
+                | 'unsubscribeNotifications')
+        return {
+          ...previous,
+          currentPreferences: {
+            ...previous.currentPreferences,
+            [preferenceKey]: true,
+          },
+        }
+      })
+    },
+  })
+}

apps/sim/lib/api/contracts/user.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod'
-import { defineRouteContract } from '@/lib/api/contracts/types'
+import { type ContractJsonResponse, defineRouteContract } from '@/lib/api/contracts/types'
 import { isSameOrigin } from '@/lib/core/utils/validation'
 
 export const userProfileSchema = z.object({
@@ -259,6 +259,11 @@ export const unsubscribePostContract = defineRouteContract({
   },
 })
 
+export type UnsubscribeData = ContractJsonResponse<typeof unsubscribeGetContract>
+export type UnsubscribeActionResponse = ContractJsonResponse<typeof unsubscribePostContract>
+export type UnsubscribeBody = z.input<typeof unsubscribeBodySchema>
+export type UnsubscribeType = NonNullable<UnsubscribeBody['type']>
+
 export const usageLogsQuerySchema = z.object({
   source: z.enum(['workflow', 'wand', 'copilot']).optional(),
   workspaceId: z.string().optional(),