ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-17 10:21:33 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

gracefully handling pull down to refresh

Browse Source
This commit is contained in:
Nouman Tahir 2022-09-26 15:58:42 +05:00
parent e3f8c9d82b
commit e0c9c19c7e
2 changed files with 47 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/providers/queries/notificationQueries.ts
View File

@ -1,4 +1,5 @@
import { useInfiniteQuery } from '@tanstack/react-query';
import { QueryFunction, useInfiniteQuery } from '@tanstack/react-query';
import { useEffect, useState } from 'react';
import { getNotifications } from '../ecency/ecency';
import { NotificationFilters } from '../ecency/ecency.types';
import QUERIES from './queryKeys';
@ -6,25 +7,54 @@ import QUERIES from './queryKeys';
export const useNotificationsQuery = (filter: NotificationFilters) => {
const _fetchLimit = 20;
return useInfiniteQuery<any[]>(
const [reducedData, setReducedData] = useState<any[]>([]);
const [isRefreshing, setIsRefreshing] = useState(false);
const _fetchNotifications = async (pageParam: string) => {
console.log('fetching page since:', pageParam);
const response = await getNotifications({ filter, since: pageParam, limit: _fetchLimit });
console.log('new page fetched', response);
return response || [];
};
const _getNextPageParam = (lastPage: any[]) => {
const lastId = lastPage && lastPage.length === _fetchLimit ? lastPage.lastItem.id : undefined;
console.log('extracting next page parameter', lastId);
return lastId;
};
//query initialization
const notificationQuery = useInfiniteQuery<any[]>(
[QUERIES.NOTIFICATIONS.GET, filter],
async ({ pageParam }) => {
console.log('fetching page since:', pageParam);
const response = await getNotifications({ filter, since: pageParam, limit: _fetchLimit });
console.log('new page fetched', response);
return response || [];
},
({ pageParam }) => _fetchNotifications(pageParam),
{
initialData: {
pageParams: [undefined],
pages: [],
},
getNextPageParam: (lastPage) => {
const lastId =
lastPage && lastPage.length === _fetchLimit ? lastPage.lastItem.id : undefined;
console.log('extracting next page parameter', lastId);
return lastId;
},
getNextPageParam: _getNextPageParam,
},
);
//workaround for handling query refresh
useEffect(() => {
if (!isRefreshing) {
const _data = notificationQuery.data?.pages.flatMap((page) => page);
console.log('flat map', _data);
setReducedData(_data || []);
}
}, [notificationQuery.data, isRefreshing]);
const _refresh = async () => {
setIsRefreshing(true);
notificationQuery.remove();
await notificationQuery.refetch();
setIsRefreshing(false);
};
return {
...notificationQuery,
reducedData,
refresh: _refresh,
};
};

8
src/screens/notification/container/notificationContainer.tsx
View File

@ -1,5 +1,5 @@
/* eslint-disable react/no-unused-state */
import React, { useMemo, useRef, useState } from 'react';
import React, { useRef, useState } from 'react';
import { Alert } from 'react-native';
import { useDispatch } from 'react-redux';
import get from 'lodash/get';
@ -63,8 +63,7 @@ const NotificationContainer = ({ navigation }) => {
notificationsQuery.fetchNextPage();
} else {
console.log('refreshing');
notificationsQuery.remove();
notificationsQuery.refetch();
notificationsQuery.refresh();
}
};
@ -161,8 +160,7 @@ const NotificationContainer = ({ navigation }) => {
setSelectedFilter(value);
};
console.log('query data: ', notificationsQuery.data);
const _notifications = notificationsQuery.data?.pages?.flatMap((page) => page);
const _notifications = notificationsQuery.reducedData;
return (
<NotificationScreen