feat: add another user profile bookmarks viewing

TODO.md

@@ -27,7 +27,6 @@
 - [ ] Просмотр комментариев пользователя к релизам и коллекциям.
 - [ ] Редактирование профиля.
 - [ ] Просмотр всех оценок
-- [ ] Просмотр всех списков
 
 ## Баги
 

app/components/Profile/Profile.ReleaseRatings.tsx

@@ -39,11 +39,11 @@ export const ProfileReleaseRatings = (props: any) => {
                   <Image
                     src={release.image}
                     width={100}
-                    height={150}
+                    height={125}
                     alt=""
-                    className="border-gray-200 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-800"
+                    className="object-cover border-gray-200 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-800 w-[100px] h-[125px]"
                   />
-                  <div className="py-4 flex flex-col gap-1">
+                  <div className="flex flex-col gap-1 py-4">
                     <h2 className="text-lg">{release.title_ru}</h2>
                     <Rating size="md">
                       <RatingStar filled={release.my_vote >= 1} />
@@ -52,7 +52,7 @@ export const ProfileReleaseRatings = (props: any) => {
                       <RatingStar filled={release.my_vote >= 4} />
                       <RatingStar filled={release.my_vote >= 5} />
                     </Rating>
-                    <h2 className="text-md text-gray-500 dark:text-gray-400">
+                    <h2 className="text-gray-500 text-md dark:text-gray-400">
                       {unixToDate(release.voted_at, "full")}
                     </h2>
                   </div>

app/components/Profile/Profile.Stats.tsx

@@ -8,6 +8,7 @@ export const ProfileStats = (props: {
   lists: Array<number>;
   watched_count: number;
   watched_time: number;
+  profile_id: number
 }) => {
   const getChartOptions = () => {
     return {
@@ -57,8 +58,16 @@ export const ProfileStats = (props: {
   }, []);
 
   return (
-    <Card className="h-fit font-light">
-      <h1 className="text-2xl font-bold">Статистика</h1>
+    <Card className="font-light h-fit">
+      <div className="flex justify-between">
+        <h1 className="text-2xl font-bold">Статистика</h1>
+        <Link href={`/profile/${props.profile_id}/bookmarks`}>
+          <div className="flex items-center">
+            <p className="hidden text-xl font-bold sm:block">Показать все</p>
+            <span className="w-6 h-6 iconify mdi--arrow-right"></span>
+          </div>
+        </Link>
+      </div>
       <div className="flex items-center">
         <div>
           <p className="align-center whitespace-nowrap">

app/pages/Bookmarks.tsx

@@ -10,7 +10,7 @@ import { ENDPOINTS } from "#/api/config";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
-export function BookmarksPage() {
+export function BookmarksPage(props: { profile_id?: number }) {
   const token = useUserStore((state) => state.token);
   const authState = useUserStore((state) => state.state);
   const router = useRouter();
@@ -18,8 +18,15 @@ export function BookmarksPage() {
   function useFetchReleases(listName: string) {
     let url: string;
 
-    if (token) {
-      url = `${ENDPOINTS.user.bookmark}/all/${BookmarksList[listName]}/0?token=${token}`;
+    if (props.profile_id) {
+      url = `${ENDPOINTS.user.bookmark}/all/${props.profile_id}/${BookmarksList[listName]}/0?sort=1`;
+      if (token) {
+        url += `&token=${token}`;
+      }
+    } else {
+      if (token) {
+        url = `${ENDPOINTS.user.bookmark}/all/${BookmarksList[listName]}/0?sort=1&token=${token}`;
+      }
     }
 
     const { data } = useSWR(url, fetcher);
@@ -33,7 +40,7 @@ export function BookmarksPage() {
   const [abandonedData] = useFetchReleases("abandoned");
 
   useEffect(() => {
-    if (authState === "finished" && !token) {
+    if (authState === "finished" && !token && !props.profile_id) {
       router.push("/login?redirect=/bookmarks");
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -56,28 +63,44 @@ export function BookmarksPage() {
         watchingData.content.length > 0 && (
           <ReleaseCourusel
             sectionTitle="Смотрю"
-            showAllLink="/bookmarks/watching"
+            showAllLink={
+              !props.profile_id
+                ? "/bookmarks/watching"
+                : `/profile/${props.profile_id}/bookmarks/watching`
+            }
             content={watchingData.content}
           />
         )}
       {plannedData && plannedData.content && plannedData.content.length > 0 && (
         <ReleaseCourusel
           sectionTitle="В планах"
-          showAllLink="/bookmarks/planned"
+          showAllLink={
+            !props.profile_id
+              ? "/bookmarks/planned"
+              : `/profile/${props.profile_id}/bookmarks/planned`
+          }
           content={plannedData.content}
         />
       )}
       {watchedData && watchedData.content && watchedData.content.length > 0 && (
         <ReleaseCourusel
           sectionTitle="Просмотрено"
-          showAllLink="/bookmarks/watched"
+          showAllLink={
+            !props.profile_id
+              ? "/bookmarks/watched"
+              : `/profile/${props.profile_id}/bookmarks/watched`
+          }
           content={watchedData.content}
         />
       )}
       {delayedData && delayedData.content && delayedData.content.length > 0 && (
         <ReleaseCourusel
           sectionTitle="Отложено"
-          showAllLink="/bookmarks/delayed"
+          showAllLink={
+            !props.profile_id
+              ? "/bookmarks/delayed"
+              : `/profile/${props.profile_id}/bookmarks/delayed`
+          }
           content={delayedData.content}
         />
       )}
@@ -86,7 +109,11 @@ export function BookmarksPage() {
         abandonedData.content.length > 0 && (
           <ReleaseCourusel
             sectionTitle="Заброшено"
-            showAllLink="/bookmarks/abandoned"
+            showAllLink={
+              !props.profile_id
+                ? "/bookmarks/abandoned"
+                : `/profile/${props.profile_id}/bookmarks/abandoned`
+            }
             content={abandonedData.content}
           />
         )}

app/pages/BookmarksCategory.tsx

@@ -40,11 +40,22 @@ export function BookmarksCategoryPage(props: any) {
 
   const getKey = (pageIndex: number, previousPageData: any) => {
     if (previousPageData && !previousPageData.content.length) return null;
-    if (token) {
-      return `${ENDPOINTS.user.bookmark}/all/${
+    let url: string;
+    if (props.profile_id) {
+      url = `${ENDPOINTS.user.bookmark}/all/${props.profile_id}/${
         BookmarksList[props.slug]
-      }/${pageIndex}?token=${token}&sort=${sort.values[selectedSort].id}`;
+      }/${pageIndex}?sort=${sort.values[selectedSort].id}`;
+      if (token) {
+        url += `&token=${token}`;
+      }
+    } else {
+      if (token) {
+        url = `${ENDPOINTS.user.bookmark}/all/${
+          BookmarksList[props.slug]
+        }/${pageIndex}?sort=${sort.values[selectedSort].id}&token=${token}`;
+      }
     }
+    return url;
   };
 
   const { data, error, isLoading, size, setSize } = useSWRInfinite(
@@ -74,7 +85,7 @@ export function BookmarksCategoryPage(props: any) {
   }, [scrollPosition]);
 
   useEffect(() => {
-    if (authState === "finished" && !token) {
+    if (authState === "finished" && !token && !props.profile_id) {
       router.push(`/login?redirect=/bookmarks/${props.slug}`);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

app/pages/Profile.tsx

@@ -19,7 +19,9 @@ 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}`);
+    const error = new Error(
+      `An error occurred while fetching the data. status: ${res.status}`
+    );
     error.message = await res.json();
     throw error;
   }
@@ -185,6 +187,7 @@ export const ProfilePage = (props: any) => {
                 ]}
                 watched_count={user.watched_episode_count}
                 watched_time={user.watched_time}
+                profile_id={user.id}
               />
               <ProfileWatchDynamic watchDynamic={user.watch_dynamics || []} />
               <div className="flex flex-col gap-2 xl:hidden">

app/profile/[id]/bookmarks/[slug]/page.tsx

@@ -0,0 +1,47 @@
+import { BookmarksCategoryPage } from "#/pages/BookmarksCategory";
+import { fetchDataViaGet } from "#/api/utils";
+import type { Metadata, ResolvingMetadata } from "next";
+
+const SectionTitleMapping = {
+  watching: "Смотрю",
+  planned: "В планах",
+  watched: "Просмотрено",
+  delayed: "Отложено",
+  abandoned: "Заброшено",
+};
+
+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: SectionTitleMapping[params.slug] + " - " + 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 function Index({ params }) {
+  return (
+    <BookmarksCategoryPage
+      slug={params.slug}
+      SectionTitleMapping={SectionTitleMapping}
+      profile_id={params.id}
+    />
+  );
+}

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

@@ -0,0 +1,33 @@
+import { BookmarksPage } from "#/pages/Bookmarks";
+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 function Index({ params }) {
+  return <BookmarksPage profile_id={params.id}/>;
+}