I have the current context
export function UserPostsProvider({ children }) {
const [posts, dispatch] = useReducer(userPostsReducer, initialState);
const addUserPosts = (userId, posts, unshift = false) => {
dispatch(actionCreators.addUserPosts(userId, posts, unshift));
};
const getUserPosts = (userId, index = 0, limit = undefined) => {
const _posts = posts[userId] ?? [];
return _posts.slice(index, limit + index || undefined);
};
return (
<UserPostsContext.Provider
value={{
addUserPosts,
deleteUserPost,
getUserPosts,
}}
>
{children}
</UserPostsContext.Provider>
);
}
As you can see, I have a method "getUserPosts" which accepts two arguments "index" and "limit".
I am consuming this context as follows:
export default function useFetchUserPosts(userData) {
const isMounted = useIsMounted();
const userPosts = useUserPosts();
const cards = useCards();
const posts = userPosts.getUserPosts(userData.id); // <--- HERE!
const [isLoading, setIsLoading] = useState(!posts.length);
const [error, serError] = useState(undefined);
const startAfter = useRef(new Date());
const getMorePosts = async (limit = 10) => {
if (isFetching.current || !hasMoreToLoad.current || !isMounted()) {
return;
}
isFetching.current = true;
setIsLoading(true);
try {
const {
posts: newPosts,
hasMoreToLoad: newHasMoreToLoad,
startAfter: newStartAfter,
} = await getUserPosts(userData.id, startAfter.current, limit);
// The component might be unmounted
if (!isMounted()) return;
hasMoreToLoad.current = newHasMoreToLoad;
startAfter.current = newStartAfter;
userPosts.addUserPosts(userData.id, newPosts);
setIsLoading(false);
isFetching.current = false;
} catch(err) {
setError(err);
}
}
...
}
How can I do to get the correct a paginated section of the posts from the context? I mean, if I just get the first 10 posts from the context on each re-render, I will be always getting the first 10 posts, no more than that.
Any helps?