From d0990eb0892c3f37c7ff2c26bd91a553f2e85bcd Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Fri, 23 Aug 2024 19:09:25 +0500 Subject: [PATCH 01/13] refactor: New Profile Card feat: add Privacy Banner feat: add user roles --- app/components/Chip/Chip.tsx | 2 + .../Profile/Profile.PrivacyBanner.tsx | 18 + app/components/Profile/Profile.User.tsx | 134 ++++++++ .../Profile/ProfileBannedBanner.tsx | 28 ++ app/pages/Profile copy.tsx | 312 ++++++++++++++++++ app/pages/Profile.tsx | 288 +++------------- 6 files changed, 543 insertions(+), 239 deletions(-) create mode 100644 app/components/Profile/Profile.PrivacyBanner.tsx create mode 100644 app/components/Profile/Profile.User.tsx create mode 100644 app/components/Profile/ProfileBannedBanner.tsx create mode 100644 app/pages/Profile copy.tsx diff --git a/app/components/Chip/Chip.tsx b/app/components/Chip/Chip.tsx index f8282f0..a7e8e7f 100644 --- a/app/components/Chip/Chip.tsx +++ b/app/components/Chip/Chip.tsx @@ -5,12 +5,14 @@ export const Chip = (props: { name_2?: string; devider?: string; bg_color?: string; + style?: React.CSSProperties; }) => { return (
{props.icon_name && ( { + return ( + <> + {props.is_privacy && ( +
+
+

+ У пользователя установлены настройки приватности. Некоторая + информация для вас может быть недоступна. +

+
+
+ )} + + ); +}; diff --git a/app/components/Profile/Profile.User.tsx b/app/components/Profile/Profile.User.tsx new file mode 100644 index 0000000..d43ccb0 --- /dev/null +++ b/app/components/Profile/Profile.User.tsx @@ -0,0 +1,134 @@ +"use client"; +import { Avatar, Card, Button } from "flowbite-react"; +import Link from "next/link"; +import { useRouter } from "next/navigation"; +import { Chip } from "../Chip/Chip"; + +export const ProfileUser = (props: { + isOnline: boolean; + avatar: string; + login: string; + status: string; + socials: { + isPrivate: boolean; + hasSocials: boolean; + socials: { + name: string; + nickname: any; + icon: string; + urlPrefix?: string | undefined; + }[]; + }; + chips: { + hasChips: boolean; + isMyProfile: boolean; + isVerified: boolean; + isSponsor: boolean; + isBlocked: boolean; + roles?: { + id: number; + name: string; + color: string; + }[]; + }; +}) => { + const router = useRouter(); + console.log(props.chips); + return ( + + {props.chips.hasChips && ( +
+ {props.chips.isMyProfile && ( + + )} + {props.chips.isVerified && ( + + )} + {props.chips.isSponsor && ( + + )} + {props.chips.isBlocked && ( + + )} + {props.chips.roles && + props.chips.roles.length > 0 && + props.chips.roles.map((role: any) => ( + + ))} +
+ )} + +
+
{props.login}
+
+ {props.status} +
+
+ + {props.socials.hasSocials && !props.socials.isPrivate && ( +
+ {props.socials.socials + .filter((social: any) => { + if (social.nickname == "") { + return false; + } + return true; + }) + .map((social: any) => { + if (social.name == "discord" && social.nickname != "") + return ( + + ); + return ( + + + + ); + })} +
+ )} + + ); +}; diff --git a/app/components/Profile/ProfileBannedBanner.tsx b/app/components/Profile/ProfileBannedBanner.tsx new file mode 100644 index 0000000..6781f19 --- /dev/null +++ b/app/components/Profile/ProfileBannedBanner.tsx @@ -0,0 +1,28 @@ +import { unixToDate } from "#/api/utils"; + +export const ProfileBannedBanner = (props: { + is_banned: boolean; + is_perm_banned: boolean; + ban_reason: string; + ban_expires: number; +}) => { + return ( + <> + {(props.is_banned || props.is_perm_banned) && ( +
+
+

+ {props.is_perm_banned + ? "Пользователь был заблокирован администрацией навсегда" + : `Пользователь был заблокирован администрацией до + ${unixToDate(props.ban_expires)}`} +

+

+ {props.ban_reason} +

+
+
+ )} + + ); +}; diff --git a/app/pages/Profile copy.tsx b/app/pages/Profile copy.tsx new file mode 100644 index 0000000..def785a --- /dev/null +++ b/app/pages/Profile copy.tsx @@ -0,0 +1,312 @@ +"use client"; +import { useUserStore } from "#/store/auth"; +import { useEffect, useState } from "react"; +import { Spinner } from "../components/Spinner/Spinner"; +import { Avatar, Card, Button, Table } from "flowbite-react"; +import { Chip } from "../components/Chip/Chip"; +import { fetchDataViaGet, unixToDate, minutesToTime } from "../api/utils"; +import { ReleaseCourusel } from "#/components/ReleaseCourusel/ReleaseCourusel"; +import { ENDPOINTS } from "#/api/config"; + +export const ProfilePage = (props: any) => { + const authUser = useUserStore((state) => state); + const [user, setUser] = useState(null); + const [isMyProfile, setIsMyProfile] = useState(false); + + useEffect(() => { + async function _getData() { + let url = `${ENDPOINTS.user.profile}/${props.id}`; + if (authUser.token) { + url += `?token=${authUser.token}`; + } + const data = await fetchDataViaGet(url); + setUser(data.profile); + setIsMyProfile(data.is_my_profile); + } + _getData(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [authUser]); + + if (!user) { + return ( +
+ +
+ ); + } + + const hasSocials = + user.vk_page != "" || + user.tg_page != "" || + user.tt_page != "" || + user.inst_page != "" || + user.discord_page != "" || + false; + const socials = [ + { + name: "vk", + nickname: user.vk_page, + icon: "fa6-brands--vk", + urlPrefix: "https://vk.com", + }, + { + name: "telegram", + nickname: user.tg_page, + icon: "fa6-brands--telegram", + urlPrefix: "https://t.me", + }, + { + name: "discord", + nickname: user.discord_page, + icon: "fa6-brands--discord", + }, + { + name: "tiktok", + nickname: user.tt_page, + icon: "fa6-brands--tiktok", + urlPrefix: "https://tiktok.com", + }, + { + name: "instagram", + nickname: user.inst_page, + icon: "fa6-brands--instagram", + urlPrefix: "https://instagram.com", + }, + ]; + + const hasChips = user.is_verified || user.is_blocked || isMyProfile; + + return ( +
+ {(user.is_banned || user.is_perm_banned) && ( +
+
+

+ {user.is_perm_banned + ? "Пользователь был заблокирован администрацией навсегда" + : `Пользователь был заблокирован администрацией до + ${unixToDate(user.ban_expires)}`} +

+

+ {user.ban_reason} +

+
+
+ )} + +
+ + {hasChips && ( +
+ {isMyProfile && ( + + )} + {user.is_blocked && ( + + )} + {user.is_verified && ( + + )} +
+ )} + +
+
{user.login}
+

+ {user.status} +

+
+ + {hasSocials && ( +
+ {socials + .filter((social: any) => { + if (social.nickname == "") { + return false; + } + return true; + }) + .map((social: any) => { + if (social.name == "discord" && social.nickname != "") + return ( + + ); + return ( + + ); + })} +
+ )} + +
+ +

Активность

+ + + + + Регистрация + + + {unixToDate(user.register_date)} + + + + + Был(а) в сети + + + {unixToDate(user.last_activity_time)} + + + + + Комментарий + + + {user.comment_count} + + + + + друзей + + + {user.friend_count} + + + + + видео + + + {user.video_count} + + + + + коллекций + + + {user.collection_count} + + + +
+ + +

Статистика

+ + + + + + Просмотрено серий + + + {user.watched_episode_count} + + + + + + Время просмотра + + + {minutesToTime(user.watched_time) || + "Нет просмотренных серий."} + + + + + + {minutesToTime(user.watched_time) || + "Нет просмотренных серий."} + + + + + + Смотрю + + + {user.watching_count} + + + + + + В Планах + + + {user.plan_count} + + + + + + Просмотрено + + + {user.completed_count} + + + + + + Отложено + + + {user.hold_on_count} + + + + + + Брошено + + + {user.dropped_count} + + + +
+ +
+
+ {user.history.length > 0 && ( +
+ +
+ )} +
+ ); +}; diff --git a/app/pages/Profile.tsx b/app/pages/Profile.tsx index def785a..b031839 100644 --- a/app/pages/Profile.tsx +++ b/app/pages/Profile.tsx @@ -2,12 +2,13 @@ import { useUserStore } from "#/store/auth"; import { useEffect, useState } from "react"; import { Spinner } from "../components/Spinner/Spinner"; -import { Avatar, Card, Button, Table } from "flowbite-react"; -import { Chip } from "../components/Chip/Chip"; -import { fetchDataViaGet, unixToDate, minutesToTime } from "../api/utils"; -import { ReleaseCourusel } from "#/components/ReleaseCourusel/ReleaseCourusel"; +import { fetchDataViaGet } from "../api/utils"; import { ENDPOINTS } from "#/api/config"; +import { ProfileUser } from "#/components/Profile/Profile.User"; +import { ProfileBannedBanner } from "#/components/Profile/ProfileBannedBanner"; +import { ProfilePrivacyBanner } from "#/components/Profile/Profile.PrivacyBanner"; + export const ProfilePage = (props: any) => { const authUser = useUserStore((state) => state); const [user, setUser] = useState(null); @@ -47,13 +48,13 @@ export const ProfilePage = (props: any) => { name: "vk", nickname: user.vk_page, icon: "fa6-brands--vk", - urlPrefix: "https://vk.com", + urlPrefix: "https://vk.com/", }, { name: "telegram", nickname: user.tg_page, icon: "fa6-brands--telegram", - urlPrefix: "https://t.me", + urlPrefix: "https://t.me/", }, { name: "discord", @@ -64,249 +65,58 @@ export const ProfilePage = (props: any) => { name: "tiktok", nickname: user.tt_page, icon: "fa6-brands--tiktok", - urlPrefix: "https://tiktok.com", + urlPrefix: "https://tiktok.com/@", }, { name: "instagram", nickname: user.inst_page, icon: "fa6-brands--instagram", - urlPrefix: "https://instagram.com", + urlPrefix: "https://instagram.com/", }, ]; - const hasChips = user.is_verified || user.is_blocked || isMyProfile; + const hasChips = + user.is_verified || + user.is_blocked || + (user.roles && user.roles.length > 0) || + isMyProfile; + const isPrivacy = + user.is_stats_hidden || user.is_counts_hidden || user.is_social_hidden; return ( -
- {(user.is_banned || user.is_perm_banned) && ( -
-
-

- {user.is_perm_banned - ? "Пользователь был заблокирован администрацией навсегда" - : `Пользователь был заблокирован администрацией до - ${unixToDate(user.ban_expires)}`} -

-

- {user.ban_reason} -

-
-
- )} - -
- - {hasChips && ( -
- {isMyProfile && ( - - )} - {user.is_blocked && ( - - )} - {user.is_verified && ( - - )} -
- )} - -
-
{user.login}
-

- {user.status} -

-
- - {hasSocials && ( -
- {socials - .filter((social: any) => { - if (social.nickname == "") { - return false; - } - return true; - }) - .map((social: any) => { - if (social.name == "discord" && social.nickname != "") - return ( - - ); - return ( - - ); - })} -
- )} - -
- -

Активность

- - - - - Регистрация - - - {unixToDate(user.register_date)} - - - - - Был(а) в сети - - - {unixToDate(user.last_activity_time)} - - - - - Комментарий - - - {user.comment_count} - - - - - друзей - - - {user.friend_count} - - - - - видео - - - {user.video_count} - - - - - коллекций - - - {user.collection_count} - - - -
- - -

Статистика

- - - - - - Просмотрено серий - - - {user.watched_episode_count} - - - - - - Время просмотра - - - {minutesToTime(user.watched_time) || - "Нет просмотренных серий."} - - - - - - {minutesToTime(user.watched_time) || - "Нет просмотренных серий."} - - - - - - Смотрю - - - {user.watching_count} - - - - - - В Планах - - - {user.plan_count} - - - - - - Просмотрено - - - {user.completed_count} - - - - - - Отложено - - - {user.hold_on_count} - - - - - - Брошено - - - {user.dropped_count} - - - -
- -
+ <> +
+ +
- {user.history.length > 0 && ( -
- -
- )} -
+
+ +
+ ); }; From 045ba704360dd7da56f46922e2c484e460efb3d9 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Fri, 23 Aug 2024 19:22:10 +0500 Subject: [PATCH 02/13] feat: add user rating --- app/components/Profile/Profile.User.tsx | 14 +++++++++++++- app/pages/Profile.tsx | 25 ++++++++++++++----------- 2 files changed, 27 insertions(+), 12 deletions(-) diff --git a/app/components/Profile/Profile.User.tsx b/app/components/Profile/Profile.User.tsx index d43ccb0..27a30c8 100644 --- a/app/components/Profile/Profile.User.tsx +++ b/app/components/Profile/Profile.User.tsx @@ -31,6 +31,7 @@ export const ProfileUser = (props: { color: string; }[]; }; + rating: number; }) => { const router = useRouter(); console.log(props.chips); @@ -76,7 +77,18 @@ export const ProfileUser = (props: { color={props.isOnline ? "success" : "light"} >
-
{props.login}
+
+ {props.login}{" "} + 0 + ? "border-green-500 text-green-500" + : "border-red-500 text-red-500" + }`} + > + {props.rating} + +
{props.status}
diff --git a/app/pages/Profile.tsx b/app/pages/Profile.tsx index b031839..2866ee7 100644 --- a/app/pages/Profile.tsx +++ b/app/pages/Profile.tsx @@ -94,7 +94,11 @@ export const ProfilePage = (props: any) => { />
-
+
{ hasSocials: hasSocials, socials: socials, }} - chips={ - { - hasChips: hasChips, - isMyProfile: isMyProfile, - isVerified: user.is_verified, - isSponsor: user.is_sponsor, - isBlocked: user.is_blocked, - roles: user.roles - } - } + chips={{ + hasChips: hasChips, + isMyProfile: isMyProfile, + isVerified: user.is_verified, + isSponsor: user.is_sponsor, + isBlocked: user.is_blocked, + roles: user.roles, + }} + rating={user.rating_score} />
From 5c23f204dac3a2be66843bf4fece28dfde403cd5 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Fri, 23 Aug 2024 20:41:43 +0500 Subject: [PATCH 03/13] feat: add user activity --- app/components/Profile/Profile.Activity.tsx | 49 +++++++++++++++++++++ app/pages/Profile.tsx | 14 +++++- 2 files changed, 61 insertions(+), 2 deletions(-) create mode 100644 app/components/Profile/Profile.Activity.tsx diff --git a/app/components/Profile/Profile.Activity.tsx b/app/components/Profile/Profile.Activity.tsx new file mode 100644 index 0000000..c1fb60b --- /dev/null +++ b/app/components/Profile/Profile.Activity.tsx @@ -0,0 +1,49 @@ +"use client"; +import { Card } from "flowbite-react"; +import Link from "next/link"; +import { numberDeclension } from "#/api/utils"; + +export function ProfileActivity(props: { + profile_id: number; + commentCount: number; + videoCount: number; + collectionCount: number; + friendsCount: number; +}) { + return ( + +

Активность

+
+
+

+ {props.commentCount}{" "} + {numberDeclension( + props.commentCount, + "комментарий", + "комментария", + "комментариев" + )} +

+

{props.videoCount} видео

+
+
+ +

+ {props.collectionCount}{" "} + {numberDeclension( + props.commentCount, + "коллекция", + "коллекции", + "коллекций" + )} +

+ +

+ {props.friendsCount}{" "} + {numberDeclension(props.commentCount, "друзей", "друга", "друзей")} +

+
+
+ + ); +} diff --git a/app/pages/Profile.tsx b/app/pages/Profile.tsx index 2866ee7..a14f52e 100644 --- a/app/pages/Profile.tsx +++ b/app/pages/Profile.tsx @@ -8,6 +8,7 @@ import { ENDPOINTS } from "#/api/config"; import { ProfileUser } from "#/components/Profile/Profile.User"; import { ProfileBannedBanner } from "#/components/Profile/ProfileBannedBanner"; import { ProfilePrivacyBanner } from "#/components/Profile/Profile.PrivacyBanner"; +import { ProfileActivity } from "#/components/Profile/Profile.Activity"; export const ProfilePage = (props: any) => { const authUser = useUserStore((state) => state); @@ -95,9 +96,9 @@ export const ProfilePage = (props: any) => {
{ }} rating={user.rating_score} /> + {!user.is_stats_hidden && ( + + )}
); From 6e8f03e7b663ee7269e1ada8ff53a52ca361d878 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Sat, 24 Aug 2024 04:52:58 +0500 Subject: [PATCH 04/13] feat: add user lists statistic with donut chart --- app/api/utils.ts | 21 +++- app/components/Profile/Profile.Activity.tsx | 2 +- app/components/Profile/Profile.Stats.tsx | 101 +++++++++++++++++++ app/components/Profile/Profile.User.tsx | 2 +- app/pages/Profile.tsx | 76 +++++++++------ next.config.js | 1 + package-lock.json | 103 ++++++++++++++++++++ package.json | 1 + tailwind.config.js | 4 +- 9 files changed, 276 insertions(+), 35 deletions(-) create mode 100644 app/components/Profile/Profile.Stats.tsx diff --git a/app/api/utils.ts b/app/api/utils.ts index 39d963a..e464009 100644 --- a/app/api/utils.ts +++ b/app/api/utils.ts @@ -172,18 +172,31 @@ export function sinceUnixDate(unixInSeconds: number) { ); } -export function minutesToTime(min: number) { +export function minutesToTime( + min: number, + type?: "full" | "daysOnly" | "daysHours" +) { const d = Math.floor(min / 1440); // 60*24 const h = Math.floor((min - d * 1440) / 60); const m = Math.round(min % 60); var dDisplay = - d > 0 ? `${d} ${numberDeclension(d, "день", "дня", "дней")}, ` : ""; + d > 0 ? `${d} ${numberDeclension(d, "день", "дня", "дней")}` : ""; var hDisplay = - h > 0 ? `${h} ${numberDeclension(h, "час", "часа", "часов")}, ` : ""; + h > 0 ? `${h} ${numberDeclension(h, "час", "часа", "часов")}` : ""; var mDisplay = m > 0 ? `${m} ${numberDeclension(m, "минута", "минуты", "минут")}` : ""; - return dDisplay + hDisplay + mDisplay; + + if (type == "daysOnly") { + if (d > 0) return dDisplay; + return "? дней"; + } else if (type == "daysHours") { + if (d > 0 && h > 0) return dDisplay + ", " + hDisplay; + if (h > 0) return hDisplay; + if (m > 0) return mDisplay; + } else { + return `${dDisplay}${h > 0 && ", " + hDisplay}${m > 0 && ", " + mDisplay}`; + } } const StatusList: Record = { diff --git a/app/components/Profile/Profile.Activity.tsx b/app/components/Profile/Profile.Activity.tsx index c1fb60b..e8da162 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 ( - +

Активность

diff --git a/app/components/Profile/Profile.Stats.tsx b/app/components/Profile/Profile.Stats.tsx new file mode 100644 index 0000000..b606e4a --- /dev/null +++ b/app/components/Profile/Profile.Stats.tsx @@ -0,0 +1,101 @@ +import { Card } from "flowbite-react"; +import Link from "next/link"; +import ApexCharts from "apexcharts"; +import { useEffect } from "react"; +import { minutesToTime } from "#/api/utils"; + +export const ProfileStats = (props: { + lists: Array; + watched_count: number; + watched_time: number; +}) => { + const getChartOptions = () => { + return { + series: props.lists, + colors: ["#66bb6c", "#b566bb", "#5c6cc0", "#ffca28", "#ef5450"], + chart: { + height: 240, + width: "100%", + type: "donut", + }, + stroke: { + colors: ["transparent"], + lineCap: "", + }, + dataLabels: { + enabled: false, + }, + labels: [`Смотрю`, `В планах`, `Просмотрено`, `Отложено`, `Брошено`], + legend: { + show: false, + }, + responsive: [ + { + breakpoint: 640, + options: { + chart: { + height: 200, + width: 200, + type: "donut", + }, + }, + }, + ], + }; + }; + useEffect(() => { + if ( + document.getElementById("donut-chart") && + typeof ApexCharts !== "undefined" + ) { + const chart = new ApexCharts( + document.getElementById("donut-chart"), + getChartOptions() + ); + chart.render(); + } + }, []); + + return ( + +

Статистика

+
+
+

+ {" "} + Смотрю {props.lists[0]} +

+

+ {" "} + В планах {props.lists[1]} +

+

+ {" "} + Просмотрено {props.lists[2]} +

+

+ {" "} + Отложено {props.lists[3]} +

+

+ {" "} + Брошено {props.lists[4]} +

+
+
+
+
+

+ Просмотрено серий:{" "} + {props.watched_count} +

+

+ Время просмотра:{" "} + + ~{minutesToTime(props.watched_time, "daysHours")} + +

+
+ + ); +}; diff --git a/app/components/Profile/Profile.User.tsx b/app/components/Profile/Profile.User.tsx index 27a30c8..ab9d2df 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 ( - + {props.chips.hasChips && (
{props.chips.isMyProfile && ( diff --git a/app/pages/Profile.tsx b/app/pages/Profile.tsx index a14f52e..8da4749 100644 --- a/app/pages/Profile.tsx +++ b/app/pages/Profile.tsx @@ -9,6 +9,7 @@ import { ProfileUser } from "#/components/Profile/Profile.User"; import { ProfileBannedBanner } from "#/components/Profile/ProfileBannedBanner"; import { ProfilePrivacyBanner } from "#/components/Profile/Profile.PrivacyBanner"; import { ProfileActivity } from "#/components/Profile/Profile.Activity"; +import { ProfileStats } from "#/components/Profile/Profile.Stats"; export const ProfilePage = (props: any) => { const authUser = useUserStore((state) => state); @@ -96,38 +97,57 @@ export const ProfilePage = (props: any) => {
- - {!user.is_stats_hidden && ( - + +
+ {!user.is_counts_hidden && ( +
+ +
+ )} + {!user.is_stats_hidden && ( +
+ +
)}
diff --git a/next.config.js b/next.config.js index 8ddd554..553891b 100644 --- a/next.config.js +++ b/next.config.js @@ -3,6 +3,7 @@ const { withPlausibleProxy } = require("next-plausible"); module.exports = withPlausibleProxy({ customDomain: "https://analytics.wah.su", })({ + reactStrictMode: false, images: { loader: 'custom', loaderFile: './imageLoader.ts', diff --git a/package-lock.json b/package-lock.json index 9e413f2..eb5911a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "new", "version": "0.1.0", "dependencies": { + "apexcharts": "^3.52.0", "deepmerge-ts": "^7.1.0", "flowbite": "^2.4.1", "flowbite-react": "^0.10.1", @@ -1000,6 +1001,11 @@ "dev": true, "peer": true }, + "node_modules/@yr/monotone-cubic-spline": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz", + "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==" + }, "node_modules/acorn": { "version": "8.12.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", @@ -1135,6 +1141,20 @@ "node": ">= 8" } }, + "node_modules/apexcharts": { + "version": "3.52.0", + "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.52.0.tgz", + "integrity": "sha512-7dg0ADKs8AA89iYMZMe2sFDG0XK5PfqllKV9N+i3hKHm3vEtdhwz8AlXGm+/b0nJ6jKiaXsqci5LfVxNhtB+dA==", + "dependencies": { + "@yr/monotone-cubic-spline": "^1.0.3", + "svg.draggable.js": "^2.2.2", + "svg.easing.js": "^2.0.0", + "svg.filter.js": "^2.0.2", + "svg.pathmorphing.js": "^0.1.3", + "svg.resize.js": "^1.4.3", + "svg.select.js": "^3.0.1" + } + }, "node_modules/arg": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", @@ -5324,6 +5344,89 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/svg.draggable.js": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz", + "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==", + "dependencies": { + "svg.js": "^2.0.1" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.easing.js": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz", + "integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==", + "dependencies": { + "svg.js": ">=2.3.x" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.filter.js": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz", + "integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==", + "dependencies": { + "svg.js": "^2.2.5" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.js": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz", + "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==" + }, + "node_modules/svg.pathmorphing.js": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz", + "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==", + "dependencies": { + "svg.js": "^2.4.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.resize.js": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz", + "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==", + "dependencies": { + "svg.js": "^2.6.5", + "svg.select.js": "^2.1.2" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.resize.js/node_modules/svg.select.js": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz", + "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==", + "dependencies": { + "svg.js": "^2.2.5" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.select.js": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz", + "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==", + "dependencies": { + "svg.js": "^2.6.5" + }, + "engines": { + "node": ">= 0.8.0" + } + }, "node_modules/swiper": { "version": "11.1.4", "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.4.tgz", diff --git a/package.json b/package.json index 34588a1..8cd1111 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "apexcharts": "^3.52.0", "deepmerge-ts": "^7.1.0", "flowbite": "^2.4.1", "flowbite-react": "^0.10.1", diff --git a/tailwind.config.js b/tailwind.config.js index 2e4702a..6befeef 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -12,7 +12,9 @@ module.exports = { plugins: [ addIconSelectors(["mdi", "material-symbols", "twemoji", "fa6-brands"]), require("tailwind-scrollbar"), - flowbite.plugin(), + flowbite.plugin()({ + charts: true, + }), ], darkMode: "selector", theme: { From 7dac3c072e52691727dc5169668f39b797ba9f08 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Sat, 24 Aug 2024 05:45:30 +0500 Subject: [PATCH 05/13] feat: add watch dynamic graph --- app/api/utils.ts | 15 +- .../Profile/Profile.PrivacyBanner.tsx | 2 - .../Profile/Profile.WatchDynamic.tsx | 102 ++++++ .../Profile/ProfileBannedBanner.tsx | 2 +- .../ReleaseInfo/ReleaseInfo.Info.tsx | 2 +- app/pages/Profile copy.tsx | 312 ------------------ app/pages/Profile.tsx | 32 +- 7 files changed, 133 insertions(+), 334 deletions(-) create mode 100644 app/components/Profile/Profile.WatchDynamic.tsx delete mode 100644 app/pages/Profile copy.tsx diff --git a/app/api/utils.ts b/app/api/utils.ts index e464009..9fa41c7 100644 --- a/app/api/utils.ts +++ b/app/api/utils.ts @@ -119,12 +119,11 @@ const months = [ "дек.", ]; -export function unixToDate(unix: number, type: string = "short") { +export function unixToDate( + unix: number, + type: "full" | "dayMonth" | "dayMonthYear" +) { const date = new Date(unix * 1000); - if (type === "short") - return ( - date.getDate() + " " + months[date.getMonth()] + " " + date.getFullYear() - ); if (type === "full") return ( date.getDate() + @@ -137,6 +136,12 @@ export function unixToDate(unix: number, type: string = "short") { ":" + date.getMinutes() ); + if (type === "dayMonth") + return date.getDate() + " " + months[date.getMonth()]; + if (type === "dayMonthYear") + return ( + date.getDate() + " " + months[date.getMonth()] + " " + date.getFullYear() + ); } export const getSeasonFromUnix = (unix: number) => { diff --git a/app/components/Profile/Profile.PrivacyBanner.tsx b/app/components/Profile/Profile.PrivacyBanner.tsx index 8164992..eb6e807 100644 --- a/app/components/Profile/Profile.PrivacyBanner.tsx +++ b/app/components/Profile/Profile.PrivacyBanner.tsx @@ -1,5 +1,3 @@ -import { unixToDate } from "#/api/utils"; - export const ProfilePrivacyBanner = (props: { is_privacy: boolean }) => { return ( <> diff --git a/app/components/Profile/Profile.WatchDynamic.tsx b/app/components/Profile/Profile.WatchDynamic.tsx new file mode 100644 index 0000000..66c4b0a --- /dev/null +++ b/app/components/Profile/Profile.WatchDynamic.tsx @@ -0,0 +1,102 @@ +import { Card } from "flowbite-react"; +import ApexCharts, { ApexOptions } from "apexcharts"; +import { useEffect } from "react"; +import { unixToDate } from "#/api/utils"; +export const ProfileWatchDynamic = (props: { watchDynamic: Array }) => { + const lastTenDays = props.watchDynamic.slice( + Math.max(props.watchDynamic.length - 10, 0) + ); + const data = { + ids: lastTenDays.map((item) => item.id), + counts: lastTenDays.map((item) => item.count), + timestamps: lastTenDays.map((item) => + unixToDate(item.timestamp, "dayMonth") + ), + }; + + const options: ApexOptions = { + chart: { + height: "100%", + type: "area", + fontFamily: "Inter, sans-serif", + dropShadow: { + enabled: false, + }, + toolbar: { + show: false, + }, + }, + tooltip: { + enabled: true, + x: { + show: false, + }, + }, + fill: { + type: "gradient", + gradient: { + opacityFrom: 0.55, + opacityTo: 0, + shade: "#1C64F2", + gradientToColors: ["#1C64F2"], + }, + }, + dataLabels: { + enabled: false, + }, + stroke: { + width: 6, + }, + grid: { + show: true, + strokeDashArray: 4, + padding: { + left: 2, + right: 2, + top: 0, + }, + }, + series: [ + { + name: "Серий", + data: data.counts, + color: "#1C64F2", + }, + ], + xaxis: { + categories: data.timestamps, + labels: { + show: false, + }, + axisBorder: { + show: false, + }, + axisTicks: { + show: false, + }, + }, + yaxis: { + show: false, + }, + }; + + useEffect(() => { + if ( + document.getElementById("area-chart") && + typeof ApexCharts !== "undefined" + ) { + const chart = new ApexCharts( + document.getElementById("area-chart"), + options + ); + chart.render(); + } + }, []); + + return ( + +

Динамика просмотра серий

+
+ + ); +}; diff --git a/app/components/Profile/ProfileBannedBanner.tsx b/app/components/Profile/ProfileBannedBanner.tsx index 6781f19..c7625f7 100644 --- a/app/components/Profile/ProfileBannedBanner.tsx +++ b/app/components/Profile/ProfileBannedBanner.tsx @@ -15,7 +15,7 @@ export const ProfileBannedBanner = (props: { {props.is_perm_banned ? "Пользователь был заблокирован администрацией навсегда" : `Пользователь был заблокирован администрацией до - ${unixToDate(props.ban_expires)}`} + ${unixToDate(props.ban_expires, "full")}`}

{props.ban_reason} diff --git a/app/components/ReleaseInfo/ReleaseInfo.Info.tsx b/app/components/ReleaseInfo/ReleaseInfo.Info.tsx index 5856351..0f6e93e 100644 --- a/app/components/ReleaseInfo/ReleaseInfo.Info.tsx +++ b/app/components/ReleaseInfo/ReleaseInfo.Info.tsx @@ -133,7 +133,7 @@ export const ReleaseInfoInfo = (props: { {props.aired_on_date != 0 ? ( - unixToDate(props.aired_on_date) + unixToDate(props.aired_on_date, "full") ) : props.year ? ( <> {props.season && props.season != 0 diff --git a/app/pages/Profile copy.tsx b/app/pages/Profile copy.tsx deleted file mode 100644 index def785a..0000000 --- a/app/pages/Profile copy.tsx +++ /dev/null @@ -1,312 +0,0 @@ -"use client"; -import { useUserStore } from "#/store/auth"; -import { useEffect, useState } from "react"; -import { Spinner } from "../components/Spinner/Spinner"; -import { Avatar, Card, Button, Table } from "flowbite-react"; -import { Chip } from "../components/Chip/Chip"; -import { fetchDataViaGet, unixToDate, minutesToTime } from "../api/utils"; -import { ReleaseCourusel } from "#/components/ReleaseCourusel/ReleaseCourusel"; -import { ENDPOINTS } from "#/api/config"; - -export const ProfilePage = (props: any) => { - const authUser = useUserStore((state) => state); - const [user, setUser] = useState(null); - const [isMyProfile, setIsMyProfile] = useState(false); - - useEffect(() => { - async function _getData() { - let url = `${ENDPOINTS.user.profile}/${props.id}`; - if (authUser.token) { - url += `?token=${authUser.token}`; - } - const data = await fetchDataViaGet(url); - setUser(data.profile); - setIsMyProfile(data.is_my_profile); - } - _getData(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [authUser]); - - if (!user) { - return ( -

- -
- ); - } - - const hasSocials = - user.vk_page != "" || - user.tg_page != "" || - user.tt_page != "" || - user.inst_page != "" || - user.discord_page != "" || - false; - const socials = [ - { - name: "vk", - nickname: user.vk_page, - icon: "fa6-brands--vk", - urlPrefix: "https://vk.com", - }, - { - name: "telegram", - nickname: user.tg_page, - icon: "fa6-brands--telegram", - urlPrefix: "https://t.me", - }, - { - name: "discord", - nickname: user.discord_page, - icon: "fa6-brands--discord", - }, - { - name: "tiktok", - nickname: user.tt_page, - icon: "fa6-brands--tiktok", - urlPrefix: "https://tiktok.com", - }, - { - name: "instagram", - nickname: user.inst_page, - icon: "fa6-brands--instagram", - urlPrefix: "https://instagram.com", - }, - ]; - - const hasChips = user.is_verified || user.is_blocked || isMyProfile; - - return ( -
- {(user.is_banned || user.is_perm_banned) && ( -
-
-

- {user.is_perm_banned - ? "Пользователь был заблокирован администрацией навсегда" - : `Пользователь был заблокирован администрацией до - ${unixToDate(user.ban_expires)}`} -

-

- {user.ban_reason} -

-
-
- )} - -
- - {hasChips && ( -
- {isMyProfile && ( - - )} - {user.is_blocked && ( - - )} - {user.is_verified && ( - - )} -
- )} - -
-
{user.login}
-

- {user.status} -

-
- - {hasSocials && ( -
- {socials - .filter((social: any) => { - if (social.nickname == "") { - return false; - } - return true; - }) - .map((social: any) => { - if (social.name == "discord" && social.nickname != "") - return ( - - ); - return ( - - ); - })} -
- )} - -
- -

Активность

- - - - - Регистрация - - - {unixToDate(user.register_date)} - - - - - Был(а) в сети - - - {unixToDate(user.last_activity_time)} - - - - - Комментарий - - - {user.comment_count} - - - - - друзей - - - {user.friend_count} - - - - - видео - - - {user.video_count} - - - - - коллекций - - - {user.collection_count} - - - -
- - -

Статистика

- - - - - - Просмотрено серий - - - {user.watched_episode_count} - - - - - - Время просмотра - - - {minutesToTime(user.watched_time) || - "Нет просмотренных серий."} - - - - - - {minutesToTime(user.watched_time) || - "Нет просмотренных серий."} - - - - - - Смотрю - - - {user.watching_count} - - - - - - В Планах - - - {user.plan_count} - - - - - - Просмотрено - - - {user.completed_count} - - - - - - Отложено - - - {user.hold_on_count} - - - - - - Брошено - - - {user.dropped_count} - - - -
- -
-
- {user.history.length > 0 && ( -
- -
- )} -
- ); -}; diff --git a/app/pages/Profile.tsx b/app/pages/Profile.tsx index 8da4749..d78fc8c 100644 --- a/app/pages/Profile.tsx +++ b/app/pages/Profile.tsx @@ -10,6 +10,7 @@ import { ProfileBannedBanner } from "#/components/Profile/ProfileBannedBanner"; import { ProfilePrivacyBanner } from "#/components/Profile/Profile.PrivacyBanner"; import { ProfileActivity } from "#/components/Profile/Profile.Activity"; import { ProfileStats } from "#/components/Profile/Profile.Stats"; +import { ProfileWatchDynamic } from "#/components/Profile/Profile.WatchDynamic"; export const ProfilePage = (props: any) => { const authUser = useUserStore((state) => state); @@ -135,19 +136,24 @@ export const ProfilePage = (props: any) => {
)} {!user.is_stats_hidden && ( -
- -
+ <> +
+ +
+
+ +
+ )}
From 0302b3f809f40f7765e499a2b7a1bf2e4795cb0f Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Sun, 25 Aug 2024 16:18:45 +0500 Subject: [PATCH 06/13] feat: add profile actions placeholder --- app/components/Profile/Profile.Actions.tsx | 25 ++++++++++++++++++++++ app/pages/Profile.tsx | 18 +++++++++++++++- 2 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 app/components/Profile/Profile.Actions.tsx diff --git a/app/components/Profile/Profile.Actions.tsx b/app/components/Profile/Profile.Actions.tsx new file mode 100644 index 0000000..d8c695b --- /dev/null +++ b/app/components/Profile/Profile.Actions.tsx @@ -0,0 +1,25 @@ +"use client"; +import { Card, Button } from "flowbite-react"; +import { useRouter } from "next/navigation"; + +export const ProfileActions = (props: { + isMyProfile: boolean; + isFriendRequestsDisallowed: boolean; + profile_id: number; +}) => { + return ( + +
+ {props.isMyProfile && } + {!props.isMyProfile && ( + <> + {!props.isFriendRequestsDisallowed && ( + + )} + + + )} +
+ + ); +}; diff --git a/app/pages/Profile.tsx b/app/pages/Profile.tsx index d78fc8c..f0f304c 100644 --- a/app/pages/Profile.tsx +++ b/app/pages/Profile.tsx @@ -11,6 +11,7 @@ import { ProfilePrivacyBanner } from "#/components/Profile/Profile.PrivacyBanner 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"; export const ProfilePage = (props: any) => { const authUser = useUserStore((state) => state); @@ -98,7 +99,11 @@ export const ProfilePage = (props: any) => {
@@ -135,6 +140,17 @@ export const ProfilePage = (props: any) => { />
)} +
+ +
{!user.is_stats_hidden && ( <>
From 4276cc1314fe07c8882e621bb292b88627587faf Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Sun, 25 Aug 2024 17:19:11 +0500 Subject: [PATCH 07/13] 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 ( - +

Активность

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 ( + +

Оценки

+
+ + {props.ratings.map((release) => { + return ( +
+ +
+

{release.title_ru}

+ + = 1} /> + = 2} /> + = 3} /> + = 4} /> + = 5} /> + +

+ {unixToDate(release.voted_at, "full")} +

+
+
+ ); + })} + +
+ + ); +}; 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 ( - +

Статистика

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 ( - + {props.chips.hasChips && (
{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) => {
-
+
{ }} rating={user.rating_score} /> -
- {!user.is_counts_hidden && ( -
+ {!user.is_counts_hidden && ( { collectionCount={user.collection_count} friendsCount={user.friend_count} /> -
- )} -
+ )} + {!user.is_stats_hidden && ( + + )}
+
+ + +
+ {/* {!user.is_stats_hidden && ( - <> -
- -
-
- -
- +
+ +
)} +
+
*/}
); From 7a0b71020f4fdc05976066ca3cc734c08fbf962e Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Sun, 25 Aug 2024 17:25:33 +0500 Subject: [PATCH 08/13] style: change profile widgets positions --- .../Profile/Profile.ReleaseRatings.tsx | 4 +- app/pages/Profile.tsx | 42 +++++++++---------- 2 files changed, 21 insertions(+), 25 deletions(-) diff --git a/app/components/Profile/Profile.ReleaseRatings.tsx b/app/components/Profile/Profile.ReleaseRatings.tsx index e5c793d..0629718 100644 --- a/app/components/Profile/Profile.ReleaseRatings.tsx +++ b/app/components/Profile/Profile.ReleaseRatings.tsx @@ -24,14 +24,14 @@ const CarouselTheme = { export const ProfileReleaseRatings = (props: any) => { return ( - +

Оценки

{props.ratings.map((release) => { return (
{ friendsCount={user.friend_count} /> )} + {!user.is_stats_hidden && ( + + )} +
+
{!user.is_stats_hidden && ( - + <> + + + )}
-
- - -
- {/* - {!user.is_stats_hidden && ( -
- -
- )} -
-
*/}
); From 6aa6424508636043a46adb9af8b02fd1ab9a9b48 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Sun, 25 Aug 2024 17:45:52 +0500 Subject: [PATCH 09/13] feat: add recently watched widget --- .../Profile/Profile.ReleaseHistory.tsx | 40 ++++++++++++ .../Profile/Profile.ReleaseRatings.tsx | 65 ++++++++++--------- .../ReleaseLink/ReleaseLink.Poster.tsx | 1 - app/pages/Profile.tsx | 22 ++++++- 4 files changed, 93 insertions(+), 35 deletions(-) create mode 100644 app/components/Profile/Profile.ReleaseHistory.tsx diff --git a/app/components/Profile/Profile.ReleaseHistory.tsx b/app/components/Profile/Profile.ReleaseHistory.tsx new file mode 100644 index 0000000..e17c2d9 --- /dev/null +++ b/app/components/Profile/Profile.ReleaseHistory.tsx @@ -0,0 +1,40 @@ +import { Card, Carousel, RatingStar, Rating } from "flowbite-react"; +import type { + FlowbiteCarouselIndicatorsTheme, + FlowbiteCarouselControlTheme, +} from "flowbite-react"; +import { ReleaseLink } from "../ReleaseLink/ReleaseLink"; + +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 ProfileReleaseHistory = (props: any) => { + return ( + +

Недавно просмотренные

+
+ + {props.history.map((release) => { + return ; + })} + +
+ + ); +}; diff --git a/app/components/Profile/Profile.ReleaseRatings.tsx b/app/components/Profile/Profile.ReleaseRatings.tsx index 0629718..4c61be3 100644 --- a/app/components/Profile/Profile.ReleaseRatings.tsx +++ b/app/components/Profile/Profile.ReleaseRatings.tsx @@ -1,7 +1,11 @@ import { Card, Carousel, RatingStar, Rating } from "flowbite-react"; -import type { FlowbiteCarouselIndicatorsTheme, FlowbiteCarouselControlTheme } from "flowbite-react"; +import type { + FlowbiteCarouselIndicatorsTheme, + FlowbiteCarouselControlTheme, +} from "flowbite-react"; import Image from "next/image"; import { unixToDate } from "#/api/utils"; +import Link from "next/link"; const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = { active: { @@ -13,14 +17,14 @@ const CarouselIndicatorsTheme: FlowbiteCarouselIndicatorsTheme = { }; 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" -} + 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 -} + indicators: CarouselIndicatorsTheme, + control: CarouselControlsTheme, +}; export const ProfileReleaseRatings = (props: any) => { return ( @@ -30,31 +34,30 @@ export const ProfileReleaseRatings = (props: any) => { {props.ratings.map((release) => { return ( -
- -
-

{release.title_ru}

- - = 1} /> - = 2} /> - = 3} /> - = 4} /> - = 5} /> - -

- {unixToDate(release.voted_at, "full")} -

+ +
+ +
+

{release.title_ru}

+ + = 1} /> + = 2} /> + = 3} /> + = 4} /> + = 5} /> + +

+ {unixToDate(release.voted_at, "full")} +

+
-
+ ); })} diff --git a/app/components/ReleaseLink/ReleaseLink.Poster.tsx b/app/components/ReleaseLink/ReleaseLink.Poster.tsx index 13ad6ef..438b7b6 100644 --- a/app/components/ReleaseLink/ReleaseLink.Poster.tsx +++ b/app/components/ReleaseLink/ReleaseLink.Poster.tsx @@ -1,5 +1,4 @@ import Link from "next/link"; -import { sinceUnixDate } from "#/api/utils"; import { Chip } from "#/components/Chip/Chip"; const profile_lists = { diff --git a/app/pages/Profile.tsx b/app/pages/Profile.tsx index 0f31e6c..83dd7ad 100644 --- a/app/pages/Profile.tsx +++ b/app/pages/Profile.tsx @@ -13,6 +13,7 @@ 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"; +import { ProfileReleaseHistory } from "#/components/Profile/Profile.ReleaseHistory"; export const ProfilePage = (props: any) => { const authUser = useUserStore((state) => state); @@ -104,7 +105,7 @@ export const ProfilePage = (props: any) => { isPrivacy || user.is_banned || user.is_perm_banned ? "mt-4" : "" }`} > -
+
{ /> )} {!user.is_stats_hidden && ( - +
+ {user.votes && user.votes.length > 0 && ( + + )} + {user.history && user.history.length > 0 && ( + + )} +
)}
-
+
{ watched_time={user.watched_time} /> +
+ {user.votes && user.votes.length > 0 && ( + + )} + {user.history && user.history.length > 0 && ( + + )} +
)}
From 8c1e00fe9778f2d6a02c63925fc3841eb5600ff4 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Sun, 25 Aug 2024 23:31:46 +0500 Subject: [PATCH 10/13] feat: add friend requests --- TODO.md | 7 +- app/components/Profile/Profile.Actions.tsx | 92 +++++++++++++++++++++- app/components/Profile/Profile.User.tsx | 1 - app/pages/Profile.tsx | 23 +++--- 4 files changed, 106 insertions(+), 17 deletions(-) diff --git a/TODO.md b/TODO.md index 338c4f1..27ab84c 100644 --- a/TODO.md +++ b/TODO.md @@ -24,13 +24,10 @@ ### Профиль -- [ ] Оценки релизов -- [ ] Динамика просмотра серий -- [ ] Значки команд озвучки\перевода и т.д. - [ ] Просмотр комментариев пользователя к релизам и коллекциям. - [ ] Редактирование профиля. -- [ ] Уважение настроек приватности пользователя. -- [ ] Добавление друзей. +- [ ] Просмотр всех оценок +- [ ] Просмотр всех списков ## Баги diff --git a/app/components/Profile/Profile.Actions.tsx b/app/components/Profile/Profile.Actions.tsx index d8c695b..5b2a1e4 100644 --- a/app/components/Profile/Profile.Actions.tsx +++ b/app/components/Profile/Profile.Actions.tsx @@ -1,20 +1,108 @@ "use client"; +import { ENDPOINTS } from "#/api/config"; import { Card, Button } from "flowbite-react"; import { useRouter } from "next/navigation"; +import { useState } from "react"; + +// null - не друзья +// 0 - заявка в друзья authUserId < profileId +// 1 - заявка в друзья authUserId > profileId +// 2 - друзья + +// если id профиля больше id юзера, то 0 иначе 1 export const ProfileActions = (props: { isMyProfile: boolean; isFriendRequestsDisallowed: boolean; profile_id: number; + my_profile_id: number; + friendStatus: number; + token: string; }) => { + const router = useRouter(); + const z2 = props.my_profile_id < props.profile_id; + let profileIdIsSmaller = z2 ? true : false; + + const [friendRequestDisabled, setfriendRequestDisabled] = useState(false); + + function _getFriendStatus() { + const num = props.friendStatus; + + if (num == null) { + return null; + } + let z = true; + if (num == 2) { + return 1; + } + let z3 = (num == 0 && z2) || (num == 1 && !z2); + if ((num != 1 || z2) && (num != 0 || !z2)) { + z = false; + } + if (z3) { + return 2; + } + if (z) { + return 3; + } + return 0; + } + const FriendStatus = _getFriendStatus(); + const isRequestedStatus = + FriendStatus != null + ? profileIdIsSmaller + ? profileIdIsSmaller && FriendStatus != 0 + : !profileIdIsSmaller && FriendStatus == 2 + : null; + // ^ This is some messed up shit + + function _addToFriends() { + let url = `${ENDPOINTS.user.profile}/friend/request`; + setfriendRequestDisabled(true); + + FriendStatus == 1 + ? (url += "/remove/") + : isRequestedStatus + ? (url += "/remove/") + : (url += "/send/"); + + url += `${props.profile_id}?token=${props.token}`; + fetch(url).then((res) => { + setTimeout(() => { + window.location.reload(); + }, 1000); + }); + } + return ( + {isRequestedStatus != null && !isRequestedStatus && FriendStatus != 1 && ( +

Отправил(-а) вам заявку в друзья

+ )}
{props.isMyProfile && } {!props.isMyProfile && ( <> - {!props.isFriendRequestsDisallowed && ( - + {(!props.isFriendRequestsDisallowed || + FriendStatus == 1 || + isRequestedStatus) && ( + )} diff --git a/app/components/Profile/Profile.User.tsx b/app/components/Profile/Profile.User.tsx index 1bc4743..afc9a1a 100644 --- a/app/components/Profile/Profile.User.tsx +++ b/app/components/Profile/Profile.User.tsx @@ -34,7 +34,6 @@ export const ProfileUser = (props: { rating: number; }) => { const router = useRouter(); - console.log(props.chips); return ( {props.chips.hasChips && ( diff --git a/app/pages/Profile.tsx b/app/pages/Profile.tsx index 83dd7ad..a9e9276 100644 --- a/app/pages/Profile.tsx +++ b/app/pages/Profile.tsx @@ -16,7 +16,7 @@ import { ProfileReleaseRatings } from "#/components/Profile/Profile.ReleaseRatin import { ProfileReleaseHistory } from "#/components/Profile/Profile.ReleaseHistory"; export const ProfilePage = (props: any) => { - const authUser = useUserStore((state) => state); + const authUser = useUserStore(); const [user, setUser] = useState(null); const [isMyProfile, setIsMyProfile] = useState(false); @@ -136,7 +136,7 @@ export const ProfilePage = (props: any) => { /> )} {!user.is_stats_hidden && ( -
+
{user.votes && user.votes.length > 0 && ( )} @@ -146,12 +146,17 @@ export const ProfilePage = (props: any) => {
)}
-
- +
+ {authUser.token && ( + + )} {!user.is_stats_hidden && ( <> { watched_time={user.watched_time} /> -
+
{user.votes && user.votes.length > 0 && ( )} From ecf1c971f6021dd6c3ccbb497bb991044db7a37d Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Tue, 27 Aug 2024 15:07:32 +0500 Subject: [PATCH 11/13] feat: add user block action and banner if user is blocked by another user --- app/components/Profile/Profile.Actions.tsx | 80 ++++++++++++------- .../Profile/Profile.PrivacyBanner.tsx | 18 ++++- app/components/Profile/Profile.User.tsx | 2 +- app/pages/Profile.tsx | 4 +- 4 files changed, 71 insertions(+), 33 deletions(-) diff --git a/app/components/Profile/Profile.Actions.tsx b/app/components/Profile/Profile.Actions.tsx index 5b2a1e4..3ee6c83 100644 --- a/app/components/Profile/Profile.Actions.tsx +++ b/app/components/Profile/Profile.Actions.tsx @@ -18,12 +18,13 @@ export const ProfileActions = (props: { my_profile_id: number; friendStatus: number; token: string; + is_me_blocked: boolean; + is_blocked: boolean; }) => { const router = useRouter(); - const z2 = props.my_profile_id < props.profile_id; - let profileIdIsSmaller = z2 ? true : false; - - const [friendRequestDisabled, setfriendRequestDisabled] = useState(false); + const profileIdIsSmaller = props.my_profile_id < props.profile_id; + const [friendRequestDisabled, setFriendRequestDisabled] = useState(false); + const [blockRequestDisabled, setBlockRequestDisabled] = useState(false); function _getFriendStatus() { const num = props.friendStatus; @@ -35,8 +36,9 @@ export const ProfileActions = (props: { if (num == 2) { return 1; } - let z3 = (num == 0 && z2) || (num == 1 && !z2); - if ((num != 1 || z2) && (num != 0 || !z2)) { + let z3 = + (num == 0 && profileIdIsSmaller) || (num == 1 && !profileIdIsSmaller); + if ((num != 1 || profileIdIsSmaller) && (num != 0 || !profileIdIsSmaller)) { z = false; } if (z3) { @@ -58,7 +60,8 @@ export const ProfileActions = (props: { function _addToFriends() { let url = `${ENDPOINTS.user.profile}/friend/request`; - setfriendRequestDisabled(true); + setFriendRequestDisabled(true); + setBlockRequestDisabled(true); FriendStatus == 1 ? (url += "/remove/") @@ -70,7 +73,22 @@ export const ProfileActions = (props: { fetch(url).then((res) => { setTimeout(() => { window.location.reload(); - }, 1000); + }, 100); + }); + } + + function _addToBlocklist() { + let url = `${ENDPOINTS.user.profile}/blocklist`; + setBlockRequestDisabled(true); + setFriendRequestDisabled(true); + + !props.is_blocked ? (url += "/add/") : (url += "/remove/"); + + url += `${props.profile_id}?token=${props.token}`; + fetch(url).then((res) => { + setTimeout(() => { + window.location.reload(); + }, 100); }); } @@ -85,26 +103,34 @@ export const ProfileActions = (props: { <> {(!props.isFriendRequestsDisallowed || FriendStatus == 1 || - isRequestedStatus) && ( - - )} - + ? "Заявка отправлена" + : "Добавить в друзья"} + + )} + )}
diff --git a/app/components/Profile/Profile.PrivacyBanner.tsx b/app/components/Profile/Profile.PrivacyBanner.tsx index eb6e807..cc99ff5 100644 --- a/app/components/Profile/Profile.PrivacyBanner.tsx +++ b/app/components/Profile/Profile.PrivacyBanner.tsx @@ -1,12 +1,22 @@ -export const ProfilePrivacyBanner = (props: { is_privacy: boolean }) => { +export const ProfilePrivacyBanner = (props: { + is_privacy: boolean; + is_me_blocked: boolean; +}) => { return ( <> {props.is_privacy && ( -
+

- У пользователя установлены настройки приватности. Некоторая - информация для вас может быть недоступна. + {!props.is_me_blocked + ? "У пользователя установлены настройки приватности. Некоторая информация для вас может быть недоступна." + : "Вы заблокированы данным пользователем. Его информация для вас не доступна."}

diff --git a/app/components/Profile/Profile.User.tsx b/app/components/Profile/Profile.User.tsx index afc9a1a..2cdaa99 100644 --- a/app/components/Profile/Profile.User.tsx +++ b/app/components/Profile/Profile.User.tsx @@ -48,7 +48,7 @@ export const ProfileUser = (props: { )} {props.chips.isBlocked && ( - + )} {props.chips.roles && props.chips.roles.length > 0 && diff --git a/app/pages/Profile.tsx b/app/pages/Profile.tsx index a9e9276..bbcf197 100644 --- a/app/pages/Profile.tsx +++ b/app/pages/Profile.tsx @@ -98,7 +98,7 @@ export const ProfilePage = (props: any) => { ban_reason={user.ban_reason} ban_expires={user.ban_expires} /> - +
{ friendStatus={user.friend_status} my_profile_id={authUser.user.id} token={authUser.token} + is_me_blocked={user.is_me_blocked} + is_blocked={user.is_blocked} /> )} {!user.is_stats_hidden && ( From 05b4fc33259d254833a6d6abe6b673238930be2c Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Tue, 27 Aug 2024 15:34:35 +0500 Subject: [PATCH 12/13] refactor: change profile data fetching to swr --- app/components/Profile/Profile.Actions.tsx | 15 +++++++-- app/pages/Profile.tsx | 36 +++++++++++++++------- 2 files changed, 37 insertions(+), 14 deletions(-) diff --git a/app/components/Profile/Profile.Actions.tsx b/app/components/Profile/Profile.Actions.tsx index 3ee6c83..cb6a927 100644 --- a/app/components/Profile/Profile.Actions.tsx +++ b/app/components/Profile/Profile.Actions.tsx @@ -3,6 +3,7 @@ import { ENDPOINTS } from "#/api/config"; import { Card, Button } from "flowbite-react"; import { useRouter } from "next/navigation"; import { useState } from "react"; +import useSWR, { useSWRConfig } from "swr"; // null - не друзья // 0 - заявка в друзья authUserId < profileId @@ -25,7 +26,7 @@ export const ProfileActions = (props: { const profileIdIsSmaller = props.my_profile_id < props.profile_id; const [friendRequestDisabled, setFriendRequestDisabled] = useState(false); const [blockRequestDisabled, setBlockRequestDisabled] = useState(false); - + const { mutate } = useSWRConfig(); function _getFriendStatus() { const num = props.friendStatus; @@ -71,8 +72,12 @@ export const ProfileActions = (props: { url += `${props.profile_id}?token=${props.token}`; fetch(url).then((res) => { + mutate( + `${ENDPOINTS.user.profile}/${props.profile_id}?token=${props.token}` + ); setTimeout(() => { - window.location.reload(); + setBlockRequestDisabled(false); + setFriendRequestDisabled(false); }, 100); }); } @@ -86,8 +91,12 @@ export const ProfileActions = (props: { url += `${props.profile_id}?token=${props.token}`; fetch(url).then((res) => { + mutate( + `${ENDPOINTS.user.profile}/${props.profile_id}?token=${props.token}` + ); setTimeout(() => { - window.location.reload(); + setBlockRequestDisabled(false); + setFriendRequestDisabled(false); }, 100); }); } diff --git a/app/pages/Profile.tsx b/app/pages/Profile.tsx index bbcf197..9bb6bad 100644 --- a/app/pages/Profile.tsx +++ b/app/pages/Profile.tsx @@ -2,8 +2,8 @@ import { useUserStore } from "#/store/auth"; import { useEffect, useState } from "react"; import { Spinner } from "../components/Spinner/Spinner"; -import { fetchDataViaGet } from "../api/utils"; import { ENDPOINTS } from "#/api/config"; +import useSWR from "swr"; import { ProfileUser } from "#/components/Profile/Profile.User"; import { ProfileBannedBanner } from "#/components/Profile/ProfileBannedBanner"; @@ -15,24 +15,35 @@ import { ProfileActions } from "#/components/Profile/Profile.Actions"; import { ProfileReleaseRatings } from "#/components/Profile/Profile.ReleaseRatings"; import { ProfileReleaseHistory } from "#/components/Profile/Profile.ReleaseHistory"; +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 const ProfilePage = (props: any) => { const authUser = useUserStore(); const [user, setUser] = useState(null); const [isMyProfile, setIsMyProfile] = useState(false); + let url = `${ENDPOINTS.user.profile}/${props.id}`; + if (authUser.token) { + url += `?token=${authUser.token}`; + } + const { data } = useSWR(url, fetcher); + useEffect(() => { - async function _getData() { - let url = `${ENDPOINTS.user.profile}/${props.id}`; - if (authUser.token) { - url += `?token=${authUser.token}`; - } - const data = await fetchDataViaGet(url); + if (data) { setUser(data.profile); setIsMyProfile(data.is_my_profile); } - _getData(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [authUser]); + }, [data]); if (!user) { return ( @@ -98,7 +109,10 @@ export const ProfilePage = (props: any) => { ban_reason={user.ban_reason} ban_expires={user.ban_expires} /> - +
Date: Tue, 27 Aug 2024 16:27:55 +0500 Subject: [PATCH 13/13] feat: add another user profile bookmarks viewing --- TODO.md | 1 - .../Profile/Profile.ReleaseRatings.tsx | 8 ++-- app/components/Profile/Profile.Stats.tsx | 13 ++++- app/pages/Bookmarks.tsx | 45 ++++++++++++++---- app/pages/BookmarksCategory.tsx | 19 ++++++-- app/pages/Profile.tsx | 5 +- app/profile/[id]/bookmarks/[slug]/page.tsx | 47 +++++++++++++++++++ app/profile/[id]/bookmarks/page.tsx | 33 +++++++++++++ 8 files changed, 150 insertions(+), 21 deletions(-) create mode 100644 app/profile/[id]/bookmarks/[slug]/page.tsx create mode 100644 app/profile/[id]/bookmarks/page.tsx diff --git a/TODO.md b/TODO.md index 27ab84c..31f42dc 100644 --- a/TODO.md +++ b/TODO.md @@ -27,7 +27,6 @@ - [ ] Просмотр комментариев пользователя к релизам и коллекциям. - [ ] Редактирование профиля. - [ ] Просмотр всех оценок -- [ ] Просмотр всех списков ## Баги diff --git a/app/components/Profile/Profile.ReleaseRatings.tsx b/app/components/Profile/Profile.ReleaseRatings.tsx index 4c61be3..688d08c 100644 --- a/app/components/Profile/Profile.ReleaseRatings.tsx +++ b/app/components/Profile/Profile.ReleaseRatings.tsx @@ -39,11 +39,11 @@ export const ProfileReleaseRatings = (props: any) => { -
+

{release.title_ru}

= 1} /> @@ -52,7 +52,7 @@ export const ProfileReleaseRatings = (props: any) => { = 4} /> = 5} /> -

+

{unixToDate(release.voted_at, "full")}

diff --git a/app/components/Profile/Profile.Stats.tsx b/app/components/Profile/Profile.Stats.tsx index ae44f71..721adc8 100644 --- a/app/components/Profile/Profile.Stats.tsx +++ b/app/components/Profile/Profile.Stats.tsx @@ -8,6 +8,7 @@ export const ProfileStats = (props: { lists: Array; watched_count: number; watched_time: number; + profile_id: number }) => { const getChartOptions = () => { return { @@ -57,8 +58,16 @@ export const ProfileStats = (props: { }, []); return ( - -

Статистика

+ +
+

Статистика

+ +
+

Показать все

+ +
+ +

diff --git a/app/pages/Bookmarks.tsx b/app/pages/Bookmarks.tsx index ebada56..6193cb8 100644 --- a/app/pages/Bookmarks.tsx +++ b/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 && ( )} {plannedData && plannedData.content && plannedData.content.length > 0 && ( )} {watchedData && watchedData.content && watchedData.content.length > 0 && ( )} {delayedData && delayedData.content && delayedData.content.length > 0 && ( )} @@ -86,7 +109,11 @@ export function BookmarksPage() { abandonedData.content.length > 0 && ( )} diff --git a/app/pages/BookmarksCategory.tsx b/app/pages/BookmarksCategory.tsx index 69b9846..f882bef 100644 --- a/app/pages/BookmarksCategory.tsx +++ b/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 diff --git a/app/pages/Profile.tsx b/app/pages/Profile.tsx index 9bb6bad..c9f4448 100644 --- a/app/pages/Profile.tsx +++ b/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} />

diff --git a/app/profile/[id]/bookmarks/[slug]/page.tsx b/app/profile/[id]/bookmarks/[slug]/page.tsx new file mode 100644 index 0000000..1e46bf7 --- /dev/null +++ b/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 { + 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 ( + + ); +} diff --git a/app/profile/[id]/bookmarks/page.tsx b/app/profile/[id]/bookmarks/page.tsx new file mode 100644 index 0000000..a2e5b33 --- /dev/null +++ b/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 { + 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 ; +}