DUOS-762[risk=no] Added Cancel Button to New Chair Console (#887)

JVThomas · web-flow · commit c0ac6e5a52f1 · 2021-02-22T12:06:01.000-05:00
* DUOS-762 added cancel button to record rows, refactored create function to create shared view update helper function for both create and cancel flows

* DUOS-762 added conditional logic for Final Vote button

* DUOS-762 updated AdminManageAccess error handler due to createDARElection adjustment

* DUOS-762 codacy fix

* DUOS-762 corrected defaultValue key on paginationBar, replaced date check for vote check on filter, added key attribute to button elements
diff --git a/src/components/PaginationBar.js b/src/components/PaginationBar.js
@@ -35,7 +35,7 @@ export default function PaginationBar(props) {
             onChange: (e) => goToPage(toNumber(currentPage.current.value)),
             type: 'text',
             ref: currentPage,
-            defaultvalue: props.currentPage,
+            defaultValue: props.currentPage,
             style: Styles.TABLE.PAGINATION_INPUT
           }),
           span({}, [` of ${pageCount}`])
@@ -56,7 +56,7 @@ export default function PaginationBar(props) {
           onChange: (e) => changeTableSize(tableSize.current.value),
           type: 'text',
           ref: tableSize,
-          defaultvalue: props.tableSize,
+          defaultValue: props.tableSize,
           style: Styles.TABLE.PAGINATION_INPUT
         })
       ])
