Currently our backend is sending only 2 ads on each request. Let’s add load more feature so that if there are more ads available in the database, keep returning new ads on load more button click.
// Dashboard.js
// state
const [page, setPage] = useState(1);
const [loading, setLoading] = useState(false);
// show load more button
<div className="container mt-3 mb-3">
{ads && ads.length < total && (
<div className="text-center mt-4 mb-4">
<button
disabled={loading}
className="btn btn-warning"
onClick={(e) => {
e.preventDefault();
setPage(page + 1);
}}
>
{loading ? "Loading..." : `${ads?.length} / ${total} Load more`}
</button>
</div>
)}
</div>
// if page state is > 1, run useEffect to fetch additional ads
useEffect(() => {
if (page === 1) return;
const loadMore = async () => {
try {
setLoading(true);
const { data } = await axios.get(`/user-ads/${page}`);
setAds([...ads, ...data.ads]);
setTotal(data.total);
setLoading(false);
} catch (err) {
console.log(err);
setLoading(false);
}
};
// execute
loadMore();
}, [page]);
// also update fetchAds() with page param
const { data } = await axios.get(`/user-ads/${page}`);
// make sure your server route has page param
router.get("/user-ads/:page", requireSignin, ad.userAds);