feat: delete tag

src/actions/Tag.js

@@ -21,6 +21,27 @@ export const createTag = async (name) => {
     });
 };
 
+export const deleteTag = async (_id) => {
+  return fetch(urls.api.tag.delete, {
+    method: "POST",
+    mode: "same-origin",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ _id }),
+  })
+    .then((response) => response.json())
+    .then((json) => {
+      if (json == null) {
+        throw new Error("Could not connect to API!");
+      } else if (!json.success) {
+        throw new Error(json.message);
+      }
+      return json.payload;
+    });
+};
+
 export const getTagsObject = async () => {
   return fetch(urls.api.tag.getObject, {
     method: "GET",

src/components/Tag/TagSelect.jsx

@@ -1,19 +1,86 @@
+import { CloseIcon } from "@chakra-ui/icons";
+import { AbsoluteCenter, Button, useDisclosure } from "@chakra-ui/react";
+import { useState } from "react";
+import { useSWRConfig } from "swr";
+import { deleteTag } from "../../actions/Tag";
+import urls from "../../lib/utils/urls";
 import CheckboxArrayControl from "../FormComponents/CheckboxArrayControl";
+import ConfirmActionModal from "../Modals/ConfirmActionModal";
 
 const TagSelect = ({ tag }) => {
+  const [hover, setHover] = useState(false);
+
+  const { mutate } = useSWRConfig();
+
+  const removeTagFromDatabase = async () => {
+    await deleteTag(tag.id);
+    mutate(urls.api.tag.getObject);
+  };
+
+  const updateTags = async () => {
+    await removeTagFromDatabase();
+    onCloseDeleteModal();
+  };
+
+  const {
+    isOpen: isOpenDeleteModal,
+    onOpen: onOpenDeleteModal,
+    onClose: onCloseDeleteModal,
+  } = useDisclosure();
+
   return (
-    <CheckboxArrayControl
-      key={tag._id}
-      name="tagArray"
-      value={tag.name}
-      style={{
-        w: "100%",
-        textTransform: "capitalize",
-        fontSize: { base: "0.8em", "2xl": "1em" },
+    <div
+      onMouseEnter={() => {
+        setHover(true);
+      }}
+      onMouseLeave={() => {
+        setHover(false);
       }}
     >
-      {tag.name}
-    </CheckboxArrayControl>
+      <CheckboxArrayControl
+        key={tag._id}
+        name="tagArray"
+        value={tag.name}
+        style={{
+          w: "100%",
+          textTransform: "capitalize",
+          fontSize: { base: "0.8em", "2xl": "1em" },
+        }}
+      >
+        {tag.name}
+        {hover && (
+          <AbsoluteCenter
+            right="-1.35rem"
+            bg="transparent"
+            p="1"
+            axis="vertical"
+          >
+            <Button
+              minWidth="15px"
+              minHeight="15px"
+              height="15px"
+              width="15px"
+              backgroundColor="transparent"
+              color="none"
+              rounded="full"
+              _hover={{ bg: "#E2E3E5" }}
+              onClick={onOpenDeleteModal}
+              padding="0"
+            >
+              <CloseIcon h={1.5} w={1.5} color="#515254" />
+            </Button>
+          </AbsoluteCenter>
+        )}
+        <ConfirmActionModal
+          isOpen={isOpenDeleteModal}
+          onClose={onCloseDeleteModal}
+          mainText="Are you sure you want to delete this tag?"
+          confirmButtonText="Yes, delete tag"
+          cancelButtonText="No, return to add standard"
+          handleAction={updateTags}
+        />
+      </CheckboxArrayControl>
+    </div>
   );
 };