From 9e658385697095808c3fa716de342cdc431ae507 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Sun, 4 Aug 2024 13:55:31 +0500 Subject: [PATCH] refactor: load more button --- .../ReleaseSection/ReleaseSection.tsx | 2 +- app/pages/BookmarksCategory.tsx | 25 +++++++---- app/pages/Favorites.tsx | 19 +++++---- app/pages/History.tsx | 41 ++++++++++--------- app/pages/IndexCategory.tsx | 14 ++++--- app/pages/Search.tsx | 26 +++++++----- 6 files changed, 75 insertions(+), 52 deletions(-) diff --git a/app/components/ReleaseSection/ReleaseSection.tsx b/app/components/ReleaseSection/ReleaseSection.tsx index a1612dc..b619a46 100644 --- a/app/components/ReleaseSection/ReleaseSection.tsx +++ b/app/components/ReleaseSection/ReleaseSection.tsx @@ -1,6 +1,6 @@ import { ReleaseLink } from "../ReleaseLink/ReleaseLink"; -export const ReleaseSection = (props: any) => { +export const ReleaseSection = (props: {sectionTitle?: string, content: any}) => { return (
{props.sectionTitle && ( diff --git a/app/pages/BookmarksCategory.tsx b/app/pages/BookmarksCategory.tsx index 9d9d005..59ba022 100644 --- a/app/pages/BookmarksCategory.tsx +++ b/app/pages/BookmarksCategory.tsx @@ -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 && ( - +
+ + Загрузить ещё +
+ )} ); diff --git a/app/pages/Favorites.tsx b/app/pages/Favorites.tsx index c06fe10..8b46c8e 100644 --- a/app/pages/Favorites.tsx +++ b/app/pages/Favorites.tsx @@ -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 && ( - +
+ + Загрузить ещё +
+ )} ); diff --git a/app/pages/History.tsx b/app/pages/History.tsx index 28b9a31..e0d1c32 100644 --- a/app/pages/History.tsx +++ b/app/pages/History.tsx @@ -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 ( -
-
-

- История -

-
+
{content && content.length > 0 ? ( - + <> + + {data && data[0].total_count != content.length && ( + + )} + ) : !isLoadingEnd || isLoading ? ( -
+
) : ( @@ -74,17 +86,6 @@ export function HistoryPage() {

В истории пока ничего нет...

)} - {data && - data[data.length - 1].current_page < - data[data.length - 1].total_page_count && ( - - )}
); } diff --git a/app/pages/IndexCategory.tsx b/app/pages/IndexCategory.tsx index a9a9fbf..d474b64 100644 --- a/app/pages/IndexCategory.tsx +++ b/app/pages/IndexCategory.tsx @@ -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) {

)} - +
+ + Загрузить ещё +
+
); } diff --git a/app/pages/Search.tsx b/app/pages/Search.tsx index b1938bc..ffad084 100644 --- a/app/pages/Search.tsx +++ b/app/pages/Search.tsx @@ -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() { )} {data && data[data.length - 1].releases.length == 25 && ( - +
+ + Загрузить ещё +
+ )} );