From 259bea3c0e3b98bac2bd18e28148bad2084a4dce Mon Sep 17 00:00:00 2001
From: Nouman Tahir <nouman.hawkdev@gmail.com>
Date: Thu, 21 Sep 2023 13:06:36 +0500
Subject: [PATCH 1/2] enabled scroll to top for waves screen

---
 src/screens/waves/screen/wavesScreen.tsx | 64 ++++++++++++++++++++++--
 1 file changed, 60 insertions(+), 4 deletions(-)

diff --git a/src/screens/waves/screen/wavesScreen.tsx b/src/screens/waves/screen/wavesScreen.tsx
index 8e6b4feba1..cbc4ba17cd 100644
--- a/src/screens/waves/screen/wavesScreen.tsx
+++ b/src/screens/waves/screen/wavesScreen.tsx
@@ -1,21 +1,32 @@
-import React, { useEffect, useRef } from 'react';
-import { ActivityIndicator, RefreshControl, View } from 'react-native';
+import React, { useRef, useState } from 'react';
+import { ActivityIndicator, Alert, NativeScrollEvent, NativeSyntheticEvent, RefreshControl, View } from 'react-native';
 import { Comments, EmptyScreen, Header, PostOptionsModal } from '../../../components';
 import styles from '../styles/wavesScreen.styles';
 import { wavesQueries } from '../../../providers/queries';
 import { useAppSelector } from '../../../hooks';
 import WavesHeader from '../children/wavesHeader';
 import { PostTypes } from '../../../constants/postTypes';
+import ScrollTopPopup from '../../../components/tabbedPosts/view/scrollTopPopup';
+import { FlatList } from 'react-native-gesture-handler';
+import { debounce } from 'lodash';
 
 
-const WavesScreen = () => {
+const SCROLL_POPUP_THRESHOLD = 5000;
+
 
+const WavesScreen = () => {
+    //refs
     const postOptionsModalRef = useRef<any>(null);
+    const postsListRef = useRef<FlatList>();
+    const blockPopupRef = useRef(false);
+    const scrollOffsetRef = useRef(0);
 
     const wavesQuery = wavesQueries.useWavesQuery('ecency.waves');
 
     const isDarkTheme = useAppSelector(state => state.application.isDarkTheme)
 
+    const [enableScrollTop, setEnableScrollTop] = useState(false);
+
 
     const _fetchData = ({ refresh }: { refresh?: boolean }) => {
         if (refresh) {
@@ -25,6 +36,40 @@ const WavesScreen = () => {
         }
     }
 
+    //scrolls to top, blocks scroll popup for 2 seconds to reappear after scroll
+    const _scrollTop = () => {
+        if (postsListRef.current) {
+            postsListRef.current.scrollToIndex({ index: 0 });
+            setEnableScrollTop(false);
+            scrollPopupDebouce.cancel();
+            blockPopupRef.current = true;
+            setTimeout(() => {
+                blockPopupRef.current = false;
+            }, 2000);
+        }
+    }
+
+    //makes sure pop do not reappear while scrolling up
+    const scrollPopupDebouce = debounce(
+        (value) => {
+            setEnableScrollTop(value);
+        },
+        500,
+        { leading: true },
+    );
+
+    //calback to calculate with to display scroll to popup
+    const _onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        let currentOffset = event.nativeEvent.contentOffset.y;
+        let scrollUp = currentOffset < scrollOffsetRef.current;
+        scrollOffsetRef.current = currentOffset;
+
+        if (scrollUp && !blockPopupRef.current && currentOffset > SCROLL_POPUP_THRESHOLD) {
+            scrollPopupDebouce(true);
+        }
+    };
+
+
 
     const _handleOnOptionsPress = (content: any) => {
         if (postOptionsModalRef.current) {
@@ -52,8 +97,9 @@ const WavesScreen = () => {
                     comments={_data}
                     handleOnOptionsPress={_handleOnOptionsPress}
                     flatListProps={{
+                        ref: postsListRef,
                         onEndReached: _fetchData,
-                        onScroll: () => { },
+                        onScroll: _onScroll,
                         ListEmptyComponent: _renderListEmpty,
                         ListFooterComponent: _renderListFooter,
                         ListHeaderComponent: _renderListHeader,
@@ -69,8 +115,18 @@ const WavesScreen = () => {
                         ),
                     }}
                 />
+                <ScrollTopPopup
+                    popupAvatars={[]}
+                    enableScrollTop={enableScrollTop}
+                    onPress={_scrollTop}
+                    onClose={() => {
+                        setEnableScrollTop(false);
+                    }}
+                />
             </View>
 
+
+
             <PostOptionsModal ref={postOptionsModalRef} />
 
         </View>

From 7a67e4a3d9ebc4e633e5e329f5a7b017a427286e Mon Sep 17 00:00:00 2001
From: Nouman Tahir <nouman.hawkdev@gmail.com>
Date: Thu, 21 Sep 2023 13:10:20 +0500
Subject: [PATCH 2/2] using scroll to offset instead of index to scroll all the
 way up to header

---
 src/screens/waves/screen/wavesScreen.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/screens/waves/screen/wavesScreen.tsx b/src/screens/waves/screen/wavesScreen.tsx
index cbc4ba17cd..75fb49bb87 100644
--- a/src/screens/waves/screen/wavesScreen.tsx
+++ b/src/screens/waves/screen/wavesScreen.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { ActivityIndicator, Alert, NativeScrollEvent, NativeSyntheticEvent, RefreshControl, View } from 'react-native';
+import { ActivityIndicator, NativeScrollEvent, NativeSyntheticEvent, RefreshControl, View, FlatList } from 'react-native';
 import { Comments, EmptyScreen, Header, PostOptionsModal } from '../../../components';
 import styles from '../styles/wavesScreen.styles';
 import { wavesQueries } from '../../../providers/queries';
@@ -7,7 +7,6 @@ import { useAppSelector } from '../../../hooks';
 import WavesHeader from '../children/wavesHeader';
 import { PostTypes } from '../../../constants/postTypes';
 import ScrollTopPopup from '../../../components/tabbedPosts/view/scrollTopPopup';
-import { FlatList } from 'react-native-gesture-handler';
 import { debounce } from 'lodash';
 
 
@@ -39,7 +38,7 @@ const WavesScreen = () => {
     //scrolls to top, blocks scroll popup for 2 seconds to reappear after scroll
     const _scrollTop = () => {
         if (postsListRef.current) {
-            postsListRef.current.scrollToIndex({ index: 0 });
+            postsListRef.current.scrollToOffset({offset:0});
             setEnableScrollTop(false);
             scrollPopupDebouce.cancel();
             blockPopupRef.current = true;