added cancel feature in frontend and added the according button

Author: Matin Gohar Far

src/api/votings.ts

@@ -27,12 +27,19 @@ export const VotingAPI = {
     }
   },
 
-  changeVotingStatus: async (board: string, voting: string) => {
+  changeVotingStatus: async (board: string, voting: string, status?: string) => {
     try {
-      const response = await fetch(`${SERVER_HTTP_URL}/boards/${board}/votings/${voting}`, {
+      const options: RequestInit = {
         method: "PUT",
         credentials: "include",
-      });
+      };
+
+      if (typeof status !== "undefined") {
+        options.body = JSON.stringify({status});
+        options.headers = {"Content-Type": "application/json"};
+      }
+
+      const response = await fetch(`${SERVER_HTTP_URL}/boards/${board}/votings/${voting}`, options);
 
       if (response.status === 200) {
         return await response.json();

src/components/VotingDialog/VotingDialog.tsx

@@ -1,18 +1,18 @@
-import {useState} from "react";
-import {useTranslation} from "react-i18next";
-import {Dialog} from "components/Dialog";
-import {useNavigate} from "react-router";
-import {useAppDispatch, useAppSelector} from "store";
-import {Toggle} from "components/Toggle";
-import {getNumberFromStorage, saveToStorage, getFromStorage} from "utils/storage";
-import {CUMULATIVE_VOTING_DEFAULT_STORAGE_KEY, CUSTOM_NUMBER_OF_VOTES_STORAGE_KEY} from "constants/storage";
-import {PlusIcon, MinusIcon} from "components/Icon";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Dialog } from "components/Dialog";
+import { useNavigate } from "react-router";
+import { useAppDispatch, useAppSelector } from "store";
+import { Toggle } from "components/Toggle";
+import { getNumberFromStorage, saveToStorage, getFromStorage } from "utils/storage";
+import { CUMULATIVE_VOTING_DEFAULT_STORAGE_KEY, CUSTOM_NUMBER_OF_VOTES_STORAGE_KEY } from "constants/storage";
+import { PlusIcon, MinusIcon } from "components/Icon";
 import "./VotingDialog.scss";
-import {closeVoting, createVoting} from "store/features";
+import { closeVoting, createVoting, cancelVoting } from "store/features";
 
 export const VotingDialog = () => {
   const dispatch = useAppDispatch();
-  const {t} = useTranslation();
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const isAdmin = useAppSelector((state) => state.participants?.self?.role === "OWNER" || state.participants?.self?.role === "MODERATOR");
   const voting = useAppSelector((state) => state.votings.open?.id);
@@ -46,12 +46,23 @@ export const VotingDialog = () => {
     navigate("..");
   };
 
+  const abortVoting = () => {
+    dispatch(cancelVoting(voting!));
+    navigate("..");
+  }
+
   return (
     <Dialog className="voting-dialog accent-color__planning-pink" title={t("VoteConfigurationButton.label")} onClose={() => navigate("..")}>
       {voting ? (
-        <button className="voting-dialog__start-button" data-testid="voting-dialog__stop-button" onClick={() => stopVoting()}>
-          <label>{t("VoteConfigurationButton.stopVoting")}</label>
-        </button>
+        <>
+          <button className="voting-dialog__start-button" data-testid="voting-dialog__stop-button" onClick={() => stopVoting()}>
+            <label>{t("VoteConfigurationButton.stopVoting")}</label>
+          </button>
+
+          <button className="voting-dialog__start-button voting-dialog__cancel-button" data-testid="voting-dialog__cancel-button" onClick={() => abortVoting()}>
+            <label>{t("VoteConfigurationButton.cancelVoting")}</label>
+          </button>
+        </>
       ) : (
         <>
           <button

src/store/features/votings/thunks.ts

@@ -24,3 +24,14 @@ export const closeVoting = createAsyncThunk<void, string, {state: ApplicationSta
     "closeVoting"
   );
 });
+
+export const cancelVoting = createAsyncThunk<void, string, {state: ApplicationState}>("votings/cancelVoting", async (payload, {dispatch, getState}) => {
+  const boardId = getState().board.data!.id;
+
+  await retryable(
+    () => API.changeVotingStatus(boardId, payload, "ABORTED"),
+    dispatch,
+    () => cancelVoting(payload),
+    "cancelVoting"
+  );
+});