Fix the fetch data retry on Bulk Imports

CHANGELOG.md

@@ -8,6 +8,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+- Fix unauthorized requests breaking on bulk import
+
 ## [1.29.1] - 2024-01-04
 
 ### Fixed

react/components/BulkImportList/BulkImportList.tsx

@@ -1,27 +1,20 @@
 import React from 'react'
-import { ImportAlertError } from '@vtex/bulk-import-ui'
 
-import { useBulkImportsQuery, useTranslate } from '../../hooks'
+import { useBulkImportsQuery } from '../../hooks'
 import ImportAlertList from '../ImportAlertList/ImportAlertList'
 
 const BulkImportList = () => {
-  const { data, error, mutate } = useBulkImportsQuery()
-
-  const { translate: t } = useTranslate()
+  const { data, error } = useBulkImportsQuery({
+    shouldPoll: true,
+  })
 
   if (error?.message) {
     console.error(error)
-
-    return (
-      <ImportAlertError onTryAgainClick={mutate}>
-        {t('errorMessage')}
-      </ImportAlertError>
-    )
   }
 
   if (data) return <ImportAlertList data={data} />
 
-  return <></>
+  return null
 }
 
 export default BulkImportList

react/components/CreateOrganizationButton/CreateOrganizationButton.tsx

@@ -12,7 +12,7 @@ import { useSWRConfig } from 'swr'
 
 import CreateOrganizationModal from '../CreateOrganizationModal'
 import { organizationMessages as messages } from '../../admin/utils/messages'
-import { useTranslate } from '../../hooks'
+import { useBulkImportsQuery, useTranslate } from '../../hooks'
 import ReportErrorScreen from '../UploadModal/ReportErrorScreen'
 import ReportScreen from '../UploadModal/ReportScreen'
 import ReportSuccessScreen from '../UploadModal/ReportSuccessScreen'
@@ -33,6 +33,7 @@ const CreateOrganizationButton = () => {
   const [uploadModalOpen, setUploadModalOpen] = useState(false)
   const { mutate } = useSWRConfig()
   const { startBulkImport } = useStartBulkImport()
+  const { data } = useBulkImportsQuery()
 
   const handleUploadFinish = async (result: UploadFileData) => {
     if (result.status === 'success' && result.data?.fileData?.importId) {
@@ -55,11 +56,13 @@ const CreateOrganizationButton = () => {
           icon={<IconPencil />}
           onClick={() => setOpen(true)}
         />
-        <MenuItem
-          label={formatMessage(messages.addBulk)}
-          icon={<IconCloudArrowUp />}
-          onClick={() => setUploadModalOpen(true)}
-        />
+        {!!data && (
+          <MenuItem
+            label={formatMessage(messages.addBulk)}
+            icon={<IconCloudArrowUp />}
+            onClick={() => setUploadModalOpen(true)}
+          />
+        )}
       </Menu>
       <CreateOrganizationModal open={open} onOpenChange={setOpen} />
       <UploadModal

react/hooks/useBulkImportsQuery.ts

@@ -1,19 +1,37 @@
 import useSWR from 'swr'
+import { useState } from 'react'
 
 import type { Session } from '../modules/session'
 import { useSessionResponse } from '../modules/session'
 import { getBulkImportList } from '../services'
 
-const useBulkImportQuery = () => {
+type UseBulkImportQueryProps = {
+  shouldPoll?: boolean
+}
+
+const useBulkImportQuery = (
+  { shouldPoll: initialShouldPoll }: UseBulkImportQueryProps = {
+    shouldPoll: false,
+  }
+) => {
   const session = useSessionResponse() as Session
 
+  const [shouldPoll, setShouldPoll] = useState(initialShouldPoll)
+
   const account = session?.namespaces?.account?.accountName?.value
 
   return useSWR(
     account ? '/buyer-orgs' : null,
     () => getBulkImportList(account),
     {
-      refreshInterval: 30 * 1000, // 30 seconds
+      refreshInterval: shouldPoll ? 5 * 1000 : 0, // 30 seconds
+      onError: errorData => {
+        const status = errorData?.response?.status ?? 0
+
+        if (status >= 400 && status < 500) {
+          setShouldPoll(false)
+        }
+      },
     }
   )
 }