Add support for language filter based on signup locale in useFilters

web/components/filters/use-filters.ts

@@ -11,11 +11,25 @@ import {debounce, isEqual} from 'lodash'
 import {useCallback, useEffect} from 'react'
 import {useIsLooking} from 'web/hooks/use-is-looking'
 import {usePersistentLocalState} from 'web/hooks/use-persistent-local-state'
+import {useLocale} from 'web/lib/locale'
 
-export const useFilters = (you: Profile | undefined) => {
+export const useFilters = (you: Profile | undefined, fromSignup?: boolean) => {
   const isLooking = useIsLooking()
+  const {locale} = useLocale()
+
+  // Set French as default language filter if from signup and locale is French
+  const getInitialFilters = (): Partial<FilterFields> => {
+    const baseFilters = isLooking
+      ? initialFilters
+      : {...initialFilters, orderBy: 'created_time' as const}
+    if (fromSignup && locale === 'fr') {
+      return {...baseFilters, languages: ['french']}
+    }
+    return baseFilters
+  }
+
   const [filters, setFilters] = usePersistentLocalState<Partial<FilterFields>>(
-    isLooking ? initialFilters : {...initialFilters, orderBy: 'created_time'},
+    getInitialFilters(),
     'profile-filters-4',
   )
 

web/components/profiles/profiles-home.tsx

@@ -27,6 +27,9 @@ import {getStars} from 'web/lib/supabase/stars'
 export function ProfilesHome() {
   const user = useUser()
   const you = useProfile()
+  const router = useRouter()
+  const {query} = router
+  const fromSignup = query.fromSignup === 'true'
 
   const {
     filters,
@@ -36,7 +39,7 @@ export function ProfilesHome() {
     isYourFilters,
     locationFilterProps,
     raisedInLocationFilterProps,
-  } = useFilters(you ?? undefined)
+  } = useFilters(you ?? undefined, fromSignup)
 
   const [profiles, setProfiles] = usePersistentInMemoryState<Profile[] | undefined>(
     undefined,
@@ -57,9 +60,6 @@ export function ProfilesHome() {
   const t = useT()
   const {locale} = useLocale()
   const isClearedFilters = useIsClearedFilters(filters)
-  const router = useRouter()
-  const {query} = router
-  const fromSignup = query.fromSignup === 'true'
   const isMobile = useIsMobile()
   const [sendScrollWarning, setSendScrollWarning] = useState(true)
   const [recentlyHiddenIds, setRecentlyHiddenIds] = useState<string[]>([])