implemented new modal

components/Modals/New.tsx

@@ -1,12 +1,40 @@
 import { Tab } from "@headlessui/react";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";
 import NewLink from "./Tabs.tsx/NewLink";
 import NewCollection from "./Tabs.tsx/NewCollection";
 
-export default function New() {
+type Props = {
+  index?: number;
+  modalId: string;
+  isOpen: boolean;
+  onClose: Function;
+};
+
+export default function New({ index, modalId, isOpen, onClose }: Props) {
+  const newModal = document.getElementById(modalId);
+  const [tabIndex, setTabIndex] = useState(index);
+
+  useEffect(() => {
+    setTabIndex(index);
+
+    newModal?.addEventListener("close", () => {
+      onClose();
+    });
+
+    return () => {
+      newModal?.addEventListener("close", () => {
+        onClose();
+      });
+    };
+  }, [isOpen]);
+
   return (
-    <dialog id="new-modal" className="modal backdrop-blur-sm overflow-y-auto">
+    <dialog
+      id={modalId}
+      className="modal backdrop-blur-sm overflow-y-auto"
+      open={isOpen}
+    >
       <Toaster
         position="top-center"
         reverseOrder={false}
@@ -22,7 +50,10 @@ export default function New() {
           </button>
         </form>
 
-        <Tab.Group>
+        <Tab.Group
+          onChange={(i: any) => setTabIndex(i)}
+          selectedIndex={tabIndex}
+        >
           <Tab.List className="tabs-boxed flex w-fit mr-auto justify-center gap-1 p-1">
             <Tab
               className={({ selected }) =>
@@ -42,6 +73,15 @@ export default function New() {
             >
               File
             </Tab> */}
+            {/* <Tab
+              className={({ selected }) =>
+                `${
+                  selected ? "btn-primary" : "btn-ghost"
+                } outline-none rounded-md btn btn-sm w-24`
+              }
+            >
+              Note
+            </Tab> */}
             <Tab
               className={({ selected }) =>
                 `${
@@ -54,11 +94,12 @@ export default function New() {
           </Tab.List>
           <Tab.Panels className="mt-5">
             <Tab.Panel>
-              <NewLink />
+              <NewLink isOpen={isOpen} modalId={modalId} />
             </Tab.Panel>
-            {/* <Tab.Panel>Content 2</Tab.Panel> */}
+            {/* <Tab.Panel>File</Tab.Panel> */}
+            {/* <Tab.Panel>Note</Tab.Panel> */}
             <Tab.Panel>
-              <NewCollection />
+              <NewCollection isOpen={isOpen} modalId={modalId} />
             </Tab.Panel>
           </Tab.Panels>
         </Tab.Group>

components/Modals/Tabs.tsx/NewCollection.tsx

@@ -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() {
+type Props = {
-  return <div>NewCollection</div>;
+  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>
+  );
 }

components/Modals/Tabs.tsx/NewLink.tsx

@@ -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() {
+type Props = {
-  const newModal = document.getElementById("new-modal");
+  isOpen: boolean;
+  modalId: string;
+};
+
+export default function NewLink({ isOpen, modalId }: Props) {
   const { data } = useSession();
 
   const initial = {
@@ -58,9 +62,7 @@ export default function NewLink() {
   };
 
   useEffect(() => {
-    const resetModal = () => {
+    setOptionsExpanded(false);
-      setLink(initial);
-
     if (router.query.id) {
       const currentCollection = collections.find(
         (e) => e.id == Number(router.query.id)
@@ -72,7 +74,7 @@ export default function NewLink() {
         router.asPath.startsWith("/collections/")
       )
         setLink({
-            ...link,
+          ...initial,
           collection: {
             id: currentCollection.id,
             name: currentCollection.name,
@@ -81,26 +83,14 @@ export default function NewLink() {
         });
     } else
       setLink({
-          ...link,
+        ...initial,
         collection: {
           // id: ,
           name: "Unorganized",
           ownerId: data?.user.id as number,
         },
       });
-    };
+  }, [isOpen]);
-    resetModal();
-
-    newModal?.addEventListener("close", () => {
-      resetModal();
-    });
-
-    return () => {
-      newModal?.addEventListener("close", () => {
-        resetModal();
-      });
-    };
-  }, []);
 
   const submit = async () => {
     if (!submitLoader) {
@@ -116,9 +106,7 @@ export default function NewLink() {
 
       if (response.ok) {
         toast.success(`Created!`);
-        (newModal as any).close();
+        (document.getElementById(modalId) as any).close();
-
-        setLink(initial);
       } else toast.error(response.data as string);
 
       setSubmitLoader(false);

components/Navbar.tsx

@@ -47,6 +47,9 @@ export default function Navbar() {
     setSidebar(!sidebar);
   };
 
+  const [newModalIsOpen, setNewModalIsOpen] = useState(false);
+  const closeNewModal = () => setNewModalIsOpen(false);
+
   return (
     <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-neutral-content border-b">
       <div
@@ -61,9 +64,7 @@ export default function Navbar() {
 
         <button
           className="inline-flex sm:gap-1 relative sm:w-[5rem] items-center duration-100 group btn btn-accent text-white btn-sm"
-          onClick={() =>
+          onClick={() => setNewModalIsOpen(true)}
-            (document.getElementById("new-modal") as any).showModal()
-          }
         >
           <FontAwesomeIcon
             icon={faPlus}
@@ -132,7 +133,12 @@ export default function Navbar() {
           ) : null}
         </div>
       </div>
-      <New />
+      <New
+        index={0}
+        isOpen={newModalIsOpen}
+        onClose={closeNewModal}
+        modalId="new-modal-0"
+      />
     </div>
   );
 }

pages/collections/index.tsx

@@ -15,6 +15,7 @@ import useModalStore from "@/store/modals";
 import SortDropdown from "@/components/SortDropdown";
 import { Sort } from "@/types/global";
 import useSort from "@/hooks/useSort";
+import New from "@/components/Modals/New";
 
 export default function Collections() {
   const { collections } = useCollectionStore();
@@ -29,6 +30,9 @@ export default function Collections() {
 
   useSort({ sortBy, setData: setSortedCollections, data: collections });
 
+  const [newModalIsOpen, setNewModalIsOpen] = useState(false);
+  const closeNewModal = () => setNewModalIsOpen(false);
+
   return (
     <MainLayout>
       <div className="p-5">
@@ -118,13 +122,7 @@ export default function Collections() {
 
           <div
             className="card card-compact shadow-md hover:shadow-none duration-200 border border-neutral-content p-5 bg-base-200 self-stretch min-h-[12rem] rounded-2xl cursor-pointer flex flex-col gap-4 justify-center items-center group"
-            onClick={() => {
+            onClick={() => setNewModalIsOpen(true)}
-              setModal({
-                modal: "COLLECTION",
-                state: true,
-                method: "CREATE",
-              });
-            }}
           >
             <p className="group-hover:opacity-0 duration-100">New Collection</p>
             <FontAwesomeIcon
@@ -160,6 +158,12 @@ export default function Collections() {
           </>
         ) : undefined}
       </div>
+      <New
+        index={1}
+        isOpen={newModalIsOpen}
+        onClose={closeNewModal}
+        modalId="new-modal-1"
+      />
     </MainLayout>
   );
 }