From d16e4d14d43110bc4e41aa2785a014fdf2b33c3b Mon Sep 17 00:00:00 2001 From: Radiquum Date: Thu, 20 Mar 2025 22:02:49 +0500 Subject: [PATCH] feat: add error messages to user pages --- app/api/utils.ts | 96 ++++++++++++++++++--- app/pages/Bookmarks.tsx | 66 +++++++++------ app/pages/BookmarksCategory.tsx | 97 +++++++++++----------- app/pages/Profile.tsx | 52 +++++++----- app/profile/[id]/bookmarks/[slug]/page.tsx | 15 +++- app/profile/[id]/bookmarks/page.tsx | 19 +++-- app/profile/[id]/collections/page.tsx | 40 +++++++-- app/profile/[id]/page.tsx | 17 ++-- app/store/auth.ts | 10 ++- middleware.ts | 9 +- 10 files changed, 285 insertions(+), 136 deletions(-) diff --git a/app/api/utils.ts b/app/api/utils.ts index 53b48ae..f7e22fb 100644 --- a/app/api/utils.ts +++ b/app/api/utils.ts @@ -4,6 +4,84 @@ export const HEADERS = { "Content-Type": "application/json; charset=UTF-8", }; +// Types for the result object with discriminated union +type Success = { + data: T; + error: null; +}; + +type Failure = { + data: null; + error: E; +}; + +type Result = Success | Failure; + +// Main wrapper function +export async function tryCatch( + promise: Promise +): Promise> { + try { + const data = await promise; + return { data, error: null }; + } catch (error) { + return { data: null, error: error as E }; + } +} + +export async function tryCatchAPI( + promise: Promise +): Promise> { + try { + const res: Awaited = await promise; + if (!res.ok) { + return { + data: null, + error: JSON.stringify({ + message: res.statusText, + code: res.status, + }) as E, + }; + } + + if ( + res.headers.get("content-length") && + Number(res.headers.get("content-length")) == 0 + ) { + return { + data: null, + error: { + message: "Not Found", + code: 404, + } as E, + }; + } + + const data: Awaited = await res.json(); + if (data.code != 0) { + return { + data: null, + error: { + message: "API Returned an Error", + code: data.code || 500, + } as E, + }; + } + + return { data, error: null }; + } catch (error) { + return { data: null, error: error as E }; + } +} + +export const useSWRfetcher = async (url: string) => { + const { data, error } = await tryCatchAPI(fetch(url)); + if (error) { + throw error; + } + return data; +}; + export const fetchDataViaGet = async ( url: string, API_V2: string | boolean = false @@ -11,18 +89,14 @@ export const fetchDataViaGet = async ( if (API_V2) { HEADERS["API-Version"] = "v2"; } - try { - const response = await fetch(url, { + + const { data, error } = await tryCatchAPI( + fetch(url, { headers: HEADERS, - }); - if (response.status !== 200) { - return null; - } - const data = await response.json(); - return data; - } catch (error) { - console.log(error); - } + }) + ); + + return { data, error }; }; export const fetchDataViaPost = async ( diff --git a/app/pages/Bookmarks.tsx b/app/pages/Bookmarks.tsx index e3a5c0b..c25b899 100644 --- a/app/pages/Bookmarks.tsx +++ b/app/pages/Bookmarks.tsx @@ -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 }) { @@ -96,9 +95,9 @@ export function BookmarksPage(props: { profile_id?: number }) { @@ -107,9 +106,9 @@ export function BookmarksPage(props: { profile_id?: number }) { @@ -118,9 +117,9 @@ export function BookmarksPage(props: { profile_id?: number }) { @@ -131,13 +130,28 @@ export function BookmarksPage(props: { profile_id?: number }) { )} + {(watchingError || + plannedError || + watchedError || + delayedError || + abandonedError) && ( +
+
+

Ошибка

+

+ Произошла ошибка при загрузке закладок. Попробуйте обновить + страницу или зайдите позже. +