diff --git a/src/libs/ajax.js b/src/libs/ajax.js
@@ -574,7 +574,7 @@ export const Election = {
     const election = { status: 'Open', finalAccessVote: false };
     const url = `${await Config.getApiUrl()}/dataRequest/${requestId}/election`;
     const res = await fetchOk(url, fp.mergeAll([Config.jsonBody(election), Config.authOpts(), { method: 'POST' }]));
-    return res;
+    return res.json();
   },
 
   isDataSetElectionOpen: async () => {
diff --git a/src/pages/AdminManageAccess.js b/src/pages/AdminManageAccess.js
@@ -115,9 +115,7 @@ class AdminManageAccess extends Component {
           if (errorResponse.status === 500) {
             this.setState({ alertTitle: 'Email Service Error!', alertMessage: 'The election was created but the participants couldnt be notified by Email.', disableCancelBtn: false });
           } else {
-            errorResponse.json().then(error =>
-              this.setState({ alertTitle: 'Election cannot be created!', alertMessage: error.message, disableCancelBtn: false })
-            );
+            this.setState({ alertTitle: 'Election cannot be created!', alertMessage: errorResponse.message, disableCancelBtn: false });
           }
         });
     } else {
diff --git a/src/pages/NewChairConsole.js b/src/pages/NewChairConsole.js
@@ -39,32 +39,65 @@ const getElectionDate = (election) => {
 
 const Records = (props) => {
   //NOTE: currentPage is not zero-indexed
-  const {openModal, currentPage, tableSize, applyTextHover, removeTextHover, openConfirmation} = props;
+  const {openModal, currentPage, tableSize, applyTextHover, removeTextHover, openConfirmation, updateLists} = props;
   const startIndex = (currentPage - 1) * tableSize;
   const endIndex = currentPage * tableSize; //NOTE: endIndex is exclusive, not inclusive
   const visibleWindow = props.filteredList.slice(startIndex, endIndex);
   const dataIDTextStyle = Styles.TABLE.DATA_REQUEST_TEXT;
   const recordTextStyle = Styles.TABLE.RECORD_TEXT;
 
-  const createActionButton = (electionInfo, index) => {
+  const cancelElectionHandler = async (electionData, darId, index) => {
+    const targetElection = electionData.election;
+    const electionId = targetElection.electionId;
+    const electionPayload = Object.assign({}, electionData.election, {status: 'Canceled', finalAccessVote: 'false'});
+
+    try {
+      const updatedElection = await Election.updateElection(electionId, electionPayload);
+      const notification = 'Election has been cancelled';
+      updateLists(updatedElection, darId, index, notification);
+    } catch(error) {
+      Notifications.showError({text: 'Error: Failed to cancel selected Election'});
+    }
+  };
+
+  const createActionButtons = (electionInfo, index) => {
     const name = "cell-button hover-color";
     const e = electionInfo.election;
     const dar = electionInfo.dar;
+    const currentUserId = Storage.getCurrentUser().dacUserId;
+
     if (!isNil(e)) {
       switch (e.status) {
-        case "Open" :
-          return button({
-            className: name,
-            onClick: () => props.history.push(`access_review/${dar.referenceId}`)
-          }, ["Vote"]);
+        case 'Open' :
+          const votes = filter({type: 'DAC', dacUserId: currentUserId})(electionInfo.votes);
+          const isFinal = !isEmpty(votes.find((voteData) => !isNil(voteData.vote)));
+          const vote = head(votes);
+          return [
+            button({
+              key: `vote-button-${e.referenceId}`,
+              className: `${name} vote-button`,
+              style: {flex: 1},
+              onClick: () => props.history.push(`access_review/${dar.referenceId}/${vote.voteId}`)
+            }, [`${isFinal ? 'Final' : 'Vote'}`]),
+            button({
+              key: `cancel-button-${e.referenceId}`,
+              className: `${name} cancel-button`,
+              style: {flex: 1},
+              onClick: (e) => cancelElectionHandler(electionInfo, dar.referenceId, index)
+            }, ['Cancel'])
+          ];
+        case 'Final' :
+          return ['- -'];
         default :
           return button({
+            key: `reopen-button-${e.referenceId}`,
             className: name,
             onClick: () => openConfirmation(dar, index)
           }, ["Re-Open"]);
       }
     }
     return button({
+      key: `open-button-${e.referenceId}`,
       className: name,
       onClick: () => openConfirmation(dar, index)
     }, ["Open Election"]);
@@ -84,12 +117,12 @@ const Records = (props) => {
       div({style: Object.assign({}, Styles.TABLE.SUBMISSION_DATE_CELL, recordTextStyle)}, [getElectionDate(election)]),
       div({style: Object.assign({}, Styles.TABLE.DAC_CELL, recordTextStyle)}, [dac ? dac.name : '- -']),
       div({style: Object.assign({}, Styles.TABLE.ELECTION_STATUS_CELL, recordTextStyle)}, [election ? election.status : '- -']),
-      div({style: Object.assign({}, Styles.TABLE.ELECTION_ACTIONS_CELL, recordTextStyle)}, [createActionButton(electionInfo, index)]),
+      div({style: Object.assign({}, Styles.TABLE.ELECTION_ACTIONS_CELL, recordTextStyle)}, [createActionButtons(electionInfo, index)]),
     ]);
   });
 };
 
-const NewChairConsole = (props) => {
+export default function NewChairConsole(props) {
   const [showModal, setShowModal] = useState(false);
   const [electionList, setElectionList] = useState([]);
   const [filteredList, setFilteredList] = useState([]);
@@ -152,6 +185,18 @@ const NewChairConsole = (props) => {
     }
   };
 
+  const updateLists = (updatedElection, darId, index, successText) => {
+    const i = index + ((currentPage - 1) * tableSize);
+    let filteredListCopy = cloneDeep(filteredList);
+    let electionListCopy = cloneDeep(electionList);
+    filteredListCopy[parseInt(i, 10)].election = updatedElection;
+    setFilteredList(filteredListCopy);
+    const row = electionListCopy.find((element) => element.dar.referenceId === darId);
+    row.election = Object.assign({}, row.election, updatedElection);
+    setElectionList(electionListCopy);
+    Notifications.showSuccess({text: successText});
+  };
+
   const handleSearchChange = () => {
     setCurrentPage(1);
     const searchTermValues = toLower(searchTerms.current.value).split(/\s|,/);
@@ -188,31 +233,20 @@ const NewChairConsole = (props) => {
     }
   };
 
-  const createElection = (darId, index) => {
+  const createElection = async (darId, index) => {
     if (!isNil(darId)) {
-      let copy;
-      const i = index + ((currentPage - 1) * tableSize);
-      Election.createDARElection(darId)
-        .then((electionResponse) => electionResponse.json())
-        .then((newElection) => {
-          Notifications.showSuccess({text: "Election successfully opened"});
-          copy = cloneDeep(filteredList);
-          copy[parseInt(i, 10)].election = newElection;
-          setFilteredList(copy);
-          const row = electionList.find((element) => element.dar.referenceId === darId);
-          row.election = Object.assign({}, row.election, {status: "Open", finalAccessVote: false});
-        })
-        .catch((errorResponse) => {
-          if (errorResponse.status === 500) {
-            Notifications.showError({text: "Email Service Error! The election was created but the participants couldnt be notified by Email."});
-          } else {
-            errorResponse.json().then((error) =>
-              Notifications.showError({text: "Election cannot be created! " + error.message}));
-          }
-        });
-      setShowConfirmation(false);
-    } else {
-      Notifications.showError({text: "Could not open election. Contact us for support."});
+      try{
+        const updatedElection = await Election.createDARElection(darId);
+        const successMsg = 'Election successfully opened';
+        updateLists(updatedElection, darId, index, successMsg);
+        setShowConfirmation(false);
+      } catch(error) {
+        const errorReturn = {text: 'Error: Failed to create election!'};
+        if(error.status === 500) {
+          errorReturn.text = "Email Service Error! The election was created but the participants couldnt be notified by Email.";
+        }
+        Notifications.showError(errorReturn);
+      }
     }
   };
 
@@ -261,7 +295,7 @@ const NewChairConsole = (props) => {
           div({style: Styles.TABLE.ELECTION_STATUS_CELL}, ["Election status"]),
           div({style: Styles.TABLE.ELECTION_ACTIONS_CELL}, ["Election actions"])
         ]),
-        h(Records, {isRendered: !isEmpty(filteredList), filteredList, openModal, currentPage, tableSize, applyTextHover, removeTextHover, history: props.history, openConfirmation})
+        h(Records, {isRendered: !isEmpty(filteredList), filteredList, openModal, currentPage, tableSize, applyTextHover, removeTextHover, history: props.history, openConfirmation, updateLists})
       ]),
       h(PaginationBar, {pageCount, currentPage, tableSize, goToPage, changeTableSize, Styles, applyTextHover, removeTextHover}),
       h(DarModal, {showModal, closeModal, darDetails, researcher}),
@@ -278,5 +312,3 @@ const NewChairConsole = (props) => {
     ])
   );
 };
-
-export default NewChairConsole;
