Feature/tech stack functionality p2

src/app/(main)/my-voyage/[teamId]/tech-stack/components/RemoveVoteBtn.tsx

@@ -1,53 +1,23 @@
-import type { Dispatch, SetStateAction } from "react";
-import { EllipsisVerticalIcon } from "@heroicons/react/24/solid";
-import SettingsMenu from "./SettingsMenu";
 import Button from "@/components/Button";
 
+/*
 interface RemoveVoteBtnProps {
   id: number;
-  openMenu: (value: number) => void;
-  numberOfVotes: number;
-  closeMenu: () => void;
-  setIsEditing: Dispatch<SetStateAction<number>>;
-  isMenuOpen: number;
 }
+*/
 
-export default function RemoveVoteBtn({
-  id,
-  openMenu,
-  numberOfVotes,
-  closeMenu,
-  setIsEditing,
-  isMenuOpen,
-}: RemoveVoteBtnProps) {
-  const handleClick = () => {
-    openMenu(id);
-  };
-
+export default function RemoveVoteBtn(
+  {
+    /* { id }: RemoveVoteBtnProps */
+  },
+) {
   return (
-    <div className="relative col-span-2 flex w-[165px] items-center justify-end">
-      {numberOfVotes < 2 && (
-        <div className="h-1/6 w-1/6">
-          <EllipsisVerticalIcon
-            className="mr-2 rounded-xl hover:cursor-pointer hover:bg-base-100"
-            onClick={handleClick}
-          />
-          {isMenuOpen === id && (
-            <SettingsMenu
-              onClose={closeMenu}
-              setIsEditing={setIsEditing}
-              id={id}
-            />
-          )}
-        </div>
-      )}
-      <Button
-        variant="error"
-        size="xs"
-        className="justify-self-end rounded-3xl font-semibold"
-      >
-        Remove Vote
-      </Button>
-    </div>
+    <Button
+      variant="error"
+      size="xs"
+      className="justify-self-end rounded-3xl font-semibold"
+    >
+      Remove Vote
+    </Button>
   );
 }

src/app/(main)/my-voyage/[teamId]/tech-stack/components/SettingsMenu.tsx

@@ -1,22 +1,48 @@
 "use client";
 import { useEffect, useRef } from "react";
+import { deleteTechItem } from "@/myVoyage/tech-stack/techStackService";
+import { useAppDispatch } from "@/store/hooks";
+import { onOpenModal } from "@/store/features/modal/modalSlice";
 import EditMenu from "@/components/EditMenu";
 
 interface SettingsMenuProps {
   onClose: () => void;
-  setIsEditing: (value: number) => void;
+  setEditItemId: (value: number) => void;
   id: number;
 }
 
 export default function SettingsMenu({
   onClose,
-  setIsEditing,
+  setEditItemId,
   id,
 }: SettingsMenuProps) {
+  const dispatch = useAppDispatch();
   const menuRef = useRef<HTMLDivElement>(null);
 
   const openEdit = () => {
-    setIsEditing(id);
+    setEditItemId(id);
+  };
+
+  const handleDelete = () => {
+    dispatch(
+      onOpenModal({
+        type: "confirmation",
+        content: {
+          title: "Confirm Deletion",
+          message:
+            "Are you sure you want to delete? You will permanently lose all the information and will not be able to recover it.",
+          confirmationText: "Delete",
+          cancelText: "Keep It",
+        },
+        payload: {
+          params: {
+            techItemId: id,
+          },
+          redirect: null,
+          deleteFunction: deleteTechItem,
+        },
+      }),
+    );
   };
 
   useEffect(() => {
@@ -33,7 +59,7 @@ export default function SettingsMenu({
 
   return (
     <div className="absolute -mt-6 ml-[12px]" ref={menuRef}>
-      <EditMenu handleClick={openEdit} />
+      <EditMenu handleClick={openEdit} handleDelete={handleDelete} />
     </div>
   );
 }