+
+
+ )} ); } diff --git a/app/pages/BookmarksCategory.tsx b/app/pages/BookmarksCategory.tsx index a0288bc..ea4ed0b 100644 --- a/app/pages/BookmarksCategory.tsx +++ b/app/pages/BookmarksCategory.tsx @@ -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 ( +
+ +
+ ); + }; + + if (error) { + return ( +
+
+

Ошибка

+

+ Произошла ошибка при загрузке закладок. Попробуйте обновить страницу + или зайдите позже. +

+
+
+ ); + } + return ( <> - {!props.profile_id ? ( + {!props.profile_id ?
{ @@ -143,9 +149,7 @@ export function BookmarksCategoryPage(props: any) {
- ) : ( - "" - )} + : ""}
- {content && content.length > 0 ? ( + {content && content.length > 0 ? - ) : !isLoadingEnd || isLoading ? ( -
- -
- ) : ( -
+ :

В списке {props.SectionTitleMapping[props.slug]} пока ничего нет...

- )} + } {data && data[data.length - 1].current_page < data[data.length - 1].total_page_count && ( diff --git a/app/pages/Profile.tsx b/app/pages/Profile.tsx index 83a3106..7a81d93 100644 --- a/app/pages/Profile.tsx +++ b/app/pages/Profile.tsx @@ -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 (
@@ -58,6 +45,20 @@ export const ProfilePage = (props: any) => { ); } + if (error) { + return ( +
+
+

Ошибка

+

+ Произошла ошибка при загрузке профиля. Попробуйте обновить страницу + или зайдите позже. +

+
+
+ ); + } + const hasSocials = user.vk_page != "" || user.tg_page != "" || @@ -157,7 +158,11 @@ export const ProfilePage = (props: any) => { {!user.is_stats_hidden && (
{user.votes && user.votes.length > 0 && ( - + )} {user.history && user.history.length > 0 && ( @@ -197,7 +202,11 @@ export const ProfilePage = (props: any) => {
{user.votes && user.votes.length > 0 && ( - + )} {user.history && user.history.length > 0 && ( @@ -207,7 +216,12 @@ export const ProfilePage = (props: any) => { )}
- + ); }; diff --git a/app/profile/[id]/bookmarks/[slug]/page.tsx b/app/profile/[id]/bookmarks/[slug]/page.tsx index a8efb42..a3fb3e1 100644 --- a/app/profile/[id]/bookmarks/[slug]/page.tsx +++ b/app/profile/[id]/bookmarks/[slug]/page.tsx @@ -16,19 +16,26 @@ export async function generateMetadata( parent: ResolvingMetadata ): Promise { const id: string = params.id; - const profile: any = await fetchDataViaGet( + const { data, error } = await fetchDataViaGet( `https://api.anixart.tv/profile/${id}` ); const previousOG = (await parent).openGraph; + if (error) { + return { + title: "Ошибка", + description: "Ошибка", + }; + }; + return { - title: SectionTitleMapping[params.slug] + " - " + profile.profile.login, - description: profile.profile.status, + title:"Закладки Пользователя - " + data.profile.login + " - " + SectionTitleMapping[params.slug], + description: "Закладки Пользователя - " + data.profile.login + " - " + SectionTitleMapping[params.slug], openGraph: { ...previousOG, images: [ { - url: profile.profile.avatar, // Must be an absolute URL + url: data.profile.avatar, // Must be an absolute URL width: 600, height: 600, }, diff --git a/app/profile/[id]/bookmarks/page.tsx b/app/profile/[id]/bookmarks/page.tsx index 1e01c92..afd66f5 100644 --- a/app/profile/[id]/bookmarks/page.tsx +++ b/app/profile/[id]/bookmarks/page.tsx @@ -1,26 +1,33 @@ import { BookmarksPage } from "#/pages/Bookmarks"; import { fetchDataViaGet } from "#/api/utils"; import type { Metadata, ResolvingMetadata } from "next"; -export const dynamic = 'force-static'; +export const dynamic = "force-static"; export async function generateMetadata( { params }, parent: ResolvingMetadata ): Promise { const id: string = params.id; - const profile: any = await fetchDataViaGet( + const { data, error } = await fetchDataViaGet( `https://api.anixart.tv/profile/${id}` ); const previousOG = (await parent).openGraph; + if (error) { + return { + title: "Ошибка", + description: "Ошибка", + }; + }; + return { - title: "Закладки - " + profile.profile.login, - description: profile.profile.status, + title: "Закладки Пользователя - " + data.profile.login, + description: "Закладки Пользователя - " + data.profile.login, openGraph: { ...previousOG, images: [ { - url: profile.profile.avatar, // Must be an absolute URL + url: data.profile.avatar, // Must be an absolute URL width: 600, height: 600, }, @@ -30,5 +37,5 @@ export async function generateMetadata( } export default function Index({ params }) { - return ; + return ; } diff --git a/app/profile/[id]/collections/page.tsx b/app/profile/[id]/collections/page.tsx index 1357024..ce018fd 100644 --- a/app/profile/[id]/collections/page.tsx +++ b/app/profile/[id]/collections/page.tsx @@ -1,43 +1,65 @@ import { CollectionsFullPage } from "#/pages/CollectionsFull"; import { fetchDataViaGet } from "#/api/utils"; import type { Metadata, ResolvingMetadata } from "next"; -export const dynamic = 'force-static'; +export const dynamic = "force-static"; export async function generateMetadata( { params }, parent: ResolvingMetadata ): Promise { const id: string = params.id; - const profile: any = await fetchDataViaGet( + const { data, error } = await fetchDataViaGet( `https://api.anixart.tv/profile/${id}` ); const previousOG = (await parent).openGraph; + if (error) { + return { + title: "Ошибка", + description: "Ошибка", + }; + }; + return { - title: "Коллекции - " + profile.profile.login, - description: profile.profile.status, + title: "Коллекции Пользователя - " + data.profile.login, + description: "Коллекции Пользователя - " + data.profile.login, openGraph: { ...previousOG, images: [ { - url: profile.profile.avatar, // Must be an absolute URL + url: data.profile.avatar, // Must be an absolute URL width: 600, height: 600, }, ], }, }; -} +}; export default async function Collections({ params }) { - const profile: any = await fetchDataViaGet( + const { data, error } = await fetchDataViaGet( `https://api.anixart.tv/profile/${params.id}` ); + + if (error) { + return ( +
+
+

Ошибка

+

+ Произошла ошибка при загрузке коллекций пользователя. Попробуйте + обновить страницу или зайдите позже. +

+
+
+ ); + } + return ( ); -} +}; diff --git a/app/profile/[id]/page.tsx b/app/profile/[id]/page.tsx index 66f4cca..0c28386 100644 --- a/app/profile/[id]/page.tsx +++ b/app/profile/[id]/page.tsx @@ -1,26 +1,33 @@ import { ProfilePage } from "#/pages/Profile"; import { fetchDataViaGet } from "#/api/utils"; import type { Metadata, ResolvingMetadata } from "next"; -export const dynamic = 'force-static'; +export const dynamic = "force-static"; export async function generateMetadata( { params }, parent: ResolvingMetadata ): Promise { const id: string = params.id; - const profile: any = await fetchDataViaGet( + const { data, error } = await fetchDataViaGet( `https://api.anixart.tv/profile/${id}` ); const previousOG = (await parent).openGraph; + if (error) { + return { + title: "Ошибка", + description: "Ошибка", + }; + } + return { - title: "Профиль - " + profile.profile.login, - description: profile.profile.status, + title: "Профиль - " + data.profile.login, + description: data.profile.status, openGraph: { ...previousOG, images: [ { - url: profile.profile.avatar, // Must be an absolute URL + url: data.profile.avatar, // Must be an absolute URL width: 600, height: 600, }, diff --git a/app/store/auth.ts b/app/store/auth.ts index e30cf28..9572b18 100644 --- a/app/store/auth.ts +++ b/app/store/auth.ts @@ -44,14 +44,16 @@ export const useUserStore = create((set, get) => ({ const jwt = getJWT(); if (jwt) { const _checkAuth = async () => { - const data = await fetchDataViaGet( + const { data, error } = await fetchDataViaGet( `${ENDPOINTS.user.profile}/${jwt.user_id}?token=${jwt.jwt}` ); - if (data && data.is_my_profile) { - get().login(data.profile, jwt.jwt); - } else { + + if (error || !data.is_my_profile) { get().logout(); + return; } + + get().login(data.profile, jwt.jwt); }; _checkAuth(); } else { diff --git a/middleware.ts b/middleware.ts index f9498a6..8e9184e 100644 --- a/middleware.ts +++ b/middleware.ts @@ -18,10 +18,13 @@ export default async function middleware( } let path = url.pathname.match(/\/api\/proxy\/(.*)/)?.[1] + url.search; - const data = await fetchDataViaGet(`${API_URL}/${path}`, isApiV2); + const { data, error } = await fetchDataViaGet( + `${API_URL}/${path}`, + isApiV2 + ); - if (!data) { - return new Response(JSON.stringify({ message: "Error Fetching Data" }), { + if (error) { + return new Response(JSON.stringify(error), { status: 500, headers: { "Content-Type": "application/json",