Add diet

Author: MartinBraquet

backend/api/src/get-profiles.ts

@@ -17,6 +17,7 @@ export type profileQueryType = {
   pref_age_max?: number | undefined,
   pref_relation_styles?: String[] | undefined,
   pref_romantic_styles?: String[] | undefined,
+  diet?: String[] | undefined,
   wants_kids_strength?: number | undefined,
   has_kids?: number | undefined,
   is_smoker?: boolean | undefined,
@@ -47,6 +48,7 @@ export const loadProfiles = async (props: profileQueryType) => {
     pref_age_max,
     pref_relation_styles,
     pref_romantic_styles,
+    diet,
     wants_kids_strength,
     has_kids,
     is_smoker,
@@ -85,6 +87,8 @@ export const loadProfiles = async (props: profileQueryType) => {
           intersection(pref_relation_styles, l.pref_relation_styles).length) &&
         (!pref_romantic_styles ||
           intersection(pref_romantic_styles, l.pref_romantic_styles).length) &&
+        (!diet ||
+          intersection(diet, l.diet).length) &&
         (!wants_kids_strength ||
           wants_kids_strength == -1 ||
           !l.wants_kids_strength ||
@@ -162,6 +166,12 @@ export const loadProfiles = async (props: profileQueryType) => {
       {pref_romantic_styles}
     ),
 
+    diet?.length &&
+    where(
+      `diet IS NULL OR diet = '{}' OR diet && $(diet)`,
+      {diet}
+    ),
+
     !!wants_kids_strength &&
     wants_kids_strength !== -1 &&
     where(

backend/email/emails/functions/mock.ts

@@ -46,7 +46,7 @@ export const sinclairProfile: ProfileRow = {
   has_kids: 0,
   is_smoker: false,
   drinks_per_month: 0,
-  is_vegetarian_or_vegan: null,
+  diet: null,
   political_beliefs: ['e/acc', 'libertarian'],
   religious_belief_strength: null,
   religious_beliefs: null,
@@ -147,7 +147,7 @@ export const jamesProfile: ProfileRow = {
   has_kids: 0,
   is_smoker: false,
   drinks_per_month: 5,
-  is_vegetarian_or_vegan: null,
+  diet: null,
   political_beliefs: ['libertarian'],
   religious_belief_strength: null,
   religious_beliefs: '',

backend/supabase/profiles.sql

@@ -27,7 +27,7 @@ CREATE TABLE IF NOT EXISTS profiles (
     height_in_inches INTEGER,
     id BIGINT GENERATED ALWAYS AS IDENTITY NOT NULL,
     is_smoker BOOLEAN,
-    is_vegetarian_or_vegan BOOLEAN,
+    diet TEXT[],
     last_modification_time TIMESTAMPTZ DEFAULT now() NOT NULL,
     looking_for_matches BOOLEAN DEFAULT TRUE NOT NULL,
     messaging_status TEXT DEFAULT 'open'::TEXT NOT NULL,

common/src/api/schema.ts

@@ -350,6 +350,7 @@ export const API = (_apiTypeCheck = {
         pref_age_max: z.coerce.number().optional(),
         pref_relation_styles: arraybeSchema.optional(),
         pref_romantic_styles: arraybeSchema.optional(),
+        diet: arraybeSchema.optional(),
         wants_kids_strength: z.coerce.number().optional(),
         has_kids: z.coerce.number().optional(),
         is_smoker: z.coerce.boolean().optional(),

common/src/api/zod-types.ts

@@ -80,7 +80,7 @@ const optionalProfilesSchema = z.object({
   education_level: z.string().optional(),
   is_smoker: z.boolean().optional(),
   drinks_per_month: z.number().min(0).optional(),
-  is_vegetarian_or_vegan: z.boolean().optional(),
+  diet: z.array(z.string()).optional(),
   has_kids: z.number().min(0).optional(),
   university: z.string().optional(),
   occupation_title: z.string().optional(),

common/src/filters.ts

@@ -22,6 +22,7 @@ export type FilterFields = {
   | 'wants_kids_strength'
   | 'pref_relation_styles'
   | 'pref_romantic_styles'
+  | 'diet'
   | 'is_smoker'
   | 'has_kids'
   | 'pref_gender'
@@ -62,6 +63,7 @@ export const initialFilters: Partial<FilterFields> = {
   is_smoker: undefined,
   pref_relation_styles: undefined,
   pref_romantic_styles: undefined,
+  diet: undefined,
   pref_gender: undefined,
   shortBio: undefined,
   orderBy: 'created_time',

common/src/supabase/schema.ts

@@ -454,7 +454,7 @@ export type Database = {
           height_in_inches: number | null
           id: number
           is_smoker: boolean | null
-          is_vegetarian_or_vegan: boolean | null
+          diet: string[] | null
           last_modification_time: string
           looking_for_matches: boolean
           messaging_status: string
@@ -502,7 +502,7 @@ export type Database = {
           height_in_inches?: number | null
           id?: number
           is_smoker?: boolean | null
-          is_vegetarian_or_vegan?: boolean | null
+          diet?: string[] | null
           last_modification_time?: string
           looking_for_matches?: boolean
           messaging_status?: string
@@ -550,7 +550,7 @@ export type Database = {
           height_in_inches?: number | null
           id?: number
           is_smoker?: boolean | null
-          is_vegetarian_or_vegan?: boolean | null
+          diet?: string[] | null
           last_modification_time?: string
           looking_for_matches?: boolean
           messaging_status?: string

web/components/filters/choices.tsx

@@ -27,6 +27,16 @@ export const POLITICAL_CHOICES = {
   'Independent / Other': 'other',
 }
 
+export const DIET_CHOICES = {
+  Omnivore: 'omnivore',
+  Vegetarian: 'veg',
+  Vegan: 'vegan',
+  Keto: 'keto',
+  Paleo: 'paleo',
+  Pescetarian: 'pescetarian',
+  Other: 'other',
+}
+
 export const REVERTED_RELATIONSHIP_CHOICES = Object.fromEntries(
   Object.entries(RELATIONSHIP_CHOICES).map(([key, value]) => [value, key])
 );
@@ -37,4 +47,8 @@ export const REVERTED_ROMANTIC_CHOICES = Object.fromEntries(
 
 export const REVERTED_POLITICAL_CHOICES = Object.fromEntries(
   Object.entries(POLITICAL_CHOICES).map(([key, value]) => [value, key])
+);
+
+export const REVERTED_DIET_CHOICES = Object.fromEntries(
+  Object.entries(DIET_CHOICES).map(([key, value]) => [value, key])
 );

web/components/filters/desktop-filters.tsx

@@ -1,5 +1,5 @@
 import {ChevronDownIcon, ChevronUpIcon} from '@heroicons/react/outline'
-import {RelationshipType, RomanticType} from 'web/lib/util/convert-relationship-type'
+import {DietType, RelationshipType, RomanticType} from 'web/lib/util/convert-types'
 import {ReactNode} from 'react'
 import {FaUserGroup} from 'react-icons/fa6'
 import {Col} from 'web/components/layout/col'
@@ -21,6 +21,7 @@ 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";
+import {DietFilter, DietFilterText} from "web/components/filters/diet-filter";
 
 export function DesktopFilters(props: {
   filters: Partial<FilterFields>
@@ -171,7 +172,7 @@ export function DesktopFilters(props: {
 
       {includeRelationshipFilters && <>
 
-        {/* CONNECTION */}
+        {/* RELATIONSHIP STYLE */}
           <CustomizeableDropdown
               buttonContent={(open) => (
                 <DropdownButton
@@ -291,6 +292,32 @@ export function DesktopFilters(props: {
       </>
       }
 
+      {/* DIET */}
+      <CustomizeableDropdown
+        buttonContent={(open) => (
+          <DropdownButton
+            open={open}
+            content={
+              <Row className="items-center gap-1">
+                <DietFilterText
+                  options={
+                    filters.diet as
+                      | DietType[]
+                      | undefined
+                  }
+                  highlightedClass={open ? 'text-primary-500' : undefined}
+                />
+              </Row>
+            }
+          />
+        )}
+        dropdownMenuContent={
+          <DietFilter filters={filters} updateFilter={updateFilter}/>
+        }
+        popoverClassName="bg-canvas-50"
+        menuWidth="w-50"
+      />
+
       {/* Short Bios */}
       <ShortBioToggle
         updateFilter={updateFilter}

web/components/filters/diet-filter.tsx

@@ -0,0 +1,61 @@
+import clsx from 'clsx'
+import {convertDietTypes, DietType,} from 'web/lib/util/convert-types'
+import stringOrStringArrayToText from 'web/lib/util/string-or-string-array-to-text'
+import {MultiCheckbox} from 'web/components/multi-checkbox'
+
+import {DIET_CHOICES} from "web/components/filters/choices";
+import {FilterFields} from "common/filters";
+
+export function DietFilterText(props: {
+  options: DietType[] | undefined
+  highlightedClass?: string
+}) {
+  const {options, highlightedClass} = props
+  const length = (options ?? []).length
+
+  if (!options || length < 1) {
+    return (
+      <span className={clsx('text-semibold', highlightedClass)}>Any diet</span>
+    )
+  }
+
+  const convertedTypes = options.map((r) =>
+    convertDietTypes(r)
+  )
+
+  if (length > 1) {
+    return (
+      <span>
+        <span className={clsx('font-semibold', highlightedClass)}>
+          Multiple
+        </span>
+      </span>
+    )
+  }
+  return (
+    <div>
+      <span className={clsx('font-semibold', highlightedClass)}>
+        {stringOrStringArrayToText({
+          text: convertedTypes,
+          capitalizeFirstLetterOption: true,
+        })}{' '}
+      </span>
+    </div>
+  )
+}
+
+export function DietFilter(props: {
+  filters: Partial<FilterFields>
+  updateFilter: (newState: Partial<FilterFields>) => void
+}) {
+  const {filters, updateFilter} = props
+  return (
+    <MultiCheckbox
+      selected={filters.diet ?? []}
+      choices={DIET_CHOICES as any}
+      onChange={(c) => {
+        updateFilter({diet: c})
+      }}
+    />
+  )
+}