feat: add viewing of all collections of users, releases and favorite collections

app/collections/favorites/page.tsx

@@ -0,0 +1,10 @@
+import { CollectionsFullPage } from "#/pages/CollectionsFull";
+
+export const metadata = {
+  title: "Избранные коллекции",
+  description: "Просмотр избранных коллекций",
+};
+
+export default function Collections() {
+  return <CollectionsFullPage type="favorites" title="Избранные коллекции" />;
+}

app/components/CollectionLink/CollectionLink.tsx

@@ -13,18 +13,18 @@ export const CollectionLink = (props: any) => {
           }}
         >
           <div className="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-2 top-2">
-            {props.is_favorite && (
-              <div className="flex items-center justify-center bg-pink-500 rounded-sm">
-                <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--heart"></span>
-              </div>
-            )}
+            <Chip icon_name="material-symbols--favorite" name_2={props.favorites_count} />
+            <Chip icon_name="material-symbols--comment" name_2={props.comment_count} />
             {props.is_private && (
               <div className="flex items-center justify-center bg-yellow-400 rounded-sm">
                 <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--lock"></span>
               </div>
             )}
-            <Chip icon_name="material-symbols--favorite" name_2={props.favorites_count} />
-            <Chip icon_name="material-symbols--comment" name_2={props.comment_count} />
+            {props.is_favorite && (
+              <div className="flex items-center justify-center bg-pink-500 rounded-sm">
+                <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--heart"></span>
+              </div>
+            )}
           </div>
           <p className="absolute text-xs text-white xl:text-base lg:text-lg left-2 bottom-2 right-2">
             {props.title}

app/components/CollectionsSection/CollectionsSection.tsx

@@ -0,0 +1,33 @@
+import { CollectionLink } from "../CollectionLink/CollectionLink";
+import { AddCollectionLink } from "../AddCollectionLink/AddCollectionLink";
+
+export const CollectionsSection = (props: {
+  sectionTitle?: string;
+  content: any;
+  isMyCollections?: boolean;
+}) => {
+  return (
+    <section>
+      {props.sectionTitle && (
+        <div className="flex justify-between px-4 py-2 border-b-2 border-black dark:border-white">
+          <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
+            {props.sectionTitle}
+          </h1>
+        </div>
+      )}
+      <div className="m-4">
+        <div className="grid justify-center sm:grid-cols-[repeat(auto-fit,minmax(400px,1fr))] grid-cols-[100%] gap-2">
+          {props.isMyCollections && <AddCollectionLink />}
+          {props.content.map((collection) => {
+            return (
+              <div key={collection.id} className="w-full h-full aspect-video">
+                <CollectionLink {...collection} />
+              </div>
+            );
+          })}
+          {props.content.length == 1 && !props.isMyCollections && <div></div>}
+        </div>
+      </div>
+    </section>
+  );
+};

app/pages/CollectionsFull.tsx

