Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-07 00:34:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

refactor: load more button

Browse source
This commit is contained in:
Kentai Radiquum 2024-08-04 13:55:31 +05:00
parent c10f802008
commit 9e65838569
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
6 changed files with 75 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/components/ReleaseSection/ReleaseSection.tsx
View file

@ -1,6 +1,6 @@
import { ReleaseLink } from "../ReleaseLink/ReleaseLink"; import { ReleaseLink } from "../ReleaseLink/ReleaseLink";
export const ReleaseSection = (props: any) => { export const ReleaseSection = (props: {sectionTitle?: string, content: any}) => {
return ( return (
<section> <section>
{props.sectionTitle && ( {props.sectionTitle && (

25
app/pages/BookmarksCategory.tsx
View file

@ -5,16 +5,18 @@ import { Spinner } from "#/components/Spinner/Spinner";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useScrollPosition } from "#/hooks/useScrollPosition"; import { useScrollPosition } from "#/hooks/useScrollPosition";
import { useUserStore } from "../store/auth"; import { useUserStore } from "../store/auth";
import { Dropdown } from "flowbite-react"; import { Dropdown, Button } from "flowbite-react";
import { sort } from "./common"; import { sort } from "./common";
import { ENDPOINTS } from "#/api/config"; import { ENDPOINTS } from "#/api/config";
import { BookmarksList, SortList } from "#/api/utils"; import { BookmarksList } from "#/api/utils";
const fetcher = async (url: string) => { const fetcher = async (url: string) => {
const res = await fetch(url); const res = await fetch(url);
if (!res.ok) { 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(); error.message = await res.json();
throw error; throw error;
} }
@ -30,7 +32,9 @@ export function BookmarksCategoryPage(props: any) {
const getKey = (pageIndex: number, previousPageData: any) => { const getKey = (pageIndex: number, previousPageData: any) => {
if (previousPageData && !previousPageData.content.length) return null; if (previousPageData && !previousPageData.content.length) return null;
if (token) { 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[data.length - 1].current_page < data[data.length - 1].current_page <
data[data.length - 1].total_page_count && ( data[data.length - 1].total_page_count && (
<button <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" className="w-full"
color={"light"}
onClick={() => setSize(size + 1)} onClick={() => setSize(size + 1)}
> >
<span className="w-10 h-10 iconify mdi--plus"></span> <div className="flex items-center gap-2">
<span className="text-lg">Загрузить ещё</span> <span className="w-6 h-6 iconify mdi--plus-circle "></span>
</button> <span className="text-lg">Загрузить ещё</span>
</div>
</Button>
)} )}
</main> </main>
); );

19
app/pages/Favorites.tsx
View file

@ -5,7 +5,7 @@ import { Spinner } from "#/components/Spinner/Spinner";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useScrollPosition } from "#/hooks/useScrollPosition"; import { useScrollPosition } from "#/hooks/useScrollPosition";
import { useUserStore } from "../store/auth"; import { useUserStore } from "../store/auth";
import { Dropdown } from "flowbite-react"; import { Dropdown, Button } from "flowbite-react";
import { sort } from "./common"; import { sort } from "./common";
import { ENDPOINTS } from "#/api/config"; import { ENDPOINTS } from "#/api/config";
@ -13,7 +13,9 @@ const fetcher = async (url: string) => {
const res = await fetch(url); const res = await fetch(url);
if (!res.ok) { 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(); error.message = await res.json();
throw error; throw error;
} }
@ -106,13 +108,16 @@ export function FavoritesPage() {
{data && {data &&
data[data.length - 1].current_page < data[data.length - 1].current_page <
data[data.length - 1].total_page_count && ( data[data.length - 1].total_page_count && (
<button <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" className="w-full"
color={"light"}
onClick={() => setSize(size + 1)} onClick={() => setSize(size + 1)}
> >
<span className="w-10 h-10 iconify mdi--plus"></span> <div className="flex items-center gap-2">
<span className="text-lg">Загрузить ещё</span> <span className="w-6 h-6 iconify mdi--plus-circle "></span>
</button> <span className="text-lg">Загрузить ещё</span>
</div>
</Button>
)} )}
</main> </main>
); );

41
app/pages/History.tsx
View file

@ -6,12 +6,15 @@ import { useState, useEffect } from "react";
import { useScrollPosition } from "#/hooks/useScrollPosition"; import { useScrollPosition } from "#/hooks/useScrollPosition";
import { useUserStore } from "../store/auth"; import { useUserStore } from "../store/auth";
import { ENDPOINTS } from "#/api/config"; import { ENDPOINTS } from "#/api/config";
import { Button } from "flowbite-react";
const fetcher = async (url: string) => { const fetcher = async (url: string) => {
const res = await fetch(url); const res = await fetch(url);
if (!res.ok) { 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(); error.message = await res.json();
throw error; throw error;
} }
@ -56,16 +59,25 @@ export function HistoryPage() {
}, [scrollPosition]); }, [scrollPosition]);
return ( return (
<main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0"> <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-4">
<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>
{content && content.length > 0 ? ( {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 ? ( ) : !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 /> <Spinner />
</div> </div>
) : ( ) : (
@ -74,17 +86,6 @@ export function HistoryPage() {
<p>В истории пока ничего нет...</p> <p>В истории пока ничего нет...</p>
</div> </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> </main>
); );
} }

14
app/pages/IndexCategory.tsx
View file

@ -5,6 +5,7 @@ import { useState, useEffect } from "react";
import { useScrollPosition } from "#/hooks/useScrollPosition"; import { useScrollPosition } from "#/hooks/useScrollPosition";
import { useUserStore } from "../store/auth"; import { useUserStore } from "../store/auth";
import { _FetchHomePageReleases } from "#/api/utils"; import { _FetchHomePageReleases } from "#/api/utils";
import { Button } from "flowbite-react";
export function IndexCategoryPage(props) { export function IndexCategoryPage(props) {
const token = useUserStore((state) => state.token); const token = useUserStore((state) => state.token);
@ -65,13 +66,16 @@ export function IndexCategoryPage(props) {
</p> </p>
</div> </div>
)} )}
<button <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" className="w-full"
color={"light"}
onClick={() => setPage(page + 1)} onClick={() => setPage(page + 1)}
> >
<span className="w-10 h-10 iconify mdi--plus"> </span> <div className="flex items-center gap-2">
<span className="text-lg">Загрузить ещё</span> <span className="w-6 h-6 iconify mdi--plus-circle "></span>
</button> <span className="text-lg">Загрузить ещё</span>
</div>
</Button>
</main> </main>
); );
} }

26
app/pages/Search.tsx
View file

@ -8,12 +8,15 @@ import { useScrollPosition } from "#/hooks/useScrollPosition";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useSearchParams } from "next/navigation"; import { useSearchParams } from "next/navigation";
import { useUserStore } from "../store/auth"; import { useUserStore } from "../store/auth";
import { Button } from "flowbite-react";
const fetcher = async (url: string) => { const fetcher = async (url: string) => {
const res = await fetch(url); const res = await fetch(url);
if (!res.ok) { 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(); error.message = await res.json();
throw error; throw error;
} }
@ -25,9 +28,9 @@ export function SearchPage() {
const router = useRouter(); const router = useRouter();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const [query, setQuery] = useState(searchParams.get("q") || null); const [query, setQuery] = useState(searchParams.get("q") || null);
const where = searchParams.get("where") || null const where = searchParams.get("where") || null;
const searchBy = searchParams.get("searchBy") || null const searchBy = searchParams.get("searchBy") || null;
const list = searchParams.get("list") || null const list = searchParams.get("list") || null;
const token = useUserStore((state) => state.token); const token = useUserStore((state) => state.token);
@ -93,7 +96,7 @@ export function SearchPage() {
className="max-w-full mx-auto" className="max-w-full mx-auto"
onSubmit={(e) => { onSubmit={(e) => {
e.preventDefault(); e.preventDefault();
setContent(null) setContent(null);
setQuery(e.target[0].value.trim()); setQuery(e.target[0].value.trim());
router.push(`/search?q=${e.target[0].value.trim()}`); router.push(`/search?q=${e.target[0].value.trim()}`);
}} }}
@ -165,13 +168,16 @@ export function SearchPage() {
)} )}
</div> </div>
{data && data[data.length - 1].releases.length == 25 && ( {data && data[data.length - 1].releases.length == 25 && (
<button <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" className="w-full"
color={"light"}
onClick={() => setSize(size + 1)} onClick={() => setSize(size + 1)}
> >
<span className="w-10 h-10 iconify mdi--plus"> </span> <div className="flex items-center gap-2">
<span className="text-lg">Загрузить ещё</span> <span className="w-6 h-6 iconify mdi--plus-circle "></span>
</button> <span className="text-lg">Загрузить ещё</span>
</div>
</Button>
)} )}
</main> </main>
); );