chore: use collapsible tab views inside profile tab (#8820)

* refactor: remove setJSX from Profile Tab * refactor: use palette sticky tabs inside my c * chore: remove visual clues related code * feat(tabs): Add tab notification support to MyCollection (#8823) * feat(notifications): add tab notification support * fix(indicators): make positioning right * fix(myc): use screen component --------- Co-authored-by: Christopher Pappas <[email protected]>
artsy · Jun 7, 2023 · 8cb6c70 · 8cb6c70
1 parent 3744f72
commit 8cb6c70
Show file tree

Hide file tree

Showing 14 changed files with 172 additions and 274 deletions.
diff --git a/.secrets.baseline b/.secrets.baseline
@@ -288,7 +288,7 @@
         "filename": "src/app/Scenes/MyCollection/MyCollection.tests.tsx",
         "hashed_secret": "6414700358f2ae5762917a164e2e30df8783fc4e",
         "is_verified": false,
-        "line_number": 144
+        "line_number": 142
       }
     ],
     "src/app/Scenes/MyCollection/Screens/ArtworkForm/MyCollectionArtworkForm.tests.tsx": [
@@ -1035,5 +1035,5 @@
       }
     ]
   },
-  "generated_at": "2023-05-26T18:47:03Z"
+  "generated_at": "2023-06-06T15:05:27Z"
 }
diff --git a/src/app/Components/StickyTabPage/StickyTabPagePlaceholder.tsx b/src/app/Components/StickyTabPage/StickyTabPagePlaceholder.tsx
diff --git a/src/app/Scenes/ArtworkLists/ArtworkLists.tsx b/src/app/Scenes/ArtworkLists/ArtworkLists.tsx
@@ -1,15 +1,13 @@
-import { Flex, Spacer, Spinner, useScreenDimensions, useSpace } from "@artsy/palette-mobile"
+import { Flex, Spacer, Spinner, Tabs, useScreenDimensions, useSpace } from "@artsy/palette-mobile"
 import { ArtworkListsQuery } from "__generated__/ArtworkListsQuery.graphql"
 import { ArtworkLists_collectionsConnection$key } from "__generated__/ArtworkLists_collectionsConnection.graphql"
 import { GenericGridPlaceholder } from "app/Components/ArtworkGrids/GenericGrid"
-import { StickTabPageRefreshControl } from "app/Components/StickyTabPage/StickTabPageRefreshControl"
-import { StickyTabPageFlatList } from "app/Components/StickyTabPage/StickyTabPageFlatList"
-import { StickyTabPageScrollView } from "app/Components/StickyTabPage/StickyTabPageScrollView"
 import { ArtworkListItem } from "app/Scenes/ArtworkLists/ArtworkListItem"
 import { useArtworkListsColCount } from "app/Scenes/ArtworkLists/useArtworkListsColCount"
 import { extractNodes } from "app/utils/extractNodes"
 import { isPad } from "app/utils/hardware"
 import { Suspense, useState } from "react"