@@ -0,0 +1,116 @@
+"use client";
+import useSWRInfinite from "swr/infinite";
+import { CollectionsSection } from "#/components/CollectionsSection/CollectionsSection";
+import { Spinner } from "#/components/Spinner/Spinner";
+import { useState, useEffect } from "react";
+import { useScrollPosition } from "#/hooks/useScrollPosition";
+import { useUserStore } from "../store/auth";
+import { Button } from "flowbite-react";
+import { ENDPOINTS } from "#/api/config";
+import { useRouter } from "next/navigation";
+
+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 CollectionsFullPage(props: {
+  type: "favorites" | "profile" | "release";
+  title: string;
+  profile_id?: number;
+  release_id?: number;
+}) {
+  const userStore = useUserStore();
+  const [isLoadingEnd, setIsLoadingEnd] = useState(false);
+  const router = useRouter();
+
+  const getKey = (pageIndex: number, previousPageData: any) => {
+    if (previousPageData && !previousPageData.content.length) return null;
+    if (userStore.token) {
+      if (props.type == "favorites") {
+        return `${ENDPOINTS.collection.favoriteCollections}/all/${pageIndex}?token=${userStore.token}`;
+      } else if (props.type == "profile") {
+        return `${ENDPOINTS.collection.userCollections}/${props.profile_id}/${pageIndex}?token=${userStore.token}`;
+      } else if (props.type == "release") {
+        return `${ENDPOINTS.collection.releaseInCollections}/${props.release_id}/${pageIndex}?token=${userStore.token}`;
+      }
+    }
+  };
+
+  const { data, error, isLoading, size, setSize } = useSWRInfinite(
+    getKey,
+    fetcher,
+    { initialSize: 2 }
+  );
+
+  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]);
+
+  useEffect(() => {
+    if (userStore.state === "finished" && !userStore.token) {
+      router.push(`/login?redirect=/collections/favorites`);
+    }
+  }, [userStore.state, userStore.token]);
+
+  return (
+    <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
+      {content && content.length > 0 ? (
+        <CollectionsSection
+          sectionTitle={props.title}
+          content={content}
+          isMyCollections={
+            props.type == "profile" && props.profile_id == userStore.user.id
+          }
+        />
+      ) : !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="w-full"
+            color={"light"}
+            onClick={() => setSize(size + 1)}
+          >
+            <div className="flex items-center gap-2">
+              <span className="w-6 h-6 iconify mdi--plus-circle "></span>
+              <span className="text-lg">Загрузить ещё</span>
+            </div>
+          </Button>
+        )}
+    </main>
+  );
+}

app/profile/[id]/collections/page.tsx

@@ -0,0 +1,42 @@
+import { CollectionsFullPage } from "#/pages/CollectionsFull";
+import { fetchDataViaGet } from "#/api/utils";
+import type { Metadata, ResolvingMetadata } from "next";
+
+export async function generateMetadata(
+  { params },
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  const id: string = params.id;
+  const profile: any = await fetchDataViaGet(
+    `https://api.anixart.tv/profile/${id}`
+  );
+  const previousOG = (await parent).openGraph;
+
+  return {
+    title: "Коллекции - " + profile.profile.login,
+    description: profile.profile.status,
+    openGraph: {
+      ...previousOG,
+      images: [
+        {
+          url: profile.profile.avatar, // Must be an absolute URL
+          width: 600,
+          height: 600,
+        },
+      ],
+    },
+  };
+}
+
+export default async function Collections({ params }) {
+  const profile: any = await fetchDataViaGet(
+    `https://api.anixart.tv/profile/${params.id}`
+  );
+  return (
+    <CollectionsFullPage
+      type="profile"
+      title={`Коллекции пользователя ${profile.profile.login}`}
+      profile_id={params.id}
+    />
+  );
+}

app/release/[id]/collections/page.tsx

@@ -0,0 +1,40 @@
+import { CollectionsFullPage } from "#/pages/CollectionsFull";
+import { fetchDataViaGet } from "#/api/utils";
+import type { Metadata, ResolvingMetadata } from "next";
+
+export async function generateMetadata(
+  { params },
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  const id = params.id;
+  const release = await fetchDataViaGet(`https://api.anixart.tv/release/${id}`);
+  const previousOG = (await parent).openGraph;
+
+  return {
+    title: release.release.title_ru + " - в коллекциях",
+    description: release.release.description,
+    openGraph: {
+      ...previousOG,
+      images: [
+        {
+          url: release.release.image, // Must be an absolute URL
+          width: 600,
+          height: 800,
+        },
+      ],
+    },
+  };
+}
+
+export default async function Collections({ params }) {
+  const release: any = await fetchDataViaGet(
+    `https://api.anixart.tv/release/${params.id}`
+  );
+  return (
+    <CollectionsFullPage
+      type="release"
+      title={release.release.title_ru + " в коллекциях"}
+      release_id={params.id}
+    />
+  );
+}