implemented new modal

2023-11-29 00:46:31 -05:00 · 2023-11-29 00:46:31 -05:00 · 692b9b99e7
parent 3b2b9e8279
commit 692b9b99e7
5 changed files with 216 additions and 63 deletions
--- a/components/Modals/New.tsx
+++ b/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>
--- a/components/Modals/Tabs.tsx/NewCollection.tsx
+++ b/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() {
-  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>
+  );
 }
--- a/components/Modals/Tabs.tsx/NewLink.tsx
+++ b/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() {
-  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,9 +62,7 @@ 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)
@ -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,
        },
      });
-    };
-    resetModal();
-
-    newModal?.addEventListener("close", () => {
-      resetModal();
-    });
-
-    return () => {
-      newModal?.addEventListener("close", () => {
-        resetModal();
-      });
-    };
-  }, []);
+  }, [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);
--- a/components/Navbar.tsx
+++ b/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={() =>
-            (document.getElementById("new-modal") as any).showModal()
-          }
+          onClick={() => setNewModalIsOpen(true)}
        >
          <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>
  );
 }
--- a/pages/collections/index.tsx
+++ b/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={() => {
-              setModal({
-                modal: "COLLECTION",
-                state: true,
-                method: "CREATE",
-              });
-            }}
+            onClick={() => setNewModalIsOpen(true)}
          >
            <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>
  );
 }