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/app/api/[...endpoint]/route.ts b/app/api/[...endpoint]/route.ts index a67d193..aa44bdd 100644 --- a/app/api/[...endpoint]/route.ts +++ b/app/api/[...endpoint]/route.ts @@ -1,6 +1,7 @@ import { NextResponse, NextRequest } from "next/server"; import { fetchDataViaGet, fetchDataViaPost } from "../utils"; import { API_URL } from "../config"; +import { buffer } from "stream/consumers"; export async function GET( req: NextRequest, @@ -25,14 +26,24 @@ export async function POST( ) { const { endpoint } = params; let API_V2: boolean | string = - req.nextUrl.searchParams.get("API_V2") || false; + req.nextUrl.searchParams.get("API_V2") || false; if (API_V2 === "true") { req.nextUrl.searchParams.delete("API_V2"); } const query = req.nextUrl.searchParams.toString(); const url = `${API_URL}/${endpoint.join("/")}${query ? `?${query}` : ""}`; - const body = JSON.stringify( await req.json()); + let body; + const ReqContentTypeHeader = req.headers.get("Content-Type") || ""; + let ResContentTypeHeader = ""; - const response = await fetchDataViaPost(url, body, API_V2); + if (ReqContentTypeHeader.split(";")[0] == "multipart/form-data") { + ResContentTypeHeader = ReqContentTypeHeader; + body = await req.arrayBuffer(); + } else { + ResContentTypeHeader = "application/json; charset=UTF-8"; + body = JSON.stringify(await req.json()); + } + + const response = await fetchDataViaPost(url, body, API_V2, ResContentTypeHeader); return NextResponse.json(response); } 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/api/utils.ts b/app/api/utils.ts index 0c27799..8066017 100644 --- a/app/api/utils.ts +++ b/app/api/utils.ts @@ -28,11 +28,16 @@ export const fetchDataViaGet = async ( export const fetchDataViaPost = async ( url: string, body: string, - API_V2: string | boolean = false + API_V2: string | boolean = false, + contentType: string = "" ) => { if (API_V2) { HEADERS["API-Version"] = "v2"; } + if (contentType != "") { + HEADERS["Content-Type"] = contentType; + } + try { const response = await fetch(url, { method: "POST", @@ -116,8 +121,22 @@ const months = [ export function unixToDate(unix: number, type: string = "short") { const date = new Date(unix * 1000); - if (type === "short") return date.getDate() + " " + months[date.getMonth()] + " " + date.getFullYear(); - if (type === "full") return date.getDate() + " " + months[date.getMonth()] + " " + date.getFullYear() + ", " + date.getHours() + ":" + date.getMinutes(); + if (type === "short") + return ( + date.getDate() + " " + months[date.getMonth()] + " " + date.getFullYear() + ); + if (type === "full") + return ( + date.getDate() + + " " + + months[date.getMonth()] + + " " + + date.getFullYear() + + ", " + + date.getHours() + + ":" + + date.getMinutes() + ); } export const getSeasonFromUnix = (unix: number) => { @@ -148,7 +167,9 @@ export function sinceUnixDate(unixInSeconds: number) { if (dateDifferenceSeconds < 86400) return `${hours} ${hoursName} назад`; if (dateDifferenceSeconds < 2592000) return `${days} ${daysName} назад`; - return date.getDate() + " " + months[date.getMonth()] + " " + date.getFullYear(); + return ( + date.getDate() + " " + months[date.getMonth()] + " " + date.getFullYear() + ); } export function minutesToTime(min: number) { @@ -248,3 +269,31 @@ export const SortList = { alphabet_descending: 5, alphabet_ascending: 6, }; + +export function b64toBlob( + b64Data: string, + contentType: string, + sliceSize?: number +) { + contentType = contentType || ""; + sliceSize = sliceSize || 512; + + var byteCharacters = atob(b64Data); + var byteArrays = []; + + for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) { + var slice = byteCharacters.slice(offset, offset + sliceSize); + + var byteNumbers = new Array(slice.length); + for (var i = 0; i < slice.length; i++) { + byteNumbers[i] = slice.charCodeAt(i); + } + + var byteArray = new Uint8Array(byteNumbers); + + byteArrays.push(byteArray); + } + + var blob = new Blob(byteArrays, { type: contentType }); + return blob; +} diff --git a/app/collection/[id]/page.tsx b/app/collection/[id]/page.tsx new file mode 100644 index 0000000..0399d30 --- /dev/null +++ b/app/collection/[id]/page.tsx @@ -0,0 +1,35 @@ +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 + ? "коллекция - " + collection.collection.title + : "Приватная коллекция", + description: collection.collection && collection.collection.description, + openGraph: { + ...previousOG, + images: [ + { + url: collection.collection && collection.collection.image, // Must be an absolute URL + width: 600, + height: 800, + }, + ], + }, + }; +} + +export default async function Collections({ params }) { + return ; +} 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/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/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..e33d590 --- /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/Chip/Chip.tsx b/app/components/Chip/Chip.tsx index c3c9e5e..f8282f0 100644 --- a/app/components/Chip/Chip.tsx +++ b/app/components/Chip/Chip.tsx @@ -1,12 +1,29 @@ 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.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..c3b920e --- /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.isMyCollections && ( +
+
+ +
+
+ )} + {props.content.map((collection) => { + return ( +
+
+ +
+
+ ); + })} +
+
+
+
+
+
+ ); +}; diff --git a/app/components/CollectionInfo/CollectionInfo.Basics.tsx b/app/components/CollectionInfo/CollectionInfo.Basics.tsx new file mode 100644 index 0000000..6513735 --- /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/CollectionInfoControls.tsx b/app/components/CollectionInfo/CollectionInfoControls.tsx new file mode 100644 index 0000000..ccbe41f --- /dev/null +++ b/app/components/CollectionInfo/CollectionInfoControls.tsx @@ -0,0 +1,78 @@ +"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 new file mode 100644 index 0000000..e65b8c3 --- /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/components/CollectionLink/CollectionLink.tsx b/app/components/CollectionLink/CollectionLink.tsx new file mode 100644 index 0000000..d760eb4 --- /dev/null +++ b/app/components/CollectionLink/CollectionLink.tsx @@ -0,0 +1,36 @@ +import Link from "next/link"; +import { sinceUnixDate } from "#/api/utils"; +import { Chip } from "#/components/Chip/Chip"; + +export const CollectionLink = (props: any) => { + return ( + +
+
+
+ + + {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/components/CropModal/CropModal.tsx b/app/components/CropModal/CropModal.tsx new file mode 100644 index 0000000..893da73 --- /dev/null +++ b/app/components/CropModal/CropModal.tsx @@ -0,0 +1,93 @@ +import React, { useRef } from "react"; +import Cropper, { ReactCropperElement } from "react-cropper"; +import "cropperjs/dist/cropper.css"; +import { Button, Modal } from "flowbite-react"; + +type Props = { + src: string; + setSrc: (src: string) => void; + setTempSrc: (src: string) => void; + isOpen: boolean; + setIsOpen: (isOpen: boolean) => void; + height: number; + width: number; + aspectRatio: number; + guides: boolean; + quality: number; + forceAspect?: boolean; +}; + +export const CropModal: React.FC = (props) => { + const cropperRef = useRef(null); + + const getCropData = () => { + if (typeof cropperRef.current?.cropper !== "undefined") { + props.setSrc( + cropperRef.current?.cropper + .getCroppedCanvas({ + width: props.width, + height: props.height, + maxWidth: props.width, + maxHeight: props.height, + }) + .toDataURL("image/jpeg", props.quality) + ); + props.setTempSrc(""); + } + }; + + return ( + props.setIsOpen(false)} + size={"7xl"} + > + Обрезать изображение + + + +
+

Управление

+

Тяните за углы что-бы выбрать область

+

+ Нажмите 2 раза на пустое место, что бы поменять режим выбора области + на перемещение и обратно +

+

Используйте колёсико мыши что-бы изменить масштаб

+
+ + + + + + + ); +}; 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/components/ReleaseLink/ReleaseLink.16_9.tsx b/app/components/ReleaseLink/ReleaseLink.16_9.tsx index e17f73f..dcddc23 100644 --- a/app/components/ReleaseLink/ReleaseLink.16_9.tsx +++ b/app/components/ReleaseLink/ReleaseLink.16_9.tsx @@ -19,11 +19,19 @@ export const ReleaseLink169 = (props: any) => { user_list = profile_lists[profile_list_status]; } return ( - +
-
+ }} + >
{ user_list = profile_lists[profile_list_status]; } return ( - -
-
-
+ +
+
+ + {props.status ? ( + + ) : ( - {props.status ? ( - - ) : ( - - )} - -
-
- {props.title_ru && ( -

- {props.title_ru} -

- )} - {props.title_original && ( -

- {props.title_original} -

- )} -
+ )} + +
+
+ {props.title_ru && ( +

+ {props.title_ru} +

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

+ {props.title_original} +

+ )}
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/Collections.tsx b/app/pages/Collections.tsx new file mode 100644 index 0000000..07ba00b --- /dev/null +++ b/app/pages/Collections.tsx @@ -0,0 +1,68 @@ +"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 { ENDPOINTS } from "#/api/config"; +import { useRouter } from "next/navigation"; +import { useEffect } from "react"; + +export function CollectionsPage() { + const userStore = useUserStore(); + const router = useRouter(); + + function useFetchReleases(section: string) { + let url: string; + + 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 [userCollections] = useFetchReleases("userCollections"); + const [favoriteCollections] = useFetchReleases("userFavoriteCollections"); + + useEffect(() => { + if (userStore.state === "finished" && !userStore.token) { + router.push("/login?redirect=/collections"); + } + }, [userStore.state, userStore.token]); + + return ( +
+ {userStore.state === "loading" && + (!userCollections || !favoriteCollections) && ( +
+ +
+ )} + + {userCollections && userCollections.content && ( + + )} + {favoriteCollections && + favoriteCollections.content && + favoriteCollections.content.length > 0 && ( + + )} +
+ ); +} 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/pages/CreateCollection.tsx b/app/pages/CreateCollection.tsx new file mode 100644 index 0000000..cc98189 --- /dev/null +++ b/app/pages/CreateCollection.tsx @@ -0,0 +1,556 @@ +"use client"; +import useSWRInfinite from "swr/infinite"; +import { useUserStore } from "#/store/auth"; +import { useEffect, useState, useCallback } from "react"; +import { useSearchParams, useRouter } from "next/navigation"; +import { ENDPOINTS } from "#/api/config"; +import { + Card, + Button, + Checkbox, + TextInput, + Textarea, + FileInput, + Label, + Modal, +} from "flowbite-react"; +import { ReleaseLink } from "#/components/ReleaseLink/ReleaseLink"; +import { CropModal } from "#/components/CropModal/CropModal"; +import { b64toBlob } from "#/api/utils"; + +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 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 [tempImageUrl, setTempImageUrl] = useState(null); + const [isPrivate, setIsPrivate] = useState(false); + const [collectionInfo, setCollectionInfo] = useState({ + title: "", + description: "", + }); + const [stringLength, setStringLength] = useState({ + title: 0, + description: 0, + }); + const [addedReleases, setAddedReleases] = useState([]); + const [addedReleasesIds, setAddedReleasesIds] = useState([]); + const [releasesEditModalOpen, setReleasesEditModalOpen] = useState(false); + const [cropModalOpen, setCropModalOpen] = useState(false); + + const collection_id = searchParams.get("id") || null; + const mode = searchParams.get("mode") || null; + + const [isSending, setIsSending] = useState(false); + + useEffect(() => { + async function _checkMode() { + if (mode === "edit" && collection_id) { + setIsSending(true); + const res = await fetch( + `${ENDPOINTS.collection.base}/${collection_id}?token=${userStore.token}` + ); + const data = await res.json(); + + let addedReleasesIdsArray = []; + let addedReleasesArray = []; + + for (let i = 0; i < 4; i++) { + const res = await fetch( + `${ENDPOINTS.collection.base}/${collection_id}/releases/${i}?token=${userStore.token}` + ); + const data = await res.json(); + + if (data.content.length > 0) { + data.content.forEach((release) => { + if (!addedReleasesIds.includes(release.id)) { + addedReleasesIdsArray.push(release.id); + addedReleasesArray.push(release); + } + }); + } else { + setAddedReleases(addedReleasesArray); + setAddedReleasesIds(addedReleasesIdsArray); + break; + } + } + + if ( + mode === "edit" && + userStore.user.id == data.collection.creator.id + ) { + setEdit(true); + + setCollectionInfo({ + title: data.collection.title, + description: data.collection.description, + }); + setStringLength({ + title: data.collection.title.length, + description: data.collection.description.length, + }); + + setIsPrivate(data.collection.is_private); + setImageUrl(data.collection.image); + + setIsSending(false); + } + } + } + if (userStore.user) { + _checkMode(); + } + }, [userStore.user]); + + const handleFileRead = (e, fileReader) => { + const content = fileReader.result; + setTempImageUrl(content); + }; + + const handleFilePreview = (file) => { + const fileReader = new FileReader(); + fileReader.onloadend = (e) => { + handleFileRead(e, fileReader); + }; + fileReader.readAsDataURL(file); + }; + + function handleInput(e) { + const regex = /[^a-zA-Zа-яА-Я0-9_.,:()!? \[\]]/g; + setCollectionInfo({ + ...collectionInfo, + [e.target.name]: e.target.value.replace(regex, ""), + }); + setStringLength({ + ...stringLength, + [e.target.name]: e.target.value.replace(regex, "").length, + }); + } + + function submit(e) { + e.preventDefault(); + + async function _createCollection() { + const url = + mode === "edit" + ? `${ENDPOINTS.collection.edit}/${collection_id}?token=${userStore.token}` + : `${ENDPOINTS.collection.create}?token=${userStore.token}`; + + const res = await fetch(url, { + method: "POST", + body: JSON.stringify({ + ...collectionInfo, + is_private: isPrivate, + private: isPrivate, + releases: addedReleasesIds, + }), + }); + + const data = await res.json(); + + if (data.code == 5) { + alert("Вы превысили допустимый еженедельный лимит создания коллекций!"); + return; + } + + if (imageUrl && !imageUrl.startsWith("http")) { + let block = imageUrl.split(";"); + let contentType = block[0].split(":")[1]; + let realData = block[1].split(",")[1]; + const blob = b64toBlob(realData, contentType); + + const formData = new FormData(); + formData.append("image", blob, "cropped.jpg"); + formData.append("name", "image"); + const uploadRes = await fetch( + `${ENDPOINTS.collection.editImage}/${data.collection.id}?token=${userStore.token}`, + { + method: "POST", + body: formData, + } + ); + const uploadData = await uploadRes.json(); + } + + router.push(`/collection/${data.collection.id}`); + } + + if ( + collectionInfo.title.length >= 10 && + addedReleasesIds.length >= 1 && + userStore.token + ) { + // setIsSending(true); + _createCollection(); + } else if (collectionInfo.title.length < 10) { + alert("Необходимо ввести название коллекции не менее 10 символов"); + } else if (!userStore.token) { + alert("Для создания коллекции необходимо войти в аккаунт"); + } else if (addedReleasesIds.length < 1) { + alert("Необходимо добавить хотя бы один релиз в коллекцию"); + } + } + + function _deleteRelease(release: any) { + let releasesArray = []; + let idsArray = []; + + for (let i = 0; i < addedReleases.length; i++) { + if (addedReleases[i].id != release.id) { + releasesArray.push(addedReleases[i]); + idsArray.push(addedReleasesIds[i]); + } + } + + setAddedReleases(releasesArray); + setAddedReleasesIds(idsArray); + } + + return ( +
+ +

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

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

+ {stringLength.title}/60 +

+
+
+