From 8ecedf7cae560ee44b3ba86dcf9da81ad7ff3580 Mon Sep 17 00:00:00 2001
From: Isaac Wise <iamisaacwise2006@gmail.com>
Date: Sat, 10 Feb 2024 23:55:00 -0600
Subject: [PATCH] Edit Mode

---
 components/LinkViews/Layouts/CardView.tsx |   3 +
 components/LinkViews/Layouts/ListView.tsx |   4 +
 components/LinkViews/LinkCard.tsx         |   4 +-
 components/LinkViews/LinkList.tsx         |  13 +--
 components/SortDropdown.tsx               |   2 +-
 components/ViewDropdown.tsx               |  20 ++--
 pages/collections/[id].tsx                | 115 ++++++++++++----------
 7 files changed, 91 insertions(+), 70 deletions(-)

diff --git a/components/LinkViews/Layouts/CardView.tsx b/components/LinkViews/Layouts/CardView.tsx
index cb8c5af..dce29c0 100644
--- a/components/LinkViews/Layouts/CardView.tsx
+++ b/components/LinkViews/Layouts/CardView.tsx
@@ -4,9 +4,11 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 export default function CardView({
   links,
   showCheckbox = true,
+  editMode
 }: {
   links: LinkIncludingShortenedCollectionAndTags[];
   showCheckbox?: boolean;
+  editMode?: boolean;
 }) {
   return (
     <div className="grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
@@ -18,6 +20,7 @@ export default function CardView({
             count={i}
             flipDropdown={i === links.length - 1}
             showCheckbox={showCheckbox}
+            editMode={editMode}
           />
         );
       })}
diff --git a/components/LinkViews/Layouts/ListView.tsx b/components/LinkViews/Layouts/ListView.tsx
index 4cd5ad6..7ff2ba0 100644
--- a/components/LinkViews/Layouts/ListView.tsx
+++ b/components/LinkViews/Layouts/ListView.tsx
@@ -4,9 +4,11 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 export default function ListView({
   links,
   showCheckbox = true,
+  editMode
 }: {
   links: LinkIncludingShortenedCollectionAndTags[];
   showCheckbox?: boolean;
+  editMode?: boolean;
 }) {
   return (
     <div className="flex flex-col">
@@ -18,6 +20,8 @@ export default function ListView({
             count={i}
             showCheckbox={showCheckbox}
             flipDropdown={i === links.length - 1}
+            editMode={editMode}
+
           />
         );
       })}