+import { RefreshControl } from "react-native"
 import { graphql, useLazyLoadQuery, usePaginationFragment } from "react-relay"
 
 /**
@@ -81,16 +79,16 @@ export const ArtworkLists = () => {
   })
 
   return (
-    <StickyTabPageFlatList
-      contentContainerStyle={{ paddingVertical: space(2) }}
+    <Tabs.FlatList
+      contentContainerStyle={{ padding: space(2) }}
+      style={{ paddingTop: space(2) }}
       data={artworkSections}
+      renderItem={({ item }) => item.content}
       numColumns={artworkListsColCount}
       keyExtractor={(item) => item.key}
       onEndReached={handleLoadMore}
       ListFooterComponent={!!hasNext ? <LoadingIndicator /> : <Spacer x={2} />}
-      refreshControl={
-        <StickTabPageRefreshControl onRefresh={handleRefresh} refreshing={refreshing} />
-      }
+      refreshControl={<RefreshControl onRefresh={handleRefresh} refreshing={refreshing} />}
     />
   )
 }
@@ -113,9 +111,9 @@ export const ArtworkListsPlaceHolder = () => {
   const screen = useScreenDimensions()
   const space = useSpace()
   return (
-    <StickyTabPageScrollView scrollEnabled={false} style={{ paddingTop: space(2) }}>
+    <Tabs.ScrollView scrollEnabled={false} style={{ paddingTop: space(2) }}>
       <GenericGridPlaceholder width={screen.width - space(4)} />
-    </StickyTabPageScrollView>
+    </Tabs.ScrollView>
   )
 }
 

diff --git a/src/app/Scenes/Favorites/FavoriteArtworks.tsx b/src/app/Scenes/Favorites/FavoriteArtworks.tsx
@@ -1,10 +1,9 @@
-import { Spacer, useSpace, Button } from "@artsy/palette-mobile"
+import { Button, Spacer, Tabs, useSpace } from "@artsy/palette-mobile"
 import { FavoriteArtworksQuery } from "__generated__/FavoriteArtworksQuery.graphql"
 import { FavoriteArtworks_me$data } from "__generated__/FavoriteArtworks_me.graphql"
 import GenericGrid, { GenericGridPlaceholder } from "app/Components/ArtworkGrids/GenericGrid"
 import { LoadFailureView } from "app/Components/LoadFailureView"
 import { ZeroState } from "app/Components/States/ZeroState"
-import { StickTabPageRefreshControl } from "app/Components/StickyTabPage/StickTabPageRefreshControl"
 import { StickyTabPageScrollView } from "app/Components/StickyTabPage/StickyTabPageScrollView"
 import { PAGE_SIZE } from "app/Components/constants"
 import { navigate } from "app/system/navigation/navigate"
@@ -14,8 +13,8 @@ import { useScreenDimensions } from "app/utils/hooks"
 import { FAVORITE_ARTWORKS_REFRESH_KEY, RefreshEvents } from "app/utils/refreshHelpers"
 import { renderWithPlaceholder } from "app/utils/renderWithPlaceholder"
 import { useEffect, useState } from "react"
-import { Image } from "react-native"
-import { createPaginationContainer, graphql, QueryRenderer, RelayPaginationProp } from "react-relay"
+import { Image, RefreshControl } from "react-native"
+import { QueryRenderer, RelayPaginationProp, createPaginationContainer, graphql } from "react-relay"
 
 interface Props {
   me: FavoriteArtworks_me$data
@@ -74,9 +73,9 @@ const SavedWorks: React.FC<Props> = ({ me, relay, onDataFetching }) => {
 
   if (artworks.length === 0) {
     return (
-      <StickyTabPageScrollView
+      <Tabs.ScrollView
         refreshControl={
-          <StickTabPageRefreshControl refreshing={refreshingFromPull} onRefresh={handleRefresh} />
+          <RefreshControl refreshing={refreshingFromPull} onRefresh={handleRefresh} />
         }
         contentContainerStyle={{ flexGrow: 1, justifyContent: "center", height: "100%" }}
       >
@@ -102,27 +101,35 @@ const SavedWorks: React.FC<Props> = ({ me, relay, onDataFetching }) => {
             </Button>
           }
         />
-      </StickyTabPageScrollView>
+      </Tabs.ScrollView>
     )
   }
 
+  const data = [
+    {
+      content: (
+        <GenericGrid
+          artworks={artworks}
+          isLoading={fetchingMoreData}
+          hidePartner
+          artistNamesTextStyle={{ weight: "regular" }}
+          saleInfoTextStyle={{ weight: "medium", color: "black100" }}
+          width={width - space(2)}
+        />
+      ),
+      key: "grid",
+    },
+  ]
+
   return (
-    <StickyTabPageScrollView
+    <Tabs.FlatList
       contentContainerStyle={{ paddingVertical: space(2) }}
+      data={data}
       onEndReached={loadMore}
-      refreshControl={
-        <StickTabPageRefreshControl refreshing={refreshingFromPull} onRefresh={handleRefresh} />
-      }
-    >
-      <GenericGrid
-        artworks={artworks}
-        isLoading={fetchingMoreData}
-        hidePartner
-        artistNamesTextStyle={{ weight: "regular" }}
-        saleInfoTextStyle={{ weight: "medium", color: "black100" }}
-        width={width - space(2)}
-      />
-    </StickyTabPageScrollView>
+      renderItem={({ item }) => item.content}
+      keyExtractor={({ key }) => key}
+      refreshControl={<RefreshControl refreshing={refreshingFromPull} onRefresh={handleRefresh} />}
+    />
   )
 }
 

diff --git a/src/app/Scenes/MyCollection/Components/MyCollectionSearchBar.tsx b/src/app/Scenes/MyCollection/Components/MyCollectionSearchBar.tsx
@@ -1,9 +1,8 @@
-import { Flex, useTheme, Text, useSpace } from "@artsy/palette-mobile"
+import { Flex, INPUT_HEIGHT, Text, useSpace, useTheme } from "@artsy/palette-mobile"
 import { GridViewIcon } from "app/Components/Icons/GridViewIcon"
 import { ListViewIcon } from "app/Components/Icons/ListViewIcon"
 import SearchIcon from "app/Components/Icons/SearchIcon"
 import { Input } from "app/Components/Input"
-import { useStickyTabPageContext } from "app/Components/StickyTabPage/StickyTabPageContext"
 import { useAnimatedValue } from "app/Components/StickyTabPage/reanimatedHelpers"
 import { ViewOption } from "app/Scenes/Search/UserPrefsModel"
 import { GlobalStore } from "app/store/GlobalStore"
@@ -40,8 +39,6 @@ export const MyCollectionSearchBar: React.FC<MyCollectionSearchBarProps> = ({
 
   const [value, setValue] = useState(searchString)
 
-  const { staticHeaderHeight } = useStickyTabPageContext()
-
   const viewOptionPreference = GlobalStore.useAppState((state) => state.userPrefs.artworkViewOption)
 
   const [viewOption, setViewOption] = useState(viewOptionPreference)
@@ -61,26 +58,12 @@ export const MyCollectionSearchBar: React.FC<MyCollectionSearchBarProps> = ({
     GlobalStore.actions.userPrefs.setArtworkViewOption(selectedViewOption)
   }
 
-  Animated.useCode(
-    () =>
-      Animated.call(
-        [staticHeaderHeight, hasRunFocusedAnimation],
-        ([, hasFinishedAnimationLoop]) => {
-          if (hasFinishedAnimationLoop) {
-            return
-          }
-          hasRunFocusedAnimation.setValue(new Animated.Value(1))
-        }
-      ),
-    [isFocused]
-  )
-
   useEffect(() => {
     debouncedSetKeywordFilter(value)
   }, [value])
 
   return (
-    <Flex>
+    <Flex height={INPUT_HEIGHT} justifyContent="center">
       {isFocused ? (
         <Flex flexDirection="row" alignItems="center">
           <Input
@@ -123,7 +106,7 @@ export const MyCollectionSearchBar: React.FC<MyCollectionSearchBarProps> = ({
           </TouchableOpacity>
         </Flex>
       ) : (
-        <Flex my={1}>
+        <Flex>
           <Flex flexDirection="row" justifyContent="space-between">
             <Flex flex={1} mr={1} justifyContent="center">
               <TouchableWithoutFeedback

diff --git a/src/app/Scenes/MyCollection/Components/MyCollectionStickyHeader.tsx b/src/app/Scenes/MyCollection/Components/MyCollectionStickyHeader.tsx
@@ -43,7 +43,6 @@ interface MyCollectionStickyHeaderProps {
   hasMarketSignals: boolean
   showModal: () => void
   showNewWorksMessage: boolean
-  showSeparator: boolean
 }
 
 export const MyCollectionStickyHeader: React.FC<MyCollectionStickyHeaderProps> = ({
@@ -52,7 +51,6 @@ export const MyCollectionStickyHeader: React.FC<MyCollectionStickyHeaderProps> =
   hasMarketSignals,
   showModal,
   showNewWorksMessage,
-  showSeparator,
 }) => {
   const { showVisualClue } = useVisualClue()
 
@@ -74,9 +72,7 @@ export const MyCollectionStickyHeader: React.FC<MyCollectionStickyHeaderProps> =
           <MainStickyHeader hasArtworks={hasArtworks} />
         </Flex>
       )}
-      {!!showArtworkFilters && (
-        <Filters filtersCount={filtersCount} showModal={showModal} showSeparator={showSeparator} />
-      )}
+      {!!showArtworkFilters && <Filters filtersCount={filtersCount} showModal={showModal} />}
       <Messages
         showNewWorksMessage={showNewWorksMessage}
         showSubmissionMessage={showSubmissionMessage}
@@ -267,42 +263,32 @@ const AnimatedPill: React.FC<{
   )
 }
 
-const Filters = ({
-  filtersCount,
-  showModal,
-  showSeparator,
-}: {
-  filtersCount: number
-  showModal: () => void
-  showSeparator: boolean
-}) => {
+const Filters = ({ filtersCount, showModal }: { filtersCount: number; showModal: () => void }) => {
   const { trackEvent } = useTracking()
 
   return (
-    <ArtworksFilterHeader
-      selectedFiltersCount={filtersCount}
-      onFilterPress={showModal}
-      showSeparator={showSeparator}
-    >
-      <Button
-        data-test-id="add-artwork-button-non-zero-state"
-        haptic
-        onPress={async () => {
-          navigate("my-collection/artworks/new", {
-            passProps: {
-              mode: "add",
-              source: Tab.collection,
-              onSuccess: popToRoot,
-            },
-          })
-          trackEvent(tracks.addCollectedArtwork())
-        }}
-        size="small"
-        variant="fillDark"
-      >
-        Upload Artwork
-      </Button>
-    </ArtworksFilterHeader>
+    <Flex px={2} backgroundColor="white100">
+      <ArtworksFilterHeader selectedFiltersCount={filtersCount} onFilterPress={showModal}>
+        <Button
+          data-test-id="add-artwork-button-non-zero-state"
+          haptic
+          onPress={async () => {
+            navigate("my-collection/artworks/new", {
+              passProps: {
+                mode: "add",
+                source: Tab.collection,
+                onSuccess: popToRoot,
+              },
+            })
+            trackEvent(tracks.addCollectedArtwork())
+          }}
+          size="small"
+          variant="fillDark"
+        >
+          Upload Artwork
+        </Button>
+      </ArtworksFilterHeader>
+    </Flex>
   )
 }
 

diff --git a/src/app/Scenes/MyCollection/MyCollection.tests.tsx b/src/app/Scenes/MyCollection/MyCollection.tests.tsx
@@ -3,7 +3,6 @@ import { MyCollectionTestsQuery } from "__generated__/MyCollectionTestsQuery.gra
 import { ArtworkFiltersStoreProvider } from "app/Components/ArtworkFilter/ArtworkFilterStore"
 import { InfiniteScrollMyCollectionArtworksGridContainer } from "app/Components/ArtworkGrids/InfiniteScrollArtworksGrid"
 import { StickyTabPage } from "app/Components/StickyTabPage/StickyTabPage"
-import { StickyTabPageScrollView } from "app/Components/StickyTabPage/StickyTabPageScrollView"
 
 import { MyCollectionTabsStoreProvider } from "app/Scenes/MyCollection/State/MyCollectionTabsStore"
 import { Tab } from "app/Scenes/MyProfile/MyProfileHeaderMyCollectionAndSavedWorks"
@@ -106,7 +105,6 @@ describe("MyCollection", () => {
   describe("collection is not empty", () => {
     it("renders without throwing an error", () => {
       const tree = renderWithRelay()
-      expect(tree.UNSAFE_getByType(StickyTabPageScrollView)).toBeDefined()
       expect(tree.UNSAFE_getByType(InfiniteScrollMyCollectionArtworksGridContainer)).toBeDefined()
     })
   })