feat: add release franchise to search results.

chore: update search API version

app/api/search/route.js

@@ -12,7 +12,7 @@ export async function GET(request) {
   }
   const data = { query, searchBy: 0 };
 
-  const response = await fetchDataViaPost(url.toString(), data);
+  const response = await fetchDataViaPost(url.toString(), data, true);
   if (!response) {
     return NextResponse.json({ message: "Bad request" }, { status: 400 });
   }

app/api/utils.js

@@ -4,7 +4,10 @@ export const HEADERS = {
   "Content-Type": "application/json; charset=UTF-8",
 };
 
-export const fetchDataViaGet = async (url) => {
+export const fetchDataViaGet = async (url, API_V2) => {
+  if (API_V2) {
+    HEADERS["API-Version"] = "v2";
+  }
   try {
     const response = await fetch(url, {
       headers: HEADERS,
@@ -19,7 +22,10 @@ export const fetchDataViaGet = async (url) => {
   }
 };
 
-export const fetchDataViaPost = async (url, body) => {
+export const fetchDataViaPost = async (url, body, API_V2) => {
+  if (API_V2) {
+    HEADERS["API-Version"] = "v2";
+  }
   try {
     const response = await fetch(url, {
       method: "POST",
@@ -66,3 +72,11 @@ export function getJWT() {
 export function removeJWT() {
   localStorage.removeItem("JWT");
 }
+
+export function numberDeclension(number, one, two, five) {
+  if (number > 10 && [11, 12, 13, 14].includes(number%100)) return five;
+  let last_num = number%10;
+  if (last_num == 1) return one;
+  if ([2,3,4].includes(last_num)) return two;
+  if ([5,6,7,8,9, 0].includes(last_num)) return five;
+}

app/components/RelatedSection/RelatedSection.jsx

@@ -0,0 +1,41 @@
+import { numberDeclension } from "@/app/api/utils";
+import Link from "next/link";
+
+export const RelatedSection = (props) => {
+  const declension = numberDeclension(
+    props.release_count,
+    "релиз",
+    "релиза",
+    "релизов"
+  );
+  return (
+    <section>
+      <div className="flex flex-col justify-between p-4 sm:flex-row">
+        <div className="flex p-4">
+          {props.images.map((item) => {
+            return (
+              <img
+                key={item}
+                src={item}
+                alt=""
+                className="w-[100px] lg:w-[300px] object-cover aspect-[9/12] even:scale-110 shadow-md even:shadow-lg even:z-30 origin-center first:[transform:translateX(25%)] last:[transform:translateX(-25%)]"
+              />
+            );
+          })}
+        </div>
+        <div className="flex flex-col items-center justify-center flex-1 gap-2">
+          <h1 className="text-2xl font-bold">{props.name_ru}</h1>
+          <p>
+            {props.release_count} {declension} во франшизе
+          </p>
+          <Link href={`/related/${props.id}`}>
+          <div className="flex items-center px-8 py-2 transition border border-black rounded-full hover:text-white hover:bg-black">
+            <p className="text-xl font-bold">Перейти</p>
+            <span className="w-6 h-6 iconify mdi--arrow-right"></span>
+          </div>
+        </Link>
+        </div>
+      </div>
+    </section>
+  );
+};

app/pages/Search.jsx

@@ -1,6 +1,7 @@
 "use client";
 import useSWRInfinite from "swr/infinite";
 import { ReleaseSection } from "@/app/components/ReleaseSection/ReleaseSection";
+import { RelatedSection } from "@/app/components/RelatedSection/RelatedSection";
 import { Spinner } from "@/app/components/Spinner/Spinner";
 import { useState, useEffect } from "react";
 import { useScrollPosition } from "@/app/hooks/useScrollPosition";
@@ -26,7 +27,7 @@ export function SearchPage() {
   const [query, setQuery] = useState(searchParams.get("q") || null);
 
   const getKey = (pageIndex, previousPageData) => {
-    if (previousPageData && !previousPageData.content.length) return null;
+    if (previousPageData && !previousPageData.releases.length) return null;
 
     const url = new URL("/api/search", window.location.origin);
     url.searchParams.set("page", pageIndex);
@@ -49,7 +50,7 @@ export function SearchPage() {
     if (data) {
       let allReleases = [];
       for (let i = 0; i < data.length; i++) {
-        allReleases.push(...data[i].content);
+        allReleases.push(...data[i].releases);
       }
       setContent(allReleases);
     }
@@ -117,6 +118,7 @@ export function SearchPage() {
         </form>
       </div>
       <div className="mt-2">
+        {data && data[0].related && <RelatedSection {...data[0].related} />}
         {content ? (
           content.length > 0 ? (
             <ReleaseSection sectionTitle="Найденные релизы" content={content} />
@@ -140,7 +142,7 @@ export function SearchPage() {
           </div>
         )}
       </div>
-      {data && data[data.length - 1].content.length == 25 && (
+      {data && data[data.length - 1].releases.length == 25 && (
         <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)}