diff --git a/components/LinkViews/LinkCard.tsx b/components/LinkViews/LinkCard.tsx
index 02adbba..9cc1c62 100644
--- a/components/LinkViews/LinkCard.tsx
+++ b/components/LinkViews/LinkCard.tsx
@@ -25,12 +25,14 @@ type Props = {
   className?: string;
   flipDropdown?: boolean;
   showCheckbox?: boolean;
+  editMode?: boolean;
 };
 
 export default function LinkCard({
   link,
   flipDropdown,
   showCheckbox = true,
+  editMode
 }: Props) {
   const { collections } = useCollectionStore();
   const { account } = useAccountStore();
@@ -101,7 +103,7 @@ export default function LinkCard({
       ref={ref}
       className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative"
     >
-      {showCheckbox &&
+      {showCheckbox && editMode &&
         (permissions === true ||
           permissions?.canCreate ||
           permissions?.canDelete) && (
diff --git a/components/LinkViews/LinkList.tsx b/components/LinkViews/LinkList.tsx
index 12775f2..78f5cb7 100644
--- a/components/LinkViews/LinkList.tsx
+++ b/components/LinkViews/LinkList.tsx
@@ -22,12 +22,14 @@ type Props = {
   className?: string;
   flipDropdown?: boolean;
   showCheckbox?: boolean;
+  editMode?: boolean;
 };
 
 export default function LinkCardCompact({
   link,
   flipDropdown,
   showCheckbox = true,
+  editMode,
 }: Props) {
   const { collections } = useCollectionStore();
   const { account } = useAccountStore();
@@ -73,11 +75,10 @@ export default function LinkCardCompact({
   return (
     <>
       <div
-        className={`border-neutral-content relative items-center flex ${
-          !showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
-        } duration-200 rounded-lg`}
+        className={`border-neutral-content relative items-center flex ${!showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
+          } duration-200 rounded-lg`}
       >
-        {showCheckbox &&
+        {showCheckbox && editMode &&
           (permissions === true ||
             permissions?.canCreate ||
             permissions?.canDelete) && (
@@ -128,8 +129,8 @@ export default function LinkCardCompact({
           collection={collection}
           position="top-3 right-3"
           flipDropdown={flipDropdown}
-          // toggleShowInfo={() => setShowInfo(!showInfo)}
-          // linkInfo={showInfo}
+        // toggleShowInfo={() => setShowInfo(!showInfo)}
+        // linkInfo={showInfo}
         />
         {showInfo ? (
           <div>
diff --git a/components/SortDropdown.tsx b/components/SortDropdown.tsx
index 2f42e3a..81d4496 100644
--- a/components/SortDropdown.tsx
+++ b/components/SortDropdown.tsx
@@ -14,7 +14,7 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
         tabIndex={0}
         role="button"
         onMouseDown={dropdownTriggerer}
-        className="btn btn-sm btn-square btn-ghost"
+        className="btn btn-sm btn-square btn-ghost border-none"
       >
         <i className="bi-chevron-expand text-neutral text-2xl"></i>
       </div>
diff --git a/components/ViewDropdown.tsx b/components/ViewDropdown.tsx
index 23558d2..a04c0e2 100644
--- a/components/ViewDropdown.tsx
+++ b/components/ViewDropdown.tsx
@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+import React, { Dispatch, SetStateAction, useEffect } from "react";
 import useLocalSettingsStore from "@/store/localSettings";
 
 import { ViewMode } from "@/types/global";
@@ -26,22 +26,20 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
     <div className="p-1 flex flex-row gap-1 border border-neutral-content rounded-[0.625rem]">
       <button
         onClick={(e) => onChangeViewMode(e, ViewMode.Card)}
-        className={`btn btn-square btn-sm btn-ghost ${
-          viewMode == ViewMode.Card
-            ? "bg-primary/20 hover:bg-primary/20"
-            : "hover:bg-neutral/20"
-        }`}
+        className={`btn btn-square btn-sm btn-ghost ${viewMode == ViewMode.Card
+          ? "bg-primary/20 hover:bg-primary/20"
+          : "hover:bg-neutral/20"
+          }`}
       >
         <i className="bi-grid w-4 h-4 text-neutral"></i>
       </button>
 
       <button
         onClick={(e) => onChangeViewMode(e, ViewMode.List)}
-        className={`btn btn-square btn-sm btn-ghost ${
-          viewMode == ViewMode.List
-            ? "bg-primary/20 hover:bg-primary/20"
-            : "hover:bg-neutral/20"
-        }`}
+        className={`btn btn-square btn-sm btn-ghost ${viewMode == ViewMode.List
+          ? "bg-primary/20 hover:bg-primary/20"
+          : "hover:bg-neutral/20"
+          }`}
       >
         <i className="bi bi-view-stacked w-4 h-4 text-neutral"></i>
       </button>
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 1236aeb..44cec4a 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -96,6 +96,7 @@ export default function Index() {
   const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
   const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
   const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
+  const [editMode, setEditMode] = useState(false);
 
   const [viewMode, setViewMode] = useState<string>(
     localStorage.getItem("viewMode") || ViewMode.Card
@@ -120,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" : ""
       }...`
     );
 
@@ -133,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" : ""
         }!`
       );
   };
@@ -144,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 && (
@@ -309,62 +307,77 @@ export default function Index() {
 
         <div className="divider my-0"></div>
 
-        <div className="flex justify-between items-end gap-5">
+        <div className="flex justify-between items-center gap-5">
           <p>Showing {activeCollection?._count?.links} results</p>
           <div className="flex items-center gap-2">
+            <div
+              role="button"
+              onClick={() => setEditMode(!editMode)}
+              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>
             <SortDropdown sortBy={sortBy} setSort={setSortBy} />
             <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
         </div>
 
-        <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>
-              )}
+        {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>
-          )}
-          <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>
-        </div>
+
+        )}
+
 
         {links.some((e) => e.collectionId === Number(router.query.id)) ? (
           <LinkComponent
+            editMode={editMode}
             links={links.filter(
               (e) => e.collection.id === activeCollection?.id
             )}