From 9e843be11f5c6d7bcb18fe3190617e1415057b0c Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Tue, 13 Aug 2024 13:24:11 +0500 Subject: [PATCH 01/14] feat: add collections page --- app/collections/page.tsx | 10 ++ .../AddCollectionLink/AddCollectionLink.tsx | 12 +++ .../CollectionCourusel.module.css | 15 +++ .../CollectionCourusel/CollectionCourusel.tsx | 97 +++++++++++++++++ .../CollectionLink/CollectionLink.tsx | 95 +++++++++++++++++ app/components/Navbar/Navbar.tsx | 9 ++ app/pages/Collections.tsx | 100 ++++++++++++++++++ 7 files changed, 338 insertions(+) create mode 100644 app/collections/page.tsx create mode 100644 app/components/AddCollectionLink/AddCollectionLink.tsx create mode 100644 app/components/CollectionCourusel/CollectionCourusel.module.css create mode 100644 app/components/CollectionCourusel/CollectionCourusel.tsx create mode 100644 app/components/CollectionLink/CollectionLink.tsx create mode 100644 app/pages/Collections.tsx diff --git a/app/collections/page.tsx b/app/collections/page.tsx new file mode 100644 index 0000000..cd68b69 --- /dev/null +++ b/app/collections/page.tsx @@ -0,0 +1,10 @@ +import { CollectionsPage } from "#/pages/Collections"; + +export const metadata = { + title: "Коллекции", + description: "Просмотр и управление коллекциями", +} + +export default function Collections() { + return ; +} diff --git a/app/components/AddCollectionLink/AddCollectionLink.tsx b/app/components/AddCollectionLink/AddCollectionLink.tsx new file mode 100644 index 0000000..cab05fc --- /dev/null +++ b/app/components/AddCollectionLink/AddCollectionLink.tsx @@ -0,0 +1,12 @@ +import Link from "next/link"; + +export const AddCollectionLink = (props: any) => { + return ( + +
+ +

Новая коллекция

+
+ + ); +}; diff --git a/app/components/CollectionCourusel/CollectionCourusel.module.css b/app/components/CollectionCourusel/CollectionCourusel.module.css new file mode 100644 index 0000000..fce52de --- /dev/null +++ b/app/components/CollectionCourusel/CollectionCourusel.module.css @@ -0,0 +1,15 @@ +.swiper-button:global(.swiper-button-disabled) { + opacity: 0 !important; +} + +.section .swiper-button { + display: none !important; +} + +@media (hover: hover) { + .section:hover .swiper-button { + display: flex !important; + width: 64px; + height: 64px; + } +} diff --git a/app/components/CollectionCourusel/CollectionCourusel.tsx b/app/components/CollectionCourusel/CollectionCourusel.tsx new file mode 100644 index 0000000..8f1651d --- /dev/null +++ b/app/components/CollectionCourusel/CollectionCourusel.tsx @@ -0,0 +1,97 @@ +"use client"; +import { useEffect } from "react"; +import { CollectionLink } from "../CollectionLink/CollectionLink"; +import { AddCollectionLink } from "../AddCollectionLink/AddCollectionLink"; +import Link from "next/link"; + +import Styles from "./CollectionCourusel.module.css"; +import Swiper from "swiper"; +import "swiper/css"; +import "swiper/css/navigation"; +import { Navigation } from "swiper/modules"; + +export const CollectionCourusel = (props: { + sectionTitle: string; + showAllLink?: string; + content: any; + isMyCollections?: boolean; +}) => { + useEffect(() => { + const options: any = { + direction: "horizontal", + spaceBetween: 8, + allowTouchMove: true, + slidesPerView: "auto", + navigation: { + enabled: false, + nextEl: ".swiper-button-next", + prevEl: ".swiper-button-prev", + }, + breakpoints: { + 450: { + navigation: { + enabled: true, + }, + }, + }, + modules: [Navigation], + }; + new Swiper(".swiper", options); + }, []); + + return ( +
+
+

+ {props.sectionTitle} +

+ {props.showAllLink && ( + +
+

Показать все

+ +
+ + )} +
+
+
+
+ {props.content.map((collection) => { + return ( +
+
+ +
+
+ ); + })} + {props.isMyCollections && ( +
+
+ +
+
+ )} +
+
+
+
+
+
+ ); +}; diff --git a/app/components/CollectionLink/CollectionLink.tsx b/app/components/CollectionLink/CollectionLink.tsx new file mode 100644 index 0000000..0c51ab3 --- /dev/null +++ b/app/components/CollectionLink/CollectionLink.tsx @@ -0,0 +1,95 @@ +import Link from "next/link"; +import { sinceUnixDate } from "#/api/utils"; +import { Chip } from "#/components/Chip/Chip"; + +const profile_lists = { + // 0: "Не смотрю", + 1: { name: "Смотрю", bg_color: "bg-green-500" }, + 2: { name: "В планах", bg_color: "bg-purple-500" }, + 3: { name: "Просмотрено", bg_color: "bg-blue-500" }, + 4: { name: "Отложено", bg_color: "bg-yellow-500" }, + 5: { name: "Брошено", bg_color: "bg-red-500" }, +}; + +export const CollectionLink = (props: any) => { + const grade = props.grade.toFixed(1); + const profile_list_status = props.profile_list_status; + let user_list = null; + if (profile_list_status != null || profile_list_status != 0) { + user_list = profile_lists[profile_list_status]; + } + return ( + +
+
+
+ + {user_list && ( + + )} + {props.status ? ( + + ) : ( + props.status_id != 0 && ( + + ) + )} + + {props.last_view_episode && ( + + )} + {props.category && } + {props.is_favorite && ( +
+ +
+ )} +
+

+ {props.title_ru} +

+
+
+ + ); +}; diff --git a/app/components/Navbar/Navbar.tsx b/app/components/Navbar/Navbar.tsx index 2a4b9c1..9dbce8a 100644 --- a/app/components/Navbar/Navbar.tsx +++ b/app/components/Navbar/Navbar.tsx @@ -56,6 +56,15 @@ export const Navbar = () => { }, { id: 5, + icon: "material-symbols--collections-bookmark-outline", + iconActive: "material-symbols--collections-bookmark", + title: "Коллекции", + href: "/collections", + withAuthOnly: true, + mobileMenu: true, + }, + { + id: 6, icon: "material-symbols--history", iconActive: "material-symbols--history", title: "История", diff --git a/app/pages/Collections.tsx b/app/pages/Collections.tsx new file mode 100644 index 0000000..0e85376 --- /dev/null +++ b/app/pages/Collections.tsx @@ -0,0 +1,100 @@ +"use client"; +import useSWR from "swr"; +import { CollectionCourusel } from "#/components/CollectionCourusel/CollectionCourusel"; +import { Spinner } from "#/components/Spinner/Spinner"; +const fetcher = (...args: any) => + fetch([...args] as any).then((res) => res.json()); +import { useUserStore } from "#/store/auth"; +import { BookmarksList } from "#/api/utils"; +import { ENDPOINTS } from "#/api/config"; +import { useRouter } from "next/navigation"; +import { useEffect } from "react"; + +export function CollectionsPage() { + const token = useUserStore((state) => state.token); + const authState = useUserStore((state) => state.state); + const router = useRouter(); + + // function useFetchReleases(listName: string) { + // let url: string; + + // if (token) { + // url = `${ENDPOINTS.user.bookmark}/all/${BookmarksList[listName]}/0?token=${token}`; + // } + + // const { data } = useSWR(url, fetcher); + // return [data]; + // } + + // const [watchingData] = useFetchReleases("watching"); + // const [plannedData] = useFetchReleases("planned"); + // const [watchedData] = useFetchReleases("watched"); + // const [delayedData] = useFetchReleases("delayed"); + // const [abandonedData] = useFetchReleases("abandoned"); + + useEffect(() => { + if (authState === "finished" && !token) { + router.push("/login?redirect=/collections"); + } + }, [authState, token]); + + return ( +
+ + {/* {authState === "loading" && + (!watchingData || + !plannedData || + !watchedData || + !delayedData || + !abandonedData) && ( +
+ +
+ )} */} + {/* {watchingData && + watchingData.content && + 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 && ( + + )} + {abandonedData && + abandonedData.content && + abandonedData.content.length > 0 && ( + + )} */} +
+ ); +} From 9f3e1b951a7f6b4537414e1a9e728452dc814390 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Tue, 13 Aug 2024 13:32:40 +0500 Subject: [PATCH 02/14] chore: start a changelog for v3.1.0 --- public/changelog/3.1.0.md | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 public/changelog/3.1.0.md diff --git a/public/changelog/3.1.0.md b/public/changelog/3.1.0.md new file mode 100644 index 0000000..8d9bd93 --- /dev/null +++ b/public/changelog/3.1.0.md @@ -0,0 +1,10 @@ +# 3.1.0 + +## Добавлено + +- Просмотр избранных и собственных коллекций + +## Изменено + +- Вид элемента меню в навигации +- Расположение элементов навигации на мобильных устройствах теперь по середине From b6878a038665f20aa29e04f16c50e190c84ad749 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Tue, 13 Aug 2024 14:20:28 +0500 Subject: [PATCH 03/14] feat: add logged in user favorite and owned collection fetching --- app/api/config.ts | 11 ++ app/components/Chip/Chip.tsx | 17 ++- .../CollectionCourusel/CollectionCourusel.tsx | 14 +-- .../CollectionLink/CollectionLink.tsx | 87 +++------------ app/pages/Collections.tsx | 104 ++++++------------ app/store/auth.ts | 2 +- 6 files changed, 84 insertions(+), 151 deletions(-) diff --git a/app/api/config.ts b/app/api/config.ts index d75742e..1640239 100644 --- a/app/api/config.ts +++ b/app/api/config.ts @@ -21,4 +21,15 @@ export const ENDPOINTS = { addHistory: `${API_PREFIX}/history/add`, markWatched: `${API_PREFIX}/episode/watch`, }, + collection: { + base: `${API_PREFIX}/collection`, + list: `${API_PREFIX}/collection/list`, + create: `${API_PREFIX}/collectionMy/create`, + delete: `${API_PREFIX}/collectionMy/delete`, + edit: `${API_PREFIX}/collectionMy/edit`, + editImage: `${API_PREFIX}/collectionMy/editImage`, + releaseInCollections: `${API_PREFIX}/collection/all/release`, + userCollections: `${API_PREFIX}/collection/all/profile`, + favoriteCollections: `${API_PREFIX}/collectionFavorite`, + } }; diff --git a/app/components/Chip/Chip.tsx b/app/components/Chip/Chip.tsx index c3c9e5e..197aa49 100644 --- a/app/components/Chip/Chip.tsx +++ b/app/components/Chip/Chip.tsx @@ -1,12 +1,25 @@ export const Chip = (props: { + icon_name?: string; + icon_color?: string; name?: string; name_2?: string; devider?: string; bg_color?: string; }) => { return ( -
-

