many bug fixes + add links and collections together + more changes

components/Modals/DeleteCollectionModal.tsx

@@ -28,7 +28,15 @@ export default function DeleteCollectionModal({
 }: Props) {
   const modal = document.getElementById(modalId);
 
+  const [collection, setCollection] =
+    useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
+
   useEffect(() => {
+    modal?.scrollTo(0, 0);
+
+    setCollection(activeCollection);
+    setInputField("");
+
     modal?.addEventListener("close", () => {
       onClose();
     });
@@ -40,14 +48,6 @@ export default function DeleteCollectionModal({
     };
   }, [isOpen]);
 
-  const [collection, setCollection] =
-    useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
-
-  useEffect(() => {
-    setCollection(activeCollection);
-    setInputField("");
-  }, [isOpen]);
-
   const [submitLoader, setSubmitLoader] = useState(false);
   const { removeCollection } = useCollectionStore();
   const router = useRouter();
@@ -85,7 +85,7 @@ export default function DeleteCollectionModal({
   return (
     <dialog
       id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto"
+      className="modal backdrop-blur-sm overflow-y-auto p-5"
       open={isOpen}
     >
       <Toaster

components/Modals/EditCollectionModal.tsx

@@ -23,6 +23,9 @@ export default function EditCollectionModal({
   const modal = document.getElementById(modalId);
 
   useEffect(() => {
+    modal?.scrollTo(0, 0);
+    setCollection(activeCollection);
+
     modal?.addEventListener("close", () => {
       onClose();
     });
@@ -37,10 +40,6 @@ export default function EditCollectionModal({
   const [collection, setCollection] =
     useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
 
-  useEffect(() => {
-    setCollection(activeCollection);
-  }, [isOpen]);
-
   const [submitLoader, setSubmitLoader] = useState(false);
   const { updateCollection } = useCollectionStore();
 
@@ -71,7 +70,7 @@ export default function EditCollectionModal({
   return (
     <dialog
       id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto"
+      className="modal backdrop-blur-sm overflow-y-auto p-5"
       open={isOpen}
     >
       <Toaster

components/Modals/EditCollectionSharingModal.tsx

@@ -31,6 +31,16 @@ export default function EditCollectionSharingModal({
   const modal = document.getElementById(modalId);
 
   useEffect(() => {
+    const fetchOwner = async () => {
+      const owner = await getPublicUserData(collection.ownerId as number);
+      setCollectionOwner(owner);
+    };
+
+    fetchOwner();
+
+    modal?.scrollTo(0, 0);
+    setCollection(activeCollection);
+
     modal?.addEventListener("close", () => {
       onClose();
     });
@@ -45,10 +55,6 @@ export default function EditCollectionSharingModal({
   const [collection, setCollection] =
     useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
 
-  useEffect(() => {
-    setCollection(activeCollection);
-  }, [isOpen]);
-
   const [submitLoader, setSubmitLoader] = useState(false);
   const { updateCollection } = useCollectionStore();
 
@@ -92,15 +98,6 @@ export default function EditCollectionSharingModal({
     image: "",
   });
 
-  useEffect(() => {
-    const fetchOwner = async () => {
-      const owner = await getPublicUserData(collection.ownerId as number);
-      setCollectionOwner(owner);
-    };
-
-    fetchOwner();
-  }, []);
-
   const setMemberState = (newMember: Member) => {
     if (!collection) return null;
 
@@ -115,7 +112,7 @@ export default function EditCollectionSharingModal({
   return (
     <dialog
       id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto"
+      className="modal backdrop-blur-sm overflow-y-auto p-5"
       open={isOpen}
     >
       <Toaster

components/Modals/EditLinkModal.tsx

@@ -58,6 +58,8 @@ export default function EditLinkModal({
   };
 
   useEffect(() => {
+    modal?.scrollTo(0, 0);
+
     setLink(activeLink);
 
     modal?.addEventListener("close", () => {
@@ -97,7 +99,7 @@ export default function EditLinkModal({
   return (
     <dialog
       id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto"
+      className="modal backdrop-blur-sm overflow-y-auto p-5"
       open={isOpen}
     >
       <Toaster

components/Modals/NewCollectionModal.tsx

@@ -20,18 +20,6 @@ export default function NewCollectionModal({
 }: Props) {
   const modal = document.getElementById(modalId);
 
-  useEffect(() => {
-    modal?.addEventListener("close", () => {
-      onClose();
-    });
-
-    return () => {
-      modal?.addEventListener("close", () => {
-        onClose();
-      });
-    };
-  }, [isOpen]);
-
   const initial = {
     name: "",
     description: "",
@@ -41,7 +29,19 @@ 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);
@@ -74,7 +74,7 @@ export default function NewCollectionModal({
   return (
     <dialog
       id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto"
+      className="modal backdrop-blur-sm overflow-y-auto p-5"
       open={isOpen}
     >
       <Toaster

components/Modals/NewLinkModal.tsx

@@ -43,6 +43,8 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
   const { addLink } = useLinkStore();
   const [submitLoader, setSubmitLoader] = useState(false);
 
+  const [resetCollectionSelection, setResetCollectionSelection] = useState("");
+
   const [optionsExpanded, setOptionsExpanded] = useState(false);
 
   const router = useRouter();
@@ -66,6 +68,10 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
   };
 
   useEffect(() => {
+    setResetCollectionSelection(Date.now().toString());
+    console.log(link);
+
+    modal?.scrollTo(0, 0);
     setOptionsExpanded(false);
     if (router.query.id) {
       const currentCollection = collections.find(
@@ -89,7 +95,6 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
       setLink({
         ...initial,
         collection: {
-          // id: ,
           name: "Unorganized",
           ownerId: data?.user.id as number,
         },
@@ -120,7 +125,7 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
 
       if (response.ok) {
         toast.success(`Created!`);
-        (document.getElementById(modalId) as any).close();
+        (document?.getElementById(modalId) as any)?.close();
       } else toast.error(response.data as string);
 
       setSubmitLoader(false);
@@ -132,7 +137,7 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
   return (
     <dialog
       id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto"
+      className="modal backdrop-blur-sm overflow-y-auto p-5"
       open={isOpen}
     >
       <Toaster
@@ -166,21 +171,11 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
             {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",
-                      }
-                }
+                defaultValue={{
+                  label: link.collection.name,
+                  value: link.collection.id,
+                }}
+                id={resetCollectionSelection}
               />
             ) : null}
           </div>