implemented new modal

2023-11-29 00:46:31 -05:00
parent 3b2b9e8279
commit 692b9b99e7
5 changed files with 216 additions and 63 deletions
@@ -1,5 +1,119 @@
-import React from "react";
+import { useEffect, useState } from "react";
+import { faFolder } from "@fortawesome/free-solid-svg-icons";
+import useCollectionStore from "@/store/collections";
+import { HexColorPicker } from "react-colorful";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { toast } from "react-hot-toast";
+import TextInput from "@/components/TextInput";
+import { useRouter } from "next/router";
+import { Collection } from "@prisma/client";

-export default function NewCollection() {
-  return <div>NewCollection</div>;
+type Props = {
+  isOpen: boolean;
+  modalId: string;
+};
+
+export default function NewCollection({ isOpen, modalId }: Props) {
+  const router = useRouter();
+
+  const initial = {
+    name: "",
+    description: "",
+    color: "#0ea5e9",
+  };
+
+  const [collection, setCollection] = useState<Partial<Collection>>(initial);
+
+  useEffect(() => {
+    setCollection(initial);
+  }, [isOpen]);
+
+  const [submitLoader, setSubmitLoader] = useState(false);
+  const { addCollection } = useCollectionStore();
+
+  const submit = async () => {
+    if (!submitLoader) {
+      setSubmitLoader(true);
+      if (!collection) return null;
+
+      setSubmitLoader(true);
+
+      const load = toast.loading("Creating...");
+
+      let response;
+
+      response = await addCollection(collection as any);
+
+      toast.dismiss(load);
+
+      if (response.ok) {
+        toast.success(`Collection "Created!"`);
+        (document.getElementById(modalId) as any).close();
+      } else toast.error(response.data as string);
+
+      setSubmitLoader(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-col sm:flex-row gap-3">
+        <div className="w-full">
+          <p className="mb-2">Name</p>
+          <div className="flex flex-col gap-3">
+            <TextInput
+              className="bg-base-200"
+              value={collection.name}
+              placeholder="e.g. Example Collection"
+              onChange={(e) =>
+                setCollection({ ...collection, name: e.target.value })
+              }
+            />
+            <div className="color-picker flex justify-between">
+              <div className="flex flex-col justify-between items-center w-32">
+                <p className="w-full mb-2">Color</p>
+                <div style={{ color: collection.color }}>
+                  <FontAwesomeIcon
+                    icon={faFolder}
+                    className="w-12 h-12 drop-shadow"
+                  />
+                </div>
+                <div
+                  className="btn btn-ghost btn-xs"
+                  onClick={() =>
+                    setCollection({ ...collection, color: "#0ea5e9" })
+                  }
+                >
+                  Reset
+                </div>
+              </div>
+              <HexColorPicker
+                color={collection.color}
+                onChange={(e) => setCollection({ ...collection, color: e })}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="w-full">
+          <p className="mb-2">Description</p>
+          <textarea
+            className="w-full h-[11rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
+            placeholder="The purpose of this Collection..."
+            value={collection.description}
+            onChange={(e) =>
+              setCollection({
+                ...collection,
+                description: e.target.value,
+              })
+            }
+          />
+        </div>
+      </div>
+
+      <button className="btn btn-accent w-fit ml-auto" onClick={submit}>
+        Create Collection
+      </button>
+    </div>
+  );
 }
@@ -10,8 +10,12 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import toast from "react-hot-toast";

-export default function NewLink() {
-  const newModal = document.getElementById("new-modal");
+type Props = {
+  isOpen: boolean;
+  modalId: string;
+};
+
+export default function NewLink({ isOpen, modalId }: Props) {
  const { data } = useSession();

  const initial = {
@@ -58,49 +62,35 @@ export default function NewLink() {
  };

  useEffect(() => {
-    const resetModal = () => {
-      setLink(initial);
+    setOptionsExpanded(false);
+    if (router.query.id) {
+      const currentCollection = collections.find(
+        (e) => e.id == Number(router.query.id)
+      );

-      if (router.query.id) {
-        const currentCollection = collections.find(
-          (e) => e.id == Number(router.query.id)
-        );
-
-        if (
-          currentCollection &&
-          currentCollection.ownerId &&
-          router.asPath.startsWith("/collections/")
-        )
-          setLink({
-            ...link,
-            collection: {
-              id: currentCollection.id,
-              name: currentCollection.name,
-              ownerId: currentCollection.ownerId,
-            },
-          });
-      } else
+      if (
+        currentCollection &&
+        currentCollection.ownerId &&
+        router.asPath.startsWith("/collections/")
+      )
        setLink({
-          ...link,
+          ...initial,
          collection: {
-            // id: ,
-            name: "Unorganized",
-            ownerId: data?.user.id as number,
+            id: currentCollection.id,
+            name: currentCollection.name,
+            ownerId: currentCollection.ownerId,
          },
        });
-    };
-    resetModal();
-
-    newModal?.addEventListener("close", () => {
-      resetModal();
-    });
-
-    return () => {
-      newModal?.addEventListener("close", () => {
-        resetModal();
+    } else
+      setLink({
+        ...initial,
+        collection: {
+          // id: ,
+          name: "Unorganized",
+          ownerId: data?.user.id as number,
+        },
      });
-    };
-  }, []);
+  }, [isOpen]);

  const submit = async () => {
    if (!submitLoader) {
@@ -116,9 +106,7 @@ export default function NewLink() {

      if (response.ok) {
        toast.success(`Created!`);
-        (newModal as any).close();
-
-        setLink(initial);
+        (document.getElementById(modalId) as any).close();
      } else toast.error(response.data as string);

      setSubmitLoader(false);