feat: add franchise page

TODO.md

@@ -18,7 +18,7 @@
 
 - [X] Поиск аниме
 - [X] Выдача франшизы
-- [ ] Просмотр страницы франшизы
+- [X] Просмотр страницы франшизы
 - [ ] Фильтры поиска
 - [ ] История поиска
 - [X] Поиск по тегам со страницы тайтла
@@ -58,7 +58,7 @@
 - [X] Сохранение эпизода в историю просмотров
 - [X] Добавление \ Удаление аниме в\из списков закладок и избранных
 - [X] Связанные релизы
-- [ ] Просмотр страницы всех вязанных релизов
+- [X] Просмотр страницы всех связанных релизов
 - [ ] Оценка тайтла
 
 ## Баги

app/api/config.ts

@@ -7,6 +7,7 @@ export const ENDPOINTS = {
   release: {
     info: `${API_PREFIX}/release`,
     episode: `${API_PREFIX}/episode`,
+    related: `${API_PREFIX}/related`,
   },
   user: {
     profile: `${API_PREFIX}/profile`,
@@ -15,15 +16,6 @@ export const ENDPOINTS = {
     favorite: `${API_PREFIX}/favorite`,
   },
   filter: `${API_PREFIX}/filter`,
-  // user: {
-  //   history: `${API_PREFIX}/history`,
-  //   watching: `${API_PREFIX}/profile/list/all/1`,
-  //   planned: `${API_PREFIX}/profile/list/all/2`,
-  //   watched: `${API_PREFIX}/profile/list/all/3`,
-  //   delayed: `${API_PREFIX}/profile/list/all/4`,
-  //   abandoned: `${API_PREFIX}/profile/list/all/5`,
-  //   favorite: `${API_PREFIX}/favorite`,
-  // },
   search: `${API_URL}/search`,
   statistic: {
     addHistory: `${API_PREFIX}/history/add`,

app/components/ReleaseLink/ReleaseLink.16_9.tsx

@@ -48,15 +48,17 @@ export const ReleaseLink169 = (props: any) => {
             {props.status ? (
               <Chip name={props.status.name} />
             ) : (
-              <Chip
+              props.status_id != 0 && (
-                name={
+                <Chip
-                  props.status_id == 1
+                  name={
-                    ? "Завершено"
+                    props.status_id == 1
-                    : props.status_id == 2
+                      ? "Завершено"
-                    ? "Онгоинг"
+                      : props.status_id == 2
-                    : "Анонс"
+                      ? "Онгоинг"
-                }
+                      : props.status_id == 3 && "Анонс"
-              />
+                  }
+                />
+              )
             )}
             <Chip
               name={props.episodes_released && props.episodes_released}

app/pages/Related.tsx

@@ -0,0 +1,91 @@
+"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";
+
+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 RelatedPage(props: {id: number|string, title: string}) {
+  const token = useUserStore((state) => state.token);
+  const [isLoadingEnd, setIsLoadingEnd] = useState(false);
+
+  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}`;
+  };
+
+  const { data, error, isLoading, size, setSize } = useSWRInfinite(
+    getKey,
+    fetcher,
+    { initialSize: 1 }
+  );
+
+  const [content, setContent] = useState(null);
+  useEffect(() => {
+    if (data) {
+      let allReleases = [];
+      for (let i = 0; i < data.length; i++) {
+        allReleases.push(...data[i].content);
+      }
+      setContent(allReleases);
+      setIsLoadingEnd(true);
+    }
+  }, [data]);
+
+  const scrollPosition = useScrollPosition();
+  useEffect(() => {
+    if (scrollPosition >= 98 && scrollPosition <= 99) {
+      setSize(size + 1);
+    }
+  }, [scrollPosition]);
+
+  return (
+    <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
+      <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black">
+        <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
+          Франшиза {props.title}
+        </h1>
+      </div>
+      {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">
+          <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 && (
+          <button
+            className="mx-auto w-[calc(100%-10rem)] border border-black rounded-lg p-2 mb-6 flex items-center justify-center gap-2 hover:bg-black hover:text-white transition"
+            onClick={() => setSize(size + 1)}
+          >
+            <span className="w-10 h-10 iconify mdi--plus"></span>
+            <span className="text-lg">Загрузить ещё</span>
+          </button>
+        )}
+    </main>
+  );
+}

app/related/[id]/page.tsx

@@ -0,0 +1,19 @@
+import { RelatedPage } from "#/pages/Related";
+import { fetchDataViaGet } from "#/api/utils";
+
+export async function generateMetadata({ params }) {
+  const id:string = params.id;
+  const related: any = await fetchDataViaGet(`https://api.anixart.tv/related/${id}/0`);
+  const firstRelease: any = await fetchDataViaGet(`https://api.anixart.tv/release/${related.content[0].id}`);
+
+  return {
+    title: "Франшиза " + firstRelease.release.related.name_ru || firstRelease.release.related.name,
+  };
+}
+
+export default async function Related({ params }) {
+  const id: string = params.id;
+  const related: any = await fetchDataViaGet(`https://api.anixart.tv/related/${id}/0`);
+  const firstRelease: any = await fetchDataViaGet(`https://api.anixart.tv/release/${related.content[0].id}`);
+  return <RelatedPage id={id} title={firstRelease.release.related.name_ru || firstRelease.release.related.name} />;
+}