Store disableAds in convex

Author: tannerlinsley

convex/users.ts

@@ -2,6 +2,7 @@ import { v } from 'convex/values'
 import { mutation, query, QueryCtx } from './_generated/server'
 import { Capability, CapabilitySchema } from './schema'
 import { getCurrentUserConvex } from './auth'
+import { Id } from './_generated/dataModel'
 
 export const updateUserCapabilities = mutation({
   args: {
@@ -82,53 +83,19 @@ async function requireCapability(ctx: QueryCtx, capability: Capability) {
 }
 
 // Toggle ad preference (only for users with disableAds capability)
-export const toggleAdPreference = mutation({
-  args: {},
-  handler: async (ctx) => {
-    const currentUser = await getCurrentUserConvex(ctx)
-    if (!currentUser) {
-      throw new Error('Not authenticated')
-    }
-
-    // Check if user has capability to disable ads
-    if (!currentUser.capabilities.includes('disableAds')) {
-      throw new Error('User does not have permission to disable ads')
-    }
-
-    const currentAdsDisabled = currentUser.adsDisabled ?? false
-    
-    await ctx.db.patch(currentUser._id, {
-      adsDisabled: !currentAdsDisabled,
-    })
-
-    return {
-      adsDisabled: !currentAdsDisabled,
-    }
-  },
-})
-
-// Set ad preference (only for users with disableAds capability)
-export const setAdPreference = mutation({
+export const updateAdPreference = mutation({
   args: {
     adsDisabled: v.boolean(),
   },
   handler: async (ctx, args) => {
-    const currentUser = await getCurrentUserConvex(ctx)
-    if (!currentUser) {
-      throw new Error('Not authenticated')
-    }
-
-    // Check if user has capability to disable ads
-    if (!currentUser.capabilities.includes('disableAds')) {
-      throw new Error('User does not have permission to disable ads')
-    }
+    // Validate admin capability
+    const { currentUser } = await requireCapability(ctx, 'disableAds')
 
-    await ctx.db.patch(currentUser._id, {
+    // Update target user's capabilities
+    await ctx.db.patch(currentUser.userId as Id<'users'>, {
       adsDisabled: args.adsDisabled,
     })
 
-    return {
-      adsDisabled: args.adsDisabled,
-    }
+    return { success: true }
   },
 })

src/hooks/useAdPreference.ts

@@ -1,48 +1,19 @@
-import { useConvexMutation } from '@convex-dev/react-query'
-import { useQueryClient } from '@tanstack/react-query'
-import { api } from 'convex/_generated/api'
 import { useCurrentUserQuery } from './useCurrentUser'
 
-export function useToggleAdPreference() {
-  const queryClient = useQueryClient()
-  
-  return useConvexMutation(api.users.toggleAdPreference, {
-    onSuccess: () => {
-      // Invalidate current user query to refresh the ad preference
-      queryClient.invalidateQueries({
-        queryKey: ['convex', api.auth.getCurrentUser, {}],
-      })
-    },
-  })
-}
-
-export function useSetAdPreference() {
-  const queryClient = useQueryClient()
-  
-  return useConvexMutation(api.users.setAdPreference, {
-    onSuccess: () => {
-      // Invalidate current user query to refresh the ad preference
-      queryClient.invalidateQueries({
-        queryKey: ['convex', api.auth.getCurrentUser, {}],
-      })
-    },
-  })
-}
-
 // Legacy hook for backward compatibility - now uses current user query
 export function useAdsPreference() {
   const userQuery = useCurrentUserQuery()
-  
+
   if (userQuery.isLoading || !userQuery.data) {
     return { adsEnabled: true } // Default to showing ads while loading or not authenticated
   }
-  
+
   const user = userQuery.data
   const adsDisabled = user.adsDisabled ?? false
   const canDisableAds = user.capabilities.includes('disableAds')
-  
+
   // Ads are enabled if user can't disable them OR if they haven't disabled them
   const adsEnabled = !canDisableAds || !adsDisabled
-  
+
   return { adsEnabled }
-}
+}

src/routes/_libraries/account.tsx

@@ -1,9 +1,9 @@
-import { useToggleAdPreference } from '~/hooks/useAdPreference'
 import { FaSignOutAlt } from 'react-icons/fa'
-import { Authenticated, Unauthenticated } from 'convex/react'
+import { Authenticated, Unauthenticated, useMutation } from 'convex/react'
 import { Link, redirect } from '@tanstack/react-router'
 import { authClient } from '~/utils/auth.client'
 import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
+import { api } from 'convex/_generated/api'
 
 export const Route = createFileRoute({
   component: AccountPage,
@@ -12,14 +12,28 @@ export const Route = createFileRoute({
 function UserSettings() {
   const userQuery = useCurrentUserQuery()
   // Use current user query directly instead of separate ad preference query
-  const toggleAdPreferenceMutation = useToggleAdPreference()
-  
+  const updateAdPreferenceMutation = useMutation(
+    api.users.updateAdPreference
+  ).withOptimisticUpdate((localStore, args) => {
+    const { adsDisabled } = args
+    const currentValue = localStore.getQuery(api.auth.getCurrentUser)
+    if (currentValue !== undefined) {
+      localStore.setQuery(api.auth.getCurrentUser, {}, {
+        ...currentValue,
+        adsDisabled: adsDisabled,
+      } as any)
+    }
+  })
+
   // Get values directly from the current user data
   const adsDisabled = userQuery.data?.adsDisabled ?? false
-  const canDisableAds = userQuery.data?.capabilities.includes('disableAds') ?? false
-  
-  const handleToggleAds = () => {
-    toggleAdPreferenceMutation.mutate()
+  const canDisableAds =
+    userQuery.data?.capabilities.includes('disableAds') ?? false
+
+  const handleToggleAds = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateAdPreferenceMutation({
+      adsDisabled: e.target.checked,
+    })
   }
 
   const signOut = async () => {
@@ -60,7 +74,7 @@ function UserSettings() {
                     className="h-4 w-4 accent-blue-600 my-1"
                     checked={adsDisabled}
                     onChange={handleToggleAds}
-                    disabled={userQuery.isLoading || toggleAdPreferenceMutation.isPending}
+                    disabled={userQuery.isLoading}
                     aria-label="Disable Ads"
                   />
                   <div>