Im on react native development which has a feature flatlist scroll. i was succeed to consume the api with pagination, but im stuck how to get the latest page in pagination with this API data.
I got the response like this, i was able to catch the next page from page 1 to 10000 ( next page -> next page -> blablabla )
but, the page 1 is the oldest data not the newest so i need to reverse the logic. like from page 10000 to 1 ( next page -> next page -> blablabla )
I mean like:
https://censored.xxx/withpagination/page[number]=10 to https://censored.xxx/withpagination/page[number]=9 to
https://censored.xxx/withpagination/page[number]=8 and so on…
I used this ( links.next )
"links":{
"self":"https://api.hackerone.com/v1/hackers/me/reports?page%5Bnumber%5D=1u0026page%5Bsize%5D=100",
"prev":"https://api.hackerone.com/v1/hackers/me/reports? like **page** page%5Bnumber%5D=0u0026page%5Bsize%5D=100",
"next":"https://api.hackerone.com/v1/hackers/me/reports?page%5Bnumber%5D=2u0026page%5Bsize%5D=100"
}
This is my full code:
const initialPage = `https://censored.xxx/withpagination/`;
/** set and get modal and then call in the button **/
const [data, setData] = useState<any[]>([]);
const [isLoading, setIsLoading] = useState(false);
const [refreshing, setRefreshing] = useState(false);
const [nextPage, setNextPage] = useState('');
const { width } = useWindowDimensions();
const fetchReportsList = async (url: string) => {
if (isLoading) {
return;
}
setIsLoading(true);
fetch(url, {
method: 'GET',
headers: {
"Authorization": "Basic <bearer-token>",
"Content-Type": "application/json"
}
})
.then( res => res.json() )
.then( res => {
setData((existingItems) => {
return [...existingItems, ...res.data];
});
setNextPage(res.links.next);
setIsLoading(false);
}).catch((error => {
console.log("Error, error", error);
}));
}
useEffect(() => {
fetchReportsList(initialPage);
}, []);
How to i get there?
How to resolve this logic, reverse this logic of pagination flatlist
rully ir is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1