(improvements) Tax report generation progress

public/locales/en/translations.json

@@ -753,6 +753,11 @@
     "disclaimer": {
       "title": "Disclaimer",
       "message": "The tax reports generated by this app are for informational purposes only. We do not guarantee accuracy or completeness. Always consult a qualified tax advisor to ensure compliance with current tax laws and personalized advice. Your reliance on the generated reports is at your own risk."
+    }, 
+    "generation": {
+      "success": "Tax Report generated",
+      "title": "Your tax report is being generated. This process can take a while.",
+      "note": "If you have a large history it's recommended to keep the window open in the background until it's completed."
     }
   },
   "theme": {

src/components/TaxReport/TaxReport.js

@@ -28,6 +28,7 @@ import { getFullTime as getFullTimeSelector } from 'state/base/selectors'
 
 import queryConstants from 'state/query/constants'
 
+import Loader from './TaxReport.loader'
 import Disclaimer from './TaxReport.disclaimer'
 import { getColumns } from './TaxReport.columns'
 
@@ -45,10 +46,11 @@ const TaxReport = () => {
   const columnsWidth = useSelector((state) => getColumnsWidth(state, TYPE))
   const isNoData = isEmpty(entries)
   const isLoading = !dataReceived && pageLoading
+  const shouldFetchTaxReport = !isSyncRequired && !dataReceived && !isLoading
 
   useEffect(() => {
-    if (!isSyncRequired && isNoData) dispatch(fetchTaxReportTransactions())
-  }, [isSyncRequired])
+    if (shouldFetchTaxReport) dispatch(fetchTaxReportTransactions())
+  }, [shouldFetchTaxReport])
 
   const onRefresh = useCallback(
     () => dispatch(fetchTaxReportTransactions()),
@@ -63,7 +65,9 @@ const TaxReport = () => {
   )
 
   let showContent
-  if (isNoData) {
+  if (isLoading) {
+    showContent = <Loader />
+  } else if (isNoData) {
     showContent = (
       <div className='data-table-wrapper'>
         <DataTable

src/components/TaxReport/TaxReport.loader.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { useTranslation } from 'react-i18next'
+import { Spinner } from '@blueprintjs/core'
+import { isNil } from '@bitfinex/lib-js-util-base'
+
+import { getTransactionsGenerationProgress } from 'state/taxReport/selectors'
+
+export const Loader = () => {
+  const { t } = useTranslation()
+  const progress = useSelector(getTransactionsGenerationProgress)
+  const spinnerContent = isNil(progress) ? '' : `${progress}%`
+
+  return (
+    <div className='loading-container'>
+      <div className='spinner-wrapper'>
+        <div className='loading-progress'>
+          {spinnerContent}
+        </div>
+        <Spinner
+          className='loading'
+          size={Spinner.SIZE_STANDARD}
+        />
+      </div>
+      <div className='loading-note'>
+        <p>{t('taxreport.generation.title')}</p>
+        <p>{t('taxreport.generation.note')}</p>
+      </div>
+    </div>
+  )
+}
+
+export default Loader

src/components/TaxReport/_TaxReport.scss

@@ -7,6 +7,41 @@
       margin-top: 10px;
     }
   }
+
+  .loading {
+    &.bp3-spinner {
+      margin: auto;
+      display: block;
+    }
+
+    &-container {
+      height: 60%;
+      display: flex;
+      position: relative;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+
+      .spinner-wrapper {
+        display: flex;
+        position: relative;
+        margin-bottom: 20px;
+      }
+    }
+
+    &-progress {
+      top: 50%;
+      left: 50%;
+      position: absolute;
+      line-height: initial;
+      transform: translate(-50%, -50%);
+    }
+
+    &-note {
+      min-width: 340px;
+      text-align: center;
+    }
+  }
 }
 
 .disclaimer {

src/state/taxReport/actions.js

@@ -34,9 +34,17 @@ export function setShowDisclaimer(payload) {
   }
 }
 
+export function setGenerationProgress(payload) {
+  return {
+    type: types.SET_GENERATION_PROGRESS,
+    payload,
+  }
+}
+
 export default {
   fetchFail,
   setShowDisclaimer,
+  setGenerationProgress,
   setTransactionsStrategy,
   fetchTaxReportTransactions,
   updateTaxReportTransactions,

src/state/taxReport/constants.js

@@ -4,8 +4,10 @@ export default {
   UPDATE_TRANSACTIONS: 'BITFINEX/TAX_REPORT_TRANSACTIONS/UPDATE',
   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',
 
   STRATEGY_LIFO: 'LIFO',
   STRATEGY_FIFO: 'FIFO',
+  WS_TAX_TRANSACTION_REPORT_GENERATION_PROGRESS: 'ws_emitTrxTaxReportGenerationProgressToOne',
   WS_TAX_TRANSACTION_REPORT_GENERATION_COMPLETED: 'ws_emitTrxTaxReportGenerationInBackgroundToOne',
 }

src/state/taxReport/reducer.js

@@ -4,6 +4,7 @@ import types from './constants'
 
 const transactionsInitState = {
   data: [],
+  progress: null,
   pageLoading: false,
   dataReceived: false,
   showDisclaimer: true,
@@ -30,9 +31,10 @@ export function taxReportReducer(state = initialState, action) {
       return {
         ...state,
         transactions: {
-          dataReceived: true,
-          pageLoading: false,
           data: payload,
+          progress: null,
+          pageLoading: false,
+          dataReceived: true,
           strategy: state.transactions.strategy,
           showDisclaimer: state.transactions.showDisclaimer,
         },
@@ -56,13 +58,23 @@ export function taxReportReducer(state = initialState, action) {
         },
       }
     }
+    case types.SET_GENERATION_PROGRESS: {
+      return {
+        ...state,
+        transactions: {
+          ...state.transactions,
+          progress: payload,
+        },
+      }
+    }
     case types.FETCH_FAIL:
       return {
         ...state,
         transactions: {
           ...state.transactions,
-          dataReceived: false,
+          progress: null,
           pageLoading: false,
+          dataReceived: true,
         },
       }
     case authTypes.LOGOUT:

src/state/taxReport/saga.js

@@ -6,7 +6,7 @@ import {
 } from 'redux-saga/effects'
 
 import { makeFetchCall } from 'state/utils'
-import { updateErrorStatus } from 'state/status/actions'
+import { updateSuccessStatus, updateErrorStatus } from 'state/status/actions'
 import { getTimeFrame } from 'state/timeRange/selectors'
 
 import types from './constants'
@@ -46,6 +46,7 @@ function* handleTaxTrxReportGenerationCompleted({ payload }) {
   const { result, error } = payload
   if (result) {
     yield put(actions.updateTaxReportTransactions(result))
+    yield put(updateSuccessStatus({ id: 'taxreport.generation.success' }))
   }
   if (error) {
     yield put(actions.fetchFail({
@@ -56,8 +57,17 @@ function* handleTaxTrxReportGenerationCompleted({ payload }) {
   }
 }
 
+function* handleTaxTrxReportGenerationProgress({ payload }) {
+  const { result } = payload
+  if (result) {
+    const { progress } = result
+    yield put(actions.setGenerationProgress(progress))
+  }
+}
+
 export default function* taxReportSaga() {
   yield takeLatest(types.FETCH_FAIL, fetchTaxReportFail)
   yield takeLatest([types.FETCH_TRANSACTIONS], fetchTaxReport)
+  yield takeLatest(types.WS_TAX_TRANSACTION_REPORT_GENERATION_PROGRESS, handleTaxTrxReportGenerationProgress)
   yield takeLatest(types.WS_TAX_TRANSACTION_REPORT_GENERATION_COMPLETED, handleTaxTrxReportGenerationCompleted)
 }

src/state/taxReport/selectors.js

@@ -8,6 +8,7 @@ export const getTransactionsPageLoading = state => getTaxTransactions(state)?.pa
 export const getTransactionsDataReceived = state => getTaxTransactions(state)?.dataReceived ?? false
 export const getTransactionsStrategy = state => getTaxTransactions(state)?.strategy ?? types.STRATEGY_LIFO
 export const getTransactionsShowDisclaimer = state => getTaxTransactions(state)?.showDisclaimer ?? false
+export const getTransactionsGenerationProgress = state => getTaxTransactions(state)?.progress ?? null
 
 export default {
   getTaxReport,
@@ -17,4 +18,5 @@ export default {
   getTransactionsPageLoading,
   getTransactionsDataReceived,
   getTransactionsShowDisclaimer,
+  getTransactionsGenerationProgress,
 }