fix: Filter panel toggle logic on Fair, Show and Collection screens (#…

…11231) * fix: Filter panel toggle logic on Fair and Collection screens * shows * collection
artsy · Dec 2, 2024 · b45e6ef · b45e6ef
1 parent b4419b6
commit b45e6ef
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 34 deletions.
diff --git a/src/app/Scenes/Collection/Components/CollectionArtworksFilter.tsx b/src/app/Scenes/Collection/Components/CollectionArtworksFilter.tsx
@@ -16,10 +16,6 @@ export const CollectionArtworksFilter: React.FC<FilterProps> = ({ collection })
 
   const [isFilterArtworksModalVisible, setFilterArtworkModalVisible] = useState(false)
 
-  const toggleFilterArtworksModal = () => {
-    setFilterArtworkModalVisible(!isFilterArtworksModalVisible)
-  }
-
   const openFilterArtworksModal = () => {
     tracking.trackEvent({
       action_name: "filter",
@@ -29,7 +25,7 @@ export const CollectionArtworksFilter: React.FC<FilterProps> = ({ collection })
       context_screen_owner_slug: collection.slug,
       action_type: Schema.ActionTypes.Tap,
     })
-    toggleFilterArtworksModal()
+    setFilterArtworkModalVisible(true)
   }
 
   const closeFilterArtworksModal = () => {
@@ -41,7 +37,7 @@ export const CollectionArtworksFilter: React.FC<FilterProps> = ({ collection })
       context_screen_owner_slug: collection.slug,
       action_type: Schema.ActionTypes.Tap,
     })
