feat(next-page-loading): disable load more button when length of fetched page is less than 25 on all pages

This commit is contained in:
Kentai Radiquum 2024-04-29 03:45:27 +05:00
parent f84c923ab7
commit 85302f0607
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
5 changed files with 58 additions and 13 deletions

View file

@ -18,6 +18,8 @@ export default function Bookmarks() {
const [releases, setReleases] = useState();
const [page, setPage] = useState(0);
const [isNextPage, setIsNextPage] = useState(true);
const searchParams = useSearchParams();
const createQueryString = useCallback(
(name, value) => {
@ -45,6 +47,12 @@ export default function Bookmarks() {
const url = `${endpoints.user.bookmarks[list]}?page=${page}&token=${userStore.token}`;
const data = await getData(url);
if (data.content.length < 25) {
setIsNextPage(false);
} else {
setIsNextPage(true);
}
// Handle initial load (page 0) or subsequent pagination
if (page === 0) {
setReleases(data.content);
@ -106,6 +114,7 @@ export default function Bookmarks() {
setPage={setPage}
list={list}
releases={releases}
isNextPage={isNextPage}
/>
)}
</>

View file

@ -27,17 +27,19 @@ export default function ReleasesOverview(props) {
<CardList data={props.releases} />
</div>
<nav className="large-margin center-align">
<button
className="large"
onClick={() => {
props.setPage(props.page + 1);
}}
>
<i>add</i>
<span>загрузить ещё</span>
</button>
</nav>
{props.isNextPage && (
<nav className="large-margin center-align">
<button
className="large"
onClick={() => {
props.setPage(props.page + 1);
}}
>
<i>add</i>
<span>загрузить ещё</span>
</button>
</nav>
)}
</>
) : (
<progress className="s1"></progress>

View file

@ -13,11 +13,19 @@ export default function History() {
const [releases, setReleases] = useState();
const [page, setPage] = useState(0);
const [isNextPage, setIsNextPage] = useState(true);
async function fetchData(page = 0) {
if (userStore.token) {
const url = `${endpoints.user.history}?page=${page}&token=${userStore.token}`;
const data = await getData(url);
if (data.content.length < 25) {
setIsNextPage(false);
} else {
setIsNextPage(true);
}
// Handle initial load (page 0) or subsequent pagination
if (page === 0) {
setReleases(data.content);
@ -44,7 +52,12 @@ export default function History() {
{!userStore.isAuth ? (
<LogInNeeded />
) : (
<ReleasesOverview page={page} setPage={setPage} releases={releases} />
<ReleasesOverview
page={page}
setPage={setPage}
releases={releases}
isNextPage={isNextPage}
/>
)}
</>
);

View file

@ -15,6 +15,8 @@ export default function Home() {
const [releases, setReleases] = useState();
const [page, setPage] = useState(0);
const [isNextPage, setIsNextPage] = useState(true);
const searchParams = useSearchParams();
const createQueryString = useCallback(
(name, value) => {
@ -41,6 +43,12 @@ export default function Home() {
const url = `${endpoints.index[list]}?page=${page}`;
const data = await getData(url);
if (data.content.length < 25) {
setIsNextPage(false);
} else {
setIsNextPage(true);
}
// Handle initial load (page 0) or subsequent pagination
if (page === 0) {
setReleases(data.content);
@ -93,6 +101,7 @@ export default function Home() {
setPage={setPage}
list={list}
releases={releases}
isNextPage={isNextPage}
/>
);
}

View file

@ -21,6 +21,7 @@ export default function Search() {
const [releases, setReleases] = useState();
const [page, setPage] = useState(0);
const [query, setQuery] = useState("");
const [isNextPage, setIsNextPage] = useState(true);
const [searches, setSearches] = useState(JSON.parse(getSearches()));
@ -39,6 +40,12 @@ export default function Search() {
const url = `${endpoints.search}?query=${query}&page=${page}`;
const data = await getData(url);
if (data.content.length < 25) {
setIsNextPage(false);
} else {
setIsNextPage(true);
}
// Handle initial load (page 0) or subsequent pagination
if (page === 0) {
setReleases(data.content);
@ -118,7 +125,12 @@ export default function Search() {
{releases ? (
releases.length > 0 ? (
<ReleasesOverview page={page} setPage={setPage} releases={releases} />
<ReleasesOverview
page={page}
setPage={setPage}
releases={releases}
isNextPage={isNextPage}
/>
) : (
<div className="absolute padding primary center middle small-round">
<i className="extra">search</i>