diff --git a/src/app/Scenes/Collection/Components/CollectionArtworksFilter.tsx b/src/app/Scenes/Collection/Components/CollectionArtworksFilter.tsx index bd9cfd48239..6498023971a 100644 --- 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 = ({ 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 = ({ 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 = ({ 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 = ({ 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 index 669a69f305a..1634da5c717 100644 --- 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 = ({ 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 = ({ collecti ListHeaderComponentStyle={{ zIndex: 1 }} ListHeaderComponent={ - + } ListFooterComponent={ @@ -166,8 +168,8 @@ export const CollectionArtworks: React.FC = ({ 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 index fb10bec72b5..90e24579747 100644 --- 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 = ({ 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 = ({ @@ -185,8 +186,8 @@ export const FairArtworks: React.FC = ({ 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 index 6bac0a66ddf..f75059961be 100644 --- 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 ( @@ -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} /> ) diff --git a/src/app/Scenes/Show/Show.tsx b/src/app/Scenes/Show/Show.tsx index 9593f6a6659..992caea92fa 100644 --- a/src/app/Scenes/Show/Show.tsx +++ b/src/app/Scenes/Show/Show.tsx @@ -38,11 +38,15 @@ export const Show: React.FC = ({ 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: }, @@ -60,7 +64,7 @@ export const Show: React.FC = ({ show }) => {