diff --git a/pages/search.tsx b/pages/search.tsx index f89c799..1f540c4 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -11,10 +11,14 @@ import CardView from "@/components/LinkViews/Layouts/CardView"; // import GridView from "@/components/LinkViews/Layouts/GridView"; import ListView from "@/components/LinkViews/Layouts/ListView"; import PageHeader from "@/components/PageHeader"; -import { GridLoader, PropagateLoader } from "react-spinners"; +import { GridLoader } from "react-spinners"; +import useCollectivePermissions from "@/hooks/useCollectivePermissions"; +import toast from "react-hot-toast"; +import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal"; +import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal"; export default function Search() { - const { links } = useLinkStore(); + const { links, selectedLinks, setSelectedLinks, deleteLinksById } = useLinkStore(); const router = useRouter(); @@ -29,8 +33,48 @@ export default function Search() { const [viewMode, setViewMode] = useState( localStorage.getItem("viewMode") || ViewMode.Card ); + const [sortBy, setSortBy] = useState(Sort.DateNewestFirst); + const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false); + const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false); + const [editMode, setEditMode] = useState(false); + + useEffect(() => { + if (editMode) return setEditMode(false); + }, [router]); + + const collectivePermissions = useCollectivePermissions( + selectedLinks.map((link) => link.collectionId as number) + ); + + const handleSelectAll = () => { + if (selectedLinks.length === links.length) { + setSelectedLinks([]); + } else { + setSelectedLinks(links.map((link) => link)); + } + }; + + const bulkDeleteLinks = async () => { + const load = toast.loading( + `Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : "" + }...` + ); + + const response = await deleteLinksById( + selectedLinks.map((link) => link.id as number) + ); + + toast.dismiss(load); + + response.ok && + toast.success( + `Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : "" + }!` + ); + }; + const { isLoading } = useLinks({ sort: sortBy, searchQueryString: decodeURIComponent(router.query.q as string), @@ -62,6 +106,21 @@ export default function Search() {
+ {links.length > 0 && ( +
{ + setEditMode(!editMode); + setSelectedLinks([]); + }} + className={`btn btn-square btn-sm btn-ghost ${editMode + ? "bg-primary/20 hover:bg-primary/20" + : "hover:bg-neutral/20" + }`} + > + +
+ )}
+ {editMode && links.length > 0 && ( +
+ {links.length > 0 && ( +
+ handleSelectAll()} + checked={ + selectedLinks.length === links.length && links.length > 0 + } + /> + {selectedLinks.length > 0 ? ( + + {selectedLinks.length}{" "} + {selectedLinks.length === 1 ? "link" : "links"} selected + + ) : ( + Nothing selected + )} +
+ )} +
+ + +
+
+ )} + {!isLoading && !links[0] ? (

Nothing found.{" "} @@ -80,7 +197,7 @@ export default function Search() {

) : links[0] ? ( - + ) : ( isLoading && ( + {bulkDeleteLinksModal && ( + { + setBulkDeleteLinksModal(false); + }} + /> + )} + {bulkEditLinksModal && ( + { + setBulkEditLinksModal(false); + }} + /> + )} ); }