mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-06 00:04:39 +00:00
refactor: load more button
This commit is contained in:
parent
c10f802008
commit
9e65838569
GPG key ID:
858E8EE696525EED
6 changed files with 75 additions and 52 deletions
|
|
@ -1,6 +1,6 @@
|
|||
import { ReleaseLink } from "../ReleaseLink/ReleaseLink";
|
||||
|
||||
export const ReleaseSection = (props: any) => {
|
||||
export const ReleaseSection = (props: {sectionTitle?: string, content: any}) => {
|
||||
return (
|
||||
<section>
|
||||
{props.sectionTitle && (
|
||||
|
|
|
|||
|
|
@ -5,16 +5,18 @@ import { Spinner } from "#/components/Spinner/Spinner";
|
|||
import { useState, useEffect } from "react";
|
||||
import { useScrollPosition } from "#/hooks/useScrollPosition";
|
||||
import { useUserStore } from "../store/auth";
|
||||
import { Dropdown } from "flowbite-react";
|
||||
import { Dropdown, Button } from "flowbite-react";
|
||||
import { sort } from "./common";
|
||||
import { ENDPOINTS } from "#/api/config";
|
||||
import { BookmarksList, SortList } from "#/api/utils";
|
||||
import { BookmarksList } from "#/api/utils";
|
||||
|
||||
const fetcher = async (url: string) => {
|
||||
const res = await fetch(url);
|
||||
|
||||
if (!res.ok) {
|
||||
const error = new Error(`An error occurred while fetching the data. status: ${res.status}`);
|
||||
const error = new Error(
|
||||
`An error occurred while fetching the data. status: ${res.status}`
|
||||
);
|
||||
error.message = await res.json();
|
||||
throw error;
|
||||
}
|
||||
|
|
@ -30,7 +32,9 @@ export function BookmarksCategoryPage(props: any) {
|
|||
const getKey = (pageIndex: number, previousPageData: any) => {
|
||||
if (previousPageData && !previousPageData.content.length) return null;
|
||||
if (token) {
|
||||
return `${ENDPOINTS.user.bookmark}/all/${BookmarksList[props.slug]}/${pageIndex}?token=${token}&sort=${sort.values[selectedSort].id}`;
|
||||
return `${ENDPOINTS.user.bookmark}/all/${
|
||||
BookmarksList[props.slug]
|
||||
}/${pageIndex}?token=${token}&sort=${sort.values[selectedSort].id}`;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -109,13 +113,16 @@ export function BookmarksCategoryPage(props: any) {
|
|||
{data &&
|
||||
data[data.length - 1].current_page <
|
||||
data[data.length - 1].total_page_count && (
|
||||
<button
|
||||
className="mx-auto w-[calc(100%-10rem)] border border-black rounded-lg p-2 mb-6 flex items-center justify-center gap-2 hover:bg-black hover:text-white transition"
|
||||
<Button
|
||||
className="w-full"
|
||||
color={"light"}
|
||||
onClick={() => setSize(size + 1)}
|
||||
>
|
||||
<span className="w-10 h-10 iconify mdi--plus"></span>
|
||||
<span className="text-lg">Загрузить ещё</span>
|
||||
</button>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-6 h-6 iconify mdi--plus-circle "></span>
|
||||
<span className="text-lg">Загрузить ещё</span>
|
||||
</div>
|
||||
</Button>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { Spinner } from "#/components/Spinner/Spinner";
|
|||
import { useState, useEffect } from "react";
|
||||
import { useScrollPosition } from "#/hooks/useScrollPosition";
|
||||
import { useUserStore } from "../store/auth";
|
||||
import { Dropdown } from "flowbite-react";
|
||||
import { Dropdown, Button } from "flowbite-react";
|
||||
import { sort } from "./common";
|
||||
import { ENDPOINTS } from "#/api/config";
|
||||
|
||||
|
|
@ -13,7 +13,9 @@ const fetcher = async (url: string) => {
|
|||
const res = await fetch(url);
|
||||
|
||||
if (!res.ok) {
|
||||
const error = new Error(`An error occurred while fetching the data. status: ${res.status}`);
|
||||
const error = new Error(
|
||||
`An error occurred while fetching the data. status: ${res.status}`
|
||||
);
|
||||
error.message = await res.json();
|
||||
throw error;
|
||||
}
|
||||
|
|
@ -106,13 +108,16 @@ export function FavoritesPage() {
|
|||
{data &&
|
||||
data[data.length - 1].current_page <
|
||||
data[data.length - 1].total_page_count && (
|
||||
<button
|
||||
className="mx-auto w-[calc(100%-10rem)] border border-black rounded-lg p-2 mb-6 flex items-center justify-center gap-2 hover:bg-black hover:text-white transition"
|
||||
<Button
|
||||
className="w-full"
|
||||
color={"light"}
|
||||
onClick={() => setSize(size + 1)}
|
||||
>
|
||||
<span className="w-10 h-10 iconify mdi--plus"></span>
|
||||
<span className="text-lg">Загрузить ещё</span>
|
||||
</button>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-6 h-6 iconify mdi--plus-circle "></span>
|
||||
<span className="text-lg">Загрузить ещё</span>
|
||||
</div>
|
||||
</Button>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,12 +6,15 @@ import { useState, useEffect } from "react";
|
|||
import { useScrollPosition } from "#/hooks/useScrollPosition";
|
||||
import { useUserStore } from "../store/auth";
|
||||
import { ENDPOINTS } from "#/api/config";
|
||||
import { Button } from "flowbite-react";
|
||||
|
||||
const fetcher = async (url: string) => {
|
||||
const res = await fetch(url);
|
||||
|
||||
if (!res.ok) {
|
||||
const error = new Error(`An error occurred while fetching the data. status: ${res.status}`);
|
||||
const error = new Error(
|
||||
`An error occurred while fetching the data. status: ${res.status}`
|
||||
);
|
||||
error.message = await res.json();
|
||||
throw error;
|
||||
}
|
||||
|
|
@ -56,16 +59,25 @@ export function HistoryPage() {
|
|||
}, [scrollPosition]);
|
||||
|
||||
return (
|
||||
<main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
|
||||
<div className="flex items-center justify-between px-4 py-2 border-b-2 border-black dark:border-white">
|
||||
<h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
|
||||
История
|
||||
</h1>
|
||||
</div>
|
||||
<main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-4">
|
||||
{content && content.length > 0 ? (
|
||||
<ReleaseSection content={content} />
|
||||
<>
|
||||
<ReleaseSection sectionTitle="История" content={content} />
|
||||
{data && data[0].total_count != content.length && (
|
||||
<Button
|
||||
className="w-full"
|
||||
color={"light"}
|
||||
onClick={() => setSize(size + 1)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-6 h-6 iconify mdi--plus-circle "></span>
|
||||
<span className="text-lg">Загрузить ещё</span>
|
||||
</div>
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
) : !isLoadingEnd || isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center min-w-full min-h-screen">
|
||||
<div className="flex flex-col items-center justify-center min-w-full min-h-[100dvh]">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -74,17 +86,6 @@ export function HistoryPage() {
|
|||
<p>В истории пока ничего нет...</p>
|
||||
</div>
|
||||
)}
|
||||
{data &&
|
||||
data[data.length - 1].current_page <
|
||||
data[data.length - 1].total_page_count && (
|
||||
<button
|
||||
className="mx-auto w-[calc(100%-10rem)] border border-black rounded-lg p-2 mb-6 flex items-center justify-center gap-2 hover:bg-black hover:text-white transition"
|
||||
onClick={() => setSize(size + 1)}
|
||||
>
|
||||
<span className="w-10 h-10 iconify mdi--plus"></span>
|
||||
<span className="text-lg">Загрузить ещё</span>
|
||||
</button>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { useState, useEffect } from "react";
|
|||
import { useScrollPosition } from "#/hooks/useScrollPosition";
|
||||
import { useUserStore } from "../store/auth";
|
||||
import { _FetchHomePageReleases } from "#/api/utils";
|
||||
import { Button } from "flowbite-react";
|
||||
|
||||
export function IndexCategoryPage(props) {
|
||||
const token = useUserStore((state) => state.token);
|
||||
|
|
@ -65,13 +66,16 @@ export function IndexCategoryPage(props) {
|
|||
</p>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
className="mx-auto w-[calc(100%-10rem)] border border-black rounded-lg p-2 mb-6 flex items-center justify-center gap-2 hover:bg-black hover:text-white transition"
|
||||
<Button
|
||||
className="w-full"
|
||||
color={"light"}
|
||||
onClick={() => setPage(page + 1)}
|
||||
>
|
||||
<span className="w-10 h-10 iconify mdi--plus"> </span>
|
||||
<span className="text-lg">Загрузить ещё</span>
|
||||
</button>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-6 h-6 iconify mdi--plus-circle "></span>
|
||||
<span className="text-lg">Загрузить ещё</span>
|
||||
</div>
|
||||
</Button>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,12 +8,15 @@ import { useScrollPosition } from "#/hooks/useScrollPosition";
|
|||
import { useRouter } from "next/navigation";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { useUserStore } from "../store/auth";
|
||||
import { Button } from "flowbite-react";
|
||||
|
||||
const fetcher = async (url: string) => {
|
||||
const res = await fetch(url);
|
||||
|
||||
if (!res.ok) {
|
||||
const error = new Error(`An error occurred while fetching the data. status: ${res.status}`);
|
||||
const error = new Error(
|
||||
`An error occurred while fetching the data. status: ${res.status}`
|
||||
);
|
||||
error.message = await res.json();
|
||||
throw error;
|
||||
}
|
||||
|
|
@ -25,9 +28,9 @@ export function SearchPage() {
|
|||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const [query, setQuery] = useState(searchParams.get("q") || null);
|
||||
const where = searchParams.get("where") || null
|
||||
const searchBy = searchParams.get("searchBy") || null
|
||||
const list = searchParams.get("list") || null
|
||||
const where = searchParams.get("where") || null;
|
||||
const searchBy = searchParams.get("searchBy") || null;
|
||||
const list = searchParams.get("list") || null;
|
||||
|
||||
const token = useUserStore((state) => state.token);
|
||||
|
||||
|
|
@ -93,7 +96,7 @@ export function SearchPage() {
|
|||
className="max-w-full mx-auto"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
setContent(null)
|
||||
setContent(null);
|
||||
setQuery(e.target[0].value.trim());
|
||||
router.push(`/search?q=${e.target[0].value.trim()}`);
|
||||
}}
|
||||
|
|
@ -165,13 +168,16 @@ export function SearchPage() {
|
|||
)}
|
||||
</div>
|
||||
{data && data[data.length - 1].releases.length == 25 && (
|
||||
<button
|
||||
className="mx-auto w-[calc(100%-10rem)] border border-black rounded-lg p-2 mb-6 flex items-center justify-center gap-2 hover:bg-black hover:text-white transition"
|
||||
<Button
|
||||
className="w-full"
|
||||
color={"light"}
|
||||
onClick={() => setSize(size + 1)}
|
||||
>
|
||||
<span className="w-10 h-10 iconify mdi--plus"> </span>
|
||||
<span className="text-lg">Загрузить ещё</span>
|
||||
</button>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-6 h-6 iconify mdi--plus-circle "></span>
|
||||
<span className="text-lg">Загрузить ещё</span>
|
||||
</div>
|
||||
</Button>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue