chore: revert section wrapper

artsy · Sep 20, 2024 · 881d511 · 881d511
1 parent 06b10cc
commit 881d511
Show file tree

Hide file tree

Showing 17 changed files with 462 additions and 335 deletions.
diff --git a/src/app/Scenes/HomeView/HomeView.tsx b/src/app/Scenes/HomeView/HomeView.tsx
@@ -99,7 +99,7 @@ export const HomeView: React.FC = () => {
           data={sections}
           keyExtractor={(item) => item.internalID}
           renderItem={({ item }) => {
-            return <Section section={item} />
+            return <Section section={item} my={HOME_VIEW_SECTIONS_SEPARATOR_HEIGHT} />
           }}
           onEndReached={() => loadNext(NUMBER_OF_SECTIONS_TO_LOAD)}
           ListHeaderComponent={HomeHeader}

diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionActivity.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionActivity.tsx
@@ -1,5 +1,5 @@
 import { ContextModule, OwnerType, ScreenOwnerType } from "@artsy/cohesion"
-import { Flex, Join, SkeletonBox, SkeletonText, Spacer } from "@artsy/palette-mobile"
+import { Flex, FlexProps, Join, SkeletonBox, SkeletonText, Spacer } from "@artsy/palette-mobile"
 import { HomeViewSectionActivityQuery } from "__generated__/HomeViewSectionActivityQuery.graphql"
 import { HomeViewSectionActivity_section$key } from "__generated__/HomeViewSectionActivity_section.graphql"
 import { SectionTitle } from "app/Components/SectionTitle"
@@ -10,7 +10,6 @@ import {
   ACTIVITY_RAIL_ITEM_WIDTH,
   ActivityRailItem,
 } from "app/Scenes/Home/Components/ActivityRailItem"
-import { HomeViewSectionWrapper } from "app/Scenes/HomeView/Components/HomeViewSectionWrapper"
 import {
   HORIZONTAL_FLATLIST_INTIAL_NUMBER_TO_RENDER_DEFAULT,
   HORIZONTAL_FLATLIST_WINDOW_SIZE,
@@ -28,10 +27,13 @@ interface HomeViewSectionActivityProps {
   section: HomeViewSectionActivity_section$key
 }
 
-export const HomeViewSectionActivity: React.FC<HomeViewSectionActivityProps> = (props) => {
+export const HomeViewSectionActivity: React.FC<HomeViewSectionActivityProps> = ({
+  section: sectionProp,
+  ...flexProps
+}) => {
   const tracking = useHomeViewTracking()
 
-  const section = useFragment(sectionFragment, props.section)
+  const section = useFragment(sectionFragment, sectionProp)
   const notifications = extractNodes(section.notificationsConnection).filter(
     shouldDisplayNotification
   )
@@ -60,7 +62,7 @@ export const HomeViewSectionActivity: React.FC<HomeViewSectionActivityProps> = (
   }
 
   return (
-    <HomeViewSectionWrapper contextModule={section.contextModule as ContextModule}>
+    <Flex {...flexProps}>
       <Flex px={2}>
         <SectionTitle title={section.component?.title} onPress={onSectionViewAll} />
       </Flex>
@@ -94,7 +96,7 @@ export const HomeViewSectionActivity: React.FC<HomeViewSectionActivityProps> = (
           )
         }}
       />
-    </HomeViewSectionWrapper>
+    </Flex>
   )
 }
 
@@ -151,11 +153,11 @@ const homeViewSectionActivityQuery = graphql`
   }
 `
 
-const HomeViewSectionActivityPlaceholder: React.FC = () => {
+const HomeViewSectionActivityPlaceholder: React.FC<FlexProps> = (flexProps) => {
   const randomValue = useMemoizedRandom()
 
   return (
-    <HomeViewSectionWrapper>
+    <Flex {...flexProps}>
       <Flex ml={2} mr={2}>
         <SkeletonText variant="lg-display">Latest Activity</SkeletonText>
         <Spacer y={2} />
@@ -183,20 +185,23 @@ const HomeViewSectionActivityPlaceholder: React.FC = () => {
           </Join>
         </Flex>
       </Flex>
-    </HomeViewSectionWrapper>
+    </Flex>
   )
 }
 
-export const HomeViewSectionActivityQueryRenderer: React.FC<{
+interface HomeViewSectionActivityQueryRendererProps extends FlexProps {
   sectionID: string
-}> = withSuspense((props) => {
-  const data = useLazyLoadQuery<HomeViewSectionActivityQuery>(homeViewSectionActivityQuery, {
-    id: props.sectionID,
-  })
+}
 
-  if (!data.homeView.section) {
-    return null
-  }
+export const HomeViewSectionActivityQueryRenderer: React.FC<HomeViewSectionActivityQueryRendererProps> =
+  withSuspense(({ sectionID, ...flexProps }) => {
+    const data = useLazyLoadQuery<HomeViewSectionActivityQuery>(homeViewSectionActivityQuery, {
+      id: sectionID,
+    })
+
+    if (!data.homeView.section) {
+      return null
+    }
 
-  return <HomeViewSectionActivity section={data.homeView.section} />
-}, HomeViewSectionActivityPlaceholder)
+    return <HomeViewSectionActivity section={data.homeView.section} {...flexProps} />
+  }, HomeViewSectionActivityPlaceholder)
diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionArticles.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionArticles.tsx
@@ -1,10 +1,17 @@
 import { ContextModule, ScreenOwnerType } from "@artsy/cohesion"
-import { Flex, Join, Skeleton, SkeletonBox, SkeletonText, Spacer } from "@artsy/palette-mobile"
+import {
+  Flex,
+  FlexProps,
+  Join,
+  Skeleton,
+  SkeletonBox,
+  SkeletonText,
+  Spacer,
+} from "@artsy/palette-mobile"
 import { HomeViewSectionArticlesQuery } from "__generated__/HomeViewSectionArticlesQuery.graphql"
 import { HomeViewSectionArticles_section$key } from "__generated__/HomeViewSectionArticles_section.graphql"
 import { ARTICLE_CARD_IMAGE_HEIGHT, ARTICLE_CARD_IMAGE_WIDTH } from "app/Components/ArticleCard"
 import { ArticlesRailFragmentContainer } from "app/Scenes/Home/Components/ArticlesRail"
-import { HomeViewSectionWrapper } from "app/Scenes/HomeView/Components/HomeViewSectionWrapper"
 import { HOME_VIEW_SECTIONS_SEPARATOR_HEIGHT } from "app/Scenes/HomeView/HomeView"
 import { useHomeViewTracking } from "app/Scenes/HomeView/useHomeViewTracking"
 import { navigate } from "app/system/navigation/navigate"
@@ -17,8 +24,11 @@ interface HomeViewSectionArticlesProps {
   section: HomeViewSectionArticles_section$key
 }
 
-export const HomeViewSectionArticles: React.FC<HomeViewSectionArticlesProps> = (props) => {
-  const section = useFragment(sectionFragment, props.section)
+export const HomeViewSectionArticles: React.FC<HomeViewSectionArticlesProps> = ({
+  section: sectionProp,
+  ...flexProps
+}) => {
+  const section = useFragment(sectionFragment, sectionProp)
   const tracking = useHomeViewTracking()
   const viewAll = section.component?.behaviors?.viewAll
 
@@ -38,7 +48,7 @@ export const HomeViewSectionArticles: React.FC<HomeViewSectionArticlesProps> = (
   }
 
   return (
-    <HomeViewSectionWrapper contextModule={section.contextModule as ContextModule}>
+    <Flex {...flexProps}>
       <ArticlesRailFragmentContainer
         title={section.component?.title ?? ""}
         articlesConnection={section.articlesConnection}
@@ -52,7 +62,7 @@ export const HomeViewSectionArticles: React.FC<HomeViewSectionArticlesProps> = (
         }}
         onSectionTitlePress={viewAll ? onSectionViewAll : undefined}
       />
-    </HomeViewSectionWrapper>
+    </Flex>
   )
 }
 
@@ -85,11 +95,11 @@ const homeViewSectionArticlesQuery = graphql`
   }
 `
 
-const HomeViewSectionArticlesPlaceholder: React.FC = () => {
+const HomeViewSectionArticlesPlaceholder: React.FC<FlexProps> = (flexProps) => {
   const randomValue = useMemoizedRandom()
   return (
     <Skeleton>
-      <HomeViewSectionWrapper>
+      <Flex {...flexProps}>
         <Flex mx={2} my={HOME_VIEW_SECTIONS_SEPARATOR_HEIGHT}>
           <SkeletonText variant="lg-display">Artsy Editorial</SkeletonText>
 
@@ -120,21 +130,24 @@ const HomeViewSectionArticlesPlaceholder: React.FC = () => {
             </Join>
           </Flex>
         </Flex>
-      </HomeViewSectionWrapper>
+      </Flex>
     </Skeleton>
   )
 }
 
-export const HomeViewSectionArticlesQueryRenderer: React.FC<{
+interface HomeViewSectionArticlesQueryRendererProps extends FlexProps {
   sectionID: string
-}> = withSuspense((props) => {
-  const data = useLazyLoadQuery<HomeViewSectionArticlesQuery>(homeViewSectionArticlesQuery, {
-    id: props.sectionID,
-  })
+}
 
-  if (!data.homeView.section) {
-    return null
-  }
+export const HomeViewSectionArticlesQueryRenderer: React.FC<HomeViewSectionArticlesQueryRendererProps> =
+  withSuspense(({ sectionID, ...flexProps }) => {
+    const data = useLazyLoadQuery<HomeViewSectionArticlesQuery>(homeViewSectionArticlesQuery, {
+      id: sectionID,
+    })
+
+    if (!data.homeView.section) {
+      return null
+    }
 
-  return <HomeViewSectionArticles section={data.homeView.section} />
-}, HomeViewSectionArticlesPlaceholder)
+    return <HomeViewSectionArticles section={data.homeView.section} {...flexProps} />
+  }, HomeViewSectionArticlesPlaceholder)
diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionArticlesCards.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionArticlesCards.tsx
@@ -1,6 +1,7 @@
 import { ContextModule, ScreenOwnerType } from "@artsy/cohesion"
 import {
   Flex,
+  FlexProps,
   Separator,
   Skeleton,
   SkeletonBox,
@@ -14,7 +15,6 @@ import {
   HomeViewSectionArticlesCards_section$data,
   HomeViewSectionArticlesCards_section$key,
 } from "__generated__/HomeViewSectionArticlesCards_section.graphql"
-import { HomeViewSectionWrapper } from "app/Scenes/HomeView/Components/HomeViewSectionWrapper"
 import { useHomeViewTracking } from "app/Scenes/HomeView/useHomeViewTracking"
 import { navigate } from "app/system/navigation/navigate"
 import { extractNodes } from "app/utils/extractNodes"
@@ -31,10 +31,11 @@ type ArticleType = ExtractNodeType<
   HomeViewSectionArticlesCards_section$data["cardArticlesConnection"]
 >
 
-export const HomeViewSectionArticlesCards: React.FC<HomeViewSectionArticlesCardsProps> = (
-  props
-) => {
-  const section = useFragment(fragment, props.section)
+export const HomeViewSectionArticlesCards: React.FC<HomeViewSectionArticlesCardsProps> = ({
+  section: sectionProp,
+  ...flexProps
+}) => {
+  const section = useFragment(fragment, sectionProp)
   const articles = extractNodes(section.cardArticlesConnection)
   const viewAll = section.component?.behaviors?.viewAll
 
@@ -60,7 +61,7 @@ export const HomeViewSectionArticlesCards: React.FC<HomeViewSectionArticlesCards
   }
 
   return (
-    <HomeViewSectionWrapper contextModule={section.contextModule as ContextModule}>
+    <Flex {...flexProps}>
       <Flex mx={2} p={2} border="1px solid" borderColor="black30" gap={space(2)}>
         <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
           <Text variant="lg-display">{section.component?.title}</Text>
@@ -86,7 +87,7 @@ export const HomeViewSectionArticlesCards: React.FC<HomeViewSectionArticlesCards
           </Touchable>
         )}
       </Flex>
-    </HomeViewSectionWrapper>
+    </Flex>
   )
 }
 
@@ -122,11 +123,11 @@ const fragment = graphql`
   }
 `
 
-const HomeViewSectionArticlesCardsPlaceholder: React.FC = () => {
+const HomeViewSectionArticlesCardsPlaceholder: React.FC<FlexProps> = (flexProps) => {
   const space = useSpace()
   return (
     <Skeleton>
-      <HomeViewSectionWrapper>
+      <Flex {...flexProps}>
         <Flex mx={2} p={2} border="1px solid" borderColor="black30" gap={space(2)}>
           <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
             <SkeletonText variant="lg-display">title</SkeletonText>
@@ -146,7 +147,7 @@ const HomeViewSectionArticlesCardsPlaceholder: React.FC = () => {
             <SkeletonText variant="sm-display">More News</SkeletonText>
           </Flex>
         </Flex>
-      </HomeViewSectionWrapper>
+      </Flex>
     </Skeleton>
   )
 }
@@ -161,19 +162,22 @@ const homeViewSectionArticlesCardsQuery = graphql`
   }
 `
 
-export const HomeViewSectionArticlesCardsQueryRenderer: React.FC<{
+interface HomeViewSectionArticlesCardsQueryRendererProps extends FlexProps {
   sectionID: string
-}> = withSuspense((props) => {
-  const data = useLazyLoadQuery<HomeViewSectionArticlesCardsQuery>(
-    homeViewSectionArticlesCardsQuery,
-    {
-      id: props.sectionID,
-    }
-  )
+}
 
-  if (!data.homeView.section) {
-    return null
-  }
+export const HomeViewSectionArticlesCardsQueryRenderer: React.FC<HomeViewSectionArticlesCardsQueryRendererProps> =
+  withSuspense(({ sectionID, ...flexProps }) => {
+    const data = useLazyLoadQuery<HomeViewSectionArticlesCardsQuery>(
+      homeViewSectionArticlesCardsQuery,
+      {
+        id: sectionID,
+      }
+    )
+
+    if (!data.homeView.section) {
+      return null
+    }
 
-  return <HomeViewSectionArticlesCards section={data.homeView.section} />
-}, HomeViewSectionArticlesCardsPlaceholder)
+    return <HomeViewSectionArticlesCards section={data.homeView.section} {...flexProps} />
+  }, HomeViewSectionArticlesCardsPlaceholder)