Clean display

common/messages/de.json

@@ -979,7 +979,7 @@
   "filter.group.values": "Werte & Überzeugungen",
   "filter.group.personality": "Persönlichkeit",
   "filter.group.advanced": "Erweitert",
-  "filter.group.rendering": "Darstellung",
+  "filter.group.display": "Darstellung",
   "referrals.title": "Lade jemanden ein, Compass beizutreten!",
   "register.agreement.and": " und ",
   "register.agreement.prefix": "Mit der Registrierung akzeptiere ich die ",

common/messages/fr.json

@@ -978,7 +978,7 @@
   "filter.group.values": "Valeurs & Croyances",
   "filter.group.personality": "Personnalité",
   "filter.group.advanced": "Avancé",
-  "filter.group.rendering": "Rendu",
+  "filter.group.display": "Affichage",
   "referrals.title": "Invitez quelqu'un à rejoindre Compass !",
   "register.agreement.and": " et ",
   "register.agreement.prefix": "En vous inscrivant, j'accepte les ",

common/src/profiles-rendering.ts

@@ -1,7 +1,7 @@
-export type RenderingOptions = {
+export type displayOptions = {
   showPhotos: boolean | null | undefined
 }
 
-export const initialRenderingOptions: RenderingOptions = {
-  showPhotos: false,
+export const initialDisplayOptions: displayOptions = {
+  showPhotos: undefined,
 }

web/components/filters/filters.tsx

@@ -6,7 +6,7 @@ import {formatFilters, SKIPPED_FORMAT_FILTERS_KEYS} from 'common/filters-format'
 import {Gender} from 'common/gender'
 import {OptionTableKey} from 'common/profiles/constants'
 import {Profile} from 'common/profiles/profile'
-import {RenderingOptions} from 'common/profiles-rendering'
+import {displayOptions} from 'common/profiles-rendering'
 import {nullifyDictValues, removeNullOrUndefinedProps, sampleDictByPrefix} from 'common/util/object'
 import {ReactNode, useState} from 'react'
 import {
@@ -199,8 +199,8 @@ function Filters(props: {
   raisedInLocationFilterProps: LocationFilterProps
   includeRelationshipFilters: boolean | undefined
   choices: Record<OptionTableKey, Record<string, string>>
-  renderingOptions: Partial<RenderingOptions>
-  updateRenderingOptions: (newState: Partial<RenderingOptions>) => void
+  displayOptions: Partial<displayOptions>
+  updateDisplayOptions: (newState: Partial<displayOptions>) => void
 }) {
   const t = useT()
   const {
@@ -213,8 +213,8 @@ function Filters(props: {
     locationFilterProps,
     raisedInLocationFilterProps,
     includeRelationshipFilters,
-    renderingOptions,
-    updateRenderingOptions,
+    displayOptions,
+    updateDisplayOptions,
     choices,
   } = props
 
@@ -743,17 +743,19 @@ function Filters(props: {
         </FilterSection>
       </FilterGroup>
 
+      <hr className="border-gray-500 my-2 mx-4" />
+
       {/* Rendering */}
       <FilterGroup
-        title={t('filter.group.rendering', 'Rendering')}
+        title={t('filter.group.display', 'Display')}
         openGroup={openGroup}
         setOpenGroup={setOpenGroup}
       >
         {/* Show Photos */}
         <Col className="p-4 pt-0">
           <ShowPhotosToggle
-            updateRenderingOptions={updateRenderingOptions}
-            renderingOptions={renderingOptions}
+            updateDisplayOptions={updateDisplayOptions}
+            displayOptions={displayOptions}
           />
         </Col>
       </FilterGroup>
@@ -846,8 +848,8 @@ export function FiltersElement(props: {
   isYourFilters: boolean
   locationFilterProps: LocationFilterProps
   raisedInLocationFilterProps: LocationFilterProps
-  renderingOptions: Partial<RenderingOptions>
-  updateRenderingOptions: (newState: Partial<RenderingOptions>) => void
+  displayOptions: Partial<displayOptions>
+  updateDisplayOptions: (newState: Partial<displayOptions>) => void
 }) {
   const {
     filters,
@@ -858,8 +860,8 @@ export function FiltersElement(props: {
     isYourFilters,
     locationFilterProps,
     raisedInLocationFilterProps,
-    renderingOptions,
-    updateRenderingOptions,
+    displayOptions,
+    updateDisplayOptions,
   } = props
   const youSeekingRelationship = youProfile?.pref_relation_styles?.includes('relationship')
   const {choices: interestChoices} = useChoices('interests')
@@ -882,8 +884,8 @@ export function FiltersElement(props: {
       raisedInLocationFilterProps={raisedInLocationFilterProps}
       includeRelationshipFilters={youSeekingRelationship}
       choices={choices}
-      renderingOptions={renderingOptions}
-      updateRenderingOptions={updateRenderingOptions}
+      displayOptions={displayOptions}
+      updateDisplayOptions={updateDisplayOptions}
     />
   )
 }

web/components/filters/show-photos-toggle.tsx

@@ -1,18 +1,18 @@
 import clsx from 'clsx'
-import {RenderingOptions} from 'common/profiles-rendering'
+import {displayOptions} from 'common/profiles-rendering'
 import {Row} from 'web/components/layout/row'
 import {useT} from 'web/lib/locale'
 
 export function ShowPhotosToggle(props: {
-  renderingOptions: Partial<RenderingOptions>
-  updateRenderingOptions: (newState: Partial<RenderingOptions>) => void
+  displayOptions: Partial<displayOptions>
+  updateDisplayOptions: (newState: Partial<displayOptions>) => void
 }) {
-  const {renderingOptions, updateRenderingOptions} = props
+  const {displayOptions, updateDisplayOptions} = props
   const t = useT()
 
   const label = t('filter.show_photos', 'Show profile pictures')
 
-  const on = renderingOptions.showPhotos ?? true
+  const on = displayOptions.showPhotos ?? true
 
   return (
     <Row className={clsx('mr-2 items-center hover-bold', on && 'font-semibold')}>
@@ -22,7 +22,7 @@ export function ShowPhotosToggle(props: {
         className="border-ink-300 bg-canvas-0 dark:border-ink-500 text-primary-600 focus:ring-primary-500 h-4 w-4 rounded hover:bg-canvas-200 cursor-pointer"
         checked={on}
         onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-          updateRenderingOptions({showPhotos: e.target.checked})
+          updateDisplayOptions({showPhotos: e.target.checked})
         }
       />
       <label htmlFor={label} className={clsx('text-ink-600 ml-2')}>

web/components/profiles/profiles-home.tsx

@@ -15,6 +15,7 @@ import {ProfileGrid} from 'web/components/profile-grid'
 import {CompassLoadingIndicator} from 'web/components/widgets/loading-indicator'
 import {Title} from 'web/components/widgets/title'
 import {useBookmarkedSearches} from 'web/hooks/use-bookmarked-searches'
+import {useDisplayOptions} from 'web/hooks/use-display-options'
 import {useGetter} from 'web/hooks/use-getter'
 import {useHiddenProfiles} from 'web/hooks/use-hidden-profiles'
 import {useIsClearedFilters} from 'web/hooks/use-is-cleared-filters'
@@ -23,7 +24,6 @@ import {usePersistentInMemoryState} from 'web/hooks/use-persistent-in-memory-sta
 import {usePersistentLocalState} from 'web/hooks/use-persistent-local-state'
 import {useProfile} from 'web/hooks/use-profile'
 import {useCompatibleProfiles} from 'web/hooks/use-profiles'
-import {useRenderingOptions} from 'web/hooks/use-rendering-options'
 import {useUser} from 'web/hooks/use-user'
 import {api} from 'web/lib/api'
 import {useLocale, useT} from 'web/lib/locale'
@@ -46,7 +46,7 @@ export function ProfilesHome() {
     raisedInLocationFilterProps,
   } = useFilters(you ?? undefined, fromSignup)
 
-  const {renderingOptions, updateRenderingOptions} = useRenderingOptions()
+  const {displayOptions, updateDisplayOptions} = useDisplayOptions(you)
 
   const [profiles, setProfiles] = usePersistentInMemoryState<Profile[] | undefined>(
     undefined,
@@ -199,8 +199,8 @@ export function ProfilesHome() {
       isYourFilters={isYourFilters}
       locationFilterProps={locationFilterProps}
       raisedInLocationFilterProps={raisedInLocationFilterProps}
-      renderingOptions={renderingOptions}
-      updateRenderingOptions={updateRenderingOptions}
+      displayOptions={displayOptions}
+      updateDisplayOptions={updateDisplayOptions}
     />
   )
 
@@ -340,7 +340,7 @@ export function ProfilesHome() {
               onHide={onHide}
               hiddenUserIds={recentlyHiddenIds}
               onUndoHidden={onUndoHidden}
-              showPhotos={renderingOptions.showPhotos}
+              showPhotos={displayOptions.showPhotos}
             />
           </>
         )}

web/hooks/use-display-options.ts

@@ -0,0 +1,22 @@
+import {displayOptions, initialDisplayOptions} from 'common/profiles-rendering'
+import {useEffect} from 'react'
+import {usePersistentLocalState} from 'web/hooks/use-persistent-local-state'
+
+export function useDisplayOptions(profile?: any) {
+  const [displayOptions, setDisplayOptions] = usePersistentLocalState<displayOptions>(
+    initialDisplayOptions,
+    'rendering-options',
+  )
+
+  useEffect(() => {
+    if (profile && displayOptions.showPhotos === undefined) {
+      setDisplayOptions({showPhotos: !!profile?.pref_relation_styles?.includes('relationship')})
+    }
+  }, [profile])
+
+  const updateDisplayOptions = (newState: Partial<displayOptions>) => {
+    const updatedState = {...newState}
+    setDisplayOptions((prevState) => ({...prevState, ...updatedState}))
+  }
+  return {displayOptions, updateDisplayOptions}
+}

web/hooks/use-rendering-options.ts

@@ -1,15 +0,0 @@
-import {initialRenderingOptions, RenderingOptions} from 'common/profiles-rendering'
-import {usePersistentLocalState} from 'web/hooks/use-persistent-local-state'
-
-export function useRenderingOptions() {
-  const [renderingOptions, setRenderingOptions] = usePersistentLocalState<RenderingOptions>(
-    initialRenderingOptions,
-    'rendering-options',
-  )
-
-  const updateRenderingOptions = (newState: Partial<RenderingOptions>) => {
-    const updatedState = {...newState}
-    setRenderingOptions((prevState) => ({...prevState, ...updatedState}))
-  }
-  return {renderingOptions, updateRenderingOptions}
-}