add delete for trees

Author: kaseyliu

src/app/messages/page.tsx

@@ -29,7 +29,7 @@ import { CenterStyle } from "@/styles/AllStyle";
 import { BsThreeDotsVertical } from "react-icons/bs";
 import { BrowserView, MobileView } from "react-device-detect";
 import MessagePopUp from "@/components/MessagePopUp";
-import DeleteMessagePopUp from "@/components/DeleteMessagePopUp";
+import DeletePopUp from "@/components/DeletePopUp";
 
 interface UserData {
   name: string;
@@ -346,12 +346,12 @@ function Messages() {
                 alignItems={"center"}
                 position="absolute"
               >
-                <DeleteMessagePopUp
+                <DeletePopUp
                   closePopup={() => {
                     setOpenDeletePopUp(false);
                     setBlurAmount("0px");
                   }}
-                  deleteMessage={() => {
+                  deleteFunction={() => {
                     deleteMessageFromTable();
                     setOpenDeletePopUp(false);
                     setBlurAmount("0px");
@@ -370,6 +370,7 @@ function Messages() {
                       ),
                     });
                   }}
+                  bodyText="Do you really want to delete this message? This process can not be undone."
                 />
               </Flex>
             )}

src/app/treeTable/page.tsx

@@ -24,17 +24,25 @@ import {
   GridItem,
   Tag,
   Select,
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogContent,
+  AlertDialogOverlay,
+  useDisclosure,
 } from "@chakra-ui/react";
 import * as XLSX from "xlsx";
 import { CenterStyle } from "@/styles/AllStyle";
 import "./treetable.css";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { ITree } from "@/database/treeSchema";
-import { FileDown, Menu, SearchIcon, ChevronLeft, ChevronRight, TreePine, Edit } from "lucide-react";
+import { FileDown, Menu, SearchIcon, ChevronLeft, ChevronRight, TreePine, Edit, Trash2 } from "lucide-react";
 import { useSearchParams } from "next/navigation";
 import { BrowserView, MobileView, isMobile } from "react-device-detect";
 import { useUser } from "@clerk/nextjs";
 import Link from "next/link";
+import DeletePopUp from "@/components/DeletePopUp";
 
 export default function TreeTable() {
   const [loading, setLoading] = useState(true);
@@ -221,6 +229,36 @@ export default function TreeTable() {
   };
 
   const [selectedTree, setSelectedTree] = useState<ITree | null>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [treeToDelete, setTreeToDelete] = useState<ITree | null>(null);
+  const cancelRef = useRef<HTMLButtonElement>(null);
+
+  const openDeleteDialog = (tree: ITree) => {
+    setTreeToDelete(tree);
+    setDeleteDialogOpen(true);
+  };
+
+  const closeDeleteDialog = () => {
+    setDeleteDialogOpen(false);
+    setTreeToDelete(null);
+  };
+
+  const handleDeleteTree = async () => {
+    if (!treeToDelete) return;
+    try {
+      const res = await fetch(`/api/tree/${treeToDelete._id}`, { method: "DELETE" });
+      if (res.ok) {
+        setTrees((prev) => prev.filter((t) => t._id !== treeToDelete._id));
+        setFilteredTrees((prev) => prev.filter((t) => t._id !== treeToDelete._id));
+        closeDeleteDialog();
+        setSelectedTree(null);
+      } else {
+        closeDeleteDialog();
+      }
+    } catch (err) {
+      closeDeleteDialog();
+    }
+  };
 
   const handleArrowClick = (treeData: ITree) => {
     setSelectedTree(treeData);
@@ -458,9 +496,15 @@ export default function TreeTable() {
                                       </Tag>
                                     </Td>
                                     <Td>
-                                      <Button bg="" _hover={{ bg: "gray.100" }} onClick={() => handleArrowClick(tree)}>
-                                        <ChevronRight />
-                                      </Button>
+                                      <HStack>
+                                        <Button
+                                          bg=""
+                                          _hover={{ bg: "gray.100" }}
+                                          onClick={() => handleArrowClick(tree)}
+                                        >
+                                          <ChevronRight />
+                                        </Button>
+                                      </HStack>
                                     </Td>
                                   </Tr>
                                 ))
@@ -541,15 +585,21 @@ export default function TreeTable() {
                       transition="all 0.3s ease-in-out"
                       overflowX={"auto"}
                       height="100%"
+                      position="relative"
+                      zIndex={2}
                     >
                       <Box bg="#596334" color="white" p={5} borderTopLeftRadius={20} borderTopRightRadius={20}>
                         <VStack gap={3} align="stretch">
                           {/* Top row */}
-                          <Flex justifyContent="flex-end">
-                            {/* Notes icon on the right */}
+                          <Flex justifyContent="flex-end" alignItems="center" gap={2}>
                             <Link href={`/editTreeForm/${selectedTree._id}`}>
                               <Edit size={20} cursor="pointer" />
                             </Link>
+                            <Trash2
+                              size={20}
+                              style={{ cursor: "pointer", marginLeft: 4, color: "white" }}
+                              onClick={() => openDeleteDialog(selectedTree)}
+                            />
                           </Flex>
                           <Flex justifyContent="space-between" alignItems="center">
                             <Flex alignItems="center" gap={3}>
@@ -788,6 +838,25 @@ export default function TreeTable() {
       ) : (
         <div></div>
       )}
+      {deleteDialogOpen && (
+        <Flex
+          zIndex="1000"
+          w={"100vw"}
+          h={"100vh"}
+          left={0}
+          top={0}
+          justifyContent={"center"}
+          alignItems={"center"}
+          position="fixed"
+          style={{ backdropFilter: "blur(3px)" }}
+        >
+          <DeletePopUp
+            closePopup={closeDeleteDialog}
+            deleteFunction={handleDeleteTree}
+            bodyText="Do you really want to delete this tree? This process can not be undone."
+          />
+        </Flex>
+      )}
     </div>
   );
 }