(feature) Tax report generation cancel

src/components/TaxReport/TaxReport.loader.js

@@ -1,16 +1,23 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
+import React, { useCallback } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
-import { Spinner } from '@blueprintjs/core'
+import { Button, Spinner } from '@blueprintjs/core'
 import { isNil } from '@bitfinex/lib-js-util-base'
 
+import { cancelTaxReportGeneration } from 'state/taxReport/actions'
 import { getTransactionsGenerationProgress } from 'state/taxReport/selectors'
 
 export const Loader = () => {
   const { t } = useTranslation()
+  const dispatch = useDispatch()
   const progress = useSelector(getTransactionsGenerationProgress)
   const spinnerContent = isNil(progress) ? '' : `${progress}%`
 
+  const onCancel = useCallback(
+    () => dispatch(cancelTaxReportGeneration()),
+    [dispatch],
+  )
+
   return (
     <div className='loading-container'>
       <div className='spinner-wrapper'>
@@ -26,6 +33,12 @@ export const Loader = () => {
         <p>{t('taxreport.generation.title')}</p>
         <p>{t('taxreport.generation.note')}</p>
       </div>
+      <Button
+        onClick={onCancel}
+        className='loading-cancel-btn'
+      >
+        {t('framework.cancel')}
+      </Button>
     </div>
   )
 }

src/components/TaxReport/_TaxReport.scss

@@ -41,6 +41,16 @@
       min-width: 340px;
       text-align: center;
     }
+
+    &-cancel-btn {
+      border: none;
+      color: var(--color2);
+
+      &:hover {
+        border: none;
+        color: var(--color);
+      }
+    }
   }
 }
 

src/state/taxReport/actions.js

@@ -41,11 +41,18 @@ export function setGenerationProgress(payload) {
   }
 }
 
+export function cancelTaxReportGeneration() {
+  return {
+    type: types.CANCEL_TAX_REPORT_GENERATION,
+  }
+}
+
 export default {
   fetchFail,
   setShowDisclaimer,
   setGenerationProgress,
   setTransactionsStrategy,
   fetchTaxReportTransactions,
   updateTaxReportTransactions,
+  cancelTaxReportGeneration,
 }

src/state/taxReport/constants.js

@@ -5,9 +5,11 @@ export default {
   SET_TRANSACTIONS_STRATEGY: 'BITFINEX/TAX_REPORT_TRANSACTIONS/STRATEGY/SET',
   SET_SHOW_DISCLAIMER: 'BITFINEX/TAX_REPORT_TRANSACTIONS/SHOW_DISCLAIMER/SET',
   SET_GENERATION_PROGRESS: 'BITFINEX/TAX_REPORT_TRANSACTIONS/GENERATION_PROGRESS/SET',
+  CANCEL_TAX_REPORT_GENERATION: 'BITFINEX/TAX_REPORT_TRANSACTIONS/GENERATION/CANCEL',
 
   STRATEGY_LIFO: 'LIFO',
   STRATEGY_FIFO: 'FIFO',
+  TAX_REPORT_CANCEL: 'TRX_TAX_REPORT_INTERRUPTER',
   WS_TAX_TRANSACTION_REPORT_GENERATION_PROGRESS: 'ws_emitTrxTaxReportGenerationProgressToOne',
   WS_TAX_TRANSACTION_REPORT_GENERATION_COMPLETED: 'ws_emitTrxTaxReportGenerationInBackgroundToOne',
 }

src/state/taxReport/reducer.js

@@ -77,6 +77,16 @@ export function taxReportReducer(state = initialState, action) {
           dataReceived: true,
         },
       }
+    case types.CANCEL_TAX_REPORT_GENERATION:
+      return {
+        ...state,
+        transactions: {
+          ...state.transactions,
+          progress: null,
+          pageLoading: false,
+          dataReceived: true,
+        },
+      }
     case authTypes.LOGOUT:
       return initialState
     default: {

src/state/taxReport/saga.js

@@ -4,6 +4,7 @@ import {
   select,
   takeLatest,
 } from 'redux-saga/effects'
+import { isEmpty } from '@bitfinex/lib-js-util-base'
 
 import { makeFetchCall } from 'state/utils'
 import { updateSuccessStatus, updateErrorStatus } from 'state/status/actions'
@@ -14,6 +15,7 @@ import actions from './actions'
 import { getTransactionsStrategy } from './selectors'
 
 export const getReqTaxReport = (params) => makeFetchCall('makeTrxTaxReportInBackground', params)
+export const getReqTaxReportCancel = () => makeFetchCall('interruptOperations', { names: [types.TAX_REPORT_CANCEL] })
 
 export function* fetchTaxReport() {
   try {
@@ -46,7 +48,7 @@ function* handleTaxTrxReportGenerationCompleted({ payload }) {
   const { result, error } = payload
   if (result) {
     yield put(actions.updateTaxReportTransactions(result))
-    yield put(updateSuccessStatus({ id: 'taxreport.generation.success' }))
+    if (!isEmpty(result)) yield put(updateSuccessStatus({ id: 'taxreport.generation.success' }))
   }
   if (error) {
     yield put(actions.fetchFail({
@@ -65,9 +67,29 @@ function* handleTaxTrxReportGenerationProgress({ payload }) {
   }
 }
 
+function* cancelTaxReportGeneration() {
+  try {
+    const { error } = yield call(getReqTaxReportCancel)
+    if (error) {
+      yield put(actions.fetchFail({
+        id: 'status.fail',
+        topic: 'taxreport.title',
+        detail: error?.message ?? JSON.stringify(error),
+      }))
+    }
+  } catch (fail) {
+    yield put(actions.fetchFail({
+      id: 'status.request.error',
+      topic: 'taxreport.title',
+      detail: JSON.stringify(fail),
+    }))
+  }
+}
+
 export default function* taxReportSaga() {
   yield takeLatest(types.FETCH_FAIL, fetchTaxReportFail)
   yield takeLatest([types.FETCH_TRANSACTIONS], fetchTaxReport)
+  yield takeLatest([types.CANCEL_TAX_REPORT_GENERATION], cancelTaxReportGeneration)
   yield takeLatest(types.WS_TAX_TRANSACTION_REPORT_GENERATION_PROGRESS, handleTaxTrxReportGenerationProgress)
   yield takeLatest(types.WS_TAX_TRANSACTION_REPORT_GENERATION_COMPLETED, handleTaxTrxReportGenerationCompleted)
 }