allow to select multiple or one chip

Author: medyo

src/components/Elements/ChipsSet/ChipsSet.tsx

@@ -20,19 +20,44 @@ type ChangeAction = 'ADD' | 'REMOVE'
 type ChipsSetProps = {
   options: Option[]
   defaultValues?: string[]
-  onChange?: (action: ChangeAction, option: Option) => void
+  canSelectMultiple?: boolean
+  onChange?: (action: ChangeAction, options: Option[]) => void
 }
 
-export const ChipsSet = ({ options, onChange, defaultValues }: ChipsSetProps) => {
+export const ChipsSet = ({
+  options,
+  canSelectMultiple = false,
+  onChange,
+  defaultValues,
+}: ChipsSetProps) => {
   const [selectedChips, setSelectedChips] = useState<string[] | undefined>(defaultValues || [])
 
   const onSelect = (option: Option) => {
     if (selectedChips?.some((chipValue) => chipValue === option.value)) {
-      setSelectedChips((prev) => prev?.filter((chipValue) => chipValue !== option.value))
-      onChange && onChange('REMOVE', option)
+      if (!canSelectMultiple) {
+        return
+      }
+      const newVal = selectedChips?.filter((chipValue) => chipValue !== option.value)
+      setSelectedChips(newVal)
+      onChange &&
+        onChange(
+          'REMOVE',
+          options.filter((opt) => newVal.some((selectedVal) => selectedVal === opt.value))
+        )
     } else {
-      setSelectedChips((prev) => [...(prev || []), option.value])
-      onChange && onChange('ADD', option)
+      let newVal: string[] = []
+      if (canSelectMultiple) {
+        newVal = [...(selectedChips || []), option.value]
+      } else {
+        newVal = [option.value]
+      }
+
+      setSelectedChips(newVal)
+      onChange &&
+        onChange(
+          'ADD',
+          options.filter((opt) => newVal.some((selectedVal) => selectedVal === opt.value))
+        )
     }
   }
 

src/components/Elements/FloatingFilter/FloatingFilter.tsx

@@ -1,11 +1,11 @@
-import { SupportedCard, GLOBAL_TAG, MY_LANGUAGES_TAG, dateRanges } from 'src/config'
-import { FiFilter } from 'react-icons/fi'
 import { useState } from 'react'
+import { FiFilter } from 'react-icons/fi'
 import { BottomSheet } from 'react-spring-bottom-sheet'
 import 'react-spring-bottom-sheet/dist/style.css'
-import { useUserPreferences } from 'src/stores/preferences'
-import { trackCardLanguageSelect, trackCardDateRangeSelect } from 'src/lib/analytics'
 import { ChipsSet } from 'src/components/Elements'
+import { dateRanges, GLOBAL_TAG, MY_LANGUAGES_TAG, SupportedCard } from 'src/config'
+import { trackCardDateRangeSelect, trackCardLanguageSelect } from 'src/lib/analytics'
+import { useUserPreferences } from 'src/stores/preferences'
 
 type ListingFilterMobileProps = {
   card: SupportedCard
@@ -53,9 +53,9 @@ export const FloatingFilter = ({ card, filters = ['language'] }: ListingFilterMo
                     onChange={(_, option) => {
                       setCardSettings(card.value, {
                         ...cardsSettings[card.value],
-                        language: option.value,
+                        language: option[0].value,
                       })
-                      trackCardLanguageSelect(card.analyticsTag, option.value)
+                      trackCardLanguageSelect(card.analyticsTag, option[0].value)
                     }}
                   />
                 </div>
@@ -76,9 +76,9 @@ export const FloatingFilter = ({ card, filters = ['language'] }: ListingFilterMo
                     onChange={(_, option) => {
                       setCardSettings(card.value, {
                         ...cardsSettings[card.value],
-                        dateRange: option.value,
+                        dateRange: option[0].value,
                       })
-                      trackCardDateRangeSelect(card.analyticsTag, option.value)
+                      trackCardDateRangeSelect(card.analyticsTag, option[0].value)
                     }}
                   />
                 </div>