Skip to content

Commit 552af7b

Browse files
MartinBraquetMartinBraquet
committed
Add romantic type in filters
1 parent 92980f7 commit 552af7b

8 files changed

Lines changed: 151 additions & 11 deletions

File tree

‎common/src/filters.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export type FilterFields = {
2121
ProfileRow,
2222
| 'wants_kids_strength'
2323
| 'pref_relation_styles'
24+
| 'pref_romantic_styles'
2425
| 'is_smoker'
2526
| 'has_kids'
2627
| 'pref_gender'
@@ -60,6 +61,7 @@ export const initialFilters: Partial<FilterFields> = {
6061
wants_kids_strength: undefined,
6162
is_smoker: undefined,
6263
pref_relation_styles: undefined,
64+
pref_romantic_styles: undefined,
6365
pref_gender: undefined,
6466
shortBio: undefined,
6567
orderBy: 'created_time',

‎web/components/filters/desktop-filters.tsx‎

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {ChevronDownIcon, ChevronUpIcon} from '@heroicons/react/outline'
2-
import {RelationshipType} from 'web/lib/util/convert-relationship-type'
2+
import {RelationshipType, RomanticType} from 'web/lib/util/convert-relationship-type'
33
import {ReactNode} from 'react'
44
import {FaUserGroup} from 'react-icons/fa6'
55
import {Col} from 'web/components/layout/col'
@@ -19,6 +19,8 @@ import DropdownMenu from "web/components/comments/dropdown-menu";
1919
import {KidsLabel, wantsKidsLabelsWithIcon} from "web/components/filters/wants-kids-filter";
2020
import {hasKidsLabels} from "common/has-kids";
2121
import {HasKidsLabel} from "web/components/filters/has-kids-filter";
22+
import {RomanticFilter, RomanticFilterText} from "web/components/filters/romantic-filter";
23+
import {FaHeart} from "react-icons/fa";
2224

2325
export function DesktopFilters(props: {
2426
filters: Partial<FilterFields>
@@ -28,6 +30,7 @@ export function DesktopFilters(props: {
2830
setYourFilters: (checked: boolean) => void
2931
isYourFilters: boolean
3032
locationFilterProps: LocationFilterProps
33+
includeRelationshipFilters: boolean | undefined
3134
}) {
3235
const {
3336
filters,
@@ -37,6 +40,7 @@ export function DesktopFilters(props: {
3740
setYourFilters,
3841
isYourFilters,
3942
locationFilterProps,
43+
includeRelationshipFilters,
4044
} = props
4145

4246
return (
@@ -47,6 +51,7 @@ export function DesktopFilters(props: {
4751
on={isYourFilters}
4852
hidden={!youProfile}
4953
/>
54+
5055
{/* CONNECTION */}
5156
<CustomizeableDropdown
5257
buttonContent={(open) => (
@@ -73,6 +78,7 @@ export function DesktopFilters(props: {
7378
popoverClassName="bg-canvas-50"
7479
menuWidth="w-50"
7580
/>
81+
7682
{/* LOCATION */}
7783
<CustomizeableDropdown
7884
buttonContent={(open: boolean) => (
@@ -142,7 +148,7 @@ export function DesktopFilters(props: {
142148
popoverClassName="bg-canvas-50"
143149
/>
144150

145-
{/* PREFERRED GENDER */}
151+
{/* GENDER THEY SEEK */}
146152
<CustomizeableDropdown
147153
buttonContent={(open: boolean) => (
148154
<DropdownButton
@@ -163,6 +169,35 @@ export function DesktopFilters(props: {
163169
popoverClassName="bg-canvas-50"
164170
/>
165171

172+
{includeRelationshipFilters && <>
173+
174+
{/* CONNECTION */}
175+
<CustomizeableDropdown
176+
buttonContent={(open) => (
177+
<DropdownButton
178+
open={open}
179+
content={
180+
<Row className="items-center gap-1">
181+
<FaHeart className="h-4 w-4"/>
182+
<RomanticFilterText
183+
relationship={
184+
filters.pref_romantic_styles as
185+
| RomanticType[]
186+
| undefined
187+
}
188+
highlightedClass={open ? 'text-primary-500' : undefined}
189+
/>
190+
</Row>
191+
}
192+
/>
193+
)}
194+
dropdownMenuContent={
195+
<RomanticFilter filters={filters} updateFilter={updateFilter}/>
196+
}
197+
popoverClassName="bg-canvas-50"
198+
menuWidth="w-50"
199+
/>
200+
166201
{/* WANTS KIDS */}
167202
<DropdownMenu
168203
items={[
@@ -253,6 +288,9 @@ export function DesktopFilters(props: {
253288
menuWidth="w-40"
254289
/>
255290

291+
</>
292+
}
293+
256294
{/* Short Bios */}
257295
<ShortBioToggle
258296
updateFilter={updateFilter}

‎web/components/filters/mobile-filters.tsx‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {RelationshipFilter, RelationshipFilterText,} from './relationship-filter
1010
import {MyMatchesToggle} from './my-matches-toggle'
1111
import {Profile} from 'common/love/profile'
1212
import {Gender} from 'common/gender'
13-
import {RelationshipType} from 'web/lib/util/convert-relationship-type'
13+
import {RelationshipType, RomanticType} from 'web/lib/util/convert-relationship-type'
1414
import {FilterFields} from "common/filters";
1515
import {ShortBioToggle} from "web/components/filters/short-bio-toggle";
1616
import {PrefGenderFilter, PrefGenderFilterText} from "./pref-gender-filter"
@@ -19,6 +19,7 @@ import {wantsKidsLabels} from "common/wants-kids";
1919
import {FaChild} from "react-icons/fa"
2020
import {HasKidsFilter, HasKidsLabel} from "./has-kids-filter"
2121
import {hasKidsLabels} from "common/has-kids";
22+
import {RomanticFilter, RomanticFilterText} from "web/components/filters/romantic-filter";
2223

2324
function MobileFilters(props: {
2425
filters: Partial<FilterFields>
@@ -28,6 +29,7 @@ function MobileFilters(props: {
2829
setYourFilters: (checked: boolean) => void
2930
isYourFilters: boolean
3031
locationFilterProps: LocationFilterProps
32+
includeRelationshipFilters: boolean | undefined
3133
}) {
3234
const {
3335
filters,
@@ -37,6 +39,7 @@ function MobileFilters(props: {
3739
setYourFilters,
3840
isYourFilters,
3941
locationFilterProps,
42+
includeRelationshipFilters,
4043
} = props
4144

4245
const [openFilter, setOpenFilter] = useState<string | undefined>(undefined)
@@ -60,6 +63,7 @@ function MobileFilters(props: {
6063
hidden={!youProfile}
6164
/>
6265
</Col>
66+
6367
{/* RELATIONSHIP STYLE */}
6468
<MobileFilterSection
6569
title="Seeking"
@@ -79,6 +83,7 @@ function MobileFilters(props: {
7983
>
8084
<RelationshipFilter filters={filters} updateFilter={updateFilter}/>
8185
</MobileFilterSection>
86+
8287
{/* LOCATION */}
8388
<MobileFilterSection
8489
title="Location"
@@ -103,6 +108,7 @@ function MobileFilters(props: {
103108
locationFilterProps={locationFilterProps}
104109
/>
105110
</MobileFilterSection>
111+
106112
{/* AGE RANGE */}
107113
<MobileFilterSection
108114
title="Age"
@@ -122,6 +128,7 @@ function MobileFilters(props: {
122128
>
123129
<AgeFilter filters={filters} updateFilter={updateFilter}/>
124130
</MobileFilterSection>
131+
125132
{/* GENDER */}
126133
<MobileFilterSection
127134
title="Gender"
@@ -142,7 +149,7 @@ function MobileFilters(props: {
142149

143150
{/* PREFERRED GENDER */}
144151
<MobileFilterSection
145-
title="Interested in"
152+
title="Gender they seek"
146153
openFilter={openFilter}
147154
setOpenFilter={setOpenFilter}
148155
isActive={hasAny(filters.pref_gender)}
@@ -158,6 +165,28 @@ function MobileFilters(props: {
158165
<PrefGenderFilter filters={filters} updateFilter={updateFilter}/>
159166
</MobileFilterSection>
160167

168+
{includeRelationshipFilters && <>
169+
170+
{/* ROMANTIC STYLE */}
171+
<MobileFilterSection
172+
title="Style"
173+
openFilter={openFilter}
174+
setOpenFilter={setOpenFilter}
175+
isActive={hasAny(filters.pref_romantic_styles || undefined)}
176+
selection={
177+
<RomanticFilterText
178+
relationship={filters.pref_romantic_styles as RomanticType[]}
179+
highlightedClass={
180+
hasAny(filters.pref_romantic_styles || undefined)
181+
? 'text-primary-600'
182+
: 'text-ink-900'
183+
}
184+
/>
185+
}
186+
>
187+
<RomanticFilter filters={filters} updateFilter={updateFilter}/>
188+
</MobileFilterSection>
189+
161190
{/* WANTS KIDS */}
162191
<MobileFilterSection
163192
title="Wants kids"
@@ -206,6 +235,8 @@ function MobileFilters(props: {
206235
<HasKidsFilter filters={filters} updateFilter={updateFilter}/>
207236
</MobileFilterSection>
208237

238+
</>}
239+
209240
{/* Short Bios */}
210241
<Col className="p-4 pb-2">
211242
<ShortBioToggle

‎web/components/filters/pref-gender-filter.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function PrefGenderFilterText(props: {
1515
if (!pref_gender || pref_gender.length < 1) {
1616
return (
1717
<span>
18-
<span className="hidden sm:inline">Interested in </span>
18+
<span className="hidden sm:inline">Gender they seek: </span>
1919
<span
2020
className={clsx(
2121
'text-semibold capitalize sm:normal-case',
@@ -29,7 +29,7 @@ export function PrefGenderFilterText(props: {
2929
}
3030
return (
3131
<Row className="items-center gap-0.5 font-semibold">
32-
<span className="hidden sm:inline">Interested in </span>
32+
<span className="hidden sm:inline">Gender they seek: </span>
3333
{pref_gender.map((gender) => {
3434
return (
3535
<GenderIcon

‎web/components/filters/romantic-filter.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import clsx from 'clsx'
2+
import {convertRomanticTypes, RomanticType,} from 'web/lib/util/convert-relationship-type'
3+
import stringOrStringArrayToText from 'web/lib/util/string-or-string-array-to-text'
4+
import {MultiCheckbox} from 'web/components/multi-checkbox'
5+
6+
import {ROMANTIC_CHOICES} from "web/components/filters/choices";
7+
import {FilterFields} from "common/filters";
8+
9+
export function RomanticFilterText(props: {
10+
relationship: RomanticType[] | undefined
11+
highlightedClass?: string
12+
}) {
13+
const {relationship, highlightedClass} = props
14+
const length = (relationship ?? []).length
15+
16+
if (!relationship || length < 1) {
17+
return (
18+
<span className={clsx('text-semibold', highlightedClass)}>Any relationship</span>
19+
)
20+
}
21+
22+
const convertedTypes = relationship.map((r) =>
23+
convertRomanticTypes(r)
24+
)
25+
26+
if (length > 1) {
27+
return (
28+
<span>
29+
<span className={clsx('font-semibold', highlightedClass)}>
30+
Multiple
31+
</span>
32+
</span>
33+
)
34+
}
35+
return (
36+
<div>
37+
<span className={clsx('font-semibold', highlightedClass)}>
38+
{stringOrStringArrayToText({
39+
text: convertedTypes,
40+
capitalizeFirstLetterOption: true,
41+
})}{' '}
42+
</span>
43+
</div>
44+
)
45+
}
46+
47+
export function RomanticFilter(props: {
48+
filters: Partial<FilterFields>
49+
updateFilter: (newState: Partial<FilterFields>) => void
50+
}) {
51+
const {filters, updateFilter} = props
52+
return (
53+
<MultiCheckbox
54+
selected={filters.pref_romantic_styles ?? []}
55+
choices={ROMANTIC_CHOICES as any}
56+
onChange={(c) => {
57+
updateFilter({pref_romantic_styles: c})
58+
}}
59+
/>
60+
)
61+
}

‎web/components/filters/search.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,7 @@ export const Search = (props: {
133133
const [openBookmarks, setOpenBookmarks] = useState(false);
134134
const [openStarBookmarks, setOpenStarBookmarks] = useState(false);
135135
const user = useUser()
136+
const youSeekingRelationship = youProfile?.pref_relation_styles?.includes('relationship')
136137

137138
useEffect(() => {
138139
if (isHolding) return;
@@ -216,6 +217,7 @@ export const Search = (props: {
216217
setYourFilters={setYourFilters}
217218
isYourFilters={isYourFilters}
218219
locationFilterProps={locationFilterProps}
220+
includeRelationshipFilters={youSeekingRelationship}
219221
/>
220222
</Row>
221223
<RightModal
@@ -231,6 +233,7 @@ export const Search = (props: {
231233
setYourFilters={setYourFilters}
232234
isYourFilters={isYourFilters}
233235
locationFilterProps={locationFilterProps}
236+
includeRelationshipFilters={youSeekingRelationship}
234237
/>
235238
</RightModal>
236239
<Row className={'mb-2 gap-2'}>

‎web/components/filters/use-filters.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ export const useFilters = (you: Profile | undefined) => {
8383
pref_age_max: (you?.pref_age_max ?? MAX_INT) < 100 ? you?.pref_age_max : undefined,
8484
pref_age_min: (you?.pref_age_min ?? MIN_INT) > 18 ? you?.pref_age_min : undefined,
8585
pref_relation_styles: you?.pref_relation_styles.length ? you.pref_relation_styles : undefined,
86+
pref_romantic_styles: you?.pref_romantic_styles?.length ? you.pref_romantic_styles : undefined,
8687
wants_kids_strength: wantsKidsDatabaseToWantsKidsFilter(
8788
(you?.wants_kids_strength ?? 2) as wantsKidsDatabase
8889
),
@@ -96,10 +97,9 @@ export const useFilters = (you: Profile | undefined) => {
9697
!!you &&
9798
(!location || location.id === you.geodb_city_id) &&
9899
isEqual(filters.genders?.length ? filters.genders : undefined, yourFilters.genders?.length ? yourFilters.genders : undefined) &&
99-
// isEqual(filters.pref_gender?.length ? filters.pref_gender[0] : undefined, you.gender) &&
100-
// you?.pref_gender.length &&
101-
// filters.pref_gender.length == 1 &&
102-
// filters.pref_gender[0] == you.gender &&
100+
filters.pref_gender?.length == 1 && isEqual(filters.pref_gender?.length ? filters.pref_gender[0] : undefined, you.gender) &&
101+
isEqual(new Set(filters.pref_romantic_styles), new Set(you.pref_romantic_styles)) &&
102+
isEqual(new Set(filters.pref_relation_styles), new Set(you.pref_relation_styles)) &&
103103
filters.pref_age_max == yourFilters.pref_age_max &&
104104
filters.pref_age_min == yourFilters.pref_age_min &&
105105
filters.wants_kids_strength == yourFilters.wants_kids_strength

‎web/lib/util/convert-relationship-type.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1-
import {REVERTED_RELATIONSHIP_CHOICES} from "web/components/filters/choices";
1+
import {REVERTED_RELATIONSHIP_CHOICES, REVERTED_ROMANTIC_CHOICES} from "web/components/filters/choices";
22

33
export type RelationshipType = keyof typeof REVERTED_RELATIONSHIP_CHOICES
4+
export type RomanticType = keyof typeof REVERTED_ROMANTIC_CHOICES
45

56
export function convertRelationshipType(relationshipType: RelationshipType) {
67
return REVERTED_RELATIONSHIP_CHOICES[relationshipType]
78
}
9+
10+
export function convertRomanticTypes(romanticType: RomanticType) {
11+
return REVERTED_ROMANTIC_CHOICES[romanticType]
12+
}

0 commit comments

Comments
 (0)