From fdff266afaf7f3c65d7c48a6bc2ca38ae66f8601 Mon Sep 17 00:00:00 2001
From: j8seangel <jseangel@gmail.com>
Date: Wed, 14 Aug 2024 17:39:27 +0200
Subject: [PATCH] download data error handling

---
 .../download/DownloadActivityByVessel.tsx     | 25 ++++-----
 .../download/DownloadActivityEnvironment.tsx  | 18 ++----
 .../download/DownloadActivityError.tsx        | 55 +++++++++++++++++++
 .../download/DownloadActivityGridded.tsx      | 19 ++-----
 .../download/downloadActivity.slice.ts        | 39 ++++++++++---
 apps/fishing-map/features/reports/Report.tsx  | 12 ++--
 .../public/locales/source/translations.json   |  1 +
 7 files changed, 115 insertions(+), 54 deletions(-)
 create mode 100644 apps/fishing-map/features/download/DownloadActivityError.tsx

diff --git a/apps/fishing-map/features/download/DownloadActivityByVessel.tsx b/apps/fishing-map/features/download/DownloadActivityByVessel.tsx
index 8f0d3b7589..289c43b891 100644
--- a/apps/fishing-map/features/download/DownloadActivityByVessel.tsx
+++ b/apps/fishing-map/features/download/DownloadActivityByVessel.tsx
@@ -18,7 +18,7 @@ import {
   selectIsDownloadActivityError,
   DateRange,
   selectDownloadActivityAreaKey,
-  selectIsDownloadAreaTooBig,
+  selectIsDownloadActivityTimeoutError,
 } from 'features/download/downloadActivity.slice'
 import { EMPTY_FIELD_PLACEHOLDER } from 'utils/info'
 import { TimelineDatesRange } from 'features/map/controls/MapInfo'
@@ -56,6 +56,7 @@ import {
   getSupportedGroupByOptions,
   getSupportedTemporalResolutions,
 } from './download.utils'
+import ActivityDownloadError, { useActivityDownloadTimeoutRefresh } from './DownloadActivityError'
 
 function DownloadActivityByVessel() {
   const { t } = useTranslation()
@@ -71,7 +72,7 @@ function DownloadActivityByVessel() {
   const isDownloadLoading = useSelector(selectIsDownloadActivityLoading)
   const isDownloadError = useSelector(selectIsDownloadActivityError)
   const isDownloadFinished = useSelector(selectIsDownloadActivityFinished)
-  const isDownloadAreaTooBig = useSelector(selectIsDownloadAreaTooBig)
+  const isDownloadTimeoutError = useSelector(selectIsDownloadActivityTimeoutError)
   const [format, setFormat] = useState(VESSEL_FORMAT_OPTIONS[0].id)
   const isDownloadReportSupported = getDownloadReportSupported(start, end)
   const downloadAreaKey = useSelector(selectDownloadActivityAreaKey)
@@ -146,7 +147,7 @@ function DownloadActivityByVessel() {
       bufferValue,
       bufferOperation,
     }
-    await dispatch(downloadActivityThunk(downloadParams))
+    const action = await dispatch(downloadActivityThunk(downloadParams))
 
     trackEvent({
       category: TrackCategory.DataDownloads,
@@ -158,9 +159,14 @@ function DownloadActivityByVessel() {
           .flat(),
       ]),
     })
+    return action
   }
+
+  useActivityDownloadTimeoutRefresh(onDownloadClick)
+
   const parsedLabel =
     typeof downloadAreaName === 'string' ? parse(downloadAreaName) : downloadAreaName
+
   return (
     <Fragment>
       <div className={styles.container} data-test="download-activity-byvessel">
@@ -226,20 +232,11 @@ function DownloadActivityByVessel() {
               ))}
             </p>
           ) : null}
-          {isDownloadError && (
-            <p className={cx(styles.footerLabel, styles.error)}>
-              {isDownloadAreaTooBig
-                ? `${t(
-                    'analysis.errorTooComplex',
-                    'The geometry of the area is too complex to perform a report, try to simplify and upload again.'
-                  )}`
-                : `${t('analysis.errorMessage', 'Something went wrong')} 🙈`}
-            </p>
-          )}
+          {isDownloadError && <ActivityDownloadError />}
           <Button
             testId="download-activity-vessel-button"
             onClick={onDownloadClick}
