mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-05 07:44:38 +00:00
feat: update fetcher for collections
This commit is contained in:
parent
d16e4d14d4
commit
92f6725b21
GPG key ID:
858E8EE696525EED
3 changed files with 87 additions and 65 deletions
|
|
@ -2,8 +2,7 @@
|
|||
import useSWR from "swr";
|
||||
import { CollectionCourusel } from "#/components/CollectionCourusel/CollectionCourusel";
|
||||
import { Spinner } from "#/components/Spinner/Spinner";
|
||||
const fetcher = (...args: any) =>
|
||||
fetch([...args] as any).then((res) => res.json());
|
||||
import { useSWRfetcher } from "#/api/utils";
|
||||
import { useUserStore } from "#/store/auth";
|
||||
import { ENDPOINTS } from "#/api/config";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
|
@ -25,12 +24,15 @@ export function CollectionsPage() {
|
|||
}
|
||||
}
|
||||
|
||||
const { data } = useSWR(url, fetcher);
|
||||
return [data];
|
||||
const { data, error } = useSWR(url, useSWRfetcher);
|
||||
return [data, error];
|
||||
}
|
||||
|
||||
const [userCollections] = useFetchReleases("userCollections");
|
||||
const [favoriteCollections] = useFetchReleases("userFavoriteCollections");
|
||||
const [userCollections, userCollectionsError] =
|
||||
useFetchReleases("userCollections");
|
||||
const [favoriteCollections, favoriteCollectionsError] = useFetchReleases(
|
||||
"userFavoriteCollections"
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (userStore.state === "finished" && !userStore.token) {
|
||||
|
|
@ -114,6 +116,18 @@ export function CollectionsPage() {
|
|||
content={favoriteCollections.content}
|
||||
/>
|
||||
)}
|
||||
|
||||
{(userCollectionsError || favoriteCollectionsError) && (
|
||||
<main className="flex items-center justify-center min-h-screen">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-2xl font-bold">Ошибка</h1>
|
||||
<p className="text-lg">
|
||||
Произошла ошибка при загрузке коллекций. Попробуйте обновить
|
||||
страницу или зайдите позже.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,20 +8,7 @@ import { useUserStore } from "../store/auth";
|
|||
import { Button } from "flowbite-react";
|
||||
import { ENDPOINTS } from "#/api/config";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
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}`
|
||||
);
|
||||
error.message = await res.json();
|
||||
throw error;
|
||||
}
|
||||
|
||||
return res.json();
|
||||
};
|
||||
import { useSWRfetcher } from "#/api/utils";
|
||||
|
||||
export function CollectionsFullPage(props: {
|
||||
type: "favorites" | "profile" | "release";
|
||||
|
|
@ -30,13 +17,12 @@ export function CollectionsFullPage(props: {
|
|||
release_id?: number;
|
||||
}) {
|
||||
const userStore = useUserStore();
|
||||
const [isLoadingEnd, setIsLoadingEnd] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
const getKey = (pageIndex: number, previousPageData: any) => {
|
||||
if (previousPageData && !previousPageData.content.length) return null;
|
||||
|
||||
let url;
|
||||
let url: string;
|
||||
|
||||
if (props.type == "favorites") {
|
||||
url = `${ENDPOINTS.collection.favoriteCollections}/all/${pageIndex}`;
|
||||
|
|
@ -55,7 +41,7 @@ export function CollectionsFullPage(props: {
|
|||
|
||||
const { data, error, isLoading, size, setSize } = useSWRInfinite(
|
||||
getKey,
|
||||
fetcher,
|
||||
useSWRfetcher,
|
||||
{ initialSize: 2 }
|
||||
);
|
||||
|
||||
|
|
@ -67,7 +53,6 @@ export function CollectionsFullPage(props: {
|
|||
allReleases.push(...data[i].content);
|
||||
}
|
||||
setContent(allReleases);
|
||||
setIsLoadingEnd(true);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
|
|
@ -90,26 +75,45 @@ export function CollectionsFullPage(props: {
|
|||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [userStore.state, userStore.token]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-w-full min-h-screen">
|
||||
<Spinner />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<main className="flex items-center justify-center min-h-screen">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-2xl font-bold">Ошибка</h1>
|
||||
<p className="text-lg">
|
||||
Произошла ошибка при загрузке коллекций. Попробуйте обновить страницу
|
||||
или зайдите позже.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{content && content.length > 0 ? (
|
||||
{content && content.length > 0 ?
|
||||
<CollectionsSection
|
||||
sectionTitle={props.title}
|
||||
content={content}
|
||||
isMyCollections={
|
||||
props.type == "profile" && userStore.user && props.profile_id == userStore.user.id
|
||||
props.type == "profile" &&
|
||||
userStore.user &&
|
||||
props.profile_id == userStore.user.id
|
||||
}
|
||||
/>
|
||||
) : !isLoadingEnd || isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center min-w-full min-h-screen">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center min-w-full gap-4 mt-12 text-xl">
|
||||
: <div className="flex flex-col items-center justify-center min-w-full gap-4 mt-12 text-xl">
|
||||
<span className="w-24 h-24 iconify-color twemoji--broken-heart"></span>
|
||||
<p>Тут пока ничего нет...</p>
|
||||
</div>
|
||||
)}
|
||||
}
|
||||
{data &&
|
||||
data[data.length - 1].current_page <
|
||||
data[data.length - 1].total_page_count && (
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import { useState, useEffect } from "react";
|
|||
import { useScrollPosition } from "#/hooks/useScrollPosition";
|
||||
import { useUserStore } from "../store/auth";
|
||||
import { ENDPOINTS } from "#/api/config";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { ReleaseSection } from "#/components/ReleaseSection/ReleaseSection";
|
||||
|
||||
import { CollectionInfoBasics } from "#/components/CollectionInfo/CollectionInfo.Basics";
|
||||
|
|
@ -14,24 +13,10 @@ import { InfoLists } from "#/components/InfoLists/InfoLists";
|
|||
import { CollectionInfoControls } from "#/components/CollectionInfo/CollectionInfoControls";
|
||||
import { CommentsMain } from "#/components/Comments/Comments.Main";
|
||||
|
||||
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}`
|
||||
);
|
||||
error.message = await res.json();
|
||||
throw error;
|
||||
}
|
||||
|
||||
return res.json();
|
||||
};
|
||||
import { useSWRfetcher } from "#/api/utils";
|
||||
|
||||
export const ViewCollectionPage = (props: { id: number }) => {
|
||||
const userStore = useUserStore();
|
||||
const [isLoadingEnd, setIsLoadingEnd] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
function useFetchCollectionInfo(type: "info" | "comments") {
|
||||
let url: string;
|
||||
|
|
@ -46,8 +31,8 @@ export const ViewCollectionPage = (props: { id: number }) => {
|
|||
url += `${type != "info" ? "&" : "?"}token=${userStore.token}`;
|
||||
}
|
||||
|
||||
const { data, isLoading } = useSWR(url, fetcher);
|
||||
return [data, isLoading];
|
||||
const { data, error, isLoading } = useSWR(url, useSWRfetcher);
|
||||
return [data, error, isLoading];
|
||||
}
|
||||
const getKey = (pageIndex: number, previousPageData: any) => {
|
||||
if (previousPageData && !previousPageData.content.length) return null;
|
||||
|
|
@ -58,14 +43,17 @@ export const ViewCollectionPage = (props: { id: number }) => {
|
|||
return url;
|
||||
};
|
||||
|
||||
const [collectionInfo, collectionInfoIsLoading] =
|
||||
const [collectionInfo, collectionInfoError, collectionInfoIsLoading] =
|
||||
useFetchCollectionInfo("info");
|
||||
const [collectionComments, collectionCommentsIsLoading] =
|
||||
useFetchCollectionInfo("comments");
|
||||
const [
|
||||
collectionComments,
|
||||
collectionCommentsError,
|
||||
collectionCommentsIsLoading,
|
||||
] = useFetchCollectionInfo("comments");
|
||||
|
||||
const { data, error, isLoading, size, setSize } = useSWRInfinite(
|
||||
getKey,
|
||||
fetcher,
|
||||
useSWRfetcher,
|
||||
{ initialSize: 2 }
|
||||
);
|
||||
|
||||
|
|
@ -77,7 +65,6 @@ export const ViewCollectionPage = (props: { id: number }) => {
|
|||
allReleases.push(...data[i].content);
|
||||
}
|
||||
setContent(allReleases);
|
||||
setIsLoadingEnd(true);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
|
|
@ -89,14 +76,35 @@ export const ViewCollectionPage = (props: { id: number }) => {
|
|||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [scrollPosition]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center w-full h-screen">
|
||||
<Spinner />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || collectionInfoError) {
|
||||
return (
|
||||
<main className="flex items-center justify-center min-h-screen">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-2xl font-bold">Ошибка</h1>
|
||||
<p className="text-lg">
|
||||
Произошла ошибка при загрузке коллекции. Попробуйте обновить
|
||||
страницу или зайдите позже.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{collectionInfoIsLoading ? (
|
||||
{collectionInfoIsLoading ?
|
||||
<div className="flex items-center justify-center w-full h-screen">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
collectionInfo && (
|
||||
: collectionInfo && (
|
||||
<>
|
||||
<div className="flex flex-col flex-wrap gap-2 px-2 pb-2 sm:flex-row">
|
||||
<CollectionInfoBasics
|
||||
|
|
@ -138,11 +146,7 @@ export const ViewCollectionPage = (props: { id: number }) => {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
{isLoading || !content || !isLoadingEnd ? (
|
||||
<div className="flex items-center justify-center w-full h-screen">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
{content && (
|
||||
<ReleaseSection
|
||||
sectionTitle={"Релизов в коллекции: " + data[0].total_count}
|
||||
content={content}
|
||||
|
|
@ -150,7 +154,7 @@ export const ViewCollectionPage = (props: { id: number }) => {
|
|||
)}
|
||||
</>
|
||||
)
|
||||
)}
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue