Fix sorting links when editing and handle not providing any data

components/InputSelect/CollectionSelection.tsx

@@ -7,15 +7,16 @@ import CreatableSelect from "react-select/creatable";
 
 type Props = {
   onChange: any;
+  showDefaultValue?: boolean;
   defaultValue?:
-    | {
+  | {
-        label: string;
+    label: string;
-        value?: number;
+    value?: number;
-      }
+  }
-    | undefined;
+  | undefined;
 };
 
-export default function CollectionSelection({ onChange, defaultValue }: Props) {
+export default function CollectionSelection({ onChange, defaultValue, showDefaultValue = true }: Props) {
   const { collections } = useCollectionStore();
   const router = useRouter();
 
@@ -50,8 +51,8 @@ export default function CollectionSelection({ onChange, defaultValue }: Props) {
       onChange={onChange}
       options={options}
       styles={styles}
-      defaultValue={defaultValue}
+      defaultValue={showDefaultValue ? defaultValue : null}
-      // menuPosition="fixed"
+    // menuPosition="fixed"
     />
   );
 }

components/LinkViews/LinkList.tsx

@@ -35,11 +35,13 @@ export default function LinkCardCompact({
   const { account } = useAccountStore();
   const { links, setSelectedLinks, selectedLinks } = useLinkStore();
 
-  const handleCheckboxClick = (
+  const handleCheckboxClick = (link: LinkIncludingShortenedCollectionAndTags) => {
-    link: LinkIncludingShortenedCollectionAndTags
+    const linkIndex = selectedLinks.findIndex(selectedLink => selectedLink.id === link.id);
-  ) => {
+
-    if (selectedLinks.includes(link)) {
+    if (linkIndex !== -1) {
-      setSelectedLinks(selectedLinks.filter((e) => e !== link));
+      const updatedLinks = [...selectedLinks];
+      updatedLinks.splice(linkIndex, 1);
+      setSelectedLinks(updatedLinks);
     } else {
       setSelectedLinks([...selectedLinks, link]);
     }
@@ -85,7 +87,7 @@ export default function LinkCardCompact({
             <input
               type="checkbox"
               className="checkbox checkbox-primary my-auto mr-2"
-              checked={selectedLinks.includes(link)}
+              checked={selectedLinks.some(selectedLink => selectedLink.id === link.id)}
               onChange={() => handleCheckboxClick(link)}
             />
           )}

components/ModalContent/BulkEditLinksModal.tsx

@@ -57,7 +57,7 @@ export default function BulkEditLinksModal({ onClose }: Props) {
         <div className="grid sm:grid-cols-2 gap-3">
           <div>
             <p className="mb-2">Collection</p>
-            <CollectionSelection onChange={setCollection} />
+            <CollectionSelection showDefaultValue={false} onChange={setCollection} />
           </div>
 
           <div>

hooks/useLinks.tsx

@@ -18,7 +18,7 @@ export default function useLinks(
     searchByTextContent,
   }: LinkRequestQuery = { sort: 0 }
 ) {
-  const { links, setLinks, resetLinks } = useLinkStore();
+  const { links, setLinks, resetLinks, selectedLinks, setSelectedLinks } = useLinkStore();
   const router = useRouter();
 
   const { reachedBottom, setReachedBottom } = useDetectPageBottom();
@@ -68,8 +68,12 @@ export default function useLinks(
   };
 
   useEffect(() => {
+    // Save the selected links before resetting the links
+    // and then restore the selected links after resetting the links
+    const previouslySelected = selectedLinks
     resetLinks();
 
+    setSelectedLinks(previouslySelected);
     getLinks(true);
   }, [
     router,

pages/collections/[id].tsx

@@ -170,7 +170,7 @@ export default function Index() {
                 <i className="bi-three-dots text-xl" title="More"></i>
               </div>
               <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
-                {permissions === true ? (
+                {permissions === true && (
                   <li>
                     <div
                       role="button"
@@ -183,7 +183,7 @@ export default function Index() {
                       Edit Collection Info
                     </div>
                   </li>
-                ) : undefined}
+                )}
                 <li>
                   <div
                     role="button"
@@ -198,7 +198,7 @@ export default function Index() {
                       : "View Team"}
                   </div>
                 </li>
-                {permissions === true ? (
+                {permissions === true && (
                   <li>
                     <div
                       role="button"
@@ -211,7 +211,7 @@ export default function Index() {
                       Create Sub-Collection
                     </div>
                   </li>
-                ) : undefined}
+                )}
                 <li>
                   <div
                     role="button"
@@ -231,7 +231,7 @@ export default function Index() {
           </div>
         )}
 
-        {activeCollection ? (
+        {activeCollection && (
           <div className={`min-w-[15rem]`}>
             <div className="flex gap-1 justify-center sm:justify-end items-center w-fit">
               <div
@@ -267,18 +267,16 @@ export default function Index() {
               </div>
               <p className="text-neutral text-sm font-semibold">
                 By {collectionOwner.name}
-                {activeCollection.members.length > 0
+                {activeCollection.members.length > 0 &&
-                  ? ` and ${activeCollection.members.length} others`
+                  ` and ${activeCollection.members.length} others`}.
-                  : undefined}
-                .
               </p>
             </div>
           </div>
-        ) : undefined}
+        )}
 
-        {activeCollection?.description ? (
+        {activeCollection?.description && (
           <p>{activeCollection?.description}</p>
-        ) : undefined}
+        )}
 
         {/* {collections.some((e) => e.parentId === activeCollection.id) ? (
           <fieldset className="border rounded-md p-2 border-neutral-content">

pages/tags/[id].tsx

@@ -258,11 +258,13 @@ export default function Index() {
                     selectedLinks.length === links.length && links.length > 0
                   }
                 />
-                {selectedLinks.length > 0 && (
+                {selectedLinks.length > 0 ? (
                   <span>
                     {selectedLinks.length}{" "}
                     {selectedLinks.length === 1 ? "link" : "links"} selected
                   </span>
+                ) : (
+                  <span>Nothing selected</span>
                 )}
               </div>
             )}
@@ -302,11 +304,17 @@ export default function Index() {
       </div>
       {bulkDeleteLinksModal && (
         <BulkDeleteLinksModal
-          onClose={() => setBulkDeleteLinksModal(false)}
+          onClose={() => {
+            setBulkDeleteLinksModal(false);
+            setEditMode(false);
+          }}
         />
       )}
       {bulkEditLinksModal && (
-        <BulkEditLinksModal onClose={() => setBulkEditLinksModal(false)} />
+        <BulkEditLinksModal onClose={() => {
+          setBulkEditLinksModal(false);
+          setEditMode(false);
+        }} />
       )}
     </MainLayout>
   );

store/links.ts

@@ -148,7 +148,7 @@ const useLinkStore = create<LinkStore>()((set) => ({
     if (response.ok) {
       set((state) => ({
         links: state.links.map((e) =>
-          links.some((link) => link.id === e.id) ? { ...e, ...newData } : e
+          links.some((link) => link.id === e.id) ? { ...e, tags: [...e.tags, ...(newData.tags ?? [])] } : e
         ),
       }));
       useTagStore.getState().setTags();