diff --git a/src/components/sideMenu/container/sideMenuContainer.tsx b/src/components/sideMenu/container/sideMenuContainer.tsx index f6e4c9961..4edb1cc82 100644 --- a/src/components/sideMenu/container/sideMenuContainer.tsx +++ b/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( diff --git a/src/providers/queries/postQueries/wavesQueries.ts b/src/providers/queries/postQueries/wavesQueries.ts index 4db247ab5..9d775f727 100644 --- a/src/providers/queries/postQueries/wavesQueries.ts +++ b/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, }; }; diff --git a/src/screens/waves/screen/wavesScreen.tsx b/src/screens/waves/screen/wavesScreen.tsx index 75fb49bb8..d9f6b7ae0 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, 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(); 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([]) + 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 = () => { }} /> { setEnableScrollTop(false); + setPopupAvatars([]) }} />