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/pages/CreateCollection.tsx b/app/pages/CreateCollection.tsx index 0f2cd40..9269b56 100644 --- a/app/pages/CreateCollection.tsx +++ b/app/pages/CreateCollection.tsx @@ -1,6 +1,8 @@ "use client"; +import useSWR from "swr"; +import useSWRInfinite from "swr/infinite"; import { useUserStore } from "#/store/auth"; -import { useEffect, useState } from "react"; +import { useEffect, useState, useCallback } from "react"; import { useSearchParams, useRouter } from "next/navigation"; import { ENDPOINTS } from "#/api/config"; import { @@ -11,7 +13,24 @@ import { Textarea, FileInput, Label, + Modal, } from "flowbite-react"; +import { ReleaseSection } from "#/components/ReleaseSection/ReleaseSection"; +import { ReleaseLink } from "#/components/ReleaseLink/ReleaseLink"; + +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(); @@ -31,6 +50,9 @@ export const CreateCollectionPage = () => { title: 0, description: 0, }); + const [addedReleases, setAddedReleases] = useState([]); + const [addedReleasesIds, setAddedReleasesIds] = useState([]); + const [releasesEditModalOpen, setReleasesEditModalOpen] = useState(false); const collection_id = searchParams.get("id") || null; const mode = searchParams.get("mode") || null; @@ -105,6 +127,21 @@ export const CreateCollectionPage = () => { }); } + 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 (
@@ -112,14 +149,14 @@ export const CreateCollectionPage = () => { {edit ? "Редактирование коллекции" : "Создание коллекции"}

submit(e)} >
); }; + +export const ReleasesEditModal = (props: { + isOpen: boolean; + setIsOpen: any; + releases: any; + setReleases: any; + releasesIds: any; + setReleasesIds: any; +}) => { + const [query, setQuery] = useState(""); + + const getKey = (pageIndex: number, previousPageData: any) => { + if (previousPageData && !previousPageData.releases.length) return null; + + const url = new URL("/api/search", window.location.origin); + url.searchParams.set("page", pageIndex.toString()); + if (!query) return null + url.searchParams.set("q", query); + return url.toString(); + }; + + const { data, error, isLoading, size, setSize } = useSWRInfinite( + getKey, + fetcher, + { initialSize: 2, revalidateFirstPage: false } + ); + + const [content, setContent] = useState([]); + useEffect(() => { + if (data) { + let allReleases = []; + for (let i = 0; i < data.length; i++) { + allReleases.push(...data[i].releases); + } + setContent(allReleases); + } + }, [data]); + + const [currentRef, setCurrentRef] = useState(null); + const modalRef = useCallback((ref) => { + setCurrentRef(ref); + }, []); + + const [scrollPosition, setScrollPosition] = useState(0); + function handleScroll() { + const height = currentRef.scrollHeight - currentRef.clientHeight; + const windowScroll = currentRef.scrollTop; + const scrolled = (windowScroll / height) * 100; + setScrollPosition(Math.floor(scrolled)); + } + useEffect(() => { + if (scrollPosition >= 95 && scrollPosition <= 96) { + setSize(size + 1); + } + }, [scrollPosition]); + + function _addRelease(release: any) { + if (props.releasesIds.length == 100) { + alert("Достигнуто максимальное количество релизов в коллекции - 100"); + return; + } + + if (props.releasesIds.includes(release.id)) { + alert("Релиз уже добавлен в коллекцию"); + return; + } + + props.setReleases([...props.releases, release]); + props.setReleasesIds([...props.releasesIds, release.id]); + } + + return ( + props.setIsOpen(false)} + size={"7xl"} + > + Изменить релизы в коллекции +
+
{ + e.preventDefault(); + props.setReleases([]); + setQuery(e.target[0].value.trim()); + }} + > + +
+
+ +
+ + +
+
+ +
+ {content.map((release) => { + return ( + + ); + })} + {content.length == 1 &&
} +
+
+ + ); +};