-    toggleFilterArtworksModal()
+    setFilterArtworkModalVisible(false)
   }
 
   return (
@@ -51,7 +47,7 @@ export const CollectionArtworksFilter: React.FC<FilterProps> = ({ collection })
         id={collection.id}
         slug={collection.slug}
         visible={isFilterArtworksModalVisible}
-        exitModal={toggleFilterArtworksModal}
+        exitModal={closeFilterArtworksModal}
         closeModal={closeFilterArtworksModal}
         mode={FilterModalMode.Collection}
       />

diff --git a/src/app/Scenes/Collection/Screens/CollectionArtworks.tsx b/src/app/Scenes/Collection/Screens/CollectionArtworks.tsx
@@ -61,10 +61,12 @@ export const CollectionArtworks: React.FC<CollectionArtworksProps> = ({ collecti
   const shouldDisplaySpinner =
     !!isLoading && !!artworksList.length && !!relay.isLoading() && !!relay.hasMore()
 
-  const handleFilterToggle = () => {
-    setFilterArtworkModalVisible((prev) => {
-      return !prev
-    })
+  const handleFilterOpen = () => {
+    setFilterArtworkModalVisible(true)
+  }
+
+  const handleFilterClose = () => {
+    setFilterArtworkModalVisible(false)
   }
 
   const loadMore = () => {
@@ -154,7 +156,7 @@ export const CollectionArtworks: React.FC<CollectionArtworksProps> = ({ collecti
         ListHeaderComponentStyle={{ zIndex: 1 }}
         ListHeaderComponent={
           <Tabs.SubTabBar>
-            <HeaderArtworksFilterWithTotalArtworks onPress={handleFilterToggle} />
+            <HeaderArtworksFilterWithTotalArtworks onPress={handleFilterOpen} />
           </Tabs.SubTabBar>
         }
         ListFooterComponent={
@@ -166,8 +168,8 @@ export const CollectionArtworks: React.FC<CollectionArtworksProps> = ({ collecti
         slug={collection.slug}
         visible={!!isFilterArtworksModalVisible}
         name={collection.title ?? ""}
-        exitModal={handleFilterToggle}
-        closeModal={handleFilterToggle}
+        exitModal={handleFilterClose}
+        closeModal={handleFilterClose}
         mode={FilterModalMode.ArtistArtworks}
         shouldShowCreateAlertButton
       />

diff --git a/src/app/Scenes/Fair/Components/FairArtworks.tsx b/src/app/Scenes/Fair/Components/FairArtworks.tsx
@@ -126,15 +126,16 @@ export const FairArtworks: React.FC<FairArtworksProps> = ({
     tracking.trackEvent(tracks.trackClear(id, slug))
   }
 
-  const handleFilterToggle = () => {
-    setFilterArtworkModalVisible((prev) => {
-      if (!prev) {
-        tracking.trackEvent(tracks.openArtworksFilter(fair))
-      } else {
-        tracking.trackEvent(tracks.closeArtworksFilter(fair))
-      }
-      return !prev
-    })
+  const handleFilterOpen = () => {
+    setFilterArtworkModalVisible(true)
+
+    tracking.trackEvent(tracks.openArtworksFilter(fair))
+  }
+
+  const handleFilterClose = () => {
+    setFilterArtworkModalVisible(false)
+
+    tracking.trackEvent(tracks.closeArtworksFilter(fair))
   }
 
   const filteredArtworks = extractNodes(data.fairArtworks)
@@ -165,7 +166,7 @@ export const FairArtworks: React.FC<FairArtworksProps> = ({
             <Tabs.SubTabBar>
               <HeaderArtworksFilterWithTotalArtworks
                 hideArtworksCount={true}
-                onPress={handleFilterToggle}
+                onPress={handleFilterOpen}
               />
             </Tabs.SubTabBar>
 
@@ -185,8 +186,8 @@ export const FairArtworks: React.FC<FairArtworksProps> = ({
         id={data.internalID}
         slug={data.slug}
         mode={FilterModalMode.Fair}
-        exitModal={handleFilterToggle}
-        closeModal={handleFilterToggle}
+        exitModal={handleFilterClose}
+        closeModal={handleFilterClose}
       />
     </>
   )

diff --git a/src/app/Scenes/Show/Components/ShowArtworks.tsx b/src/app/Scenes/Show/Components/ShowArtworks.tsx
@@ -22,11 +22,11 @@ interface Props {
 interface ArtworkProps {
   show: Show_show$data
   visible: boolean
-  toggleFilterArtworksModal: () => void
+  closeFilterArtworksModal: () => void
 }
 
 export const ShowArtworksWithNavigation = (props: ArtworkProps) => {
-  const { show, visible, toggleFilterArtworksModal } = props
+  const { show, visible, closeFilterArtworksModal } = props
   return (
     <Box px={2}>
       <ShowArtworksPaginationContainer show={show} />
@@ -35,8 +35,8 @@ export const ShowArtworksWithNavigation = (props: ArtworkProps) => {
         id={show.internalID}
         slug={show.slug}
         mode={FilterModalMode.Show}
-        exitModal={toggleFilterArtworksModal}
-        closeModal={toggleFilterArtworksModal}
+        exitModal={closeFilterArtworksModal}
+        closeModal={closeFilterArtworksModal}
       />
     </Box>
   )

diff --git a/src/app/Scenes/Show/Show.tsx b/src/app/Scenes/Show/Show.tsx
@@ -38,11 +38,15 @@ export const Show: React.FC<ShowProps> = ({ show }) => {
 
   const viewConfigRef = useRef({ viewAreaCoveragePercentThreshold: 30 })
 
-  const toggleFilterArtworksModal = () => {
-    setVisible(!visible)
+  const openeFilterArtworksModal = () => {
+    setVisible(true)
   }
 
-  const artworkProps = { show, visible, toggleFilterArtworksModal }
+  const closeFilterArtworksModal = () => {
+    setVisible(false)
+  }
+
+  const artworkProps = { show, visible, openeFilterArtworksModal, closeFilterArtworksModal }
 
   const sections: Section[] = [
     { key: "header", element: <ShowHeader show={show} mx={2} mt={2} /> },
@@ -60,7 +64,7 @@ export const Show: React.FC<ShowProps> = ({ show }) => {
           <Separator />
           <HeaderArtworksFilter
             animationValue={filterComponentAnimationValue}
-            onPress={toggleFilterArtworksModal}
+            onPress={openeFilterArtworksModal}
             disableYAxisAnimation
           />
         </Flex>