improvements

2024-02-13 10:55:51 -05:00
parent 558ba11db7
commit 0b2e78332a
7 changed files with 163 additions and 108 deletions
@@ -97,6 +97,11 @@ export default function Index() {
  const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
  const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
  const [editMode, setEditMode] = useState(false);
+  useEffect(() => {
+    return () => {
+      setEditMode(false);
+    };
+  }, [router]);

  const [viewMode, setViewMode] = useState<string>(
    localStorage.getItem("viewMode") || ViewMode.Card
@@ -359,29 +364,31 @@ export default function Index() {
              </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={selectedLinks.length === 0}
-                >
-                  Edit
-                </button>
-              )}
-              {(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"
-                  disabled={selectedLinks.length === 0}
-                >
-                  Delete
-                </button>
-              )}
+              <button
+                onClick={() => setBulkEditLinksModal(true)}
+                className="btn btn-sm btn-accent text-white w-fit ml-auto"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(permissions === true || permissions?.canUpdate)
+                }
+              >
+                Edit
+              </button>
+              <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"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(permissions === true || permissions?.canDelete)
+                }
+              >
+                Delete
+              </button>
            </div>
          </div>
        )}
@@ -14,6 +14,7 @@ import toast from "react-hot-toast";
 import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
 import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
+import { useRouter } from "next/router";

 export default function Links() {
  const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
@@ -24,9 +25,17 @@ export default function Links() {
  );
  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);

+  const router = useRouter();
+
  const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
  const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
  const [editMode, setEditMode] = useState(false);
+  useEffect(() => {
+    return () => {
+      setEditMode(false);
+    };
+  }, [router]);
+
  const collectivePermissions = useCollectivePermissions(
    selectedLinks.map((link) => link.collectionId as number)
  );
@@ -71,7 +80,6 @@ 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">
@@ -127,31 +135,37 @@ export default function Links() {
              </div>
            )}
            <div className="flex gap-3">
-              {(collectivePermissions === true ||
-                collectivePermissions?.canUpdate) && (
-                <button
-                  onClick={() => setBulkEditLinksModal(true)}
-                  className="btn btn-sm btn-accent text-white w-fit ml-auto"
-                  disabled={selectedLinks.length === 0}
-                >
-                  Edit
-                </button>
-              )}
-              {(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"
-                  disabled={selectedLinks.length === 0}
-                >
-                  Delete
-                </button>
-              )}
+              <button
+                onClick={() => setBulkEditLinksModal(true)}
+                className="btn btn-sm btn-accent text-white w-fit ml-auto"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(
+                    collectivePermissions === true ||
+                    collectivePermissions?.canUpdate
+                  )
+                }
+              >
+                Edit
+              </button>
+              <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"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(
+                    collectivePermissions === true ||
+                    collectivePermissions?.canDelete
+                  )
+                }
+              >
+                Delete
+              </button>
            </div>
          </div>
        )}
@@ -2,7 +2,7 @@ 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 ViewDropdown from "@/components/ViewDropdown";
@@ -13,6 +13,7 @@ import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
 import useCollectivePermissions from "@/hooks/useCollectivePermissions";
 import toast from "react-hot-toast";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
+import { useRouter } from "next/router";

 export default function PinnedLinks() {
  const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
@@ -25,9 +26,16 @@ export default function PinnedLinks() {

  useLinks({ sort: sortBy, pinnedOnly: true });

+  const router = useRouter();
  const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
  const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
  const [editMode, setEditMode] = useState(false);
+  useEffect(() => {
+    return () => {
+      setEditMode(false);
+    };
+  }, [router]);
+
  const collectivePermissions = useCollectivePermissions(
    selectedLinks.map((link) => link.collectionId as number)
  );
@@ -124,31 +132,37 @@ export default function PinnedLinks() {
              </div>
            )}
            <div className="flex gap-3">
-              {(collectivePermissions === true ||
-                collectivePermissions?.canUpdate) && (
-                <button
-                  onClick={() => setBulkEditLinksModal(true)}
-                  className="btn btn-sm btn-accent text-white w-fit ml-auto"
-                  disabled={selectedLinks.length === 0}
-                >
-                  Edit
-                </button>
-              )}
-              {(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"
-                  disabled={selectedLinks.length === 0}
-                >
-                  Delete
-                </button>
-              )}
+              <button
+                onClick={() => setBulkEditLinksModal(true)}
+                className="btn btn-sm btn-accent text-white w-fit ml-auto"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(
+                    collectivePermissions === true ||
+                    collectivePermissions?.canUpdate
+                  )
+                }
+              >
+                Edit
+              </button>
+              <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"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(
+                    collectivePermissions === true ||
+                    collectivePermissions?.canDelete
+                  )
+                }
+              >
+                Delete
+              </button>
            </div>
          </div>
        )}
@@ -33,6 +33,12 @@ export default function Index() {
  const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
  const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
  const [editMode, setEditMode] = useState(false);
+  useEffect(() => {
+    return () => {
+      setEditMode(false);
+    };
+  }, [router]);
+
  const collectivePermissions = useCollectivePermissions(
    selectedLinks.map((link) => link.collectionId as number)
  );
@@ -283,31 +289,37 @@ export default function Index() {
              </div>
            )}
            <div className="flex gap-3">
-              {(collectivePermissions === true ||
-                collectivePermissions?.canUpdate) && (
-                <button
-                  onClick={() => setBulkEditLinksModal(true)}
-                  className="btn btn-sm btn-accent text-white w-fit ml-auto"
-                  disabled={selectedLinks.length === 0}
-                >
-                  Edit
-                </button>
-              )}
-              {(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"
-                  disabled={selectedLinks.length === 0}
-                >
-                  Delete
-                </button>
-              )}
+              <button
+                onClick={() => setBulkEditLinksModal(true)}
+                className="btn btn-sm btn-accent text-white w-fit ml-auto"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(
+                    collectivePermissions === true ||
+                    collectivePermissions?.canUpdate
+                  )
+                }
+              >
+                Edit
+              </button>
+              <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"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(
+                    collectivePermissions === true ||
+                    collectivePermissions?.canDelete
+                  )
+                }
+              >
+                Delete
+              </button>
            </div>
          </div>
        )}