From 552af7bb6b6a845df36e86e32a1f2e22c6f16dd2 Mon Sep 17 00:00:00 2001 From: MartinBraquet Date: Sun, 19 Oct 2025 21:25:17 +0200 Subject: [PATCH] Add romantic type in filters --- common/src/filters.ts | 2 + web/components/filters/desktop-filters.tsx | 42 ++++++++++++- web/components/filters/mobile-filters.tsx | 35 ++++++++++- web/components/filters/pref-gender-filter.tsx | 4 +- web/components/filters/romantic-filter.tsx | 61 +++++++++++++++++++ web/components/filters/search.tsx | 3 + web/components/filters/use-filters.ts | 8 +-- web/lib/util/convert-relationship-type.ts | 7 ++- 8 files changed, 151 insertions(+), 11 deletions(-) create mode 100644 web/components/filters/romantic-filter.tsx diff --git a/common/src/filters.ts b/common/src/filters.ts index b0504d0a..c1955aaa 100644 --- a/common/src/filters.ts +++ b/common/src/filters.ts @@ -21,6 +21,7 @@ export type FilterFields = { ProfileRow, | 'wants_kids_strength' | 'pref_relation_styles' + | 'pref_romantic_styles' | 'is_smoker' | 'has_kids' | 'pref_gender' @@ -60,6 +61,7 @@ export const initialFilters: Partial = { wants_kids_strength: undefined, is_smoker: undefined, pref_relation_styles: undefined, + pref_romantic_styles: undefined, pref_gender: undefined, shortBio: undefined, orderBy: 'created_time', diff --git a/web/components/filters/desktop-filters.tsx b/web/components/filters/desktop-filters.tsx index 5830cb5e..a7341943 100644 --- a/web/components/filters/desktop-filters.tsx +++ b/web/components/filters/desktop-filters.tsx @@ -1,5 +1,5 @@ import {ChevronDownIcon, ChevronUpIcon} from '@heroicons/react/outline' -import {RelationshipType} from 'web/lib/util/convert-relationship-type' +import {RelationshipType, RomanticType} from 'web/lib/util/convert-relationship-type' import {ReactNode} from 'react' import {FaUserGroup} from 'react-icons/fa6' import {Col} from 'web/components/layout/col' @@ -19,6 +19,8 @@ import DropdownMenu from "web/components/comments/dropdown-menu"; import {KidsLabel, wantsKidsLabelsWithIcon} from "web/components/filters/wants-kids-filter"; import {hasKidsLabels} from "common/has-kids"; import {HasKidsLabel} from "web/components/filters/has-kids-filter"; +import {RomanticFilter, RomanticFilterText} from "web/components/filters/romantic-filter"; +import {FaHeart} from "react-icons/fa"; export function DesktopFilters(props: { filters: Partial @@ -28,6 +30,7 @@ export function DesktopFilters(props: { setYourFilters: (checked: boolean) => void isYourFilters: boolean locationFilterProps: LocationFilterProps + includeRelationshipFilters: boolean | undefined }) { const { filters, @@ -37,6 +40,7 @@ export function DesktopFilters(props: { setYourFilters, isYourFilters, locationFilterProps, + includeRelationshipFilters, } = props return ( @@ -47,6 +51,7 @@ export function DesktopFilters(props: { on={isYourFilters} hidden={!youProfile} /> + {/* CONNECTION */} ( @@ -73,6 +78,7 @@ export function DesktopFilters(props: { popoverClassName="bg-canvas-50" menuWidth="w-50" /> + {/* LOCATION */} ( @@ -142,7 +148,7 @@ export function DesktopFilters(props: { popoverClassName="bg-canvas-50" /> - {/* PREFERRED GENDER */} + {/* GENDER THEY SEEK */} ( + {includeRelationshipFilters && <> + + {/* CONNECTION */} + ( + + + + + } + /> + )} + dropdownMenuContent={ + + } + popoverClassName="bg-canvas-50" + menuWidth="w-50" + /> + {/* WANTS KIDS */} + + } + {/* Short Bios */} @@ -28,6 +29,7 @@ function MobileFilters(props: { setYourFilters: (checked: boolean) => void isYourFilters: boolean locationFilterProps: LocationFilterProps + includeRelationshipFilters: boolean | undefined }) { const { filters, @@ -37,6 +39,7 @@ function MobileFilters(props: { setYourFilters, isYourFilters, locationFilterProps, + includeRelationshipFilters, } = props const [openFilter, setOpenFilter] = useState(undefined) @@ -60,6 +63,7 @@ function MobileFilters(props: { hidden={!youProfile} /> + {/* RELATIONSHIP STYLE */} + {/* LOCATION */} + {/* AGE RANGE */} + {/* GENDER */} + {includeRelationshipFilters && <> + + {/* ROMANTIC STYLE */} + + } + > + + + {/* WANTS KIDS */} + } + {/* Short Bios */} - Interested in + Gender they seek: - Interested in + Gender they seek: {pref_gender.map((gender) => { return ( Any relationship + ) + } + + const convertedTypes = relationship.map((r) => + convertRomanticTypes(r) + ) + + if (length > 1) { + return ( + + + Multiple + + + ) + } + return ( +
+ + {stringOrStringArrayToText({ + text: convertedTypes, + capitalizeFirstLetterOption: true, + })}{' '} + +
+ ) +} + +export function RomanticFilter(props: { + filters: Partial + updateFilter: (newState: Partial) => void +}) { + const {filters, updateFilter} = props + return ( + { + updateFilter({pref_romantic_styles: c}) + }} + /> + ) +} diff --git a/web/components/filters/search.tsx b/web/components/filters/search.tsx index 659f39be..5a27cbc5 100644 --- a/web/components/filters/search.tsx +++ b/web/components/filters/search.tsx @@ -133,6 +133,7 @@ export const Search = (props: { const [openBookmarks, setOpenBookmarks] = useState(false); const [openStarBookmarks, setOpenStarBookmarks] = useState(false); const user = useUser() + const youSeekingRelationship = youProfile?.pref_relation_styles?.includes('relationship') useEffect(() => { if (isHolding) return; @@ -216,6 +217,7 @@ export const Search = (props: { setYourFilters={setYourFilters} isYourFilters={isYourFilters} locationFilterProps={locationFilterProps} + includeRelationshipFilters={youSeekingRelationship} /> diff --git a/web/components/filters/use-filters.ts b/web/components/filters/use-filters.ts index 93b6e957..3b5b715c 100644 --- a/web/components/filters/use-filters.ts +++ b/web/components/filters/use-filters.ts @@ -83,6 +83,7 @@ export const useFilters = (you: Profile | undefined) => { pref_age_max: (you?.pref_age_max ?? MAX_INT) < 100 ? you?.pref_age_max : undefined, pref_age_min: (you?.pref_age_min ?? MIN_INT) > 18 ? you?.pref_age_min : undefined, pref_relation_styles: you?.pref_relation_styles.length ? you.pref_relation_styles : undefined, + pref_romantic_styles: you?.pref_romantic_styles?.length ? you.pref_romantic_styles : undefined, wants_kids_strength: wantsKidsDatabaseToWantsKidsFilter( (you?.wants_kids_strength ?? 2) as wantsKidsDatabase ), @@ -96,10 +97,9 @@ export const useFilters = (you: Profile | undefined) => { !!you && (!location || location.id === you.geodb_city_id) && isEqual(filters.genders?.length ? filters.genders : undefined, yourFilters.genders?.length ? yourFilters.genders : undefined) && - // isEqual(filters.pref_gender?.length ? filters.pref_gender[0] : undefined, you.gender) && - // you?.pref_gender.length && - // filters.pref_gender.length == 1 && - // filters.pref_gender[0] == you.gender && + filters.pref_gender?.length == 1 && isEqual(filters.pref_gender?.length ? filters.pref_gender[0] : undefined, you.gender) && + isEqual(new Set(filters.pref_romantic_styles), new Set(you.pref_romantic_styles)) && + isEqual(new Set(filters.pref_relation_styles), new Set(you.pref_relation_styles)) && filters.pref_age_max == yourFilters.pref_age_max && filters.pref_age_min == yourFilters.pref_age_min && filters.wants_kids_strength == yourFilters.wants_kids_strength diff --git a/web/lib/util/convert-relationship-type.ts b/web/lib/util/convert-relationship-type.ts index 9396906a..51abd0a9 100644 --- a/web/lib/util/convert-relationship-type.ts +++ b/web/lib/util/convert-relationship-type.ts @@ -1,7 +1,12 @@ -import {REVERTED_RELATIONSHIP_CHOICES} from "web/components/filters/choices"; +import {REVERTED_RELATIONSHIP_CHOICES, REVERTED_ROMANTIC_CHOICES} from "web/components/filters/choices"; export type RelationshipType = keyof typeof REVERTED_RELATIONSHIP_CHOICES +export type RomanticType = keyof typeof REVERTED_ROMANTIC_CHOICES export function convertRelationshipType(relationshipType: RelationshipType) { return REVERTED_RELATIONSHIP_CHOICES[relationshipType] } + +export function convertRomanticTypes(romanticType: RomanticType) { + return REVERTED_ROMANTIC_CHOICES[romanticType] +}