Migrate ad preference management from local storage to Convex

Co-authored-by: tannerlinsley <tannerlinsley@gmail.com>

Author: cursoragent

convex/schema.ts

@@ -31,6 +31,7 @@ const schema = defineSchema({
     capabilities: v.array(
       v.union(...validCapabilities.map((cap) => v.literal(cap)))
     ),
+    adsDisabled: v.optional(v.boolean()),
   }),
 })
 

convex/users.ts

@@ -84,3 +84,71 @@ async function requireCapability(ctx: QueryCtx, capability: Capability) {
 
   return { currentUser }
 }
+
+// Get current user's ad preference
+export const getUserAdPreference = query({
+  args: {},
+  handler: async (ctx) => {
+    const currentUser = await getCurrentUserConvex(ctx)
+    if (!currentUser) {
+      throw new Error('Not authenticated')
+    }
+
+    return {
+      adsDisabled: currentUser.adsDisabled ?? false,
+      canDisableAds: currentUser.capabilities.includes('disableAds'),
+    }
+  },
+})
+
+// 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({
+  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')
+    }
+
+    await ctx.db.patch(currentUser._id, {
+      adsDisabled: args.adsDisabled,
+    })
+
+    return {
+      adsDisabled: args.adsDisabled,
+    }
+  },
+})

src/hooks/useAdPreference.ts

@@ -0,0 +1,57 @@
+import { convexQuery, useConvexMutation } from '@convex-dev/react-query'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { api } from 'convex/_generated/api'
+
+export function useAdPreferenceQuery() {
+  return useQuery(convexQuery(api.users.getUserAdPreference, {}))
+}
+
+export function useToggleAdPreference() {
+  const queryClient = useQueryClient()
+  
+  return useConvexMutation(api.users.toggleAdPreference, {
+    onSuccess: () => {
+      // Invalidate and refetch ad preference query
+      queryClient.invalidateQueries({
+        queryKey: ['convex', api.users.getUserAdPreference, {}],
+      })
+      // Also invalidate current user query since it might contain ad preferences
+      queryClient.invalidateQueries({
+        queryKey: ['convex', api.auth.getCurrentUser, {}],
+      })
+    },
+  })
+}
+
+export function useSetAdPreference() {
+  const queryClient = useQueryClient()
+  
+  return useConvexMutation(api.users.setAdPreference, {
+    onSuccess: () => {
+      // Invalidate and refetch ad preference query
+      queryClient.invalidateQueries({
+        queryKey: ['convex', api.users.getUserAdPreference, {}],
+      })
+      // Also invalidate current user query
+      queryClient.invalidateQueries({
+        queryKey: ['convex', api.auth.getCurrentUser, {}],
+      })
+    },
+  })
+}
+
+// Legacy hook for backward compatibility - replace the useAdsPreference function
+export function useAdsPreference() {
+  const adPreferenceQuery = useAdPreferenceQuery()
+  
+  if (adPreferenceQuery.isLoading || !adPreferenceQuery.data) {
+    return { adsEnabled: true } // Default to showing ads while loading
+  }
+  
+  const { adsDisabled, canDisableAds } = adPreferenceQuery.data
+  
+  // 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,4 +1,4 @@
-import { useUserSettingsStore } from '~/stores/userSettings'
+import { useAdPreferenceQuery, useToggleAdPreference } from '~/hooks/useAdPreference'
 import { FaSignOutAlt } from 'react-icons/fa'
 import { Authenticated, Unauthenticated } from 'convex/react'
 import { Link, redirect } from '@tanstack/react-router'
@@ -11,10 +11,17 @@ export const Route = createFileRoute({
 
 function UserSettings() {
   const userQuery = useCurrentUserQuery()
-  const adsDisabled = useUserSettingsStore((s) => s.settings.adsDisabled)
-  const toggleAds = useUserSettingsStore((s) => s.toggleAds)
-
-  const canDisableAds = userQuery.data?.capabilities.includes('disableAds')
+  // Replace local storage-based state with Convex-based queries
+  const adPreferenceQuery = useAdPreferenceQuery()
+  const toggleAdPreferenceMutation = useToggleAdPreference()
+  
+  // Get values from the new queries
+  const adsDisabled = adPreferenceQuery.data?.adsDisabled ?? false
+  const canDisableAds = adPreferenceQuery.data?.canDisableAds ?? false
+  
+  const handleToggleAds = () => {
+    toggleAdPreferenceMutation.mutate()
+  }
 
   const signOut = async () => {
     await authClient.signOut()
@@ -53,8 +60,8 @@ function UserSettings() {
                     type="checkbox"
                     className="h-4 w-4 accent-blue-600 my-1"
                     checked={adsDisabled}
-                    onChange={toggleAds}
-                    disabled={userQuery.isLoading}
+                    onChange={handleToggleAds}
+                    disabled={adPreferenceQuery.isLoading || toggleAdPreferenceMutation.isPending}
                     aria-label="Disable Ads"
                   />
                   <div>

src/stores/userSettings.ts

@@ -1,55 +1,32 @@
 import { create } from 'zustand'
-import { persist, createJSONStorage } from 'zustand/middleware'
-import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
+// Remove persist and createJSONStorage imports since we no longer use localStorage
+// import { persist, createJSONStorage } from 'zustand/middleware'
+// Remove the useCurrentUserQuery import since we'll use the new hook
+// import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
+
+// Update the export to use the new hook
+export { useAdsPreference } from '~/hooks/useAdPreference'
 
 export type UserSettings = {
-  adsDisabled: boolean
+  // Remove adsDisabled since it's now handled by Convex
+  // Other settings can be added here in the future
 }
 
 type UserSettingsState = {
   settings: UserSettings
   hasHydrated: boolean
   setHasHydrated: (value: boolean) => void
-  toggleAds: () => void
+  // Remove toggleAds since it's now handled by the new hooks
 }
 
-export const useUserSettingsStore = create<UserSettingsState>()(
-  persist(
-    (set, get) => ({
-      settings: {
-        adsDisabled: false,
-      },
-      hasHydrated: false,
-      setHasHydrated: (value) => set({ hasHydrated: value }),
-      toggleAds: () =>
-        set({
-          settings: {
-            ...get().settings,
-            adsDisabled: !get().settings.adsDisabled,
-          },
-        }),
-    }),
-    {
-      name: 'user_settings_v1',
-      storage: createJSONStorage(() => localStorage),
-      onRehydrateStorage: () => (state, error) => {
-        if (!state || error) return
-        state.setHasHydrated(true)
-      },
-      partialize: (state) => ({ settings: state.settings }),
-    }
-  )
-)
-
-export function useAdsPreference() {
-  const userQuery = useCurrentUserQuery()
-  const { settings } = useUserSettingsStore((s) => ({
-    settings: s.settings,
-  }))
+export const useUserSettingsStore = create<UserSettingsState>()((set, get) => ({
+  settings: {
+    // Remove adsDisabled initialization
+  },
+  hasHydrated: true, // No need for hydration since we're not using persistence
+  setHasHydrated: (value) => set({ hasHydrated: value }),
+  // Remove toggleAds function
+}))
 
-  const adsEnabled = userQuery.data
-    ? userQuery.data.capabilities.includes('disableAds') &&
-      !settings.adsDisabled
-    : true
-  return { adsEnabled }
-}
+// Remove the persist wrapper and localStorage configuration
+// The useAdsPreference function is now exported from useAdPreference.ts