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