Merge pull request #2765 from ecency/nt/latest-wave-check

Nt/latest wave check

src/components/sideMenu/container/sideMenuContainer.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react';
-import { Alert } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux';
 
 // Actions
@@ -18,7 +17,6 @@ const SideMenuContainer = ({ navigation }) => {
   const drawerStatus = useDrawerStatus();
 
   
-
   const isLoggedIn = useSelector((state) => state.application.isLoggedIn);
   const currentAccount = useSelector((state) => state.account.currentAccount);
   const isVisibleAccountsBottomSheet = useSelector(

src/providers/queries/postQueries/wavesQueries.ts

@@ -221,17 +221,55 @@ export const useWavesQuery = (host: string) => {
 
 
 
+
+
   const _data = unionBy(...wavesQueries.map((query) => query.data), 'url');
 
   const _filteredData = useMemo(() =>
-     _data.filter(post =>  isArray(mutes) ? mutes.indexOf(post?.author) < 0 : true),
-      [mutes, _data])
+    _data.filter(post => isArray(mutes) ? mutes.indexOf(post?.author) < 0 : true),
+    [mutes, _data])
+
+
+
+
+  const _lastestWavesFetch = async () => {
+  
+    await _fetchPermlinks('', true);
+    const _prevLatestWave = _filteredData[0]
+    const _firstQuery = wavesQueries[0];
+
+    if(!_firstQuery){
+      return [];
+    }
+
+    const queryResponse = await _firstQuery.refetch();
+
+    const _newData:any[] = queryResponse.data || [];
+
+    //check if new waves are available
+    const _lastIndex = _newData?.findIndex(item =>
+      ( item.author + item.permlink === _prevLatestWave.author + _prevLatestWave.permlink));
+
+    let _newWaves:any[] = []
+    if (_lastIndex && _lastIndex !== 0) {
+      if (_lastIndex < 0) {
+        _newWaves = _newData?.slice(0, 5) || [];
+      } else {
+        _newWaves = _newData?.slice(0, _lastIndex) || [];
+      }
+    }
+
+
+    return _newWaves
+  }
+
 
   return {
     data: _filteredData,
     isRefreshing,
     isLoading: isLoading || wavesQueries.lastItem?.isLoading || wavesQueries.lastItem?.isFetching,
     fetchNextPage: _fetchNextPage,
+    latestWavesFetch: _lastestWavesFetch,
     refresh: _refresh,
   };
 };

src/screens/waves/screen/wavesScreen.tsx

@@ -1,5 +1,5 @@
-import React, { useRef, useState } from 'react';
-import { ActivityIndicator, NativeScrollEvent, NativeSyntheticEvent, RefreshControl, View, FlatList } from 'react-native';
+import React, { useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, NativeScrollEvent, NativeSyntheticEvent, RefreshControl, View, FlatList, AppState, Alert } from 'react-native';
 import { Comments, EmptyScreen, Header, PostOptionsModal } from '../../../components';
 import styles from '../styles/wavesScreen.styles';
 import { wavesQueries } from '../../../providers/queries';
@@ -8,6 +8,7 @@ import WavesHeader from '../children/wavesHeader';
 import { PostTypes } from '../../../constants/postTypes';
 import ScrollTopPopup from '../../../components/tabbedPosts/view/scrollTopPopup';
 import { debounce } from 'lodash';
+import reactotron from 'reactotron-react-native';
 
 
 const SCROLL_POPUP_THRESHOLD = 5000;
@@ -19,14 +20,41 @@ const WavesScreen = () => {
     const postsListRef = useRef<FlatList>();
     const blockPopupRef = useRef(false);
     const scrollOffsetRef = useRef(0);
+    const appState = useRef(AppState.currentState);
 
     const wavesQuery = wavesQueries.useWavesQuery('ecency.waves');
 
     const isDarkTheme = useAppSelector(state => state.application.isDarkTheme)
 
     const [enableScrollTop, setEnableScrollTop] = useState(false);
+    const [popupAvatars, setPopupAvatars] = useState<any[]>([])
 
 
+    useEffect(() => {
+        const _stateSub = AppState.addEventListener('change', _handleAppStateChange);
+        return () => {
+            _stateSub.remove();
+        }
+    }, [])
+
+
+    //actions
+    const _handleAppStateChange = async (nextAppState) => {
+
+        if (
+            appState.current.match(/inactive|background/) &&
+            nextAppState === 'active'
+        ) {
+            const latestWaves = await wavesQuery.latestWavesFetch()
+            if (latestWaves.length > 0) {
+                setPopupAvatars(latestWaves.map((item) => item.avatar))
+                setEnableScrollTop(true)
+            }
+        }
+
+        appState.current = nextAppState;
+    };
+
     const _fetchData = ({ refresh }: { refresh?: boolean }) => {
         if (refresh) {
             wavesQuery.refresh();
@@ -38,8 +66,9 @@ const WavesScreen = () => {
     //scrolls to top, blocks scroll popup for 2 seconds to reappear after scroll
     const _scrollTop = () => {
         if (postsListRef.current) {
-            postsListRef.current.scrollToOffset({offset:0});
+            postsListRef.current.scrollToOffset({ offset: 0 });
             setEnableScrollTop(false);
+            setPopupAvatars([])
             scrollPopupDebouce.cancel();
             blockPopupRef.current = true;
             setTimeout(() => {
@@ -115,11 +144,12 @@ const WavesScreen = () => {
                     }}
                 />
                 <ScrollTopPopup
-                    popupAvatars={[]}
+                    popupAvatars={popupAvatars}
                     enableScrollTop={enableScrollTop}
                     onPress={_scrollTop}
                     onClose={() => {
                         setEnableScrollTop(false);
+                        setPopupAvatars([])
                     }}
                 />
             </View>