fix(art-quiz): fix tabs issue (#8861)

artsy · Jun 12, 2023 · fa9d0dc · fa9d0dc
1 parent cd0d3f6
commit fa9d0dc
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 20 deletions.
diff --git a/src/app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResultsTabs/ArtQuizExploreArtworks.tsx b/src/app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResultsTabs/ArtQuizExploreArtworks.tsx
@@ -23,6 +23,7 @@ export const ArtQuizExploreArtworks = ({
     <Tabs.ScrollView
       contentContainerStyle={{
         marginVertical: space(2),
+        paddingBottom: space(4),
         paddingHorizontal: space(1),
       }}
     >

diff --git a/src/app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResultsTabs/ArtQuizLikedArtworks.tsx b/src/app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResultsTabs/ArtQuizLikedArtworks.tsx
@@ -22,6 +22,7 @@ export const ArtQuizLikedArtworks = ({
   return (
     <Tabs.ScrollView
       contentContainerStyle={{
+        paddingBottom: space(4),
         marginVertical: space(2),
         paddingHorizontal: space(1),
       }}

diff --git a/src/app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResultsTabs/ArtQuizResultsTabs.tsx b/src/app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResultsTabs/ArtQuizResultsTabs.tsx
@@ -6,7 +6,7 @@ import { ArtQuizExploreArtworks } from "app/Scenes/ArtQuiz/ArtQuizResults/ArtQui
 import { ArtQuizLikedArtworks } from "app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResultsTabs/ArtQuizLikedArtworks"
 import { ArtQuizResultsTabsHeader } from "app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResultsTabs/ArtQuizResultsTabsHeader"
 import { navigate } from "app/system/navigation/navigate"
-import { useState } from "react"
+import React, { useState } from "react"
 import { graphql, useFragment } from "react-relay"
 
 type TabName = "worksYouLiked" | "exploreWorks" | "exploreArtists"
@@ -24,32 +24,14 @@ export const ArtQuizResultsTabs = ({ me }: { me: ArtQuizResultsQuery$data["me"]
   return (
     <Tabs.TabsWithHeader
       title={title}
-      tabScrollEnabled
       lazy
       headerProps={{
         onBack: () => navigate("/"),
       }}
-      onTabPress={(tabName) => {
-        setActiveTab(tabName as TabName)
-      }}
       onTabChange={({ tabName }) => {
         setActiveTab(tabName as TabName)
       }}
-      BelowTitleHeaderComponent={() => {
-        if (activeTab === "worksYouLiked") {
-          return (
-            <Flex mb={1}>
-              <ArtQuizResultsTabsHeader subtitle="We think you’ll enjoy these recommendations based on your likes. Keep saving and following to continue tailoring Artsy to you." />
-            </Flex>
-          )
-        }
-
-        return (
-          <Flex mb={1}>
-            <ArtQuizResultsTabsHeader subtitle="We think you’ll enjoy these recommendations based on your likes. To tailor Artsy to your art tastes, follow artists and save works you love." />
-          </Flex>
-        )
-      }}
+      BelowTitleHeaderComponent={() => <BelowHeaderComponent activeTab={activeTab} />}
     >
       <Tabs.Tab name="worksYouLiked" label="Works you liked">
         <Tabs.Lazy>
@@ -70,6 +52,22 @@ export const ArtQuizResultsTabs = ({ me }: { me: ArtQuizResultsQuery$data["me"]
   )
 }
 
+const BelowHeaderComponent: React.FC<{ activeTab: TabName }> = React.memo((props) => {
+  if (props.activeTab === "worksYouLiked") {
+    return (
+      <Flex mb={1}>
+        <ArtQuizResultsTabsHeader subtitle="We think you’ll enjoy these recommendations based on your likes. Keep saving and following to continue tailoring Artsy to you." />
+      </Flex>
+    )
+  }
+
+  return (
+    <Flex mb={1}>
+      <ArtQuizResultsTabsHeader subtitle="We think you’ll enjoy these recommendations based on your likes. To tailor Artsy to your art tastes, follow artists and save works you love." />
+    </Flex>
+  )
+})
+
 const artQuizResultsTabsFragment = graphql`
   fragment ArtQuizResultsTabs_me on Me {
     quiz {