new modal [WIP]

components/Modals/New.tsx

@@ -1,80 +1,23 @@
 import { Tab } from "@headlessui/react";
-import React, { useEffect, useState } from "react";
-import TextInput from "../TextInput";
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import { useRouter } from "next/router";
-import useCollectionStore from "@/store/collections";
-import useLinkStore from "@/store/links";
-import { useSession } from "next-auth/react";
-import CollectionSelection from "../InputSelect/CollectionSelection";
+import React from "react";
+import { Toaster } from "react-hot-toast";
+import NewLink from "./Tabs.tsx/NewLink";
+import NewCollection from "./Tabs.tsx/NewCollection";
 
 export default function New() {
-  const { data } = useSession();
-
-  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>({
-    name: "",
-    url: "",
-    description: "",
-    tags: [],
-    screenshotPath: "",
-    pdfPath: "",
-    readabilityPath: "",
-    textContent: "",
-    collection: {
-      name: "",
-      ownerId: data?.user.id as number,
-    },
-  });
-
-  const { updateLink, addLink } = useLinkStore();
-
-  const router = useRouter();
-  const { collections } = useCollectionStore();
-
-  const setCollection = (e: any) => {
-    if (e?.__isNew__) e.value = null;
-
-    setLink({
-      ...link,
-      collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
-    });
-  };
-
-  useEffect(() => {
-    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
-      setLink({
-        ...link,
-        collection: {
-          // id: ,
-          name: "Unorganized",
-          ownerId: data?.user.id as number,
-        },
-      });
-  }, []);
-
   return (
-    <dialog id="new-link-modal" className="modal backdrop-blur-sm">
-      <div className="modal-box border border-neutral-content">
+    <dialog id="new-modal" className="modal backdrop-blur-sm overflow-y-auto">
+      <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-2 top-2">
+          <button className="btn btn-sm outline-none btn-circle btn-ghost absolute right-5 top-5">
             ✕
           </button>
         </form>
@@ -85,7 +28,7 @@ export default function New() {
               className={({ selected }) =>
                 `${
                   selected ? "btn-primary" : "btn-ghost"
-                } outline-none rounded-md btn btn-sm`
+                } outline-none rounded-md btn btn-sm w-24`
               }
             >
               Link
@@ -94,7 +37,7 @@ export default function New() {
               className={({ selected }) =>
                 `${
                   selected ? "btn-primary" : "btn-ghost"
-                } outline-none rounded-md btn btn-sm`
+                } outline-none rounded-md btn btn-sm w-24`
               }
             >
               File
@@ -103,7 +46,7 @@ export default function New() {
               className={({ selected }) =>
                 `${
                   selected ? "btn-primary" : "btn-ghost"
-                } outline-none rounded-md btn btn-sm`
+                } outline-none rounded-md btn btn-sm w-24`
               }
             >
               Collection
@@ -111,43 +54,12 @@ export default function New() {
           </Tab.List>
           <Tab.Panels className="mt-5">
             <Tab.Panel>
-              <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
-                <div className="sm:col-span-3 col-span-5">
-                  <p className="mb-2">Address (URL)</p>
-                  <TextInput
-                    value={link.url}
-                    onChange={(e) => setLink({ ...link, url: e.target.value })}
-                    placeholder="e.g. http://example.com/"
-                    className="bg-base-200"
-                  />
-                </div>
-                <div className="sm:col-span-2 col-span-5">
-                  <p className="mb-2">Collection</p>
-                  {link.collection.name ? (
-                    <CollectionSelection
-                      onChange={setCollection}
-                      // defaultValue={{
-                      //   label: link.collection.name,
-                      //   value: link.collection.id,
-                      // }}
-                      defaultValue={
-                        link.collection.id
-                          ? {
-                              value: link.collection.id,
-                              label: link.collection.name,
-                            }
-                          : {
-                              value: null as unknown as number,
-                              label: "Unorganized",
-                            }
-                      }
-                    />
-                  ) : null}
-                </div>
-              </div>
+              <NewLink />
             </Tab.Panel>
             {/* <Tab.Panel>Content 2</Tab.Panel> */}
-            <Tab.Panel>Content 3</Tab.Panel>
+            <Tab.Panel>
+              <NewCollection />
+            </Tab.Panel>
           </Tab.Panels>
         </Tab.Group>
       </div>