Improve filter formatting for politics and religion

web/components/filters/desktop-filters.tsx

@@ -366,7 +366,7 @@ export function DesktopFilters(props: {
                 <PoliticalFilterText
                   options={
                     filters.political_beliefs as
-                      | PoliticalType[]
+                      | string[]
                       | undefined
                   }
                   highlightedClass={open ? 'text-primary-500' : undefined}

web/components/filters/mobile-filters.tsx

@@ -318,7 +318,7 @@ function MobileFilters(props: {
         isActive={hasAny(filters.political_beliefs || undefined)}
         selection={
           <PoliticalFilterText
-            options={filters.political_beliefs as PoliticalType[]}
+            options={filters.political_beliefs as string[]}
             highlightedClass={
               hasAny(filters.political_beliefs || undefined)
                 ? 'text-primary-600'

web/components/filters/political-filter.tsx

@@ -1,13 +1,14 @@
 import clsx from 'clsx'
-import {convertPoliticalTypes, PoliticalType,} from 'web/lib/util/convert-types'
+import {convertPoliticalTypes,} 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 {POLITICAL_CHOICES} from "web/components/filters/choices";
 import {FilterFields} from "common/filters";
+import {getSortedOptions} from "common/util/sorting";
 
 export function PoliticalFilterText(props: {
-  options: PoliticalType[] | undefined
+  options: string[] | undefined
   highlightedClass?: string
 }) {
   const {options, highlightedClass} = props
@@ -19,11 +20,7 @@ export function PoliticalFilterText(props: {
     )
   }
 
-  const convertedTypes = options.map((r) =>
-    convertPoliticalTypes(r)
-  )
-
-  if (length > 1) {
+  if (length > 2) {
     return (
       <span>
         <span className={clsx('font-semibold', highlightedClass)}>
@@ -32,6 +29,10 @@ export function PoliticalFilterText(props: {
       </span>
     )
   }
+
+  const sortedOptions = getSortedOptions(options, POLITICAL_CHOICES)
+  const convertedTypes = sortedOptions.map((r) => convertPoliticalTypes(r as any))
+
   return (
     <div>
       <span className={clsx('font-semibold', highlightedClass)}>

web/components/filters/religion-filter.tsx

@@ -21,6 +21,16 @@ export function ReligionFilterText(props: {
     )
   }
 
+  if (length > 2) {
+    return (
+      <span>
+        <span className={clsx('font-semibold', highlightedClass)}>
+          Multiple
+        </span>
+      </span>
+    )
+  }
+
   const sortedOptions = getSortedOptions(options, RELIGION_CHOICES)
   const convertedTypes = sortedOptions.map((r) => convertReligionTypes(r as any))