mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-06 00:04:39 +00:00
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:
parent
f84c923ab7
commit
85302f0607
5 changed files with 58 additions and 13 deletions
|
@ -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}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Reference in a new issue