From cbdcfedb9b94f636962dc4c6f5d0773d4594017c Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Thu, 3 Apr 2025 21:38:51 +0500
Subject: [PATCH] refactor: return user stats & made release votes preview as a
list
---
app/api/utils.ts | 4 +-
.../Profile/Profile.ReleaseRatings.tsx | 50 +++++-----
app/pages/Profile.tsx | 91 +++++++------------
3 files changed, 61 insertions(+), 84 deletions(-)
diff --git a/app/api/utils.ts b/app/api/utils.ts
index af3a4c3..f1f4b8d 100644
--- a/app/api/utils.ts
+++ b/app/api/utils.ts
@@ -212,9 +212,9 @@ export function unixToDate(
" " +
date.getFullYear() +
", " +
- date.getHours() +
+ `${date.getHours()}`.padStart(2, "0") +
":" +
- date.getMinutes()
+ `${date.getMinutes()}`.padStart(2, "0")
);
if (type === "dayMonth")
return date.getDate() + " " + months[date.getMonth()];
diff --git a/app/components/Profile/Profile.ReleaseRatings.tsx b/app/components/Profile/Profile.ReleaseRatings.tsx
index 75af80d..0808d0a 100644
--- a/app/components/Profile/Profile.ReleaseRatings.tsx
+++ b/app/components/Profile/Profile.ReleaseRatings.tsx
@@ -51,33 +51,31 @@ export const ProfileReleaseRatings = (props: any) => {
Посмотреть все
</Button>
</div>
- <div className="flex min-h-[200px] items-center justify-center">
- <Carousel theme={CarouselTheme}>
- {props.ratings.map((release) => {
- return (
- <Link href={`/release/${release.id}`} key={`vote-${release.id}`}>
- <div className="flex gap-4 xl:mx-20">
- <div className="max-w-32">
- <Poster image={release.image} />
- </div>
- <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} />
- <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-gray-500 text-md dark:text-gray-400">
- {unixToDate(release.voted_at, "full")}
- </h2>
- </div>
+ <div className="flex flex-col w-full gap-4">
+ {props.ratings.map((release) => {
+ return (
+ <Link href={`/release/${release.id}`} key={`vote-${release.id}`}>
+ <div className="flex gap-4">
+ <div className="max-w-32">
+ <Poster image={release.image} />
</div>
- </Link>
- );
- })}
- </Carousel>
+ <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} />
+ <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-gray-500 text-md dark:text-gray-400">
+ {unixToDate(release.voted_at, "full")}
+ </h2>
+ </div>
+ </div>
+ </Link>
+ );
+ })}
</div>
<ProfileReleaseRatingsModal
profile_id={props.profile_id}
diff --git a/app/pages/Profile.tsx b/app/pages/Profile.tsx
index 65bd2c3..6e5d043 100644
--- a/app/pages/Profile.tsx
+++ b/app/pages/Profile.tsx
@@ -59,10 +59,6 @@ export const ProfilePage = (props: any) => {
);
}
-
- const isPrivacy =
- user.is_stats_hidden || user.is_counts_hidden || user.is_social_hidden;
-
return (
<>
<div className="flex flex-col gap-2">
@@ -73,23 +69,39 @@ export const ProfilePage = (props: any) => {
ban_expires={user.ban_expires}
/>
<ProfilePrivacyBanner
- is_privacy={isPrivacy}
+ is_privacy={
+ user.is_stats_hidden ||
+ user.is_counts_hidden ||
+ user.is_social_hidden
+ }
is_me_blocked={user.is_me_blocked}
/>
</div>
- <div className="grid grid-cols-1 gap-2 lg:grid-cols-2">
+ <div
+ className={`grid grid-cols-1 gap-2 lg:grid-cols-2 ${
+ (
+ user.is_banned ||
+ user.is_perm_banned ||
+ user.is_stats_hidden ||
+ user.is_counts_hidden ||
+ user.is_social_hidden
+ ) ?
+ "mt-4"
+ : ""
+ }`}
+ >
<div className="flex flex-col gap-2">
<ProfileUser
- avatar={user.avatar}
- login={user.login}
- status={user.status}
- roles={user.roles}
- rating={user.rating_score}
- isMyProfile={isMyProfile}
- isVerified={user.is_verified}
- isOnline={user.is_online}
- isSponsor={user.is_sponsor}
- isBlocked={user.is_blocked}
+ avatar={user.avatar || ""}
+ login={user.login || ""}
+ status={user.status || ""}
+ roles={user.roles || []}
+ rating={user.rating_score || 0}
+ isMyProfile={isMyProfile || false}
+ isVerified={user.is_verified || false}
+ isOnline={user.is_online || false}
+ isSponsor={user.is_sponsor || false}
+ isBlocked={user.is_blocked || false}
socials={{
vk: user.vk_page || null,
tg: user.tg_page || null,
@@ -112,35 +124,6 @@ export const ProfilePage = (props: any) => {
edit_setIsOpen={setIsOpen}
/>
)}
- </div>
- <div className="flex flex-col gap-2"></div>
- </div>
- {/* <div
- className={`flex flex-wrap gap-2 ${
- isPrivacy || user.is_banned || user.is_perm_banned ? "mt-4" : ""
- }`}
- >
- <div className="flex flex-col gap-2 w-full xl:w-[50%]">
- <ProfileUser
- isOnline={user.is_online}
- avatar={user.avatar}
- login={user.login}
- status={user.status}
- socials={{
- isPrivate: user.is_social_hidden,
- hasSocials: hasSocials,
- socials: socials,
- }}
- chips={{
- hasChips: hasChips,
- isMyProfile: isMyProfile,
- isVerified: user.is_verified,
- isSponsor: user.is_sponsor,
- isBlocked: user.is_blocked,
- roles: user.roles,
- }}
- rating={user.rating_score}
- />
{!user.is_counts_hidden && (
<ProfileActivity
profile_id={user.id}
@@ -151,7 +134,7 @@ export const ProfilePage = (props: any) => {
/>
)}
{!user.is_stats_hidden && (
- <div className="flex-col hidden gap-2 xl:flex">
+ <div className="flex-col hidden gap-2 lg:flex">
{user.votes && user.votes.length > 0 && (
<ProfileReleaseRatings
ratings={user.votes}
@@ -159,14 +142,10 @@ export const ProfilePage = (props: any) => {
profile_id={user.id}
/>
)}
- {user.history && user.history.length > 0 && (
- <ProfileReleaseHistory history={user.history} />
- )}
</div>
)}
</div>
- <div className="flex flex-col w-full gap-2 xl:flex-1 xl:w-auto ">
-
+ <div className="flex flex-col gap-2">
{!user.is_stats_hidden && (
<>
<ProfileStats
@@ -182,7 +161,7 @@ export const ProfilePage = (props: any) => {
profile_id={user.id}
/>
<ProfileWatchDynamic watchDynamic={user.watch_dynamics || []} />
- <div className="flex flex-col gap-2 xl:hidden">
+ <div className="flex flex-col gap-2 lg:hidden">
{user.votes && user.votes.length > 0 && (
<ProfileReleaseRatings
ratings={user.votes}
@@ -190,14 +169,14 @@ export const ProfilePage = (props: any) => {
profile_id={user.id}
/>
)}
- {user.history && user.history.length > 0 && (
- <ProfileReleaseHistory history={user.history} />
- )}
</div>
+ {user.history && user.history.length > 0 && (
+ <ProfileReleaseHistory history={user.history} />
+ )}
</>
)}
</div>
- </div> */}
+ </div>
<ProfileEditModal
isOpen={isOpen && isMyProfile}
setIsOpen={setIsOpen}