-            loading={isDownloadLoading}
+            loading={isDownloadLoading || isDownloadTimeoutError}
             className={styles.downloadBtn}
             disabled={!isDownloadReportSupported || isDownloadAreaLoading || isDownloadError}
           >
diff --git a/apps/fishing-map/features/download/DownloadActivityEnvironment.tsx b/apps/fishing-map/features/download/DownloadActivityEnvironment.tsx
index be73c4b7dd..2d9bc588c3 100644
--- a/apps/fishing-map/features/download/DownloadActivityEnvironment.tsx
+++ b/apps/fishing-map/features/download/DownloadActivityEnvironment.tsx
@@ -19,7 +19,6 @@ import {
   selectIsDownloadActivityError,
   DateRange,
   selectDownloadActivityAreaKey,
-  selectIsDownloadAreaTooBig,
 } from 'features/download/downloadActivity.slice'
 import { EMPTY_FIELD_PLACEHOLDER } from 'utils/info'
 import { TimelineDatesRange } from 'features/map/controls/MapInfo'
@@ -50,6 +49,7 @@ import {
   ENVIRONMENT_FORMAT_OPTIONS,
 } from './downloadActivity.config'
 import { getDownloadReportSupported, getSupportedTemporalResolutions } from './download.utils'
+import ActivityDownloadError, { useActivityDownloadTimeoutRefresh } from './DownloadActivityError'
 
 function DownloadActivityGridded() {
   const { t } = useTranslation()
@@ -60,7 +60,6 @@ function DownloadActivityGridded() {
   const isDownloadLoading = useSelector(selectIsDownloadActivityLoading)
   const isDownloadError = useSelector(selectIsDownloadActivityError)
   const isDownloadFinished = useSelector(selectIsDownloadActivityFinished)
-  const isDownloadAreaTooBig = useSelector(selectIsDownloadAreaTooBig)
   const [format, setFormat] = useState(GRIDDED_FORMAT_OPTIONS[0].id)
 
   const downloadArea = useSelector(selectDownloadActivityArea)
@@ -164,7 +163,7 @@ function DownloadActivityGridded() {
       bufferValue,
       bufferOperation,
     }
-    await dispatch(downloadActivityThunk(downloadParams))
+    const action = await dispatch(downloadActivityThunk(downloadParams))
 
     trackEvent({
       category: TrackCategory.DataDownloads,
@@ -176,7 +175,9 @@ function DownloadActivityGridded() {
           .flat(),
       ]),
     })
+    return action.payload
   }
+  useActivityDownloadTimeoutRefresh(onDownloadClick)
 
   const isDownloadReportSupported = getDownloadReportSupported(start, end)
   const parsedLabel =
@@ -236,16 +237,7 @@ function DownloadActivityGridded() {
               {t('download.timerangeTooLong', 'The maximum time range is 1 year')}
             </p>
           )}
-          {isDownloadError && (
-            <p className={cx(styles.footerLabel, styles.error)}>
-              {isDownloadAreaTooBig
-                ? `${t(
-                    'analysis.errorTooComplex',
-                    'The geometry of the area is too complex to perform a report, try to simplify and upload again.'
-                  )}`
-                : `${t('analysis.errorMessage', 'Something went wrong')} 🙈`}
-            </p>
-          )}
+          {isDownloadError && <ActivityDownloadError />}
           <Button
             testId="download-activity-gridded-button"
             onClick={onDownloadClick}
diff --git a/apps/fishing-map/features/download/DownloadActivityError.tsx b/apps/fishing-map/features/download/DownloadActivityError.tsx
new file mode 100644
index 0000000000..dd232fd1e9
--- /dev/null
+++ b/apps/fishing-map/features/download/DownloadActivityError.tsx
@@ -0,0 +1,55 @@
+import { useSelector } from 'react-redux'
+import cx from 'classnames'
+import { useTranslation } from 'react-i18next'
+import { useEffect } from 'react'
+import {
+  selectDownloadActivityErrorMsg,
+  selectIsDownloadActivityConcurrentError,
+  selectIsDownloadActivityTimeoutError,
+  selectIsDownloadAreaTooBig,
+} from './downloadActivity.slice'
+import styles from './DownloadModal.module.css'
+
+export function useActivityDownloadTimeoutRefresh(callback: () => void) {
+  const isDownloadTimeoutError = useSelector(selectIsDownloadActivityTimeoutError)
+
+  useEffect(() => {
+    if (isDownloadTimeoutError) {
+      const timeout = setTimeout(() => {
+        callback()
+      }, 5000)
+
+      return () => clearTimeout(timeout)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDownloadTimeoutError])
+}
+
+function ActivityDownloadError() {
+  const { t } = useTranslation()
+  const apiDownloadErrorMsg = useSelector(selectDownloadActivityErrorMsg)
+  const isDownloadAreaTooBig = useSelector(selectIsDownloadAreaTooBig)
+  const isDownloadTimeoutError = useSelector(selectIsDownloadActivityTimeoutError)
+  const isDownloadConcurrentError = useSelector(selectIsDownloadActivityConcurrentError)
+
+  let downloadErrorMsg = apiDownloadErrorMsg
+  if (isDownloadConcurrentError) {
+    downloadErrorMsg = t(
+      'download.errorConcurrentReport',
+      'Your account is currently loading an analysis report, please wait for the report to finish before downloading data'
+    )
+  } else if (isDownloadTimeoutError) {
+    downloadErrorMsg = t('analysis.timeoutError', 'This is taking more than expected, please wait')
+  } else if (isDownloadAreaTooBig) {
+    downloadErrorMsg = `${t(
+      'analysis.errorTooComplex',
+      'The geometry of the area is too complex to perform a report, try to simplify and upload again.'
+    )}`
+  } else if (!downloadErrorMsg) {
+    downloadErrorMsg = `${t('analysis.errorMessage', 'Something went wrong')} 🙈`
+  }
+
+  return <p className={cx(styles.footerLabel, styles.error)}>{downloadErrorMsg}</p>
+}
+
+export default ActivityDownloadError
diff --git a/apps/fishing-map/features/download/DownloadActivityGridded.tsx b/apps/fishing-map/features/download/DownloadActivityGridded.tsx
index 266feb83dd..22f97e202b 100644
--- a/apps/fishing-map/features/download/DownloadActivityGridded.tsx
+++ b/apps/fishing-map/features/download/DownloadActivityGridded.tsx
@@ -19,7 +19,6 @@ import {
   selectIsDownloadActivityFinished,
   selectIsDownloadActivityError,
   selectDownloadActivityAreaKey,
-  selectIsDownloadAreaTooBig,
 } from 'features/download/downloadActivity.slice'
 import { EMPTY_FIELD_PLACEHOLDER } from 'utils/info'
 import { TimelineDatesRange } from 'features/map/controls/MapInfo'
@@ -60,6 +59,7 @@ import {
   getSupportedGroupByOptions,
   getSupportedTemporalResolutions,
 } from './download.utils'
+import ActivityDownloadError, { useActivityDownloadTimeoutRefresh } from './DownloadActivityError'
 
 function DownloadActivityGridded() {
   const { t } = useTranslation()
@@ -73,7 +73,6 @@ function DownloadActivityGridded() {
     userData?.permissions || []
   )
   const isDownloadLoading = useSelector(selectIsDownloadActivityLoading)
-  const isDownloadAreaTooBig = useSelector(selectIsDownloadAreaTooBig)
   const isDownloadError = useSelector(selectIsDownloadActivityError)
   const isDownloadFinished = useSelector(selectIsDownloadActivityFinished)
   const [format, setFormat] = useState(GRIDDED_FORMAT_OPTIONS[0].id)
@@ -188,7 +187,7 @@ function DownloadActivityGridded() {
       bufferValue,
       bufferOperation,
     }
-    await dispatch(downloadActivityThunk(downloadParams))
+    const action = await dispatch(downloadActivityThunk(downloadParams))
 
     trackEvent({
       category: TrackCategory.DataDownloads,
@@ -200,8 +199,9 @@ function DownloadActivityGridded() {
           .flat(),
       ]),
     })
+    return action
   }
