From 99ea775e762a5f43db81333187f5f42ae451152a Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Thu, 21 Nov 2024 20:19:04 +0500 Subject: [PATCH] refactor: make related page view as list --- .../ReleaseLink/ReleaseLink.16_9Poster.tsx | 100 ++++++------- .../ReleaseLink/ReleaseLink.16_9Related.tsx | 136 ++++++++++++++++++ app/pages/Related.tsx | 12 +- middleware.ts | 10 +- 4 files changed, 201 insertions(+), 57 deletions(-) create mode 100644 app/components/ReleaseLink/ReleaseLink.16_9Related.tsx diff --git a/app/components/ReleaseLink/ReleaseLink.16_9Poster.tsx b/app/components/ReleaseLink/ReleaseLink.16_9Poster.tsx index 2b5320a..851b50b 100644 --- a/app/components/ReleaseLink/ReleaseLink.16_9Poster.tsx +++ b/app/components/ReleaseLink/ReleaseLink.16_9Poster.tsx @@ -30,12 +30,12 @@ export const ReleaseLink169Poster = (props: any) => {
{props.title} + src={props.image} + height={250} + width={250} + alt={props.title} + className="object-cover aspect-[9/16] h-auto w-24 md:w-32 lg:w-48 rounded-md" + />
@@ -45,7 +45,7 @@ export const ReleaseLink169Poster = (props: any) => {

)}

- {`${props.title_ru.slice(0, 47)}${ + {`${props.title_ru.slice(0, 47)}${ props.title_ru.length > 47 ? "..." : "" }`}

@@ -55,9 +55,7 @@ export const ReleaseLink169Poster = (props: any) => { }`}

-
-
-
+
{ name={grade} /> {user_list && ( - - )} - {props.status ? ( - - ) : ( - props.status_id != 0 && ( + + )} + {props.status ? ( + + ) : ( + props.status_id != 0 && ( + + ) + )} + + {props.last_view_episode && ( - ) - )} - - {props.last_view_episode && ( - - )} - {props.category && } - {props.is_favorite && ( -
- -
- )} + )} + {props.category && } + {props.is_favorite && ( +
+ +
+ )}
+
+ ); diff --git a/app/components/ReleaseLink/ReleaseLink.16_9Related.tsx b/app/components/ReleaseLink/ReleaseLink.16_9Related.tsx new file mode 100644 index 0000000..8143712 --- /dev/null +++ b/app/components/ReleaseLink/ReleaseLink.16_9Related.tsx @@ -0,0 +1,136 @@ +import Link from "next/link"; +import { sinceUnixDate } from "#/api/utils"; +import { Chip } from "#/components/Chip/Chip"; +import Image from "next/image"; + +const profile_lists = { + // 0: "Не смотрю", + 1: { name: "Смотрю", bg_color: "bg-green-500" }, + 2: { name: "В планах", bg_color: "bg-purple-500" }, + 3: { name: "Просмотрено", bg_color: "bg-blue-500" }, + 4: { name: "Отложено", bg_color: "bg-yellow-500" }, + 5: { name: "Брошено", bg_color: "bg-red-500" }, +}; +const YearSeason = ["_", "Зима", "Весна", "Лето", "Осень"]; + +export const ReleaseLink169Related = (props: any) => { + const grade = props.grade.toFixed(1); + const profile_list_status = props.profile_list_status; + let user_list = null; + if (profile_list_status != null || profile_list_status != 0) { + user_list = profile_lists[profile_list_status]; + } + return ( + +
+

+ {props.season ? YearSeason[props.season] : ""} +
+ {props.year ? props.year : ""} +

+
+
+
+
+ {props.title} +
+
+
+ {props.genres && ( +

+ {props.genres} +

+ )} +

+ {`${props.title_ru.slice(0, 47)}${ + props.title_ru.length > 47 ? "..." : "" + }`} +

+

+ {`${props.description.slice(0, 97)}${ + props.description.length > 97 ? "..." : "" + }`} +

+

+ {props.title_ru} +

+

+ {props.description} +

+
+
+ + {user_list && ( + + )} + {props.status ? ( + + ) : ( + props.status_id != 0 && ( + + ) + )} + + {props.category && } + {props.season || props.year ? ( + + ) : ( + "" + )} + {props.is_favorite && ( +
+ +
+ )} +
+
+
+
+ + ); +}; diff --git a/app/pages/Related.tsx b/app/pages/Related.tsx index a54b393..70ff44a 100644 --- a/app/pages/Related.tsx +++ b/app/pages/Related.tsx @@ -1,11 +1,11 @@ "use client"; import useSWRInfinite from "swr/infinite"; -import { ReleaseSection } from "#/components/ReleaseSection/ReleaseSection"; import { Spinner } from "#/components/Spinner/Spinner"; import { useState, useEffect } from "react"; import { useScrollPosition } from "#/hooks/useScrollPosition"; import { useUserStore } from "../store/auth"; import { ENDPOINTS } from "#/api/config"; +import { ReleaseLink169Related } from "#/components/ReleaseLink/ReleaseLink.16_9Related"; const fetcher = async (url: string) => { const res = await fetch(url); @@ -26,9 +26,9 @@ export function RelatedPage(props: {id: number|string, title: string}) { const getKey = (pageIndex: number, previousPageData: any) => { if (previousPageData && !previousPageData.content.length) return null; if (token) { - return `${ENDPOINTS.release.related}/${props.id}/${pageIndex}?token=${token}`; + return `${ENDPOINTS.release.related}/${props.id}/${pageIndex}?token=${token}&API-Version=v2`; } - return `${ENDPOINTS.release.related}/${props.id}/${pageIndex}`; + return `${ENDPOINTS.release.related}/${props.id}/${pageIndex}?API-Version=v2`; }; const { data, error, isLoading, size, setSize } = useSWRInfinite( @@ -65,7 +65,11 @@ export function RelatedPage(props: {id: number|string, title: string}) { {content && content.length > 0 ? ( - +
+ {content.map((release, index) => { + return + })} +
) : !isLoadingEnd || isLoading ? (
diff --git a/middleware.ts b/middleware.ts index 40c8211..f8419a5 100644 --- a/middleware.ts +++ b/middleware.ts @@ -8,10 +8,14 @@ export const config = { export default async function middleware(request: Request, context: NextFetchEvent) { if (request.method == "GET") { - const url = request.url - const path = url.match(/\/api\/proxy\/(.*)/)?.[1] + const url = new URL(request.url); + const isApiV2 = url.searchParams.get("API-Version") == "v2" || false; + if (isApiV2) { + url.searchParams.delete("API-Version"); + } + const path = url.pathname.match(/\/api\/proxy\/(.*)/)?.[1] + url.search - const data = await fetchDataViaGet(`${API_URL}/${path}`); + const data = await fetchDataViaGet(`${API_URL}/${path}`, isApiV2); if (!data) { return new Response(JSON.stringify({ message: "Error Fetching Data" }), {