From 9673225f78f656038b2db11062d8e397c81568bf Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Wed, 24 May 2023 14:18:49 -0700
Subject: [PATCH] fix scrollToTop for web

---
 src/view/com/posts/Feed.tsx     |  3 ++
 src/view/screens/CustomFeed.tsx | 51 ++++++++++++++++++++++-----------
 2 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx
index 50398e70..2726ff7d 100644
--- a/src/view/com/posts/Feed.tsx
+++ b/src/view/com/posts/Feed.tsx
@@ -18,6 +18,7 @@ import {OnScrollCb, onMomentumScrollEndCb} from 'lib/hooks/useOnMainScroll'
 import {s} from 'lib/styles'
 import {useAnalytics} from 'lib/analytics'
 import {usePalette} from 'lib/hooks/usePalette'
+import {useTheme} from 'lib/ThemeContext'
 
 const LOADING_ITEM = {_reactKey: '__loading__'}
 const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
@@ -54,6 +55,7 @@ export const Feed = observer(function Feed({
   extraData?: any
 }) {
   const pal = usePalette('default')
+  const theme = useTheme()
   const {track} = useAnalytics()
   const [isRefreshing, setIsRefreshing] = React.useState(false)
 
@@ -186,6 +188,7 @@ export const Feed = observer(function Feed({
           onScroll={onScroll}
           scrollEventThrottle={scrollEventThrottle}
           onMomentumScrollEnd={onMomentumScrollEnd}
+          indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'}
           onEndReached={onEndReached}
           onEndReachedThreshold={0.6}
           removeClippedSubviews={true}
diff --git a/src/view/screens/CustomFeed.tsx b/src/view/screens/CustomFeed.tsx
index 2316d7f0..dcb72687 100644
--- a/src/view/screens/CustomFeed.tsx
+++ b/src/view/screens/CustomFeed.tsx
@@ -20,15 +20,13 @@ import {ViewHeader} from 'view/com/util/ViewHeader'
 import {Button} from 'view/com/util/forms/Button'
 import {Text} from 'view/com/util/text/Text'
 import * as Toast from 'view/com/util/Toast'
-import {isDesktopWeb} from 'platform/detection'
+import {isDesktopWeb, isWeb} from 'platform/detection'
 import {useSetTitle} from 'lib/hooks/useSetTitle'
 import {shareUrl} from 'lib/sharing'
 import {toShareUrl} from 'lib/strings/url-helpers'
 import {Haptics} from 'lib/haptics'
-import { LoadLatestBtn } from 'view/com/util/load-latest/LoadLatestBtn'
-import { onMomentumScrollEndCb } from 'lib/hooks/useOnMainScroll'
-
-const HITSLOP = {top: 5, left: 5, bottom: 5, right: 5}
+import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn'
+import {OnScrollCb, onMomentumScrollEndCb} from 'lib/hooks/useOnMainScroll'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'CustomFeed'>
 export const CustomFeedScreen = withAuthRequired(
@@ -257,22 +255,37 @@ export const CustomFeedScreen = withAuthRequired(
         </>
       )
     }, [
-      store.me.did,
       pal,
       currentFeed,
-      onToggleLiked,
+      store.me.did,
       onToggleSaved,
+      onToggleLiked,
       onPressShare,
       name,
       rkey,
       isPinned,
+      onTogglePinned,
     ])
 
-    const onMomentumScrollEnd: onMomentumScrollEndCb = React.useCallback((event) => {
-      if (event.nativeEvent.contentOffset.y > 200) {
-        setAllowScrollToTop(true)
-      } else {
-        setAllowScrollToTop(false)
+    const onMomentumScrollEnd: onMomentumScrollEndCb = React.useCallback(
+      event => {
+        console.log('onMomentumScrollEnd')
+        if (event.nativeEvent.contentOffset.y > s.window.height * 3) {
+          setAllowScrollToTop(true)
+        } else {
+          setAllowScrollToTop(false)
+        }
+      },
+      [],
+    )
+    const onScroll: OnScrollCb = React.useCallback(event => {
+      // since onMomentumScrollEnd is not supported in react-native-web, we have to use onScroll which fires more often so is not desirable on mobile
+      if (isWeb) {
+        if (event.nativeEvent.contentOffset.y > s.window.height * 2) {
+          setAllowScrollToTop(true)
+        } else {
+          setAllowScrollToTop(false)
+        }
       }
     }, [])
 
@@ -283,14 +296,18 @@ export const CustomFeedScreen = withAuthRequired(
           scrollElRef={scrollElRef}
           feed={algoFeed}
           onMomentumScrollEnd={onMomentumScrollEnd}
+          onScroll={onScroll} // same logic as onMomentumScrollEnd but for web
           ListHeaderComponent={renderListHeaderComponent}
           extraData={[uri, isPinned]}
         />
-       {allowScrollToTop ? <LoadLatestBtn onPress={() => {
-          scrollElRef.current?.scrollToOffset({offset: 0, animated: true})
-        }}
-        label='Scroll to top'
-        /> : null}
+        {allowScrollToTop ? (
+          <LoadLatestBtn
+            onPress={() => {
+              scrollElRef.current?.scrollToOffset({offset: 0, animated: true})
+            }}
+            label="Scroll to top"
+          />
+        ) : null}
       </View>
     )
   }),