-
+  useActivityDownloadTimeoutRefresh(onDownloadClick)
   const isDownloadReportSupported = getDownloadReportSupported(start, end)
   const parsedLabel =
     typeof downloadAreaName === 'string' ? parse(downloadAreaName) : downloadAreaName
@@ -285,16 +285,7 @@ function DownloadActivityGridded() {
               ))}
             </p>
           ) : null}
-          {isDownloadError && (
-            <p className={cx(styles.footerLabel, styles.error)}>
-              {isDownloadAreaTooBig
-                ? `${t(
-                    'analysis.errorTooComplex',
-                    'The geometry of the area is too complex to perform a report, try to simplify and upload again.'
-                  )}`
-                : `${t('analysis.errorMessage', 'Something went wrong')} 🙈`}
-            </p>
-          )}
+          {isDownloadError && <ActivityDownloadError />}
           <Button
             testId="download-activity-gridded-button"
             onClick={onDownloadClick}
diff --git a/apps/fishing-map/features/download/downloadActivity.slice.ts b/apps/fishing-map/features/download/downloadActivity.slice.ts
index 7a65eff616..35f419d960 100644
--- a/apps/fishing-map/features/download/downloadActivity.slice.ts
+++ b/apps/fishing-map/features/download/downloadActivity.slice.ts
@@ -3,7 +3,12 @@ import { stringify } from 'qs'
 import { saveAs } from 'file-saver'
 import { RootState } from 'reducers'
 import { Dataview, DownloadActivity } from '@globalfishingwatch/api-types'
-import { GFWAPI, parseAPIError } from '@globalfishingwatch/api-client'
+import {
+  getIsConcurrentError,
+  getIsTimeoutError,
+  GFWAPI,
+  parseAPIError,
+} from '@globalfishingwatch/api-client'
 import { UrlDataviewInstance } from '@globalfishingwatch/dataviews-client'
 import { AsyncError, AsyncReducerStatus } from 'utils/async-slice'
 import { AreaKeyId, AreaKeys } from 'features/areas/areas.slice'
@@ -25,7 +30,7 @@ export type DateRange = {
 interface DownloadActivityState {
   areaKey: AreaKeys | undefined
   areaDataview: Dataview | UrlDataviewInstance | undefined
-  error: string
+  error: AsyncError | undefined
   status: AsyncReducerStatus
   activeTabId: HeatmapDownloadTab
 }
@@ -33,7 +38,7 @@ interface DownloadActivityState {
 const initialState: DownloadActivityState = {
   areaKey: undefined,
   areaDataview: undefined,
-  error: '',
+  error: undefined,
   status: AsyncReducerStatus.Idle,
   activeTabId: HeatmapDownloadTab.ByVessel,
 }
@@ -121,6 +126,12 @@ export const downloadActivityThunk = createAsyncThunk<
       console.warn(e)
       return rejectWithValue(parseAPIError(e))
     }
+  },
+  {
+    condition: (_, { getState }) => {
+      const { downloadActivity } = getState() as RootState
+      return downloadActivity?.status !== AsyncReducerStatus.Loading
+    },
   }
 )
 
