Add saved search functionality: implement applySavedSearch method for loading bookmarked filters and location.

Author: MartinBraquet

web/components/filters/search.tsx

@@ -2,7 +2,7 @@ import {QuestionMarkCircleIcon} from '@heroicons/react/24/outline'
 import {XMarkIcon} from '@heroicons/react/24/solid'
 import clsx from 'clsx'
 import {DisplayUser} from 'common/api/user-types'
-import {FilterFields} from 'common/filters'
+import {FilterFields, OriginLocation} from 'common/filters'
 import {Profile} from 'common/profiles/profile'
 import {DisplayOptions} from 'common/profiles-rendering'
 import {debounce as debounceFn} from 'lodash'
@@ -39,6 +39,10 @@ export const Search = forwardRef<
     locationFilterProps: LocationFilterProps
     bookmarkedSearches: BookmarkedSearchesType[]
     refreshBookmarkedSearches: () => void
+    applySavedSearch: (
+      filters: Partial<FilterFields>,
+      location: {location?: OriginLocation | null; radius?: number} | null,
+    ) => void
     profileCount: number | undefined
     activeFilterCount?: number
     openFilters?: () => void
@@ -62,6 +66,7 @@ export const Search = forwardRef<
     filters,
     bookmarkedSearches,
     refreshBookmarkedSearches,
+    applySavedSearch,
     starredUsers,
     refreshStars,
     profileCount,
@@ -279,6 +284,7 @@ export const Search = forwardRef<
             bookmarkedSearches={bookmarkedSearches}
             open={openBookmarks}
             setOpen={setOpenBookmarks}
+            applySavedSearch={applySavedSearch}
           />
 
           <BookmarkStarButton

web/components/filters/use-filters.ts

@@ -5,7 +5,7 @@ import {debug} from 'common/logger'
 import {kmToMiles} from 'common/measurement-utils'
 import {Profile, ProfileRow} from 'common/profiles/profile'
 import {removeNullOrUndefinedProps} from 'common/util/object'
-import {debounce, isEqual, mapValues, omitBy} from 'lodash'
+import {debounce, isEqual, mapValues, omit, omitBy} from 'lodash'
 import {useCallback, useEffect, useRef} from 'react'
 import {useIsLooking} from 'web/hooks/use-is-looking'
 import {useMeasurementSystem} from 'web/hooks/use-measurement-system'
@@ -169,6 +169,26 @@ export const useFilters = (you: Profile | undefined, fromSignup?: boolean) => {
     setRaisedInLocation(undefined)
   }
 
+  // Loads a bookmarked search back into the grid. Like applyLookingForFilters this *replaces* the
+  // current search rather than merging into it — a saved search stands for the whole set of criteria
+  // that was saved, so leftovers from the current one would silently narrow it.
+  // Same single-setFilters-call constraint as applyLookingForFilters (see the comment there).
+  // The saved row only stores the "lives near" location object, not the "grew up near" one, so the
+  // raised_in_* coordinates are dropped instead of being applied as an unlabeled filter that the
+  // raised-in effect would clear on the next mount anyway.
+  const applySavedSearch = (
+    savedFilters: Partial<FilterFields>,
+    savedLocation: {location?: OriginLocation | null; radius?: number} | null | undefined,
+  ) => {
+    setFilters({
+      ...baseFilters,
+      ...omit(savedFilters, ['raised_in_lat', 'raised_in_lon', 'raised_in_radius']),
+    })
+    setRaisedInLocation(undefined)
+    setLocation(savedLocation?.location ?? undefined)
+    if (savedLocation?.radius) setRadius(savedLocation.radius)
+  }
+
   const setLookingForFilters = (checked: boolean) => {
     applyLookingForFilters(checked ? you : undefined)
   }
