mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-30 18:09:40 +05:00
feat: add error messages to user pages
This commit is contained in:
parent
f2f03df1a0
commit
d16e4d14d4
GPG key ID:
858E8EE696525EED
10 changed files with 285 additions and 136 deletions
|
|
@ -2,11 +2,9 @@
|
|||
import useSWR from "swr";
|
||||
import { ReleaseCourusel } from "#/components/ReleaseCourusel/ReleaseCourusel";
|
||||
import { Spinner } from "#/components/Spinner/Spinner";
|
||||
const fetcher = (...args: any) =>
|
||||
fetch([...args] as any).then((res) => res.json());
|
||||
import { useUserStore } from "#/store/auth";
|
||||
import { usePreferencesStore } from "#/store/preferences";
|
||||
import { BookmarksList } from "#/api/utils";
|
||||
import { BookmarksList, useSWRfetcher } from "#/api/utils";
|
||||
import { ENDPOINTS } from "#/api/config";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect } from "react";
|
||||
|
|
@ -35,7 +33,7 @@ export function BookmarksPage(props: { profile_id?: number }) {
|
|||
function useFetchReleases(listName: string) {
|
||||
let url: string;
|
||||
if (preferenceStore.params.skipToCategory.enabled) {
|
||||
return [null];
|
||||
return [null, null];
|
||||
}
|
||||
|
||||
if (props.profile_id) {
|
||||
|
|
@ -50,8 +48,9 @@ export function BookmarksPage(props: { profile_id?: number }) {
|
|||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
const { data } = useSWR(url, fetcher);
|
||||
return [data];
|
||||
const { data, error } = useSWR(url, useSWRfetcher);
|
||||
console.log(data, error);
|
||||
return [data, error];
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -61,11 +60,11 @@ export function BookmarksPage(props: { profile_id?: number }) {
|
|||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [authState, token]);
|
||||
|
||||
const [watchingData] = useFetchReleases("watching");
|
||||
const [plannedData] = useFetchReleases("planned");
|
||||
const [watchedData] = useFetchReleases("watched");
|
||||
const [delayedData] = useFetchReleases("delayed");
|
||||
const [abandonedData] = useFetchReleases("abandoned");
|
||||
const [watchingData, watchingError] = useFetchReleases("watching");
|
||||
const [plannedData, plannedError] = useFetchReleases("planned");
|
||||
const [watchedData, watchedError] = useFetchReleases("watched");
|
||||
const [delayedData, delayedError] = useFetchReleases("delayed");
|
||||
const [abandonedData, abandonedError] = useFetchReleases("abandoned");
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -85,9 +84,9 @@ export function BookmarksPage(props: { profile_id?: number }) {
|
|||
<ReleaseCourusel
|
||||
sectionTitle="Смотрю"
|
||||
showAllLink={
|
||||
!props.profile_id
|
||||
? "/bookmarks/watching"
|
||||
: `/profile/${props.profile_id}/bookmarks/watching`
|
||||
!props.profile_id ?
|
||||
"/bookmarks/watching"
|
||||
: `/profile/${props.profile_id}/bookmarks/watching`
|
||||
}
|
||||
content={watchingData.content}
|
||||
/>
|
||||
|
|
@ -96,9 +95,9 @@ export function BookmarksPage(props: { profile_id?: number }) {
|
|||
<ReleaseCourusel
|
||||
sectionTitle="В планах"
|
||||
showAllLink={
|
||||
!props.profile_id
|
||||
? "/bookmarks/planned"
|
||||
: `/profile/${props.profile_id}/bookmarks/planned`
|
||||
!props.profile_id ? "/bookmarks/planned" : (
|
||||
`/profile/${props.profile_id}/bookmarks/planned`
|
||||
)
|
||||
}
|
||||
content={plannedData.content}
|
||||
/>
|
||||
|
|
@ -107,9 +106,9 @@ export function BookmarksPage(props: { profile_id?: number }) {
|
|||
<ReleaseCourusel
|
||||
sectionTitle="Просмотрено"
|
||||
showAllLink={
|
||||
!props.profile_id
|
||||
? "/bookmarks/watched"
|
||||
: `/profile/${props.profile_id}/bookmarks/watched`
|
||||
!props.profile_id ? "/bookmarks/watched" : (
|
||||
`/profile/${props.profile_id}/bookmarks/watched`
|
||||
)
|
||||
}
|
||||
content={watchedData.content}
|
||||
/>
|
||||
|
|
@ -118,9 +117,9 @@ export function BookmarksPage(props: { profile_id?: number }) {
|
|||
<ReleaseCourusel
|
||||
sectionTitle="Отложено"
|
||||
showAllLink={
|
||||
!props.profile_id
|
||||
? "/bookmarks/delayed"
|
||||
: `/profile/${props.profile_id}/bookmarks/delayed`
|
||||
!props.profile_id ? "/bookmarks/delayed" : (
|
||||
`/profile/${props.profile_id}/bookmarks/delayed`
|
||||
)
|
||||
}
|
||||
content={delayedData.content}
|
||||
/>
|
||||
|
|
@ -131,13 +130,28 @@ export function BookmarksPage(props: { profile_id?: number }) {
|
|||
<ReleaseCourusel
|
||||
sectionTitle="Заброшено"
|
||||
showAllLink={
|
||||
!props.profile_id
|
||||
? "/bookmarks/abandoned"
|
||||
: `/profile/${props.profile_id}/bookmarks/abandoned`
|
||||
!props.profile_id ?
|
||||
"/bookmarks/abandoned"
|
||||
: `/profile/${props.profile_id}/bookmarks/abandoned`
|
||||
}
|
||||
content={abandonedData.content}
|
||||
/>
|
||||
)}
|
||||
{(watchingError ||
|
||||
plannedError ||
|
||||
watchedError ||
|
||||
delayedError ||
|
||||
abandonedError) && (
|
||||
<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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@ import { Spinner } from "#/components/Spinner/Spinner";
|
|||
import { useState, useEffect } from "react";
|
||||
import { useScrollPosition } from "#/hooks/useScrollPosition";
|
||||
import { useUserStore } from "../store/auth";
|
||||
import { Dropdown, Button, Tabs } from "flowbite-react";
|
||||
import { Dropdown, Button } from "flowbite-react";
|
||||
import { sort } from "./common";
|
||||
import { ENDPOINTS } from "#/api/config";
|
||||
import { BookmarksList } from "#/api/utils";
|
||||
import { BookmarksList, useSWRfetcher } from "#/api/utils";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
const DropdownTheme = {
|
||||
|
|
@ -17,25 +17,10 @@ const DropdownTheme = {
|
|||
},
|
||||
};
|
||||
|
||||
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();
|
||||
};
|
||||
|
||||
export function BookmarksCategoryPage(props: any) {
|
||||
const token = useUserStore((state) => state.token);
|
||||
const authState = useUserStore((state) => state.state);
|
||||
const [selectedSort, setSelectedSort] = useState(0);
|
||||
const [isLoadingEnd, setIsLoadingEnd] = useState(false);
|
||||
const [searchVal, setSearchVal] = useState("");
|
||||
const router = useRouter();
|
||||
|
||||
|
|
@ -61,7 +46,7 @@ export function BookmarksCategoryPage(props: any) {
|
|||
|
||||
const { data, error, isLoading, size, setSize } = useSWRInfinite(
|
||||
getKey,
|
||||
fetcher,
|
||||
useSWRfetcher,
|
||||
{ initialSize: 2 }
|
||||
);
|
||||
|
||||
|
|
@ -73,7 +58,6 @@ export function BookmarksCategoryPage(props: any) {
|
|||
allReleases.push(...data[i].content);
|
||||
}
|
||||
setContent(allReleases);
|
||||
setIsLoadingEnd(true);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
|
|
@ -92,9 +76,31 @@ export function BookmarksCategoryPage(props: any) {
|
|||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [authState, 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 (
|
||||
<>
|
||||
{!props.profile_id ? (
|
||||
{!props.profile_id ?
|
||||
<form
|
||||
className="flex-1 max-w-full mx-4"
|
||||
onSubmit={(e) => {
|
||||
|
|
@ -143,9 +149,7 @@ export function BookmarksCategoryPage(props: any) {
|
|||
</button>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
: ""}
|
||||
<div className="m-4 overflow-auto">
|
||||
<Button.Group>
|
||||
<Button
|
||||
|
|
@ -154,9 +158,9 @@ export function BookmarksCategoryPage(props: any) {
|
|||
color="light"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
props.profile_id
|
||||
? `/profile/${props.profile_id}/bookmarks/watching`
|
||||
: "/bookmarks/watching"
|
||||
props.profile_id ?
|
||||
`/profile/${props.profile_id}/bookmarks/watching`
|
||||
: "/bookmarks/watching"
|
||||
)
|
||||
}
|
||||
>
|
||||
|
|
@ -168,9 +172,9 @@ export function BookmarksCategoryPage(props: any) {
|
|||
color="light"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
props.profile_id
|
||||
? `/profile/${props.profile_id}/bookmarks/planned`
|
||||
: "/bookmarks/planned"
|
||||
props.profile_id ?
|
||||
`/profile/${props.profile_id}/bookmarks/planned`
|
||||
: "/bookmarks/planned"
|
||||
)
|
||||
}
|
||||
>
|
||||
|
|
@ -182,9 +186,9 @@ export function BookmarksCategoryPage(props: any) {
|
|||
color="light"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
props.profile_id
|
||||
? `/profile/${props.profile_id}/bookmarks/watched`
|
||||
: "/bookmarks/watched"
|
||||
props.profile_id ?
|
||||
`/profile/${props.profile_id}/bookmarks/watched`
|
||||
: "/bookmarks/watched"
|
||||
)
|
||||
}
|
||||
>
|
||||
|
|
@ -196,9 +200,9 @@ export function BookmarksCategoryPage(props: any) {
|
|||
color="light"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
props.profile_id
|
||||
? `/profile/${props.profile_id}/bookmarks/delayed`
|
||||
: "/bookmarks/delayed"
|
||||
props.profile_id ?
|
||||
`/profile/${props.profile_id}/bookmarks/delayed`
|
||||
: "/bookmarks/delayed"
|
||||
)
|
||||
}
|
||||
>
|
||||
|
|
@ -210,9 +214,9 @@ export function BookmarksCategoryPage(props: any) {
|
|||
color="light"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
props.profile_id
|
||||
? `/profile/${props.profile_id}/bookmarks/abandoned`
|
||||
: "/bookmarks/abandoned"
|
||||
props.profile_id ?
|
||||
`/profile/${props.profile_id}/bookmarks/abandoned`
|
||||
: "/bookmarks/abandoned"
|
||||
)
|
||||
}
|
||||
>
|
||||
|
|
@ -236,9 +240,9 @@ export function BookmarksCategoryPage(props: any) {
|
|||
<Dropdown.Item key={index} onClick={() => setSelectedSort(index)}>
|
||||
<span
|
||||
className={`w-6 h-6 iconify ${
|
||||
sort.values[index].value.split("_")[1] == "descending"
|
||||
? sort.descendingIcon
|
||||
: sort.ascendingIcon
|
||||
sort.values[index].value.split("_")[1] == "descending" ?
|
||||
sort.descendingIcon
|
||||
: sort.ascendingIcon
|
||||
}`}
|
||||
></span>
|
||||
{item.name}
|
||||
|
|
@ -246,20 +250,15 @@ export function BookmarksCategoryPage(props: any) {
|
|||
))}
|
||||
</Dropdown>
|
||||
</div>
|
||||
{content && content.length > 0 ? (
|
||||
{content && content.length > 0 ?
|
||||
<ReleaseSection content={content} />
|
||||
) : !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>
|
||||
В списке {props.SectionTitleMapping[props.slug]} пока ничего нет...
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
}
|
||||
{data &&
|
||||
data[data.length - 1].current_page <
|
||||
data[data.length - 1].total_page_count && (
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
|
|||
import { Spinner } from "../components/Spinner/Spinner";
|
||||
import { ENDPOINTS } from "#/api/config";
|
||||
import useSWR from "swr";
|
||||
import { useSWRfetcher } from "#/api/utils";
|
||||
|
||||
import { ProfileUser } from "#/components/Profile/Profile.User";
|
||||
import { ProfileBannedBanner } from "#/components/Profile/ProfileBannedBanner";
|
||||
|
|
@ -16,20 +17,6 @@ import { ProfileReleaseRatings } from "#/components/Profile/Profile.ReleaseRatin
|
|||
import { ProfileReleaseHistory } from "#/components/Profile/Profile.ReleaseHistory";
|
||||
import { ProfileEditModal } from "#/components/Profile/Profile.EditModal";
|
||||
|
||||
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();
|
||||
};
|
||||
|
||||
export const ProfilePage = (props: any) => {
|
||||
const authUser = useUserStore();
|
||||
const [user, setUser] = useState(null);
|
||||
|
|
@ -41,7 +28,7 @@ export const ProfilePage = (props: any) => {
|
|||
if (authUser.token) {
|
||||
url += `?token=${authUser.token}`;
|
||||
}
|
||||
const { data } = useSWR(url, fetcher);
|
||||
const { data, error } = useSWR(url, useSWRfetcher);
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
|
|
@ -50,7 +37,7 @@ export const ProfilePage = (props: any) => {
|
|||
}
|
||||
}, [data]);
|
||||
|
||||
if (!user) {
|
||||
if (!user && !error) {
|
||||
return (
|
||||
<main className="flex items-center justify-center min-h-screen">
|
||||
<Spinner />
|
||||
|
|
@ -58,6 +45,20 @@ export const ProfilePage = (props: any) => {
|
|||
);
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
const hasSocials =
|
||||
user.vk_page != "" ||
|
||||
user.tg_page != "" ||
|
||||
|
|
@ -157,7 +158,11 @@ export const ProfilePage = (props: any) => {
|
|||
{!user.is_stats_hidden && (
|
||||
<div className="flex-col hidden gap-2 xl:flex">
|
||||
{user.votes && user.votes.length > 0 && (
|
||||
<ProfileReleaseRatings ratings={user.votes} token={authUser.token} profile_id={user.id} />
|
||||
<ProfileReleaseRatings
|
||||
ratings={user.votes}
|
||||
token={authUser.token}
|
||||
profile_id={user.id}
|
||||
/>
|
||||
)}
|
||||
{user.history && user.history.length > 0 && (
|
||||
<ProfileReleaseHistory history={user.history} />
|
||||
|
|
@ -197,7 +202,11 @@ export const ProfilePage = (props: any) => {
|
|||
<ProfileWatchDynamic watchDynamic={user.watch_dynamics || []} />
|
||||
<div className="flex flex-col gap-2 xl:hidden">
|
||||
{user.votes && user.votes.length > 0 && (
|
||||
<ProfileReleaseRatings ratings={user.votes} token={authUser.token} profile_id={user.id} />
|
||||
<ProfileReleaseRatings
|
||||
ratings={user.votes}
|
||||
token={authUser.token}
|
||||
profile_id={user.id}
|
||||
/>
|
||||
)}
|
||||
{user.history && user.history.length > 0 && (
|
||||
<ProfileReleaseHistory history={user.history} />
|
||||
|
|
@ -207,7 +216,12 @@ export const ProfilePage = (props: any) => {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ProfileEditModal isOpen={isOpen && isMyProfile} setIsOpen={setIsOpen} token={authUser.token} profile_id={user.id}/>
|
||||
<ProfileEditModal
|
||||
isOpen={isOpen && isMyProfile}
|
||||
setIsOpen={setIsOpen}
|
||||
token={authUser.token}
|
||||
profile_id={user.id}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue