executed latest waves check on app resume

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';
@@ -19,14 +19,42 @@ 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' &&
+            wavesQuery.data.length > 0
+        ) {
+            const latestWaves = await wavesQuery.latestWavesFetch()
+            if (latestWaves.length > 0) {
+                Alert.alert("latest waves: " + latestWaves.length);
+                setPopupAvatars(latestWaves.map((item) => item.avatar))
+                setEnableScrollTop(true)
+            }
+        }
+
+        appState.current = nextAppState;
+    };
+
     const _fetchData = ({ refresh }: { refresh?: boolean }) => {
         if (refresh) {
             wavesQuery.refresh();
@@ -38,7 +66,7 @@ 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);
             scrollPopupDebouce.cancel();
             blockPopupRef.current = true;
@@ -115,11 +143,12 @@ const WavesScreen = () => {
                     }}
                 />
                 <ScrollTopPopup
-                    popupAvatars={[]}
+                    popupAvatars={popupAvatars}
                     enableScrollTop={enableScrollTop}
                     onPress={_scrollTop}
                     onClose={() => {
                         setEnableScrollTop(false);
+                        setPopupAvatars([])
                     }}
                 />
             </View>