feat: cancel voting (frontend)

src/api/votings.ts

@@ -1,5 +1,5 @@
-import {CreateVotingRequest} from "store/features/votings/types";
-import {SERVER_HTTP_URL} from "../config";
+import { CreateVotingRequest, VotingStatus } from "store/features/votings/types";
+import { SERVER_HTTP_URL } from "../config";
 
 export const VotingAPI = {
   /**
@@ -23,24 +23,28 @@ export const VotingAPI = {
 
       throw new Error(`create voting request resulted in response with status ${response.status}`);
     } catch (error) {
-      throw new Error(`unable to create voting`, {cause: error});
+      throw new Error(`unable to create voting`, { cause: error });
     }
   },
 
-  changeVotingStatus: async (board: string, voting: string) => {
+  changeVotingStatus: async (board: string, voting: string, status?: VotingStatus) => {
     try {
-      const response = await fetch(`${SERVER_HTTP_URL}/boards/${board}/votings/${voting}`, {
+      const options: RequestInit = {
         method: "PUT",
         credentials: "include",
-      });
+        body: JSON.stringify({ status: status }),
+        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();
       }
 
       throw new Error(`change voting status request resulted in response with status ${response.status}`);
     } catch (error) {
-      throw new Error(`unable to change voting status`, {cause: error});
+      throw new Error(`unable to change voting status`, { cause: error });
     }
   },
 };

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, abortVoting } 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 abort_voting = () => {
+    dispatch(abortVoting(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={() => abort_voting()}>
+            <label>{t("VoteConfigurationButton.cancelVoting")}</label>
+          </button>
+        </>
       ) : (
         <>
           <button

src/store/features/votings/reducer.ts

@@ -1,9 +1,9 @@
-import {createReducer} from "@reduxjs/toolkit";
-import {VotingsState} from "./types";
-import {initializeBoard} from "../board";
-import {createdVoting, updatedVoting} from "./actions";
+import { createReducer } from "@reduxjs/toolkit";
+import { VotingsState } from "./types";
+import { initializeBoard } from "../board";
+import { createdVoting, updatedVoting } from "./actions";
 
-const initialState: VotingsState = {open: undefined, past: []};
+const initialState: VotingsState = { open: undefined, past: [] };
 
 export const votingsReducer = createReducer(initialState, (builder) =>
   builder
@@ -17,15 +17,17 @@ export const votingsReducer = createReducer(initialState, (builder) =>
           }
           return acc;
         },
-        {open: undefined, past: []}
+        { open: undefined, past: [] }
       )
     )
     .addCase(createdVoting, (state, action) => {
       state.open = action.payload;
-      state.past = [];
     })
     .addCase(updatedVoting, (state, action) => {
       state.open = undefined;
-      state.past.push(action.payload.voting);
+      const incoming = action.payload.voting;
+      const lastKnown = state.past[0];
+      const votingToPush = incoming.votes ? incoming : { ...incoming, votes: lastKnown?.votes };
+      state.past.unshift(votingToPush);
     })
 );

src/store/features/votings/thunks.ts

@@ -1,26 +1,37 @@
-import {createAsyncThunk} from "@reduxjs/toolkit";
-import {API} from "api";
-import {ApplicationState, retryable} from "store";
-import {CreateVotingRequest} from "./types";
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import { API } from "api";
+import { ApplicationState, retryable } from "store";
+import { CreateVotingRequest } from "./types";
 
-export const createVoting = createAsyncThunk<void, CreateVotingRequest, {state: ApplicationState}>("votings/createVoting", async (payload, {dispatch, getState}) => {
+export const createVoting = createAsyncThunk<void, CreateVotingRequest, { state: ApplicationState }>("votings/createVoting", async (payload, { dispatch, getState }) => {
   const boardId = getState().board.data!.id;
 
   await retryable(
     () => API.createVoting(boardId, payload),
     dispatch,
-    () => createVoting({...payload}),
+    () => createVoting({ ...payload }),
     "createVoting"
   );
 });
 
-export const closeVoting = createAsyncThunk<void, string, {state: ApplicationState}>("votings/closeVoting", async (payload, {dispatch, getState}) => {
+export const closeVoting = createAsyncThunk<void, string, { state: ApplicationState }>("votings/closeVoting", async (payload, { dispatch, getState }) => {
   const boardId = getState().board.data!.id;
 
   await retryable(
-    () => API.changeVotingStatus(boardId, payload),
+    () => API.changeVotingStatus(boardId, payload, "CLOSED"),
     dispatch,
     () => closeVoting(payload),
     "closeVoting"
   );
 });
+
+export const abortVoting = createAsyncThunk<void, string, { state: ApplicationState }>("votings/abortVoting", async (payload, { dispatch, getState }) => {
+  const boardId = getState().board.data!.id;
+
+  await retryable(
+    () => API.changeVotingStatus(boardId, payload, "ABORTED"),
+    dispatch,
+    () => abortVoting(payload),
+    "abortVoting"
+  );
+});