fix: Improve Alert Color filter responsiveness (#9441)

artsy · Oct 18, 2023 · c075490 · c075490
1 parent 03a7daa
commit c075490
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 50 deletions.
diff --git a/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterAdditionalGeneIDs.tsx b/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterAdditionalGeneIDs.tsx
@@ -15,8 +15,8 @@ export const SavedSearchFilterAdditionalGeneIDs = () => {
     SearchCriteria.additionalGeneIDs
   ) as string[]
 
-  const setValueToAttributesByKeyAction = SavedSearchStore.useStoreActions(
-    (actions) => actions.setValueToAttributesByKeyAction
+  const addValueToAttributesByKeyAction = SavedSearchStore.useStoreActions(
+    (actions) => actions.addValueToAttributesByKeyAction
   )
   const removeValueFromAttributesByKeyAction = SavedSearchStore.useStoreActions(
     (actions) => actions.removeValueFromAttributesByKeyAction
@@ -35,7 +35,7 @@ export const SavedSearchFilterAdditionalGeneIDs = () => {
       })
     } else {
       const newValues = (selectedAttributes || []).concat(value)
-      setValueToAttributesByKeyAction({
+      addValueToAttributesByKeyAction({
         key: SearchCriteria.additionalGeneIDs,
         value: newValues,
       })

diff --git a/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterColor.tsx b/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterColor.tsx
@@ -7,39 +7,31 @@ import {
 import { ColorsSwatch } from "app/Components/ArtworkFilter/Filters/ColorsSwatch"
 import { SearchCriteria } from "app/Components/ArtworkFilter/SavedSearch/types"
 import { SavedSearchStore } from "app/Scenes/SavedSearchAlert/SavedSearchStore"
-import { isValueSelected, useSearchCriteriaAttributes } from "app/Scenes/SavedSearchAlert/helpers"
+import { useSearchCriteriaAttributes } from "app/Scenes/SavedSearchAlert/helpers"
+import { useState } from "react"
+import useDebounce from "react-use/lib/useDebounce"
 
 export const SavedSearchFilterColor = () => {
-  const selectedAttributes = useSearchCriteriaAttributes(SearchCriteria.colors) as string[]
-
   const { width } = useScreenDimensions()
   const space = useSpace()
 
-  const setValueToAttributesByKeyAction = SavedSearchStore.useStoreActions(
-    (actions) => actions.setValueToAttributesByKeyAction
-  )
-  const removeValueFromAttributesByKeyAction = SavedSearchStore.useStoreActions(
-    (actions) => actions.removeValueFromAttributesByKeyAction
-  )
+  const selectedStoreColors = useSearchCriteriaAttributes(SearchCriteria.colors) as string[]
+  const setAttribute = SavedSearchStore.useStoreActions((actions) => actions.setAttributeAction)
 
-  const handlePress = (value: string) => {
-    const isSelected = isValueSelected({
-      selectedAttributes,
-      value: value,
-    })
+  const [selectedColors, setSelectedColors] = useState(selectedStoreColors || [])
+
+  useDebounce(
+    () => {
+      setAttribute({ key: SearchCriteria.colors, value: selectedColors })
+    },
+    100,
+    [selectedColors]
+  )
 
-    if (isSelected) {
-      removeValueFromAttributesByKeyAction({
-        key: SearchCriteria.colors,
-        value: value,
-      })
-    } else {
-      const newValues = (selectedAttributes || []).concat(value)
-      setValueToAttributesByKeyAction({
-        key: SearchCriteria.colors,
-        value: newValues,
-      })
-    }
+  const handlePress = (value: string) => () => {
+    setSelectedColors((prev) =>
+      selectedColors.includes(value) ? prev.filter((item) => item !== value) : [...prev, value]
+    )
   }
 
   return (
@@ -58,15 +50,10 @@ export const SavedSearchFilterColor = () => {
             <ColorsSwatch
               key={i}
               width={(width - space(1) * 2) / SWATCHES_PER_ROW}
-              selected={isValueSelected({
-                selectedAttributes,
-                value: option.paramValue,
-              })}
+              selected={selectedColors.includes(option.paramValue as string)}
               name={color.name}
               backgroundColor={color.backgroundColor}
-              onPress={() => {
-                handlePress(option.paramValue as string)
-              }}
+              onPress={handlePress(option.paramValue as string)}
             />
           )
         })}

diff --git a/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterPriceRange.tsx b/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterPriceRange.tsx
@@ -28,13 +28,13 @@ const SavedSearchFilterPriceRange: React.FC<SavedSearchFilterPriceRangeProps> =
     storePriceRangeValue || DEFAULT_PRICE_RANGE
   )
 
-  const setValueToAttributesByKeyAction = SavedSearchStore.useStoreActions(
-    (actions) => actions.setValueToAttributesByKeyAction
+  const addValueToAttributesByKeyAction = SavedSearchStore.useStoreActions(
+    (actions) => actions.addValueToAttributesByKeyAction
   )
 
   useDebounce(
     () => {
-      setValueToAttributesByKeyAction({
+      addValueToAttributesByKeyAction({
         key: SearchCriteria.priceRange,
         value: filterPriceRange,
       })

diff --git a/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterRarity.tsx b/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterRarity.tsx
@@ -10,8 +10,8 @@ export const SavedSearchFilterRarity = () => {
     SearchCriteria.attributionClass
   ) as string[]
 
-  const setValueToAttributesByKeyAction = SavedSearchStore.useStoreActions(
-    (actions) => actions.setValueToAttributesByKeyAction
+  const addValueToAttributesByKeyAction = SavedSearchStore.useStoreActions(
+    (actions) => actions.addValueToAttributesByKeyAction
   )
   const removeValueFromAttributesByKeyAction = SavedSearchStore.useStoreActions(
     (actions) => actions.removeValueFromAttributesByKeyAction
@@ -30,7 +30,7 @@ export const SavedSearchFilterRarity = () => {
       })
     } else {
       const newValues = (selectedAttributes || []).concat(value)
-      setValueToAttributesByKeyAction({
+      addValueToAttributesByKeyAction({
         key: SearchCriteria.attributionClass,
         value: newValues,
       })

diff --git a/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterWaysToBuy.tsx b/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterWaysToBuy.tsx
@@ -7,8 +7,8 @@ import { SavedSearchStore } from "app/Scenes/SavedSearchAlert/SavedSearchStore"
 export const SavedSearchFilterWaysToBuy = () => {
   const attributes = SavedSearchStore.useStoreState((state) => state.attributes)
 
-  const setValueToAttributesByKeyAction = SavedSearchStore.useStoreActions(
-    (actions) => actions.setValueToAttributesByKeyAction
+  const addValueToAttributesByKeyAction = SavedSearchStore.useStoreActions(
+    (actions) => actions.addValueToAttributesByKeyAction
   )
   const removeValueFromAttributesByKeyAction = SavedSearchStore.useStoreActions(
     (actions) => actions.removeValueFromAttributesByKeyAction
@@ -41,7 +41,7 @@ export const SavedSearchFilterWaysToBuy = () => {
                     value: false,
                   })
                 } else {
-                  setValueToAttributesByKeyAction({
+                  addValueToAttributesByKeyAction({
                     key: criterion,
                     value: true,
                   })

diff --git a/src/app/Scenes/SavedSearchAlert/SavedSearchStore.tsx b/src/app/Scenes/SavedSearchAlert/SavedSearchStore.tsx
@@ -16,7 +16,8 @@ export interface SavedSearchModel {
   /** Artwork ID, if the current saved search alert is being set from an artwork */
   currentArtworkID?: string
 
-  setValueToAttributesByKeyAction: Action<
+  setAttributeAction: Action<this, { key: SearchCriteria; value: any }>
+  addValueToAttributesByKeyAction: Action<
     this,
     {
       key: SearchCriteria
@@ -47,7 +48,11 @@ export const savedSearchModel: SavedSearchModel = {
   },
   currentArtworkID: undefined,
 
-  setValueToAttributesByKeyAction: action((state, payload) => {
+  setAttributeAction: action((state, payload) => {
+    state.attributes[payload.key] = payload.value
+  }),
+
+  addValueToAttributesByKeyAction: action((state, payload) => {
     if (payload.key === "priceRange" && typeof payload.value === "string") {
       // set form dirty on price update
       if (state.attributes[payload.key] !== payload.value) {

diff --git a/src/app/Scenes/SavedSearchAlert/screens/AlertPriceRangeScreen.tsx b/src/app/Scenes/SavedSearchAlert/screens/AlertPriceRangeScreen.tsx
@@ -37,12 +37,12 @@ export const AlertPriceRangeScreen: React.FC<AlertPriceRanceScreenProps> = ({
   const [filterPriceRange, setFilterPriceRange] = useState(
     attributes.priceRange || DEFAULT_PRICE_RANGE
   )
-  const setValueToAttributesByKeyAction = SavedSearchStore.useStoreActions(
-    (actions) => actions.setValueToAttributesByKeyAction
+  const addValueToAttributesByKeyAction = SavedSearchStore.useStoreActions(
+    (actions) => actions.addValueToAttributesByKeyAction
   )
 
   const handleOnButtonPress = () => {
-    setValueToAttributesByKeyAction({
+    addValueToAttributesByKeyAction({
       key: SearchCriteria.priceRange,
       value: filterPriceRange,
     })