When user exists on the route / (when user 1st time visit at route). then request send to node js server and Feed load from server to React. it is ok.
But problem is that when user move to another route and after come back to home / route then request again send to server and Feed again load without refreshing page. but I want to send request when user refresh page only and when user come back same route. then Feed data take from web storage not from server.
All the posts have been loaded. And when the user comes back on the same route then by the help of infinite scroll load post start from all the posts that have been loaded.
My code is:
//load posts for users
const [increment, setIncrement] = useState(2)
let initialPage = 0;
useEffect(() => {
async function loadPosts() {
try {
const loadPostResponse = await fetch(`${process.env.REACT_APP_API_BACKENDURL}/blob/load/all/post/${initialPage}/${increment}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + localStorage.getItem("uuid")
}
})
const loadPostData = await loadPostResponse.json()
console.log({ loadPostData }, { increment }, { initialPage })
if (loadPostResponse.status === 200) {
const Arrange = loadPostData.data.sort((a, b) => {
return b.time - a.time
})
if (loadingPostIsMount.current) {
setAllPosts(Arrange)
//set all posts into session storage
if (initialPage === 0) {
sessionStorage.setItem("_users_posts", JSON.stringify(Arrange))
}
else if (initialPage > 0) {
sessionStorage.removeItem("_users_posts")
sessionStorage.setItem("_users_posts", JSON.stringify(allPosts))
}
}
initialPage = initialPage + 2
}
} catch (err) {
}
}
loadPosts()
return () => {
loadingPostIsMount.current = false
}
}, [increment])
where increment is dependency which is hit by infinite scroll.
My infinite scroll code is
function loadMorePost() {
setIncrement(increment + 2)
}
<InfiniteScroll
dataLength={length}
next={loadMorePost}
hasMore={true}
loader={<Spinner name="three-bounce" />}
className="md:ml-[8rem] ml-[0rem]"
endMessage={
<p>loeading end</p>
}
/>
please help me.