From 5128bd44d8ab57a619ab19116fc44841066b791c Mon Sep 17 00:00:00 2001
From: Isaac Wise <iamisaacwise2006@gmail.com>
Date: Sun, 11 Feb 2024 02:02:14 -0600
Subject: [PATCH] keep edit buttons visible

---
 pages/collections/[id].tsx | 110 +++++++++++++++++-----------------
 pages/links/index.tsx      | 118 ++++++++++++++++++-------------------
 2 files changed, 110 insertions(+), 118 deletions(-)

diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index e4deaef..81398d7 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -121,8 +121,7 @@ export default function Index() {
 
   const bulkDeleteLinks = async () => {
     const load = toast.loading(
-      `Deleting ${selectedLinks.length} Link${
-        selectedLinks.length > 1 ? "s" : ""
+      `Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
       }...`
     );
 
@@ -134,8 +133,7 @@ export default function Index() {
 
     response.ok &&
       toast.success(
-        `Deleted ${selectedLinks.length} Link${
-          selectedLinks.length > 1 ? "s" : ""
+        `Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
         }!`
       );
   };
@@ -145,9 +143,8 @@ export default function Index() {
       <div
         className="h-[60rem] p-5 flex gap-3 flex-col"
         style={{
-          backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${
-            settings.theme === "dark" ? "#262626" : "#f3f4f6"
-          } 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
+          backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${settings.theme === "dark" ? "#262626" : "#f3f4f6"
+            } 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
         }}
       >
         {activeCollection && (
@@ -319,11 +316,10 @@ export default function Index() {
                   setEditMode(!editMode);
                   setSelectedLinks([]);
                 }}
-                className={`btn btn-square btn-sm btn-ghost ${
-                  editMode
-                    ? "bg-primary/20 hover:bg-primary/20"
-                    : "hover:bg-neutral/20"
-                }`}
+                className={`btn btn-square btn-sm btn-ghost ${editMode
+                  ? "bg-primary/20 hover:bg-primary/20"
+                  : "hover:bg-neutral/20"
+                  }`}
               >
                 <i className="bi-pencil-fill text-neutral text-xl"></i>
               </div>
@@ -333,53 +329,53 @@ export default function Index() {
           </div>
         </div>
 
-        {editMode && (
-          <div className="w-full flex justify-between items-center min-h-[32px]">
-            {links.length > 0 && (
-              <div className="flex gap-3 ml-3">
-                <input
-                  type="checkbox"
-                  className="checkbox checkbox-primary"
-                  onChange={() => handleSelectAll()}
-                  checked={
-                    selectedLinks.length === links.length && links.length > 0
-                  }
-                />
-                {selectedLinks.length > 0 && (
-                  <span>
-                    {selectedLinks.length}{" "}
-                    {selectedLinks.length === 1 ? "link" : "links"} selected
-                  </span>
-                )}
-              </div>
-            )}
-            <div className="flex gap-3">
-              {selectedLinks.length > 0 &&
-                (permissions === true || permissions?.canUpdate) && (
-                  <button
-                    onClick={() => setBulkEditLinksModal(true)}
-                    className="btn btn-sm btn-accent dark:border-violet-400 text-white w-fit ml-auto"
-                  >
-                    Edit
-                  </button>
-                )}
-              {selectedLinks.length > 0 &&
-                (permissions === true || permissions?.canDelete) && (
-                  <button
-                    onClick={(e) => {
-                      (document?.activeElement as HTMLElement)?.blur();
-                      e.shiftKey
-                        ? bulkDeleteLinks()
-                        : setBulkDeleteLinksModal(true);
-                    }}
-                    className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
-                  >
-                    Delete
-                  </button>
-                )}
+        <div className={!editMode ? "w-full flex justify-end items-center min-h-[32px]" : "w-full flex justify-between items-center min-h-[32px]"}>
+          {links.length > 0 && editMode && (
+            <div className="flex gap-3 ml-3">
+              <input
+                type="checkbox"
+                className="checkbox checkbox-primary"
+                onChange={() => handleSelectAll()}
+                checked={
+                  selectedLinks.length === links.length && links.length > 0
+                }
+              />
+              {selectedLinks.length > 0 ? (
+                <span>
+                  {selectedLinks.length}{" "}
+                  {selectedLinks.length === 1 ? "link" : "links"} selected
+                </span>
+              ) : (
+                <span>Nothing selected</span>
+              )}
             </div>
+          )}
+          <div className="flex gap-3">
+            {(permissions === true || permissions?.canUpdate) && (
+              <button
+                onClick={() => setBulkEditLinksModal(true)}
+                className="btn btn-sm btn-accent  text-white w-fit ml-auto"
+                disabled={!editMode}
+              >
+                Edit
+              </button>
+            )}
+            {(permissions === true || permissions?.canDelete) && (
+              <button
+                onClick={(e) => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  e.shiftKey
+                    ? bulkDeleteLinks()
+                    : setBulkDeleteLinksModal(true);
+                }}
+                disabled={!editMode}
+                className="btn btn-sm bg-red-400 hover:bg-red-500 text-white w-fit ml-auto"
+              >
+                Delete
+              </button>
+            )}
           </div>
-        )}
+        </div>
 
         {links.some((e) => e.collectionId === Number(router.query.id)) ? (
           <LinkComponent
diff --git a/pages/links/index.tsx b/pages/links/index.tsx
index 7222f87..c74faf5 100644
--- a/pages/links/index.tsx
+++ b/pages/links/index.tsx
@@ -3,9 +3,9 @@ import SortDropdown from "@/components/SortDropdown";
 import useLinks from "@/hooks/useLinks";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import PageHeader from "@/components/PageHeader";
-import { Sort, ViewMode } from "@/types/global";
+import { Member, Sort, ViewMode } from "@/types/global";
 import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
@@ -28,7 +28,7 @@ export default function Links() {
   const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
   const [editMode, setEditMode] = useState(false);
   const collectivePermissions = useCollectivePermissions(
-    selectedLinks.map((link) => link.collectionId as number)
+    links.map((link) => link.collectionId as number)
   );
 
   useLinks({ sort: sortBy });
@@ -43,8 +43,7 @@ export default function Links() {
 
   const bulkDeleteLinks = async () => {
     const load = toast.loading(
-      `Deleting ${selectedLinks.length} Link${
-        selectedLinks.length > 1 ? "s" : ""
+      `Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
       }...`
     );
 
@@ -56,8 +55,7 @@ export default function Links() {
 
     response.ok &&
       toast.success(
-        `Deleted ${selectedLinks.length} Link${
-          selectedLinks.length > 1 ? "s" : ""
+        `Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
         }!`
       );
   };
@@ -71,6 +69,7 @@ export default function Links() {
   // @ts-ignore
   const LinkComponent = linkView[viewMode];
 
+  console.log(collectivePermissions)
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full h-full">
@@ -89,11 +88,10 @@ export default function Links() {
                   setEditMode(!editMode);
                   setSelectedLinks([]);
                 }}
-                className={`btn btn-square btn-sm btn-ghost ${
-                  editMode
-                    ? "bg-primary/20 hover:bg-primary/20"
-                    : "hover:bg-neutral/20"
-                }`}
+                className={`btn btn-square btn-sm btn-ghost ${editMode
+                  ? "bg-primary/20 hover:bg-primary/20"
+                  : "hover:bg-neutral/20"
+                  }`}
               >
                 <i className="bi-pencil-fill text-neutral text-xl"></i>
               </div>
@@ -103,57 +101,55 @@ export default function Links() {
           </div>
         </div>
 
-        {editMode && (
-          <div className="w-full flex justify-between items-center min-h-[32px]">
-            {links.length > 0 && (
-              <div className="flex gap-3 ml-3">
-                <input
-                  type="checkbox"
-                  className="checkbox checkbox-primary"
-                  onChange={() => handleSelectAll()}
-                  checked={
-                    selectedLinks.length === links.length && links.length > 0
-                  }
-                />
-                {selectedLinks.length > 0 ? (
-                  <span>
-                    {selectedLinks.length}{" "}
-                    {selectedLinks.length === 1 ? "link" : "links"} selected
-                  </span>
-                ) : (
-                  <span>Nothing selected</span>
-                )}
-              </div>
-            )}
-            <div className="flex gap-3">
-              {selectedLinks.length > 0 &&
-                (collectivePermissions === true ||
-                  collectivePermissions?.canUpdate) && (
-                  <button
-                    onClick={() => setBulkEditLinksModal(true)}
-                    className="btn btn-sm btn-accent dark:border-violet-400 text-white w-fit ml-auto"
-                  >
-                    Edit
-                  </button>
-                )}
-              {selectedLinks.length > 0 &&
-                (collectivePermissions === true ||
-                  collectivePermissions?.canDelete) && (
-                  <button
-                    onClick={(e) => {
-                      (document?.activeElement as HTMLElement)?.blur();
-                      e.shiftKey
-                        ? bulkDeleteLinks()
-                        : setBulkDeleteLinksModal(true);
-                    }}
-                    className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
-                  >
-                    Delete
-                  </button>
-                )}
+        <div className={!editMode ? "w-full flex justify-end items-center min-h-[32px]" : "w-full flex justify-between items-center min-h-[32px]"}>
+          {links.length > 0 && editMode && (
+            <div className="flex gap-3 ml-3">
+              <input
+                type="checkbox"
+                className="checkbox checkbox-primary"
+                onChange={() => handleSelectAll()}
+                checked={
+                  selectedLinks.length === links.length && links.length > 0
+                }
+              />
+              {selectedLinks.length > 0 ? (
+                <span>
+                  {selectedLinks.length}{" "}
+                  {selectedLinks.length === 1 ? "link" : "links"} selected
+                </span>
+              ) : (
+                <span>Nothing selected</span>
+              )}
             </div>
+          )}
+          <div className="flex gap-3">
+            {(collectivePermissions === true ||
+              collectivePermissions?.canUpdate) && (
+                <button
+                  onClick={() => setBulkEditLinksModal(true)}
+                  disabled={!editMode}
+                  className="btn btn-sm btn-accent text-white w-fit ml-auto"
+                >
+                  Edit
+                </button>
+              )}
+            {(collectivePermissions === true ||
+              collectivePermissions?.canDelete) && (
+                <button
+                  onClick={(e) => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    e.shiftKey
+                      ? bulkDeleteLinks()
+                      : setBulkDeleteLinksModal(true);
+                  }}
+                  disabled={!editMode}
+                  className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
+                >
+                  Delete
+                </button>
+              )}
           </div>
-        )}
+        </div>
 
         {links[0] ? (
           <LinkComponent editMode={editMode} links={links} />