+

+ {props.icon_name && ( + + )} +

{props.name} {props.name && props.devider ? props.devider : " "} {props.name_2} diff --git a/app/components/CollectionCourusel/CollectionCourusel.tsx b/app/components/CollectionCourusel/CollectionCourusel.tsx index 8f1651d..c3b920e 100644 --- a/app/components/CollectionCourusel/CollectionCourusel.tsx +++ b/app/components/CollectionCourusel/CollectionCourusel.tsx @@ -57,6 +57,13 @@ export const CollectionCourusel = (props: {

+ {props.isMyCollections && ( +
+
+ +
+
+ )} {props.content.map((collection) => { return (
); })} - {props.isMyCollections && ( -
-
- -
-
- )}
{ - const grade = props.grade.toFixed(1); - const profile_list_status = props.profile_list_status; - let user_list = null; - if (profile_list_status != null || profile_list_status != 0) { - user_list = profile_lists[profile_list_status]; - } return ( - +
-
+ }} + >
- - {user_list && ( - - )} - {props.status ? ( - - ) : ( - props.status_id != 0 && ( - - ) - )} - - {props.last_view_episode && ( - - )} - {props.category && } {props.is_favorite && (
)} + {props.is_private && ( +
+ +
+ )} + +

- {props.title_ru} + {props.title}

diff --git a/app/pages/Collections.tsx b/app/pages/Collections.tsx index 0e85376..07ba00b 100644 --- a/app/pages/Collections.tsx +++ b/app/pages/Collections.tsx @@ -5,96 +5,64 @@ import { Spinner } from "#/components/Spinner/Spinner"; const fetcher = (...args: any) => fetch([...args] as any).then((res) => res.json()); import { useUserStore } from "#/store/auth"; -import { BookmarksList } from "#/api/utils"; import { ENDPOINTS } from "#/api/config"; import { useRouter } from "next/navigation"; import { useEffect } from "react"; export function CollectionsPage() { - const token = useUserStore((state) => state.token); - const authState = useUserStore((state) => state.state); + const userStore = useUserStore(); const router = useRouter(); - // function useFetchReleases(listName: string) { - // let url: string; + function useFetchReleases(section: string) { + let url: string; - // if (token) { - // url = `${ENDPOINTS.user.bookmark}/all/${BookmarksList[listName]}/0?token=${token}`; - // } + if (userStore.token && userStore.user) { + if (section == "userCollections") { + url = `${ENDPOINTS.collection.userCollections}/${userStore.user.id}/0?token=${userStore.token}`; + } else if (section == "userFavoriteCollections") { + url = `${ENDPOINTS.collection.favoriteCollections}/all/0?token=${userStore.token}`; + } + } - // const { data } = useSWR(url, fetcher); - // return [data]; - // } + const { data } = useSWR(url, fetcher); + return [data]; + } - // const [watchingData] = useFetchReleases("watching"); - // const [plannedData] = useFetchReleases("planned"); - // const [watchedData] = useFetchReleases("watched"); - // const [delayedData] = useFetchReleases("delayed"); - // const [abandonedData] = useFetchReleases("abandoned"); + const [userCollections] = useFetchReleases("userCollections"); + const [favoriteCollections] = useFetchReleases("userFavoriteCollections"); useEffect(() => { - if (authState === "finished" && !token) { + if (userStore.state === "finished" && !userStore.token) { router.push("/login?redirect=/collections"); } - }, [authState, token]); + }, [userStore.state, userStore.token]); return (
- - {/* {authState === "loading" && - (!watchingData || - !plannedData || - !watchedData || - !delayedData || - !abandonedData) && ( + {userStore.state === "loading" && + (!userCollections || !favoriteCollections) && (
- )} */} - {/* {watchingData && - watchingData.content && - watchingData.content.length > 0 && ( - + )} + {favoriteCollections && + favoriteCollections.content && + favoriteCollections.content.length > 0 && ( + )} - {plannedData && plannedData.content && plannedData.content.length > 0 && ( - - )} - {watchedData && watchedData.content && watchedData.content.length > 0 && ( - - )} - {delayedData && delayedData.content && delayedData.content.length > 0 && ( - - )} - {abandonedData && - abandonedData.content && - abandonedData.content.length > 0 && ( - - )} */}
); } diff --git a/app/store/auth.ts b/app/store/auth.ts index 2c3ab47..9af7b5b 100644 --- a/app/store/auth.ts +++ b/app/store/auth.ts @@ -5,7 +5,7 @@ import { getJWT, removeJWT, fetchDataViaGet } from "#/api/utils"; interface userState { _hasHydrated: boolean; isAuth: boolean; - user: Object | null; + user: any | null; token: string | null; state: string; login: (user: Object, token: string) => void; From c1204473ec59d71e45a642f0387cd1a0596c10f4 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Tue, 13 Aug 2024 14:31:45 +0500 Subject: [PATCH 04/14] fix: Chip icon is too big on mobile --- app/components/Chip/Chip.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/app/components/Chip/Chip.tsx b/app/components/Chip/Chip.tsx index 197aa49..f8282f0 100644 --- a/app/components/Chip/Chip.tsx +++ b/app/components/Chip/Chip.tsx @@ -14,9 +14,13 @@ export const Chip = (props: { > {props.icon_name && ( )}

From 3de552f271f1cbaee5de8ca922edfbf645dce271 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Tue, 13 Aug 2024 17:14:32 +0500 Subject: [PATCH 05/14] feat: add viewing of all collections of users, releases and favorite collections --- app/collections/favorites/page.tsx | 10 ++ .../CollectionLink/CollectionLink.tsx | 14 +-- .../CollectionsSection/CollectionsSection.tsx | 33 +++++ app/pages/CollectionsFull.tsx | 116 ++++++++++++++++++ app/profile/[id]/collections/page.tsx | 42 +++++++ app/release/[id]/collections/page.tsx | 40 ++++++ 6 files changed, 248 insertions(+), 7 deletions(-) create mode 100644 app/collections/favorites/page.tsx create mode 100644 app/components/CollectionsSection/CollectionsSection.tsx create mode 100644 app/pages/CollectionsFull.tsx create mode 100644 app/profile/[id]/collections/page.tsx create mode 100644 app/release/[id]/collections/page.tsx diff --git a/app/collections/favorites/page.tsx b/app/collections/favorites/page.tsx new file mode 100644 index 0000000..628070e --- /dev/null +++ b/app/collections/favorites/page.tsx @@ -0,0 +1,10 @@ +import { CollectionsFullPage } from "#/pages/CollectionsFull"; + +export const metadata = { + title: "Избранные коллекции", + description: "Просмотр избранных коллекций", +}; + +export default function Collections() { + return ; +} diff --git a/app/components/CollectionLink/CollectionLink.tsx b/app/components/CollectionLink/CollectionLink.tsx index e60caca..d760eb4 100644 --- a/app/components/CollectionLink/CollectionLink.tsx +++ b/app/components/CollectionLink/CollectionLink.tsx @@ -13,18 +13,18 @@ export const CollectionLink = (props: any) => { }} >

- {props.is_favorite && ( -
- -
- )} + + {props.is_private && (
)} - - + {props.is_favorite && ( +
+ +
+ )}

{props.title} diff --git a/app/components/CollectionsSection/CollectionsSection.tsx b/app/components/CollectionsSection/CollectionsSection.tsx new file mode 100644 index 0000000..c7b0775 --- /dev/null +++ b/app/components/CollectionsSection/CollectionsSection.tsx @@ -0,0 +1,33 @@ +import { CollectionLink } from "../CollectionLink/CollectionLink"; +import { AddCollectionLink } from "../AddCollectionLink/AddCollectionLink"; + +export const CollectionsSection = (props: { + sectionTitle?: string; + content: any; + isMyCollections?: boolean; +}) => { + return ( +

+ {props.sectionTitle && ( +
+

+ {props.sectionTitle} +

+
+ )} +
+
+ {props.isMyCollections && } + {props.content.map((collection) => { + return ( +
+ +
+ ); + })} + {props.content.length == 1 && !props.isMyCollections &&
} +
+
+
+ ); +}; diff --git a/app/pages/CollectionsFull.tsx b/app/pages/CollectionsFull.tsx new file mode 100644 index 0000000..5fce7b2 --- /dev/null +++ b/app/pages/CollectionsFull.tsx @@ -0,0 +1,116 @@ +"use client"; +import useSWRInfinite from "swr/infinite"; +import { CollectionsSection } from "#/components/CollectionsSection/CollectionsSection"; +import { Spinner } from "#/components/Spinner/Spinner"; +import { useState, useEffect } from "react"; +import { useScrollPosition } from "#/hooks/useScrollPosition"; +import { useUserStore } from "../store/auth"; +import { Button } from "flowbite-react"; +import { ENDPOINTS } from "#/api/config"; +import { useRouter } from "next/navigation"; + +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 function CollectionsFullPage(props: { + type: "favorites" | "profile" | "release"; + title: string; + profile_id?: number; + release_id?: number; +}) { + const userStore = useUserStore(); + const [isLoadingEnd, setIsLoadingEnd] = useState(false); + const router = useRouter(); + + const getKey = (pageIndex: number, previousPageData: any) => { + if (previousPageData && !previousPageData.content.length) return null; + if (userStore.token) { + if (props.type == "favorites") { + return `${ENDPOINTS.collection.favoriteCollections}/all/${pageIndex}?token=${userStore.token}`; + } else if (props.type == "profile") { + return `${ENDPOINTS.collection.userCollections}/${props.profile_id}/${pageIndex}?token=${userStore.token}`; + } else if (props.type == "release") { + return `${ENDPOINTS.collection.releaseInCollections}/${props.release_id}/${pageIndex}?token=${userStore.token}`; + } + } + }; + + const { data, error, isLoading, size, setSize } = useSWRInfinite( + getKey, + fetcher, + { initialSize: 2 } + ); + + const [content, setContent] = useState(null); + useEffect(() => { + if (data) { + let allReleases = []; + for (let i = 0; i < data.length; i++) { + allReleases.push(...data[i].content); + } + setContent(allReleases); + setIsLoadingEnd(true); + } + }, [data]); + + const scrollPosition = useScrollPosition(); + useEffect(() => { + if (scrollPosition >= 98 && scrollPosition <= 99) { + setSize(size + 1); + } + }, [scrollPosition]); + + useEffect(() => { + if (userStore.state === "finished" && !userStore.token) { + router.push(`/login?redirect=/collections/favorites`); + } + }, [userStore.state, userStore.token]); + + return ( +
+ {content && content.length > 0 ? ( + + ) : !isLoadingEnd || isLoading ? ( +
+ +
+ ) : ( +
+ +

Тут пока ничего нет...

+
+ )} + {data && + data[data.length - 1].current_page < + data[data.length - 1].total_page_count && ( + + )} +
+ ); +} diff --git a/app/profile/[id]/collections/page.tsx b/app/profile/[id]/collections/page.tsx new file mode 100644 index 0000000..3f91c2b --- /dev/null +++ b/app/profile/[id]/collections/page.tsx @@ -0,0 +1,42 @@ +import { CollectionsFullPage } from "#/pages/CollectionsFull"; +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 async function Collections({ params }) { + const profile: any = await fetchDataViaGet( + `https://api.anixart.tv/profile/${params.id}` + ); + return ( + + ); +} diff --git a/app/release/[id]/collections/page.tsx b/app/release/[id]/collections/page.tsx new file mode 100644 index 0000000..09d9097 --- /dev/null +++ b/app/release/[id]/collections/page.tsx @@ -0,0 +1,40 @@ +import { CollectionsFullPage } from "#/pages/CollectionsFull"; +import { fetchDataViaGet } from "#/api/utils"; +import type { Metadata, ResolvingMetadata } from "next"; + +export async function generateMetadata( + { params }, + parent: ResolvingMetadata +): Promise { + const id = params.id; + const release = await fetchDataViaGet(`https://api.anixart.tv/release/${id}`); + const previousOG = (await parent).openGraph; + + return { + title: release.release.title_ru + " - в коллекциях", + description: release.release.description, + openGraph: { + ...previousOG, + images: [ + { + url: release.release.image, // Must be an absolute URL + width: 600, + height: 800, + }, + ], + }, + }; +} + +export default async function Collections({ params }) { + const release: any = await fetchDataViaGet( + `https://api.anixart.tv/release/${params.id}` + ); + return ( + + ); +} From 9a5d1eb6bd8bc1150bbbd2d644db299ed9655f63 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Wed, 14 Aug 2024 14:54:21 +0500 Subject: [PATCH 06/14] feat: add view of release name, description, image, author, releases in lists and releases in collection --- app/collection/[id]/page.tsx | 33 +++++ .../CollectionInfo/CollectionInfo.Basics.tsx | 47 +++++++ .../CollectionInfo/CollectionInfoLists.tsx | 58 +++++++++ app/pages/ViewCollection.tsx | 118 ++++++++++++++++++ 4 files changed, 256 insertions(+) create mode 100644 app/collection/[id]/page.tsx create mode 100644 app/components/CollectionInfo/CollectionInfo.Basics.tsx create mode 100644 app/components/CollectionInfo/CollectionInfoLists.tsx create mode 100644 app/pages/ViewCollection.tsx diff --git a/app/collection/[id]/page.tsx b/app/collection/[id]/page.tsx new file mode 100644 index 0000000..b29a028 --- /dev/null +++ b/app/collection/[id]/page.tsx @@ -0,0 +1,33 @@ +import { ViewCollectionPage } from "#/pages/ViewCollection"; +import { fetchDataViaGet } from "#/api/utils"; +import type { Metadata, ResolvingMetadata } from "next"; + +export async function generateMetadata( + { params }, + parent: ResolvingMetadata +): Promise { + const id = params.id; + const collection = await fetchDataViaGet( + `https://api.anixart.tv/collection/${id}` + ); + const previousOG = (await parent).openGraph; + + return { + title: "коллекция - " + collection.collection.title, + description: collection.collection.description, + openGraph: { + ...previousOG, + images: [ + { + url: collection.collection.image, // Must be an absolute URL + width: 600, + height: 800, + }, + ], + }, + }; +} + +export default async function Collections({ params }) { + return ; +} diff --git a/app/components/CollectionInfo/CollectionInfo.Basics.tsx b/app/components/CollectionInfo/CollectionInfo.Basics.tsx new file mode 100644 index 0000000..6bc0d7b --- /dev/null +++ b/app/components/CollectionInfo/CollectionInfo.Basics.tsx @@ -0,0 +1,47 @@ +import { Card, Button, Avatar } from "flowbite-react"; +import { useState } from "react"; +import { unixToDate } from "#/api/utils"; +import Link from "next/link"; + +export const CollectionInfoBasics = (props: { + image: string; + title: string; + description: string; + authorAvatar: string; + authorLogin: string; + authorId: number; + creationDate: number; + updateDate: number; +}) => { + return ( + +
+
+

создана: {unixToDate(props.creationDate, "full")}

+

обновлена: {unixToDate(props.updateDate, "full")}

+
+ + +
+
{props.authorLogin}
+
Автор
+
+ + +
+
+ +
+
+

{props.title}

+

{props.description}

+
+ + ); +}; diff --git a/app/components/CollectionInfo/CollectionInfoLists.tsx b/app/components/CollectionInfo/CollectionInfoLists.tsx new file mode 100644 index 0000000..bcd64a7 --- /dev/null +++ b/app/components/CollectionInfo/CollectionInfoLists.tsx @@ -0,0 +1,58 @@ +import { Card } from "flowbite-react"; + +export const CollectionInfoLists = (props: { + completed: number; + planned: number; + abandoned: number; + delayed: number; + watching: number; + total: number; +}) => { + return ( + +
+
+
+
+
+
+
+
+
+

+ + Смотрю {props.watching} +

+

+ + В планах {props.planned} +

+

+ + Просмотрено {props.completed} +

+

+ + Отложено {props.delayed} +

+

+ + Брошено {props.abandoned} +

+
+ + ); +}; diff --git a/app/pages/ViewCollection.tsx b/app/pages/ViewCollection.tsx new file mode 100644 index 0000000..f724c0f --- /dev/null +++ b/app/pages/ViewCollection.tsx @@ -0,0 +1,118 @@ +"use client"; +import useSWRInfinite from "swr/infinite"; +import useSWR from "swr"; +import { Spinner } from "#/components/Spinner/Spinner"; +import { useState, useEffect } from "react"; +import { useScrollPosition } from "#/hooks/useScrollPosition"; +import { useUserStore } from "../store/auth"; +import { Button, Card } from "flowbite-react"; +import { ENDPOINTS } from "#/api/config"; +import { useRouter } from "next/navigation"; +import { ReleaseSection } from "#/components/ReleaseSection/ReleaseSection"; + +import { CollectionInfoBasics } from "#/components/CollectionInfo/CollectionInfo.Basics"; +import { CollectionInfoLists } from "#/components/CollectionInfo/CollectionInfoLists"; + +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 ViewCollectionPage = (props: { id: number }) => { + const userStore = useUserStore(); + const [isLoadingEnd, setIsLoadingEnd] = useState(false); + const router = useRouter(); + + function useFetchCollectionInfo() { + let url: string = `${ENDPOINTS.collection.base}/${props.id}`; + + if (userStore.token) { + url += `?token=${userStore.token}`; + } + + const { data, isLoading } = useSWR(url, fetcher); + return [data, isLoading]; + } + const getKey = (pageIndex: number, previousPageData: any) => { + if (previousPageData && !previousPageData.content.length) return null; + let url: string = `${ENDPOINTS.collection.base}/${props.id}/releases/${pageIndex}`; + if (userStore.token) { + url += `?token=${userStore.token}`; + } + return url; + }; + + const [collectionInfo, collectionInfoIsLoading] = useFetchCollectionInfo(); + + const { data, error, isLoading, size, setSize } = useSWRInfinite( + getKey, + fetcher, + { initialSize: 2 } + ); + + const [content, setContent] = useState(null); + useEffect(() => { + if (data) { + let allReleases = []; + for (let i = 0; i < data.length; i++) { + allReleases.push(...data[i].content); + } + setContent(allReleases); + setIsLoadingEnd(true); + } + }, [data]); + + const scrollPosition = useScrollPosition(); + useEffect(() => { + if (scrollPosition >= 98 && scrollPosition <= 99) { + setSize(size + 1); + } + }, [scrollPosition]); + + return ( +
+ {collectionInfoIsLoading ? ( + + ) : ( + <> +
+ + {userStore.token && !isLoading && ( + + )} +
+ {isLoading || !content || !isLoadingEnd ? ( + + ) : ( + + )} + + )} +
+ ); +}; From 82e38f02b42331870b301d3c7d0d1d70973f6664 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Wed, 14 Aug 2024 16:24:03 +0500 Subject: [PATCH 07/14] feat: add collection favorite button and delete button if own collection fix: private collection loading fix: wrong lists bar percentages --- app/collection/[id]/page.tsx | 8 +- .../CollectionInfo/CollectionInfo.Basics.tsx | 2 +- .../CollectionInfo/CollectionInfoControls.tsx | 72 ++++++++++++++++++ .../CollectionInfo/CollectionInfoLists.tsx | 4 +- .../ReleaseSection/ReleaseSection.tsx | 6 +- app/pages/ViewCollection.tsx | 74 ++++++++++++------- 6 files changed, 131 insertions(+), 35 deletions(-) create mode 100644 app/components/CollectionInfo/CollectionInfoControls.tsx diff --git a/app/collection/[id]/page.tsx b/app/collection/[id]/page.tsx index b29a028..0399d30 100644 --- a/app/collection/[id]/page.tsx +++ b/app/collection/[id]/page.tsx @@ -13,13 +13,15 @@ export async function generateMetadata( const previousOG = (await parent).openGraph; return { - title: "коллекция - " + collection.collection.title, - description: collection.collection.description, + title: collection.collection + ? "коллекция - " + collection.collection.title + : "Приватная коллекция", + description: collection.collection && collection.collection.description, openGraph: { ...previousOG, images: [ { - url: collection.collection.image, // Must be an absolute URL + url: collection.collection && collection.collection.image, // Must be an absolute URL width: 600, height: 800, }, diff --git a/app/components/CollectionInfo/CollectionInfo.Basics.tsx b/app/components/CollectionInfo/CollectionInfo.Basics.tsx index 6bc0d7b..6513735 100644 --- a/app/components/CollectionInfo/CollectionInfo.Basics.tsx +++ b/app/components/CollectionInfo/CollectionInfo.Basics.tsx @@ -14,7 +14,7 @@ export const CollectionInfoBasics = (props: { updateDate: number; }) => { return ( - +

создана: {unixToDate(props.creationDate, "full")}

diff --git a/app/components/CollectionInfo/CollectionInfoControls.tsx b/app/components/CollectionInfo/CollectionInfoControls.tsx new file mode 100644 index 0000000..38324ef --- /dev/null +++ b/app/components/CollectionInfo/CollectionInfoControls.tsx @@ -0,0 +1,72 @@ +"use client"; +import { Card, Button } from "flowbite-react"; +import { useState } from "react"; +import { useUserStore } from "#/store/auth"; +import { ENDPOINTS } from "#/api/config"; +import { useRouter } from "next/navigation"; + +export const CollectionInfoControls = (props: { + isFavorite: boolean; + id: number; + authorId: number; + isPrivate: boolean; +}) => { + const [isFavorite, setIsFavorite] = useState(props.isFavorite); + const userStore = useUserStore(); + const router = useRouter(); + + async function _addToFavorite() { + if (userStore.user) { + setIsFavorite(!isFavorite); + if (isFavorite) { + fetch( + `${ENDPOINTS.collection.favoriteCollections}/delete/${props.id}?token=${userStore.token}` + ); + } else { + fetch( + `${ENDPOINTS.collection.favoriteCollections}/add/${props.id}?token=${userStore.token}` + ); + } + } + } + + async function _deleteCollection() { + if (userStore.user) { + fetch( + `${ENDPOINTS.collection.delete}/${props.id}?token=${userStore.token}` + ); + router.push("/collections"); + } + } + + return ( + + + {props.isPrivate && ( +

Это приватная коллекция, доступ к ней имеете только вы

+ )} + {userStore.user && userStore.user.id == props.authorId && ( +
+ + +
+ )} + + ); +}; diff --git a/app/components/CollectionInfo/CollectionInfoLists.tsx b/app/components/CollectionInfo/CollectionInfoLists.tsx index bcd64a7..e65b8c3 100644 --- a/app/components/CollectionInfo/CollectionInfoLists.tsx +++ b/app/components/CollectionInfo/CollectionInfoLists.tsx @@ -9,7 +9,7 @@ export const CollectionInfoLists = (props: { total: number; }) => { return ( - +
diff --git a/app/components/ReleaseSection/ReleaseSection.tsx b/app/components/ReleaseSection/ReleaseSection.tsx index b619a46..c1642db 100644 --- a/app/components/ReleaseSection/ReleaseSection.tsx +++ b/app/components/ReleaseSection/ReleaseSection.tsx @@ -1,6 +1,9 @@ import { ReleaseLink } from "../ReleaseLink/ReleaseLink"; -export const ReleaseSection = (props: {sectionTitle?: string, content: any}) => { +export const ReleaseSection = (props: { + sectionTitle?: string; + content: any; +}) => { return (
{props.sectionTitle && ( @@ -19,6 +22,7 @@ export const ReleaseSection = (props: {sectionTitle?: string, content: any}) =>
); })} + {props.content.length == 1 &&
}
diff --git a/app/pages/ViewCollection.tsx b/app/pages/ViewCollection.tsx index f724c0f..2852bae 100644 --- a/app/pages/ViewCollection.tsx +++ b/app/pages/ViewCollection.tsx @@ -12,6 +12,7 @@ import { ReleaseSection } from "#/components/ReleaseSection/ReleaseSection"; import { CollectionInfoBasics } from "#/components/CollectionInfo/CollectionInfo.Basics"; import { CollectionInfoLists } from "#/components/CollectionInfo/CollectionInfoLists"; +import { CollectionInfoControls } from "#/components/CollectionInfo/CollectionInfoControls"; const fetcher = async (url: string) => { const res = await fetch(url); @@ -81,37 +82,54 @@ export const ViewCollectionPage = (props: { id: number }) => { return (
{collectionInfoIsLoading ? ( - +
+ +
) : ( - <> -
- - {userStore.token && !isLoading && ( - +
+ + {userStore.token && !isLoading && ( +
+ + +
+ )} +
+ {isLoading || !content || !isLoadingEnd ? ( +
+ +
+ ) : ( + )} -
- {isLoading || !content || !isLoadingEnd ? ( - - ) : ( - - )} - + + ) )}
); From b46dc367cbd48d79c4b009452ad185415cce90fa Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Wed, 14 Aug 2024 16:26:34 +0500 Subject: [PATCH 08/14] chore: update TODO.md and changelog for 3.1.0 --- TODO.md | 3 +-- public/changelog/3.1.0.md | 3 +++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/TODO.md b/TODO.md index 44f20c0..687f05f 100644 --- a/TODO.md +++ b/TODO.md @@ -17,9 +17,8 @@ ### Коллекции - [ ] Создание коллекции -- [ ] Просмотр страницы коллекции +- [ ] Редактирование коллекции - [ ] Добавление \ Удаление аниме в\из коллекции -- [ ] Добавление \ Удаление коллекции в\из избранное - [ ] Просмотр комментариев и комментирование ### Страница аниме тайтла diff --git a/public/changelog/3.1.0.md b/public/changelog/3.1.0.md index 8d9bd93..b0b7df9 100644 --- a/public/changelog/3.1.0.md +++ b/public/changelog/3.1.0.md @@ -3,6 +3,9 @@ ## Добавлено - Просмотр избранных и собственных коллекций +- Просмотр страницы коллекции +- Добавление коллекции в избранное +- Управление своей коллекцией ## Изменено From 2e64548f7a82a4dbda1fff784b2cede6395ca854 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Thu, 15 Aug 2024 14:06:42 +0500 Subject: [PATCH 09/14] feat: add state to inputs for create new collection page --- app/collections/create/page.tsx | 18 ++ .../AddCollectionLink/AddCollectionLink.tsx | 2 +- .../CollectionInfo/CollectionInfoControls.tsx | 12 +- app/pages/CreateCollection.tsx | 203 ++++++++++++++++++ 4 files changed, 231 insertions(+), 4 deletions(-) create mode 100644 app/collections/create/page.tsx create mode 100644 app/pages/CreateCollection.tsx diff --git a/app/collections/create/page.tsx b/app/collections/create/page.tsx new file mode 100644 index 0000000..02bedb3 --- /dev/null +++ b/app/collections/create/page.tsx @@ -0,0 +1,18 @@ +import { CreateCollectionPage } from "#/pages/CreateCollection"; +import dynamic from "next/dynamic"; + +export const metadata = { + title: "Создание коллекции", + description: "Создание новой коллекции", +}; + +const CreateCollectionDynamic = dynamic( + () => Promise.resolve(CreateCollectionPage), + { + ssr: false, + } +); + +export default function Collections() { + return ; +} diff --git a/app/components/AddCollectionLink/AddCollectionLink.tsx b/app/components/AddCollectionLink/AddCollectionLink.tsx index cab05fc..e33d590 100644 --- a/app/components/AddCollectionLink/AddCollectionLink.tsx +++ b/app/components/AddCollectionLink/AddCollectionLink.tsx @@ -2,7 +2,7 @@ import Link from "next/link"; export const AddCollectionLink = (props: any) => { return ( - +

Новая коллекция

diff --git a/app/components/CollectionInfo/CollectionInfoControls.tsx b/app/components/CollectionInfo/CollectionInfoControls.tsx index 38324ef..ccbe41f 100644 --- a/app/components/CollectionInfo/CollectionInfoControls.tsx +++ b/app/components/CollectionInfo/CollectionInfoControls.tsx @@ -54,8 +54,14 @@ export const CollectionInfoControls = (props: { )} {userStore.user && userStore.user.id == props.authorId && (
-
)} diff --git a/app/pages/CreateCollection.tsx b/app/pages/CreateCollection.tsx new file mode 100644 index 0000000..38b3904 --- /dev/null +++ b/app/pages/CreateCollection.tsx @@ -0,0 +1,203 @@ +"use client"; +import { useUserStore } from "#/store/auth"; +import { useEffect, useState } from "react"; +import { useSearchParams, useRouter } from "next/navigation"; +import { ENDPOINTS } from "#/api/config"; +import { + Card, + Button, + Checkbox, + TextInput, + Textarea, + FileInput, + Label, +} from "flowbite-react"; + +export const CreateCollectionPage = () => { + const userStore = useUserStore(); + const searchParams = useSearchParams(); + const router = useRouter(); + + const [edit, setEdit] = useState(false); + + const [imageData, setImageData] = useState(null); + const [imageUrl, setImageUrl] = useState(null); + const [isPrivate, setIsPrivate] = useState(false); + const [collectionInfo, setCollectionInfo] = useState({ + title: "", + description: "", + }); + + const collection_id = searchParams.get("id") || null; + const mode = searchParams.get("mode") || null; + + useEffect(() => { + async function _checkMode() { + if (mode === "edit" && collection_id) { + const res = await fetch( + `${ENDPOINTS.collection.base}/${collection_id}?token=${userStore.token}` + ); + const data = await res.json(); + + if ( + mode === "edit" && + userStore.user.id == data.collection.creator.id + ) { + setEdit(true); + } + } + } + if (userStore.user) { + _checkMode(); + } + }, [userStore.user]); + + const handleFileRead = (e, fileReader, type) => { + const content = fileReader.result; + if (type === "URL") { + setImageUrl(content); + } else { + setImageData(content); + } + }; + + const handleFilePreview = (file) => { + const fileReader = new FileReader(); + fileReader.onloadend = (e) => { + handleFileRead(e, fileReader, "URL"); + }; + fileReader.readAsDataURL(file); + }; + + const handleFileLoad = (file) => { + const fileReader = new FileReader(); + fileReader.onloadend = (e) => { + handleFileRead(e, fileReader, "TEXT"); + }; + fileReader.readAsText(file); + }; + + function handleInput(e) { + setCollectionInfo({ + ...collectionInfo, + [e.target.name]: e.target.value, + }); + } + + function submit(e) { + e.preventDefault(); + console.log({ + ...collectionInfo, + private: isPrivate, + image: imageData, + }); + } + + return ( +
+ +

+ {edit ? "Редактирование коллекции" : "Создание коллекции"} +

+
submit(e)} + > + +
+
+
+ handleInput(e)} + value={collectionInfo.title} + /> +
+
+