diff --git a/TODO.md b/TODO.md index 338c4f1..31f42dc 100644 --- a/TODO.md +++ b/TODO.md @@ -24,13 +24,9 @@ ### Профиль -- [ ] Оценки релизов -- [ ] Динамика просмотра серий -- [ ] Значки команд озвучки\перевода и т.д. - [ ] Просмотр комментариев пользователя к релизам и коллекциям. - [ ] Редактирование профиля. -- [ ] Уважение настроек приватности пользователя. -- [ ] Добавление друзей. +- [ ] Просмотр всех оценок ## Баги diff --git a/app/api/utils.ts b/app/api/utils.ts index 39d963a..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) => { @@ -172,18 +177,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/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 && ( 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; + is_me_blocked: boolean; + is_blocked: boolean; +}) => { + const router = useRouter(); + 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; + + if (num == null) { + return null; + } + let z = true; + if (num == 2) { + return 1; + } + let z3 = + (num == 0 && profileIdIsSmaller) || (num == 1 && !profileIdIsSmaller); + if ((num != 1 || profileIdIsSmaller) && (num != 0 || !profileIdIsSmaller)) { + 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); + setBlockRequestDisabled(true); + + FriendStatus == 1 + ? (url += "/remove/") + : isRequestedStatus + ? (url += "/remove/") + : (url += "/send/"); + + url += `${props.profile_id}?token=${props.token}`; + fetch(url).then((res) => { + mutate( + `${ENDPOINTS.user.profile}/${props.profile_id}?token=${props.token}` + ); + setTimeout(() => { + setBlockRequestDisabled(false); + setFriendRequestDisabled(false); + }, 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) => { + mutate( + `${ENDPOINTS.user.profile}/${props.profile_id}?token=${props.token}` + ); + setTimeout(() => { + setBlockRequestDisabled(false); + setFriendRequestDisabled(false); + }, 100); + }); + } + + return ( + + {isRequestedStatus != null && !isRequestedStatus && FriendStatus != 1 && ( +

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

+ )} +
+ {props.isMyProfile && } + {!props.isMyProfile && ( + <> + {(!props.isFriendRequestsDisallowed || + FriendStatus == 1 || + isRequestedStatus) && + !props.is_me_blocked && + !props.is_blocked && ( + + )} + + + )} +
+ + ); +}; diff --git a/app/components/Profile/Profile.Activity.tsx b/app/components/Profile/Profile.Activity.tsx new file mode 100644 index 0000000..8768363 --- /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/components/Profile/Profile.PrivacyBanner.tsx b/app/components/Profile/Profile.PrivacyBanner.tsx new file mode 100644 index 0000000..cc99ff5 --- /dev/null +++ b/app/components/Profile/Profile.PrivacyBanner.tsx @@ -0,0 +1,26 @@ +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.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 new file mode 100644 index 0000000..688d08c --- /dev/null +++ b/app/components/Profile/Profile.ReleaseRatings.tsx @@ -0,0 +1,67 @@ +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"; +import Link from "next/link"; + +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 new file mode 100644 index 0000000..721adc8 --- /dev/null +++ b/app/components/Profile/Profile.Stats.tsx @@ -0,0 +1,110 @@ +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; + profile_id: 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 new file mode 100644 index 0000000..2cdaa99 --- /dev/null +++ b/app/components/Profile/Profile.User.tsx @@ -0,0 +1,145 @@ +"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; + }[]; + }; + rating: number; +}) => { + const router = useRouter(); + 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}{" "} + 0 + ? "border-green-500 text-green-500" + : "border-red-500 text-red-500" + }`} + > + {props.rating} + +
+
+ {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/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 new file mode 100644 index 0000000..c7625f7 --- /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, "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/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/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 def785a..c9f4448 100644 --- a/app/pages/Profile.tsx +++ b/app/pages/Profile.tsx @@ -2,30 +2,50 @@ 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"; +import useSWR from "swr"; + +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"; +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"; + +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((state) => state); + 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 ( @@ -47,13 +67,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 +84,124 @@ 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} -

-
+ <> +
+ + +
+
+
+ + {!user.is_counts_hidden && ( + + )} + {!user.is_stats_hidden && ( +
+ {user.votes && user.votes.length > 0 && ( + + )} + {user.history && user.history.length > 0 && ( + + )} +
+ )}
- )} - -
- - {hasChips && ( -
- {isMyProfile && ( - - )} - {user.is_blocked && ( - - )} - {user.is_verified && ( - - )} -
+
+ {authUser.token && ( + )} - -
-
{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 ( - - ); - })} -
+ {!user.is_stats_hidden && ( + <> + + +
+ {user.votes && user.votes.length > 0 && ( + + )} + {user.history && user.history.length > 0 && ( + + )} +
+ )} - -
- -

Активность

- - - - - Регистрация - - - {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/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 ; +} 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: {