feat: implement drive item deletion

packages/insea-connect-ui/app/(dashboard)/(routes)/drive/_components/drive-item.tsx

@@ -25,6 +25,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { useRouter } from "next/navigation";
 import { BACKEND_BASE_URL } from "@/lib/constants";
+import { useModal } from "@/hooks/use-modal-store";
 
 type fileType =
   | "image/png"
@@ -51,6 +52,7 @@ const DriveItem = ({
   folderId,
   fileUrl,
 }: DriveItemProps) => {
+  const { onOpen } = useModal();
   const router = useRouter();
   const getIcon = (type: fileType) => {
     if (type === "folder") {
@@ -130,7 +132,13 @@ const DriveItem = ({
             Details
           </DropdownMenuItem>
           <DropdownMenuSeparator />
-          <DropdownMenuItem className="text-red-500 group">
+          <DropdownMenuItem
+            className="text-red-500 group"
+            onClick={(event) => {
+              event.stopPropagation();
+              onOpen("delete-drive-item", { itemId: folderId });
+            }}
+          >
             <Delete className="h-4 w-4 mr-2 group-hover:text-red-700" />
             <span className="group-hover:text-red-700">Delete</span>
           </DropdownMenuItem>

packages/insea-connect-ui/components/modal/delete-drive-item-modal.tsx

@@ -0,0 +1,79 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useSession } from "next-auth/react";
+import { useToast } from "../ui/use-toast";
+import { useModal } from "@/hooks/use-modal-store";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+import { Button } from "../ui/button";
+import axios from "axios";
+import { DELETE_DRIVE_ITEM_ENDPOINT } from "@/lib/constants";
+
+const DeleteDriveItemModal = () => {
+  const { data: session } = useSession();
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+  const { isOpen, onClose, type, data } = useModal();
+
+  const isModalOpen = isOpen && type === "delete-drive-item";
+  const itemId = data?.itemId;
+  const access_token = session?.tokens.access_token;
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  const handleDelete = async () => {
+    try {
+      await axios.delete(`${DELETE_DRIVE_ITEM_ENDPOINT(itemId)}`, {
+        headers: {
+          Authorization: `Bearer ${access_token}`,
+        },
+      });
+
+      toast({
+        title: "Item deleted",
+        description: "The item has been deleted successfully",
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["drive-items"],
+      });
+      onClose();
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "An error occurred while deleting the item",
+        variant: "destructive",
+      });
+    }
+  };
+
+  return (
+    <Dialog open={isModalOpen} onOpenChange={handleClose}>
+      <DialogContent className="p-4 overflow-hidden">
+        <DialogHeader>
+          <DialogTitle>Delete item</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete this item?
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter>
+          <Button variant="secondary" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button variant="destructive" onClick={handleDelete}>
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DeleteDriveItemModal;

packages/insea-connect-ui/components/provider/modal-provider.tsx

@@ -7,6 +7,7 @@ import NewConversationModal from "../modal/new-conversation-modal";
 import GroupSettingsModal from "../modal/group-settings-modal";
 import NewMemberModal from "../modal/new-member-modal";
 import NewFileModal from "../modal/new-file-modal";
+import DeleteDriveItemModal from "../modal/delete-drive-item-modal";
 
 export const ModalProvider = () => {
   const [isMounted, setIsMounted] = useState(false);
@@ -22,6 +23,7 @@ export const ModalProvider = () => {
       <NewFileModal />
       <NewConversationModal />
       <NewFolderModal />
+      <DeleteDriveItemModal />
       <NewGroupModal />
       <GroupSettingsModal />
       <NewMemberModal />

packages/insea-connect-ui/components/provider/query-provider.tsx

@@ -4,7 +4,16 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useState } from "react";
 
 const QueryProvider = ({ children }: { children: React.ReactNode }) => {
-  const [queryClient] = useState(() => new QueryClient());
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            refetchOnWindowFocus: false,
+          },
+        },
+      })
+  );
   return (
     <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
   );

packages/insea-connect-ui/hooks/use-modal-store.ts

@@ -3,6 +3,7 @@ import { create } from "zustand";
 export type ModalType =
   | "new-file"
   | "new-folder"
+  | "delete-drive-item"
   | "new-group"
   | "new-member"
   | "group-settings"

packages/insea-connect-ui/lib/constants.ts

@@ -48,3 +48,6 @@ export const UPLOAD_FILE_ENDPOINT = (
   parentId: string = "0"
 ) =>
   `${BACKEND_BASE_URL}/${BACKEND_API_VERSION}/drive/${degreePathId}/folders/${parentId}/upload`;
+
+export const DELETE_DRIVE_ITEM_ENDPOINT = (itemId: string) =>
+  `${BACKEND_BASE_URL}/${BACKEND_API_VERSION}/drive/items/${itemId}`;