improved DX

2023-12-01 17:42:45 -05:00
parent a36769c521
commit 9e4502c015
17 changed files with 744 additions and 1016 deletions
@@ -6,20 +6,13 @@ import { faFolder } from "@fortawesome/free-solid-svg-icons";
 import { HexColorPicker } from "react-colorful";
 import { Collection } from "@prisma/client";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Modal from "../Modal";

 type Props = {
-  modalId: string;
-  isOpen: boolean;
  onClose: Function;
 };

-export default function NewCollectionModal({
-  modalId,
-  isOpen,
-  onClose,
-}: Props) {
-  const modal = document.getElementById(modalId);
-
+export default function NewCollectionModal({ onClose }: Props) {
  const initial = {
    name: "",
    description: "",
@@ -29,20 +22,8 @@ export default function NewCollectionModal({
  const [collection, setCollection] = useState<Partial<Collection>>(initial);

  useEffect(() => {
-    modal?.scrollTo(0, 0);
-
-    modal?.addEventListener("close", () => {
-      onClose();
-    });
-
    setCollection(initial);
-
-    return () => {
-      modal?.addEventListener("close", () => {
-        onClose();
-      });
-    };
-  }, [isOpen]);
+  }, []);

  const [submitLoader, setSubmitLoader] = useState(false);
  const { addCollection } = useCollectionStore();
@@ -64,7 +45,7 @@ export default function NewCollectionModal({

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

      setSubmitLoader(false);
@@ -72,95 +53,70 @@ export default function NewCollectionModal({
  };

  return (
-    <dialog
-      id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto p-5"
-      open={isOpen}
-    >
-      <Toaster
-        position="top-center"
-        reverseOrder={false}
-        toastOptions={{
-          className:
-            "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
-        }}
-      />
-      <div className="modal-box max-h-full overflow-y-visible border border-neutral-content w-11/12 max-w-2xl">
-        <form method="dialog">
-          <button className="btn btn-sm outline-none btn-circle btn-ghost absolute right-3 top-3">
-            ✕
-          </button>
-        </form>
+    <Modal toggleModal={onClose}>
+      <p className="text-xl mb-5 font-thin">Create a New Collection</p>

-        <p className="text-xl mb-5 font-thin">Create a New Collection</p>
-
-        <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>
-                  <p className="w-full mb-2">Color</p>
-                  <div className="color-picker flex justify-between">
-                    <div className="flex flex-col gap-2 items-center w-32">
-                      <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 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>
+                <p className="w-full mb-2">Color</p>
+                <div className="color-picker flex justify-between">
+                  <div className="flex flex-col gap-2 items-center w-32">
+                    <div style={{ color: collection.color }}>
+                      <FontAwesomeIcon
+                        icon={faFolder}
+                        className="w-12 h-12 drop-shadow"
+                      />
                    </div>
-                    <HexColorPicker
-                      color={collection.color}
-                      onChange={(e) =>
-                        setCollection({ ...collection, color: e })
+                    <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-[13rem] 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 className="w-full">
+            <p className="mb-2">Description</p>
+            <textarea
+              className="w-full h-[13rem] 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>
-      <form method="dialog" className="modal-backdrop">
-        <button>close</button>
-      </form>
-    </dialog>
+    </Modal>
  );
 }