refactor: Replace stickytabs with new implementation (#8679)

* refactor(legacy-tabs): rename tabs to legacytabs * feat(activity): Replace stickytabs with collapsible-tabs * tests(sticky-tabs-2): sticky tab activity tests (#8700) * fix: tests * fix: type errors * refactor(sticky-tabs-2): tag page to use new tabs (#8695) * refactor: use sticky tabs move files and remove tests * refactor: address type errors * refactor: address type errors * refactor: small cleanup and adjustments * refactor: tag placeholder * refactor: tag placeholder * fix(tests): move mock to jest config --------- Co-authored-by: Christopher Pappas <[email protected]> * refactor(sticky-tabs-2): partner page (#8704) * refactor: partner to functional component * refactor: migrate from sticky to collapsible * feat: lazy loading * refactor: remove redundant check * fix(tests): mock Tabs.Lazy --------- Co-authored-by: Christopher Pappas <[email protected]> * refactor(art-quiz): swap in new tabs (#8710) * refactor(sticky-tabs-2): Update Favorites with new tabs (#8715) refactor(favorites): swap in new tabs * refactor(sticky-tabs-2): Gene page (#8723) * refactor(sticky-tabs-2): Gene page * fix: about padding * refactor(sticky-tabs-2): Swap in artist tabs (#8716) * refactor(sticky-tabs-2): Swap tabs on Artist page * feat(tabs): Add SubTabBar component * refactor(sticky-tabs-2): Gene filter header (#8744) refactor: make gene filter header use sub tab * feat(sticky-tabs-2): sticky animated header (#8745) * feat: add components needed for animated headers * feat: add tabContext * feat: add listener to tab.scrollview/flatlist * refactor: Gene to use animated header * test: update tests * fix: tests * refactor: artist header animation * fix: adjust animation * fix: Tag page header * refactor: tag to use subtabbar * refactor: remove TabsContext.Provider from TabsWithHeader * refactor: add header animation to partner page * refactor: add header animation to favorites page * feat: enhance TabWithHeaders interface and add initial tab and ontabchange on places * refactor: title component name * fix: tests * refactor: activity header * refactor: artquiz uses animated headers * refactor: error boundary screens (#8759) fix: cleanup error boundary screens and remove legacy component * test: disable test till we fix it * fix: partner double header (#8791) * fix: add partner to navigateToPartner slug function * fix: partnerCard navigation issue * test: fix fixtures * fix: revert logic :D * fix: partner without full profile * chore: tiny refactor * Apply suggestions from code review * refactor(tabs): Migrate to palette-mobile tabs (#8800) refactor(tabs): migrate to palette-mobile tabs --------- Co-authored-by: George Kartalis <[email protected]>
artsy · Jun 2, 2023 · 6aab68d · 6aab68d
1 parent d2fbb1d
commit 6aab68d
Show file tree

Hide file tree

Showing 126 changed files with 1,319 additions and 1,621 deletions.
diff --git a/.secrets.baseline b/.secrets.baseline
@@ -338,7 +338,7 @@
         "filename": "src/app/Scenes/Partner/Components/PartnerHeader.tests.tsx",
         "hashed_secret": "93b7de46c3a1b8545624f0e125cd7919da42d787",
         "is_verified": false,
-        "line_number": 100
+        "line_number": 86
       }
     ],
     "src/app/Scenes/Partner/Components/PartnerShows.tests.tsx": [

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -506,7 +506,7 @@ PODS:
     - React-Core
   - react-native-netinfo (9.3.7):
     - React-Core
-  - react-native-pager-view (6.0.0):
+  - react-native-pager-view (6.2.0):
     - React-Core
   - react-native-safe-area-context (3.4.0):
     - React-Core
@@ -1137,7 +1137,7 @@ SPEC CHECKSUMS:
   BVLinearGradient: 34a999fda29036898a09c6a6b728b0b4189e1a44
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   CocoaLumberjack: b7e05132ff94f6ae4dfa9d5bce9141893a21d9da
-  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
+  DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   EDColor: 91d127cd67d7c1d3862846fb11ef4b3851151bfa
   Expecta: 3b6bd90a64b9a1dcb0b70aa0e10a7f8f631667d5
   "Expecta+Snapshots": dcff217eef506dabd6dfdc7864ea2da321fafbb8
@@ -1167,7 +1167,7 @@ SPEC CHECKSUMS:
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
   Forgeries: 64ced144ea8341d89a7eec9d1d7986f0f1366250
   FXBlurView: db786c2561cb49a09ae98407f52460096ab8a44f
-  glog: 5337263514dd6f09803962437687240c5dc39aa4
+  glog: 3d02b25ca00c2d456734d0bcff864cbc62f6ae1a
   GoogleDataTransport: 1c8145da7117bd68bbbed00cf304edb6a24de00f
   GoogleSignIn: 7137d297ddc022a7e0aa4619c86d72c909fa7213
   GoogleUtilities: 1d20a6ad97ef46f67bbdec158ce00563a671ebb7
@@ -1197,7 +1197,7 @@ SPEC CHECKSUMS:
   PromisesObjC: ab77feca74fa2823e7af4249b8326368e61014cb
   Pulley: edc993fb57f7eb20541c8453d0fce10559f21dac
   Quick: ce1276c7c27ba2da3cb2fd0cde053c3648b3b22d
-  RCT-Folly: a21c126816d8025b547704b777a2ba552f3d9fa9
+  RCT-Folly: b9d9fe1fc70114b751c076104e52f3b1b5e5a95a
   RCTRequired: 3581db0757e7ff9be10718a56b3d79b6a6bd3bdf
   RCTTypeSafety: ce13e630c48340401ebfb28710959913f74b8b36
   React: cca8f2b7cce018f79847ca79847fa367b206e8a1
@@ -1223,7 +1223,7 @@ SPEC CHECKSUMS:
   react-native-in-app-review: a073f67c5f3392af6ea7fb383217cdb1aa2aa726
   react-native-mapbox-gl: 0308cba1da4edbc1aa0e82a7584ba50e52725996
   react-native-netinfo: 2517ad504b3d303e90d7a431b0fcaef76d207983
-  react-native-pager-view: e76d64a5114a152e942caa09136e4e250709378c
+  react-native-pager-view: 0ccb8bf60e2ebd38b1f3669fa3650ecce81db2df
   react-native-safe-area-context: f4f7cc09d81ae2d39dfd13e764d718969af07080
   react-native-shake: 62aa5681863203090a087842da70183c442b97f8
   react-native-slider: 241935e3ea8e47599c317f512f96ee8de607d4cb

diff --git a/jest.config.js b/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
   setupFilesAfterEnv: [
     "jest-extended",
     "@testing-library/jest-native/extend-expect",
-    "./src/setupJest.ts",
+    "./src/setupJest.tsx",
   ],
   testMatch: ["<rootDir>/**/*.tests.(ts|tsx|js)"],
   testEnvironment: "jest-environment-jsdom",

diff --git a/package.json b/package.json
@@ -180,7 +180,7 @@
     "react-native-keychain": "8.0.0",
     "react-native-linear-gradient": "2.6.2",
     "react-native-localize": "2.0.1",
-    "react-native-pager-view": "6.0.0",
+    "react-native-pager-view": "6.2.0",
     "react-native-push-notification": "8.1.1",
     "react-native-reanimated": "2.13.0",
     "react-native-reanimated-zoom": "0.3.3",

diff --git a/src/app/AppRegistry.tsx b/src/app/AppRegistry.tsx
@@ -337,15 +337,21 @@ export type AppModule = keyof typeof modules
 
 export const modules = defineModules({
   Activity: reactModule(Activity, {
+    fullBleed: true,
     hidesBackButton: true,
   }),
   About: reactModule(About),
   AddOrEditMyCollectionArtwork: reactModule(MyCollectionArtworkForm, { hidesBackButton: true }),
   ArtQuiz: reactModule(ArtQuiz, { ...artQuizScreenOptions, hidesBottomTabs: true }),
-  ArtQuizResults: reactModule(ArtQuizResults, artQuizScreenOptions),
+  ArtQuizResults: reactModule(ArtQuizResults, {
+    fullBleed: true,
+    hidesBackButton: true,
+  }),
   Article: reactModule(ArticleScreen),
   Articles: reactModule(ArticlesScreen, {}, [ArticlesScreenQuery]),
-  Artist: reactModule(ArtistQueryRenderer, { hidesBackButton: true }, [ArtistScreenQuery]),
+  Artist: reactModule(ArtistQueryRenderer, { fullBleed: true, hidesBackButton: true }, [
+    ArtistScreenQuery,
+  ]),
   ArtistShows: reactModule(ArtistShows2QueryRenderer),
   ArtistArticles: reactModule(ArtistArticlesQueryRenderer),
   ArtistSeries: reactModule(ArtistSeriesQueryRenderer),
@@ -414,11 +420,17 @@ export const modules = defineModules({
   FairMoreInfo: reactModule(FairMoreInfoQueryRenderer),
   FairArticles: reactModule(FairArticlesQueryRenderer),
   FairAllFollowedArtists: reactModule(FairAllFollowedArtistsQueryRenderer),
-  Favorites: reactModule(Favorites),
+  Favorites: reactModule(Favorites, {
+    fullBleed: true,
+    hidesBackButton: true,
+  }),
   Feature: reactModule(FeatureQueryRenderer, { fullBleed: true }),
   FullArtistSeriesList: reactModule(ArtistSeriesFullArtistSeriesListQueryRenderer),
   FullFeaturedArtistList: reactModule(CollectionFullFeaturedArtistListQueryRenderer),
-  Gene: reactModule(GeneQueryRenderer),
+  Gene: reactModule(GeneQueryRenderer, {
+    fullBleed: true,
+    hidesBackButton: true,
+  }),
   Home: reactModule(HomeContainer, {
     isRootViewForTabName: "home",
   }),
@@ -473,7 +485,10 @@ export const modules = defineModules({
   NewWorksFromGalleriesYouFollow: reactModule(NewWorksFromGalleriesYouFollowScreen),
   OrderHistory: reactModule(OrderHistoryQueryRender),
   OrderDetails: reactModule(OrderDetailsQueryRender),
-  Partner: reactModule(PartnerQueryRenderer),
+  Partner: reactModule(PartnerQueryRenderer, {
+    fullBleed: true,
+    hidesBackButton: true,
+  }),
   PartnerLocations: reactModule(PartnerLocations),
   PriceDatabase: reactModule(PriceDatabase, { hidesBackButton: true }),
   PrivacyRequest: reactModule(PrivacyRequest),
@@ -511,7 +526,7 @@ export const modules = defineModules({
   SimilarToRecentlyViewed: reactModule(SimilarToRecentlyViewedScreen),
   Storybook: reactModule(StorybookUIRoot),
   SubmitArtwork: reactModule(SubmitArtwork, { hidesBackButton: true }),
-  Tag: reactModule(TagQueryRenderer),
+  Tag: reactModule(TagQueryRenderer, { hidesBackButton: true, fullBleed: true }),
   UnlistedArtworksFAQScreen: reactModule(UnlistedArtworksFAQScreen),
   UpcomingAuctionResults: reactModule(AuctionResultsUpcomingQueryRenderer, {}, [
     AuctionResultsUpcomingPrefetchQuery,

diff --git a/src/app/Components/Artist/ArtistAbout/ArtistAbout.tests.tsx b/src/app/Components/Artist/ArtistAbout/ArtistAbout.tests.tsx
@@ -1,7 +1,6 @@
 import { screen } from "@testing-library/react-native"
 import { ArtistAboutTestsQuery } from "__generated__/ArtistAboutTestsQuery.graphql"
 import Biography from "app/Components/Artist/Biography"
-import { StickyTabPage } from "app/Components/StickyTabPage/StickyTabPage"
 import { ModalStack } from "app/system/navigation/ModalStack"
 import { setupTestWrapper } from "app/utils/tests/setupTestWrapper"
 import { graphql } from "react-relay"
@@ -12,14 +11,7 @@ describe("ArtistAbout", () => {
   const { renderWithRelay } = setupTestWrapper<ArtistAboutTestsQuery>({
     Component: ({ artist }) => (
       <ModalStack>
-        <StickyTabPage
-          tabs={[
-            {
-              title: "test",
-              content: <ArtistAboutContainer artist={artist!} />,
-            },
-          ]}
-        />
+        <ArtistAboutContainer artist={artist!} />
       </ModalStack>
     ),
     query: graphql`

diff --git a/src/app/Components/Artist/ArtistAbout/ArtistAbout.tsx b/src/app/Components/Artist/ArtistAbout/ArtistAbout.tsx
@@ -1,4 +1,5 @@
 import { ContextModule, OwnerType } from "@artsy/cohesion"
+import { Tabs } from "@artsy/palette-mobile"
 import { ArtistAbout_artist$data } from "__generated__/ArtistAbout_artist.graphql"
 import Articles from "app/Components/Artist/Articles/Articles"
 import { ArtistCollectionsRailFragmentContainer } from "app/Components/Artist/ArtistArtworks/ArtistCollectionsRail"
@@ -7,7 +8,6 @@ import { ArtistConsignButtonFragmentContainer as ArtistConsignButton } from "app
 import Biography from "app/Components/Artist/Biography"
 import RelatedArtists from "app/Components/RelatedArtists/RelatedArtists"
 import { Stack } from "app/Components/Stack"
-import { StickyTabPageScrollView } from "app/Components/StickyTabPage/StickyTabPageScrollView"
 import { ArtistSeriesMoreSeriesFragmentContainer } from "app/Scenes/ArtistSeries/ArtistSeriesMoreSeries"
 import { extractNodes } from "app/utils/extractNodes"
 import { createFragmentContainer, graphql } from "react-relay"
@@ -22,7 +22,7 @@ export const ArtistAbout: React.FC<Props> = ({ artist }) => {
   const relatedArtists = extractNodes(artist.related?.artists)
 
   return (
-    <StickyTabPageScrollView>
+    <Tabs.ScrollView>
       <Stack spacing={4} my={2}>
         {!!artist.hasMetadata && <Biography artist={artist as any} />}
         <ArtistSeriesMoreSeriesFragmentContainer
@@ -48,7 +48,7 @@ export const ArtistAbout: React.FC<Props> = ({ artist }) => {
         {!!articles.length && <Articles articles={articles} />}
         {!!relatedArtists.length && <RelatedArtists artists={relatedArtists} />}
       </Stack>
-    </StickyTabPageScrollView>
+    </Tabs.ScrollView>
   )
 }
 

diff --git a/src/app/Components/Artist/ArtistArtworks/ArtistArtworks.tsx b/src/app/Components/Artist/ArtistArtworks/ArtistArtworks.tsx
@@ -1,32 +1,25 @@
 import { OwnerType } from "@artsy/cohesion"
-import { Spacer, Box, Message } from "@artsy/palette-mobile"
+import { Spacer, Box, Message, Tabs } from "@artsy/palette-mobile"
 import { ArtistArtworks_artist$data } from "__generated__/ArtistArtworks_artist.graphql"
+import { ArtistArtworksFilterHeader } from "app/Components/Artist/ArtistArtworks/ArtistArtworksFilterHeader"
+import { useShowArtworksFilterModal } from "app/Components/Artist/ArtistArtworks/hooks/useShowArtworksFilterModal"
 import { ArtworkFilterNavigator, FilterModalMode } from "app/Components/ArtworkFilter"
 import { Aggregations, FilterArray } from "app/Components/ArtworkFilter/ArtworkFilterHelpers"
-import {
-  ArtworkFiltersStoreProvider,
-  ArtworksFiltersStore,
-} from "app/Components/ArtworkFilter/ArtworkFilterStore"
+import { ArtworksFiltersStore } from "app/Components/ArtworkFilter/ArtworkFilterStore"
 import { ORDERED_ARTWORK_SORTS } from "app/Components/ArtworkFilter/Filters/SortOptions"
 import { convertSavedSearchCriteriaToFilterParams } from "app/Components/ArtworkFilter/SavedSearch/convertersToFilterParams"
 import { SearchCriteriaAttributes } from "app/Components/ArtworkFilter/SavedSearch/types"
-import {
-  useArtworkFilters,
-  useSelectedFiltersCount,
-} from "app/Components/ArtworkFilter/useArtworkFilters"
-import { ArtworksFilterHeader } from "app/Components/ArtworkGrids/ArtworksFilterHeader"
+import { useArtworkFilters } from "app/Components/ArtworkFilter/useArtworkFilters"
 import { FilteredArtworkGridZeroState } from "app/Components/ArtworkGrids/FilteredArtworkGridZeroState"
 import {
   InfiniteScrollArtworksGridContainer as InfiniteScrollArtworksGrid,
   Props as InfiniteScrollGridProps,
 } from "app/Components/ArtworkGrids/InfiniteScrollArtworksGrid"
-import { StickyTabPageFlatListContext } from "app/Components/StickyTabPage/StickyTabPageFlatList"
-import { StickyTabPageScrollView } from "app/Components/StickyTabPage/StickyTabPageScrollView"
+
 import { Schema } from "app/utils/track"
-import React, { useContext, useEffect, useState } from "react"
+import React, { useEffect } from "react"
 import { createPaginationContainer, graphql, RelayPaginationProp } from "react-relay"
 import { useTracking } from "react-tracking"
-import { SavedSearchButtonV2 } from "./SavedSearchButtonV2"
 
 interface ArtworksGridProps extends InfiniteScrollGridProps {
   artist: ArtistArtworks_artist$data
@@ -38,62 +31,33 @@ interface ArtworksGridProps extends InfiniteScrollGridProps {
 type FilterModalOpenedFrom = "sortAndFilter" | "createAlert"
 
 const ArtworksGrid: React.FC<ArtworksGridProps> = ({ artist, relay, ...props }) => {
-  const tracking = useTracking()
-  const [isFilterArtworksModalVisible, setFilterArtworkModalVisible] = useState(false)
-
-  const handleCloseFilterArtworksModal = () => setFilterArtworkModalVisible(false)
-  const handleOpenFilterArtworksModal = () => setFilterArtworkModalVisible(true)
-
-  const openFilterArtworksModal = (openedFrom: FilterModalOpenedFrom) => {
-    if (openedFrom === "sortAndFilter") {
-      tracking.trackEvent({
-        action_name: "filter",
-        context_screen_owner_type: Schema.OwnerEntityTypes.Artist,
-        context_screen: Schema.PageNames.ArtistPage,
-        context_screen_owner_id: artist.id,
-        context_screen_owner_slug: artist.slug,
-        action_type: Schema.ActionTypes.Tap,
-      })
-    }
-
-    handleOpenFilterArtworksModal()
-  }
-
-  const closeFilterArtworksModal = () => {
-    tracking.trackEvent({
-      action_name: "closeFilterWindow",
-      context_screen_owner_type: Schema.OwnerEntityTypes.Artist,
-      context_screen: Schema.PageNames.ArtistPage,
-      context_screen_owner_id: artist.id,
-      context_screen_owner_slug: artist.slug,
-      action_type: Schema.ActionTypes.Tap,
-    })
-
-    handleCloseFilterArtworksModal()
-  }
+  const { showFilterArtworksModal, openFilterArtworksModal, closeFilterArtworksModal } =
+    useShowArtworksFilterModal({ artist })
 
   return (
-    <ArtworkFiltersStoreProvider>
-      <StickyTabPageScrollView keyboardShouldPersistTaps="handled">
-        <ArtistArtworksContainer
-          {...props}
-          artist={artist}
-          relay={relay}
-          openFilterModal={openFilterArtworksModal}
-        />
-        <ArtworkFilterNavigator
-          {...props}
-          id={artist.internalID}
-          slug={artist.slug}
-          visible={isFilterArtworksModalVisible}
-          name={artist.name ?? ""}
-          exitModal={handleCloseFilterArtworksModal}
-          closeModal={closeFilterArtworksModal}
-          mode={FilterModalMode.ArtistArtworks}
-          shouldShowCreateAlertButton
-        />
-      </StickyTabPageScrollView>
-    </ArtworkFiltersStoreProvider>
+    <Tabs.ScrollView keyboardShouldPersistTaps="handled">
+      <Tabs.SubTabBar>
+        <ArtistArtworksFilterHeader artist={artist!} />
+      </Tabs.SubTabBar>
+
+      <ArtistArtworksContainer
+        {...props}
+        artist={artist}
+        relay={relay}
+        openFilterModal={openFilterArtworksModal}
+      />
+      <ArtworkFilterNavigator
+        {...props}
+        id={artist.internalID}
+        slug={artist.slug}
+        visible={showFilterArtworksModal}
+        name={artist.name ?? ""}
+        exitModal={closeFilterArtworksModal}
+        closeModal={closeFilterArtworksModal}
+        mode={FilterModalMode.ArtistArtworks}
+        shouldShowCreateAlertButton
+      />
+    </Tabs.ScrollView>
   )
 }
 
@@ -106,7 +70,6 @@ const ArtistArtworksContainer: React.FC<ArtworksGridProps & ArtistArtworksContai
   relay,
   searchCriteria,
   predefinedFilters,
-  openFilterModal,
   ...props
 }) => {
   const tracking = useTracking()
@@ -116,7 +79,6 @@ const ArtistArtworksContainer: React.FC<ArtworksGridProps & ArtistArtworksContai
     (state) => state.setInitialFilterStateAction
   )
 
-  const appliedFiltersCount = useSelectedFiltersCount()
   const artworks = artist.artworks
   const artworksCount = artworks?.edges?.length
 
@@ -160,30 +122,10 @@ const ArtistArtworksContainer: React.FC<ArtworksGridProps & ArtistArtworksContai
     })
   }
 
-  const setJSX = useContext(StickyTabPageFlatListContext).setJSX
-
-  useEffect(() => {
-    setJSX(
-      <Box backgroundColor="white">
-        <ArtworksFilterHeader
-          onFilterPress={() => openFilterModal("sortAndFilter")}
-          selectedFiltersCount={appliedFiltersCount}
-          childrenPosition="left"
-        >
-          <SavedSearchButtonV2
-            artistId={artist.internalID}
-            artistSlug={artist.slug}
-            onPress={() => openFilterModal("createAlert")}
-          />
-        </ArtworksFilterHeader>
-      </Box>
-    )
-  }, [appliedFiltersCount])
-
   const filteredArtworks = () => {
     if (artworksCount === 0) {
       return (
-        <Box mb="80px" pt={1}>
+        <Box mb="80px" pt={2}>
           <FilteredArtworkGridZeroState
             id={artist.id}
             slug={artist.slug}
@@ -195,7 +137,7 @@ const ArtistArtworksContainer: React.FC<ArtworksGridProps & ArtistArtworksContai
     } else {
       return (
         <>
-          <Spacer y={1} />
+          <Spacer y={2} />
           <InfiniteScrollArtworksGrid
             connection={artist.artworks!}
             loadMore={relay.loadMore}
@@ -236,6 +178,7 @@ export default createPaginationContainer(
         cursor: { type: "String" }
         input: { type: "FilterArtworksInput" }
       ) {
+        ...ArtistArtworksFilterHeader_artist
         id
         slug
         name