new modal [WIP]

components/InputSelect/CollectionSelection.tsx

@@ -44,7 +44,7 @@ export default function CollectionSelection({ onChange, defaultValue }: Props) {
 
   return (
     <Select
-      isClearable
+      isClearable={false}
       className="react-select-container"
       classNamePrefix="react-select"
       onChange={onChange}

components/InputSelect/TagSelection.tsx

@@ -27,7 +27,7 @@ export default function TagSelection({ onChange, defaultValue }: Props) {
 
   return (
     <CreatableSelect
-      isClearable
+      isClearable={false}
       className="react-select-container"
       classNamePrefix="react-select"
       onChange={onChange}

components/InputSelect/styles.ts

@@ -65,4 +65,5 @@ export const styles: StylesConfig = {
       backgroundColor: "#38bdf8",
     },
   }),
+  menuPortal: (base) => ({ ...base, zIndex: 9999 }),
 };

components/Modals/New.tsx

@@ -1,80 +1,23 @@
 import { Tab } from "@headlessui/react";
-import React, { useEffect, useState } from "react";
+import React from "react";
-import TextInput from "../TextInput";
+import { Toaster } from "react-hot-toast";
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import NewLink from "./Tabs.tsx/NewLink";
-import { useRouter } from "next/router";
+import NewCollection from "./Tabs.tsx/NewCollection";
-import useCollectionStore from "@/store/collections";
-import useLinkStore from "@/store/links";
-import { useSession } from "next-auth/react";
-import CollectionSelection from "../InputSelect/CollectionSelection";
 
 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">
+    <dialog id="new-modal" className="modal backdrop-blur-sm overflow-y-auto">
-      <div className="modal-box border border-neutral-content">
+      <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">
+              <NewLink />
-                <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>
             </Tab.Panel>
             {/* <Tab.Panel>Content 2</Tab.Panel> */}
-            <Tab.Panel>Content 3</Tab.Panel>
+            <Tab.Panel>
+              <NewCollection />
+            </Tab.Panel>
           </Tab.Panels>
         </Tab.Group>
       </div>

components/Modals/Tabs.tsx/NewCollection.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function NewCollection() {
+  return <div>NewCollection</div>;
+}

components/Modals/Tabs.tsx/NewLink.tsx

@@ -0,0 +1,220 @@
+import CollectionSelection from "@/components/InputSelect/CollectionSelection";
+import TagSelection from "@/components/InputSelect/TagSelection";
+import TextInput from "@/components/TextInput";
+import unescapeString from "@/lib/client/unescapeString";
+import useCollectionStore from "@/store/collections";
+import useLinkStore from "@/store/links";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { useSession } from "next-auth/react";
+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");
+  const { data } = useSession();
+
+  const initial = {
+    name: "",
+    url: "",
+    description: "",
+    tags: [],
+    screenshotPath: "",
+    pdfPath: "",
+    readabilityPath: "",
+    textContent: "",
+    collection: {
+      name: "",
+      ownerId: data?.user.id as number,
+    },
+  };
+
+  const [link, setLink] =
+    useState<LinkIncludingShortenedCollectionAndTags>(initial);
+
+  const { addLink } = useLinkStore();
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const [optionsExpanded, setOptionsExpanded] = useState(false);
+
+  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 },
+    });
+  };
+
+  const setTags = (e: any) => {
+    const tagNames = e.map((e: any) => {
+      return { name: e.label };
+    });
+
+    setLink({ ...link, tags: tagNames });
+  };
+
+  useEffect(() => {
+    const resetModal = () => {
+      setLink(initial);
+
+      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,
+          },
+        });
+    };
+    resetModal();
+
+    newModal?.addEventListener("close", () => {
+      resetModal();
+    });
+
+    return () => {
+      newModal?.addEventListener("close", () => {
+        resetModal();
+      });
+    };
+  }, []);
+
+  const submit = async () => {
+    if (!submitLoader) {
+      setSubmitLoader(true);
+
+      let response;
+
+      const load = toast.loading("Creating...");
+
+      response = await addLink(link);
+
+      toast.dismiss(load);
+
+      if (response.ok) {
+        toast.success(`Created!`);
+        (newModal as any).close();
+
+        setLink(initial);
+      } else toast.error(response.data as string);
+
+      setSubmitLoader(false);
+
+      return response;
+    }
+  };
+
+  return (
+    <div>
+      <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">Link</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>
+
+      {optionsExpanded ? (
+        <div className="mt-5">
+          {/* <hr className="mb-3 border border-neutral-content" /> */}
+          <div className="grid sm:grid-cols-2 gap-3">
+            <div>
+              <p className="mb-2">Name</p>
+              <TextInput
+                value={link.name}
+                onChange={(e) => setLink({ ...link, name: e.target.value })}
+                placeholder="e.g. Example Link"
+                className="bg-base-200"
+              />
+            </div>
+
+            <div>
+              <p className="mb-2">Tags</p>
+              <TagSelection
+                onChange={setTags}
+                defaultValue={link.tags.map((e) => {
+                  return { label: e.name, value: e.id };
+                })}
+              />
+            </div>
+
+            <div className="sm:col-span-2">
+              <p className="mb-2">Description</p>
+              <textarea
+                value={unescapeString(link.description) as string}
+                onChange={(e) =>
+                  setLink({ ...link, description: e.target.value })
+                }
+                placeholder="Will be auto generated if nothing is provided."
+                className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
+              />
+            </div>
+          </div>
+        </div>
+      ) : undefined}
+
+      <div className="flex justify-between items-center mt-5">
+        <div
+          onClick={() => setOptionsExpanded(!optionsExpanded)}
+          className={`rounded-md cursor-pointer btn btn-sm btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
+        >
+          <p>{optionsExpanded ? "Hide" : "More"} Options</p>
+        </div>
+
+        <button className="btn btn-accent" onClick={submit}>
+          Create Link
+        </button>
+      </div>
+    </div>
+  );
+}

components/Navbar.tsx

@@ -9,15 +9,12 @@ import { useRouter } from "next/router";
 import SearchBar from "@/components/SearchBar";
 import useAccountStore from "@/store/account";
 import ProfilePhoto from "@/components/ProfilePhoto";
-import useModalStore from "@/store/modals";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 import ToggleDarkMode from "./ToggleDarkMode";
 import useLocalSettingsStore from "@/store/localSettings";
 import New from "./Modals/New";
 
 export default function Navbar() {
-  const { setModal } = useModalStore();
-
   const { settings, updateSettings } = useLocalSettingsStore();
 
   const { account } = useAccountStore();
@@ -62,29 +59,10 @@ export default function Navbar() {
       <div className="flex items-center gap-2">
         <ToggleDarkMode className="sm:inline-grid hidden" />
 
-        {/* <button
-          onClick={() => {
-            setModal({
-              modal: "LINK",
-              state: true,
-              method: "CREATE",
-            });
-          }}
-          className="inline-flex sm:gap-1 relative sm:w-[5rem] items-center duration-100 group btn btn-accent text-white btn-sm"
-        >
-          <FontAwesomeIcon
-            icon={faPlus}
-            className="w-5 h-5 sm:group-hover:ml-5 sm:absolute duration-100 left-2"
-          />
-          <span className="hidden sm:block group-hover:opacity-0 text-right w-full duration-100">
-            New
-          </span>
-        </button> */}
-
         <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-link-modal") as any).showModal()
+            (document.getElementById("new-modal") as any).showModal()
           }
         >
           <FontAwesomeIcon

lib/client/unescapeString.ts

@@ -1,4 +1,4 @@
-export default function htmlDecode(input: string) {
+export default function unescapeString(input: string) {
   var doc = new DOMParser().parseFromString(input, "text/html");
   return doc.documentElement.textContent;
 }

styles/globals.css

@@ -161,20 +161,18 @@ body {
   }
 
   .react-select-container .react-select__menu {
-    @apply bg-base-100 border-neutral-content border absolute;
+    @apply bg-base-100 border-neutral-content border rounded-md;
   }
+  /* 
+  .react-select-container .react-select__menu-list {
+    @apply h-20;
+  } */
 
   .react-select-container .react-select__input-container,
   .react-select-container .react-select__single-value {
     @apply text-base-content;
   }
 }
-.react-select__clear-indicator * {
-  display: none;
-  width: 0;
-  margin: 0;
-  padding: 0;
-}
 
 .primary-btn-gradient {
   box-shadow: inset 0px -10px 10px #0071b7;