@@ -197,6 +217,7 @@ export const useFilters = (you: Profile | undefined, fromSignup?: boolean) => {
     clearFilters,
     setLookingForFilters,
     applyLookingForFilters,
+    applySavedSearch,
     isLookingForFilters,
     locationFilterProps,
     raisedInLocationFilterProps,

web/components/profiles/profiles-home.tsx

@@ -71,6 +71,7 @@ export function ProfilesHome() {
     clearFilters,
     setLookingForFilters,
     applyLookingForFilters,
+    applySavedSearch,
     isLookingForFilters,
     locationFilterProps,
     raisedInLocationFilterProps,
@@ -378,6 +379,7 @@ export function ProfilesHome() {
           locationFilterProps={locationFilterProps}
           bookmarkedSearches={bookmarkedSearches}
           refreshBookmarkedSearches={refreshBookmarkedSearches}
+          applySavedSearch={applySavedSearch}
           profileCount={profileCount}
           activeFilterCount={activeFilterCount}
           filtersElement={filtersElement}

web/components/searches/button.tsx

@@ -1,7 +1,7 @@
-import {BookmarkIcon, XMarkIcon} from '@heroicons/react/24/outline'
+import {BookmarkIcon, MagnifyingGlassIcon, XMarkIcon} from '@heroicons/react/24/outline'
 import clsx from 'clsx'
 import {DisplayUser} from 'common/api/user-types'
-import {FilterFields} from 'common/filters'
+import {FilterFields, OriginLocation} from 'common/filters'
 import {formatFilters, locationType} from 'common/filters-format'
 import {User} from 'common/user'
 import {Users} from 'lucide-react'
@@ -19,15 +19,20 @@ import {useMeasurementSystem} from 'web/hooks/use-measurement-system'
 import {useUser} from 'web/hooks/use-user'
 import {api} from 'web/lib/api'
 import {useT} from 'web/lib/locale'
+import {track} from 'web/lib/service/analytics'
 import {deleteBookmarkedSearch} from 'web/lib/supabase/searches'
 
 export function BookmarkSearchButton(props: {
   bookmarkedSearches: BookmarkedSearchesType[]
   refreshBookmarkedSearches: () => void
   open: boolean
   setOpen: (checked: boolean) => void
+  applySavedSearch?: (
+    filters: Partial<FilterFields>,
+    location: {location?: OriginLocation | null; radius?: number} | null,
+  ) => void
 }) {
-  const {bookmarkedSearches, refreshBookmarkedSearches, open, setOpen} = props
+  const {bookmarkedSearches, refreshBookmarkedSearches, open, setOpen, applySavedSearch} = props
   const user = useUser()
 
   const t = useT()
@@ -51,6 +56,7 @@ export function BookmarkSearchButton(props: {
         user={user}
         bookmarkedSearches={bookmarkedSearches}
         refreshBookmarkedSearches={refreshBookmarkedSearches}
+        applySavedSearch={applySavedSearch}
       />
     </>
   )
@@ -74,8 +80,12 @@ function ButtonModal(props: {
   user: User
   bookmarkedSearches: BookmarkedSearchesType[]
   refreshBookmarkedSearches: () => void
+  applySavedSearch?: (
+    filters: Partial<FilterFields>,
+    location: {location?: OriginLocation | null; radius?: number} | null,
+  ) => void
 }) {
-  const {open, setOpen, bookmarkedSearches, refreshBookmarkedSearches} = props
+  const {open, setOpen, bookmarkedSearches, refreshBookmarkedSearches, applySavedSearch} = props
   const t = useT()
   const choicesIdsToLabels = useChoicesContext()
   const {measurementSystem} = useMeasurementSystem()
@@ -116,6 +126,27 @@ function ButtonModal(props: {
                           )?.join(' • ')}
                         </div>
                       </div>
+                      {applySavedSearch && (
+                        <button
+                          data-testid="apply-saved-search"
+                          onClick={() => {
+                            applySavedSearch(
+                              (search.search_filters ?? {}) as Partial<FilterFields>,
+                              search.location as {
+                                location?: OriginLocation | null
+                                radius?: number
+                              } | null,
+                            )
+                            track('bookmarked_searches apply', {id: search.id})
+                            setOpen(false)
+                          }}
+                          className="inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-canvas-300 bg-canvas-0 px-2.5 h-8 text-xs font-medium text-ink-600 hover:border-primary-400 hover:bg-primary-50 hover:text-primary-700 transition-all focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-1"
+                          aria-label={t('saved_searches.apply', 'Apply this search')}
+                        >
+                          <MagnifyingGlassIcon className="h-4 w-4" />
+                          {t('saved_searches.apply_short', 'Apply')}
+                        </button>
+                      )}
                       <button
                         onClick={async () => {
                           await deleteBookmarkedSearch(search.id)