@@ -142,7 +153,7 @@ const downloadActivitySlice = createSlice({
   extraReducers: (builder) => {
     builder.addCase(downloadActivityThunk.pending, (state) => {
       state.status = AsyncReducerStatus.Loading
-      state.error = ''
+      state.error = undefined
     })
     builder.addCase(downloadActivityThunk.fulfilled, (state) => {
       state.status = AsyncReducerStatus.Finished
@@ -151,7 +162,7 @@ const downloadActivitySlice = createSlice({
       state.status =
         action.error.message === 'Aborted' ? AsyncReducerStatus.Aborted : AsyncReducerStatus.Error
       if (action.payload?.message) {
-        state.error = action.payload?.message
+        state.error = action.payload
       }
     })
   },
@@ -161,7 +172,9 @@ export const { setDownloadActiveTab, setDownloadActivityAreaKey, resetDownloadAc
   downloadActivitySlice.actions
 
 const selectDownloadActivityStatus = (state: RootState) => state.downloadActivity.status
-const selectDownloadActivityErrorMsg = (state: RootState) => state.downloadActivity.error
+export const selectDownloadActivityError = (state: RootState) => state.downloadActivity.error
+export const selectDownloadActivityErrorMsg = (state: RootState) =>
+  state.downloadActivity.error?.message
 export const selectDownloadActivityAreaKey = (state: RootState) => state.downloadActivity.areaKey
 export const selectDownloadActiveTabId = (state: RootState) => state.downloadActivity.activeTabId
 
@@ -181,8 +194,18 @@ export const selectIsDownloadActivityFinished = createSelector(
 )
 
 export const selectIsDownloadAreaTooBig = createSelector(
-  [selectDownloadActivityErrorMsg],
-  (message) => message === 'Geometry too large'
+  [selectDownloadActivityError],
+  (downloadError) => downloadError?.message === 'Geometry too large'
+)
+
+export const selectIsDownloadActivityTimeoutError = createSelector(
+  [selectDownloadActivityError],
+  (downloadError) => getIsTimeoutError(downloadError)
+)
+
+export const selectIsDownloadActivityConcurrentError = createSelector(
+  [selectDownloadActivityError],
+  (downloadError) => getIsConcurrentError(downloadError)
 )
 
 export default downloadActivitySlice.reducer
diff --git a/apps/fishing-map/features/reports/Report.tsx b/apps/fishing-map/features/reports/Report.tsx
index c3f2b8f6d2..ca6934c498 100644
--- a/apps/fishing-map/features/reports/Report.tsx
+++ b/apps/fishing-map/features/reports/Report.tsx
@@ -5,7 +5,11 @@ import { useSelector } from 'react-redux'
 import { uniq } from 'es-toolkit'
 import isEqual from 'lodash/isEqual'
 import { Button, Tab, Tabs } from '@globalfishingwatch/ui-components'
-import { crossBrowserTypeErrorMessages, isAuthError } from '@globalfishingwatch/api-client'
+import {
+  getIsConcurrentError,
+  getIsTimeoutError,
+  isAuthError,
+} from '@globalfishingwatch/api-client'
 import { useLocalStorage } from '@globalfishingwatch/react-hooks'
 import { ContextFeature } from '@globalfishingwatch/deck-layers'
 import { AsyncReducerStatus } from 'utils/async-slice'
@@ -119,13 +123,11 @@ function ActivityReport({ reportName }: { reportName: string }) {
         return isEqual(currentReportParams, reportParams)
       })
     : undefined
-  const concurrentReportError = statusError?.status === 429
+  const concurrentReportError = getIsConcurrentError(statusError!)
   const isSameWorkspaceReport =
     concurrentReportError && window?.location.href === lastReport?.workspaceUrl
 
-  const isTimeoutError =
-    statusError?.message &&
-    crossBrowserTypeErrorMessages.some((error) => error.includes(statusError.message as string))
+  const isTimeoutError = getIsTimeoutError(statusError!)
   useEffect(() => {
     if (isTimeoutError) {
       dispatchTimeoutRef.current = setTimeout(() => {
diff --git a/apps/fishing-map/public/locales/source/translations.json b/apps/fishing-map/public/locales/source/translations.json
index cffeec8b78..b5b66aaac1 100644
--- a/apps/fishing-map/public/locales/source/translations.json
+++ b/apps/fishing-map/public/locales/source/translations.json
@@ -404,6 +404,7 @@
     "descriptionReport": "You can download a list of the activity or a heat map bitmap for this area in different formats",
     "downloadOptions": "Download options",
     "doYouNeedAnAPI": "Does your application need continuous data?",
+    "errorConcurrentReport": "Your account is currently loading an analysis report, please wait for the report to finish before downloading data",
     "eventsDownloadLogin": "Register and login to download vessel events (it is free and takes 2 minutes)",
     "format": "Format",
     "fullDataset": "Do you need the full dataset?",