improved DX

pages/collections/[id].tsx

@@ -233,24 +233,24 @@ export default function Index() {
       </div>
       {activeCollection ? (
         <>
-          <EditCollectionModal
-            isOpen={editCollectionModal}
-            onClose={() => setEditCollectionModal(false)}
-            modalId={"edit-collection-modal" + activeCollection.id}
-            activeCollection={activeCollection}
-          />
-          <EditCollectionSharingModal
-            isOpen={editCollectionSharingModal}
-            onClose={() => setEditCollectionSharingModal(false)}
-            modalId={"edit-collection-sharing-modal" + activeCollection.id}
-            activeCollection={activeCollection}
-          />
-          <DeleteCollectionModal
-            isOpen={deleteCollectionModal}
-            onClose={() => setDeleteCollectionModal(false)}
-            modalId={"delete-collection-modal" + activeCollection.id}
-            activeCollection={activeCollection}
-          />
+          {editCollectionModal ? (
+            <EditCollectionModal
+              onClose={() => setEditCollectionModal(false)}
+              activeCollection={activeCollection}
+            />
+          ) : undefined}
+          {editCollectionSharingModal ? (
+            <EditCollectionSharingModal
+              onClose={() => setEditCollectionSharingModal(false)}
+              activeCollection={activeCollection}
+            />
+          ) : undefined}
+          {deleteCollectionModal ? (
+            <DeleteCollectionModal
+              onClose={() => setDeleteCollectionModal(false)}
+              activeCollection={activeCollection}
+            />
+          ) : undefined}
         </>
       ) : undefined}
     </MainLayout>

pages/collections/index.tsx

@@ -126,11 +126,9 @@ export default function Collections() {
           </>
         ) : undefined}
       </div>
-      <NewCollectionModal
-        isOpen={newCollectionModal}
-        onClose={() => setNewCollectionModal(false)}
-        modalId="new-collection-modal-1"
-      />
+      {newCollectionModal ? (
+        <NewCollectionModal onClose={() => setNewCollectionModal(false)} />
+      ) : undefined}
     </MainLayout>
   );
 }

pages/dashboard.tsx

@@ -315,11 +315,9 @@ export default function Dashboard() {
           )}
         </div>
       </div>
-      <NewLinkModal
-        isOpen={newLinkModal}
-        onClose={() => setNewLinkModal(false)}
-        modalId="new-link-modal"
-      />
+      {newLinkModal ? (
+        <NewLinkModal onClose={() => setNewLinkModal(false)} />
+      ) : undefined}
     </MainLayout>
   );
 }

pages/public/collections/[id].tsx

@@ -228,12 +228,12 @@ export default function PublicCollections() {
         </p> */}
         </div>
       </div>
-      <EditCollectionSharingModal
-        isOpen={editCollectionSharingModal}
-        onClose={() => setEditCollectionSharingModal(false)}
-        modalId={"edit-collection-sharing-modal" + collection.id}
-        activeCollection={collection}
-      />
+      {editCollectionSharingModal ? (
+        <EditCollectionSharingModal
+          onClose={() => setEditCollectionSharingModal(false)}
+          activeCollection={collection}
+        />
+      ) : undefined}
     </div>
   ) : (
     <></>