Новая коллекция
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 ? "Редактирование коллекции" : "Создание коллекции"}
+
+