From 4276cc1314fe07c8882e621bb292b88627587faf Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sun, 25 Aug 2024 17:19:11 +0500
Subject: [PATCH] feat: add user recent rating

---
 app/components/Profile/Profile.Activity.tsx   |  2 +-
 .../Profile/Profile.ReleaseRatings.tsx        | 64 +++++++++++++++++++
 app/components/Profile/Profile.Stats.tsx      |  2 +-
 app/components/Profile/Profile.User.tsx       |  2 +-
 app/pages/Profile.tsx                         | 62 ++++++++----------
 5 files changed, 95 insertions(+), 37 deletions(-)
 create mode 100644 app/components/Profile/Profile.ReleaseRatings.tsx

diff --git a/app/components/Profile/Profile.Activity.tsx b/app/components/Profile/Profile.Activity.tsx
index e8da162..8768363 100644
--- a/app/components/Profile/Profile.Activity.tsx
+++ b/app/components/Profile/Profile.Activity.tsx
@@ -11,7 +11,7 @@ export function ProfileActivity(props: {
   friendsCount: number;
 }) {
   return (
-    <Card className="h-full">
+    <Card className="h-fit">
       <h1 className="text-2xl font-bold">Активность</h1>
       <div className="flex items-center gap-4 text-lg">
         <div>
diff --git a/app/components/Profile/Profile.ReleaseRatings.tsx b/app/components/Profile/Profile.ReleaseRatings.tsx
new file mode 100644
index 0000000..e5c793d
--- /dev/null
+++ b/app/components/Profile/Profile.ReleaseRatings.tsx
@@ -0,0 +1,64 @@
+import { Card, Carousel, RatingStar, Rating } from "flowbite-react";
+import type { FlowbiteCarouselIndicatorsTheme, FlowbiteCarouselControlTheme } from "flowbite-react";
+import Image from "next/image";
+import { unixToDate } from "#/api/utils";
+
+const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = {
+  active: {
+    off: "bg-gray-300/50 hover:bg-gray-400 dark:bg-gray-400/50 dark:hover:bg-gray-200",
+    on: "bg-gray-600 dark:bg-gray-200",
+  },
+  base: "h-3 w-3 rounded-full",
+  wrapper: "absolute bottom-5 left-1/2 flex -translate-x-1/2 space-x-3",
+};
+
+const CarouselControlsTheme: FlowbiteCarouselControlTheme = {
+    "base": "inline-flex h-8 w-8 items-center justify-center rounded-full bg-gray-600/30 group-hover:bg-gray-600/50 group-focus:outline-none group-focus:ring-4 group-focus:ring-gray-600 dark:bg-gray-400/30 dark:group-hover:bg-gray-400/60 dark:group-focus:ring-gray-400/70 sm:h-10 sm:w-10",
+    "icon": "h-5 w-5 text-gray-600 dark:text-gray-400 sm:h-6 sm:w-6"
+}
+
+const CarouselTheme = {
+    indicators: CarouselIndicatorsTheme,
+    control: CarouselControlsTheme
+}
+
+export const ProfileReleaseRatings = (props: any) => {
+  return (
+    <Card>
+      <h1 className="text-2xl font-bold">Оценки</h1>
+      <div className="max-w-[700px] min-h-[200px]">
+        <Carousel theme={CarouselTheme}>
+          {props.ratings.map((release) => {
+            return (
+              <div
+                className="flex gap-4 mx-16"
+                key={`vote-${release.id}`}
+              >
+                <Image
+                  src={release.image}
+                  width={100}
+                  height={150}
+                  alt=""
+                  className="border-gray-200 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-800"
+                />
+                <div className="py-4 flex flex-col gap-1">
+                  <h2 className="text-lg">{release.title_ru}</h2>
+                  <Rating size="md">
+                    <RatingStar filled={release.my_vote >= 1} />
+                    <RatingStar filled={release.my_vote >= 2} />
+                    <RatingStar filled={release.my_vote >= 3} />
+                    <RatingStar filled={release.my_vote >= 4} />
+                    <RatingStar filled={release.my_vote >= 5} />
+                  </Rating>
+                  <h2 className="text-md text-gray-500 dark:text-gray-400">
+                    {unixToDate(release.voted_at, "full")}
+                  </h2>
+                </div>
+              </div>
+            );
+          })}
+        </Carousel>
+      </div>
+    </Card>
+  );
+};
diff --git a/app/components/Profile/Profile.Stats.tsx b/app/components/Profile/Profile.Stats.tsx
index b606e4a..ae44f71 100644
--- a/app/components/Profile/Profile.Stats.tsx
+++ b/app/components/Profile/Profile.Stats.tsx
@@ -57,7 +57,7 @@ export const ProfileStats = (props: {
   }, []);
 
   return (
-    <Card className="h-full font-light">
+    <Card className="h-fit font-light">
       <h1 className="text-2xl font-bold">Статистика</h1>
       <div className="flex items-center">
         <div>
diff --git a/app/components/Profile/Profile.User.tsx b/app/components/Profile/Profile.User.tsx
index ab9d2df..1bc4743 100644
--- a/app/components/Profile/Profile.User.tsx
+++ b/app/components/Profile/Profile.User.tsx
@@ -36,7 +36,7 @@ export const ProfileUser = (props: {
   const router = useRouter();
   console.log(props.chips);
   return (
-    <Card className="h-full">
+    <Card className="h-fit">
       {props.chips.hasChips && (
         <div className="flex gap-1 overflow-x-auto scrollbar-thin">
           {props.chips.isMyProfile && (
diff --git a/app/pages/Profile.tsx b/app/pages/Profile.tsx
index f0f304c..06c0c6b 100644
--- a/app/pages/Profile.tsx
+++ b/app/pages/Profile.tsx
@@ -12,6 +12,7 @@ import { ProfileActivity } from "#/components/Profile/Profile.Activity";
 import { ProfileStats } from "#/components/Profile/Profile.Stats";
 import { ProfileWatchDynamic } from "#/components/Profile/Profile.WatchDynamic";
 import { ProfileActions } from "#/components/Profile/Profile.Actions";
+import { ProfileReleaseRatings } from "#/components/Profile/Profile.ReleaseRatings";
 
 export const ProfilePage = (props: any) => {
   const authUser = useUserStore((state) => state);
@@ -99,15 +100,11 @@ export const ProfilePage = (props: any) => {
         <ProfilePrivacyBanner is_privacy={isPrivacy} />
       </div>
       <div
-        className={`grid grid-cols-[100%] ${
-          !user.is_stats_hidden
-            ? "xl:grid-cols-[630px,626px] 2xl:grid-cols-[777px,743px]"
-            : ""
-        } gap-2 ${
+        className={`flex flex-wrap gap-2 ${
           isPrivacy || user.is_banned || user.is_perm_banned ? "mt-4" : ""
         }`}
       >
-        <div className="[grid-column:1] [grid-row:1]">
+        <div className="flex flex-col gap-2 w-[50%]">
           <ProfileUser
             isOnline={user.is_online}
             avatar={user.avatar}
@@ -128,9 +125,7 @@ export const ProfilePage = (props: any) => {
             }}
             rating={user.rating_score}
           />
-        </div>
-        {!user.is_counts_hidden && (
-          <div className="[grid-column:1] [grid-row:2]">
+          {!user.is_counts_hidden && (
             <ProfileActivity
               profile_id={user.id}
               commentCount={user.comment_count}
@@ -138,39 +133,38 @@ export const ProfilePage = (props: any) => {
               collectionCount={user.collection_count}
               friendsCount={user.friend_count}
             />
-          </div>
-        )}
-        <div
-          className={`[grid-column:1] ${
-            !user.is_counts_hidden ? "[grid-row:3]" : "[grid-row:2]"
-          }`}
-        >
+          )}
           <ProfileActions
             isMyProfile={isMyProfile}
             profile_id={user.id}
             isFriendRequestsDisallowed={user.is_friend_requests_disallowed}
           />
+          {!user.is_stats_hidden && (
+            <ProfileReleaseRatings ratings={user.votes} />
+          )}
         </div>
+        <div className="flex flex-col gap-2 flex-1">
+          <ProfileStats
+            lists={[
+              user.watching_count,
+              user.plan_count,
+              user.completed_count,
+              user.hold_on_count,
+              user.dropped_count,
+            ]}
+            watched_count={user.watched_episode_count}
+            watched_time={user.watched_time}
+          />
+          <ProfileWatchDynamic watchDynamic={user.watch_dynamics || []} />
+        </div>
+        {/*
         {!user.is_stats_hidden && (
-          <>
-            <div className="[grid-column:1] xl:[grid-column:2] xl:[grid-row:span_2]">
-              <ProfileStats
-                lists={[
-                  user.watching_count,
-                  user.plan_count,
-                  user.completed_count,
-                  user.hold_on_count,
-                  user.dropped_count,
-                ]}
-                watched_count={user.watched_episode_count}
-                watched_time={user.watched_time}
-              />
-            </div>
-            <div className="[grid-column:1] xl:[grid-column:2] xl:[grid-row:span_2]">
-              <ProfileWatchDynamic watchDynamic={user.watch_dynamics || []} />
-            </div>
-          </>
+          <div className="flex flex-col gap-2">
+            
+          </div>
         )}
+        <div className="[grid-column:1] xl:[grid-row:3]">
+        </div>*/}
       </div>
     </>
   );