Merge branch 'clean' of https://github.com/hngprojects/hng_boilerplat…

…e_nextjs into refactor/restructure-email-templates

src/app/dashboard/(admin)/admin/users/component/dialogue/delete-dialog.test.tsx

@@ -0,0 +1,39 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import DeleteDialog from "./delete-dialog";
+
+describe("deleteDialog", () => {
+  it("renders the dialog with correct content", () => {
+    expect.hasAssertions();
+    const onClose = vi.fn();
+    render(<DeleteDialog onClose={onClose} />);
+
+    expect(screen.getByText("Are you absolutely sure?")).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "This action cannot be undone. This will permanently delete this product from the database.",
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /cancel/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /delete/i })).toBeInTheDocument();
+  });
+
+  it("calls onClose when Cancel button is clicked", () => {
+    expect.hasAssertions();
+    const onClose = vi.fn();
+    render(<DeleteDialog onClose={onClose} />);
+
+    fireEvent.click(screen.getByRole("button", { name: /cancel/i }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onClose when Delete button is clicked", () => {
+    expect.hasAssertions();
+    const onClose = vi.fn();
+    render(<DeleteDialog onClose={onClose} />);
+
+    fireEvent.click(screen.getByRole("button", { name: /delete/i }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});

src/app/dashboard/(admin)/admin/users/component/dialogue/delete-dialog.tsx

@@ -0,0 +1,43 @@
+import { Button } from "~/components/common/common-button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog";
+
+const DeleteDialog = ({ onClose }: { onClose: () => void }) => {
+  return (
+    <Dialog open onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="text-lg font-semibold leading-7 text-slate-900">
+            Are you absolutely sure?
+          </DialogTitle>
+          <DialogDescription className="text-sm font-normal leading-tight text-slate-500">
+            This action cannot be undone. This will permanently delete this
+            product from the database.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex w-full">
+          <Button
+            variant="outline"
+            className="ml-auto flex items-center justify-center gap-2.5 rounded-md px-4 py-2 text-sm font-medium leading-normal"
+            onClick={onClose}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={onClose}
+            className="ml-2 flex items-center justify-center gap-2.5 rounded-md bg-red-600 px-4 py-2 text-sm font-medium leading-normal text-white"
+          >
+            Delete
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DeleteDialog;

src/app/dashboard/(admin)/admin/users/component/userTableBody.tsx

@@ -1,36 +1,22 @@
 import { EllipsisVertical } from "lucide-react";
 import Image from "next/image";
-import Link from "next/link";
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 
-import DropdownMenu from "../../../_components/ui/dropdownMenu";
-import { userData, UserDataProperties } from "../data/user-dummy-data";
+import { Button } from "~/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import { userData } from "../data/user-dummy-data";
+import DeleteDialog from "./dialogue/delete-dialog";
 
 const UserTableBody = () => {
-  const [showDropdown, setShowDropdown] = useState<
-    UserDataProperties | undefined
-  >();
-  const menuReference = useRef<HTMLDivElement>(null);
-  const [open, setOpen] = useState<boolean>(false);
-
-  useEffect(() => {
-    const handler = (event: MouseEvent) => {
-      if (
-        menuReference.current &&
-        !menuReference.current.contains(event.target as Node)
-      ) {
-        setShowDropdown(undefined);
-        // setOpen(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handler);
-
-    // Cleanup function
-    return () => {
-      document.removeEventListener("mousedown", handler);
-    };
-  }, []);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const handleOpenDialog = () => setIsDialogOpen(true);
+  const handleCloseDialog = () => setIsDialogOpen(false);
 
   return (
     <>
@@ -97,7 +83,7 @@ const UserTableBody = () => {
               </td>
 
               <td className="whitespace-nowrap p-4 text-center text-base font-normal capitalize leading-4 text-neutral-dark-2">
-                <div className="relative" ref={menuReference}>
+                {/* <div className="relative" ref={menuReference}>
                   <button
                     onClick={() => {
                       setShowDropdown(userData[index]);
@@ -123,12 +109,33 @@ const UserTableBody = () => {
                       Delete
                     </button>
                   </DropdownMenu>
-                </div>
+                </div> */}
+
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      className="bg-transparent text-neutral-dark-2 hover:bg-transparent focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+                      size={"icon"}
+                    >
+                      <EllipsisVertical size={16} color="#09090b" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuLabel className="sr-only">
+                      Actions
+                    </DropdownMenuLabel>
+                    <DropdownMenuItem>Edit</DropdownMenuItem>
+                    <DropdownMenuItem onClick={handleOpenDialog}>
+                      Delete
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
               </td>
             </tr>
           );
         })}
       </tbody>
+      {isDialogOpen && <DeleteDialog onClose={handleCloseDialog} />}
     </>
   );
 };

src/app/dashboard/(admin)/admin/users/page.tsx

@@ -7,19 +7,24 @@ import {
   CirclePlus,
   Filter,
 } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 
 import CardComponent from "~/components/adminDashboard/CardComponent";
 import CustomButton from "~/components/common/common-button/common-button";
 import { Button } from "~/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
 import {
   Pagination,
   PaginationContent,
   PaginationEllipsis,
   PaginationItem,
   PaginationLink,
 } from "~/components/ui/pagination";
-import DropdownMenu from "../../_components/ui/dropdownMenu";
 import UserTable from "./component/userTable";
 import { userCardData } from "./data/user-dummy-data";
 
@@ -45,31 +50,10 @@ const filterData: FilterDataProperties[] = [
 ];
 
 const UserPage = () => {
-  const [showDropdown, setShowDropdown] = useState<boolean>(false);
   const [selectedFilter, setSelectedFilter] = useState<
     FilterDataProperties | undefined
   >();
 
-  const menuReference = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handler = (event: MouseEvent) => {
-      if (
-        menuReference.current &&
-        !menuReference.current.contains(event.target as Node)
-      ) {
-        setShowDropdown(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handler);
-
-    // Cleanup function
-    return () => {
-      document.removeEventListener("mousedown", handler);
-    };
-  }, []);
-
   return (
     <>
       <section>
@@ -97,26 +81,22 @@ const UserPage = () => {
             </div>
 
             <div className="flex flex-row items-center gap-3">
-              <div className="relative" ref={menuReference}>
-                <CustomButton
-                  onClick={() => setShowDropdown(!showDropdown)}
-                  size="lg"
-                  className="p-3"
-                  variant="outline"
-                >
-                  <div className="flex flex-row items-center gap-2">
-                    <Filter size={16} color="#525252" />
-                    <div className="text-base font-normal leading-5">
-                      Filter
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    size="lg"
+                    className="bg-white px-3 py-2 duration-300 ease-in"
+                    variant="outline"
+                  >
+                    <div className="flex flex-row items-center gap-2">
+                      <Filter size={16} color="#525252" />
+                      <div className="text-base font-normal leading-5">
+                        Filter
+                      </div>
                     </div>
-                  </div>
-                </CustomButton>
-
-                <DropdownMenu
-                  position="md:right-0"
-                  width="w-[150px]"
-                  active={showDropdown}
-                >
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
                   {filterData.map((data, index) => {
                     const { selected, title } = data;
 
@@ -125,22 +105,24 @@ const UserPage = () => {
                       : (data.selected = false);
 
                     return (
-                      <button
+                      <DropdownMenuItem
                         onClick={() => setSelectedFilter(filterData[index])}
                         key={index}
-                        className="flex w-full items-center gap-2 px-2 py-1.5 text-left text-base font-normal leading-4 text-foreground outline-none"
                       >
-                        <div className="mr-auto">{title}</div>
-                        <Check
-                          size={16}
-                          color="#09090b"
-                          className={`${selected ? "opacity-100" : "opacity-0"}`}
-                        />
-                      </button>
+                        <div className="flex w-full items-center">
+                          <div className="mr-auto">{title}</div>
+
+                          <Check
+                            size={16}
+                            color="#09090b"
+                            className={`${selected ? "opacity-100" : "opacity-0"}`}
+                          />
+                        </div>
+                      </DropdownMenuItem>
                     );
                   })}
-                </DropdownMenu>
-              </div>
+                </DropdownMenuContent>
+              </DropdownMenu>
 
               <AddUserModal>
                 <CustomButton size="lg" className="p-3" variant="primary">