To implement a pagination hook and pull-to-refresh functionality based on your provided data structure, you can follow these steps:
Pagination Hook and Pull-to-Refresh Implementation
1. Setup Initial State and Imports:
Start by importing necessary dependencies and setting up initial state variables.
Get API scheme like this:
{
data: [],
totalResult: 0,
status: true,
pageNo: 1,
totalPages: 1,
perPage: 10,
};
else modify this const result = await response.json(); in below to look like above format.
usePagination.jsx
import React, { useState, useEffect, useCallback } from 'react';
const initialData = {
data: [],
totalResult: 0,
status: true,
pageNo: 1,
totalPages: 1,
};
const usePagination = () => {
const [initialLoader, setInitialLoader] = useState(true);
const [data, setData] = useState(initialData.data);
const [totalResult, setTotalResult] = useState(initialData.totalResult);
const [pageNo, setPageNo] = useState(initialData.pageNo);
const [totalPages, setTotalPages] = useState(initialData.totalPages);
const [refreshing, setRefreshing] = useState(false);
const [loadingMore, setLoadingMore] = useState(false);
// Function to fetch data for a given page number
const fetchData = async (page, perPage = 10) => {
try {
// Simulate fetching data from API
// Replace this with your actual API call
const response = await fetch(`https://dummyjson.com/products?limit=${perPage}&skip=${page}`);
const resultOld = await response.json();
const result = {
data: resultOld?.products,
totalResult: resultOld?.total,
status: true,
pageNo: page,
totalPages: Math.ceil(resultOld?.total / perPage) || 10,
};
if (result.status) {
if (page === 1) {
setData(result.data);
} else {
setData([...data, ...result.data]);
}
setTotalResult(result.totalResult);
setPageNo(result.pageNo);
setTotalPages(result.totalPages);
} else {
console.error('Failed to fetch data');
}
} catch (error) {
console.error('Error fetching data:', error);
} finally {
setRefreshing(false);
setLoadingMore(false);
setInitialLoader(false);
}
};
// Initial data fetch on component mount
useEffect(() => {
fetchData(pageNo);
}, []);
// Function to handle pull-to-refresh
const handleRefresh = useCallback(() => {
setRefreshing(true);
fetchData(1); // Refreshes the first page
}, []);
// Function to handle load more (pagination)
const loadMore = () => {
if (!loadingMore) {
if (pageNo < totalPages) {
setLoadingMore(true);
const nextPage = pageNo + 1;
fetchData(nextPage);
}
}
};
return {
data,
totalResult,
refreshing,
loadingMore,
handleRefresh,
loadMore,
initialLoader,
};
};
export default usePagination;
USAGE:
const FeedsListScreen = ({ navigation }) => {
const {
styles,
theme: { colors },
} = useStyles(stylesheet);
const { data, totalResult, refreshing, loadingMore, handleRefresh, loadMore, initialLoader } =
usePagination();
const renderFooter = () => {
if (!loadingMore || data.length < 8) return null; // Do not show footer loader for the first page
return <ActivityIndicator animating size="large" />;
};
return initialLoader ? (
<CustomLoader />
) : (
<FlatList
data={data}
renderItem={({item,index})=><View/>}
keyExtractor={(item) => item._id}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
/>
}
renderFooter={renderFooter}
onEndReached={loadMore}
onEndReachedThreshold={0.1}
/>
);
};
export default FeedsListScreen;
Top comments (0)