feat(MainFeed): Add dynamic single line display in MainFeed

thematters · Jan 7, 2025 · 9c7b48b · 9c7b48b
1 parent 8fe8233
commit 9c7b48b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/views/Home/Channel/Page/Carousel/index.tsx b/src/views/Home/Channel/Page/Carousel/index.tsx
@@ -174,7 +174,9 @@ const ChannelCarousel = ({ items }: ChannelCarouselProps) => {
         </div>
       </section>
       <footer className={styles.footer}>
-        <section className={styles.dots}>
+        <section
+          className={classnames(['page-channel-carousel-dots', styles.dots])}
+        >
           {slicedItems?.map((_, index) => (
             <Dot
               key={index}

diff --git a/src/views/Home/Feed/MainFeed/index.tsx b/src/views/Home/Feed/MainFeed/index.tsx
@@ -1,5 +1,5 @@
 import { NetworkStatus } from 'apollo-client'
-import { useContext, useEffect, useRef } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 
 import { analytics, mergeConnections } from '~/common/utils'
 import {
@@ -11,6 +11,7 @@ import {
   Media,
   QueryError,
   SpinnerBlock,
+  useNativeEventListener,
   usePublicQuery,
   ViewerContext,
 } from '~/components'
@@ -235,6 +236,17 @@ const MainFeed = ({ feedSortType: sortBy }: MainFeedProps) => {
       link: `${host}/#channel=28`,
     },
   ]
+
+  const [showSingleLine, setShowSingleLine] = useState(false)
+
+  useNativeEventListener('scroll', () => {
+    if (window.scrollY > 85) {
+      setShowSingleLine(true)
+    } else {
+      setShowSingleLine(false)
+    }
+  })
+
   /**
    * Data Fetching
    */
@@ -364,7 +376,7 @@ const MainFeed = ({ feedSortType: sortBy }: MainFeedProps) => {
         <List>
           <Media lessThan="lg">
             <ChannelCarousel items={items} />
-            <SingleLine items={items} />
+            {showSingleLine && <SingleLine items={items} />}
           </Media>
           {isHottestFeed && <Announcements />}
           {mixFeed.map((edge, i) => {