From 764a019bac620ab27766eb45e2b477459ca8e9eb Mon Sep 17 00:00:00 2001 From: Arthur Andrade Date: Wed, 10 Jan 2024 16:12:37 -0300 Subject: [PATCH 1/3] fix: Fix the fetch data retry on Bulk Imports --- .../BulkImportList/BulkImportList.tsx | 21 +++++++------------ .../CreateOrganizationButton.tsx | 15 +++++++------ react/hooks/useBulkImportsQuery.ts | 12 +++++++++-- 3 files changed, 27 insertions(+), 21 deletions(-) diff --git a/react/components/BulkImportList/BulkImportList.tsx b/react/components/BulkImportList/BulkImportList.tsx index 5e17eac8..75b3e9c1 100644 --- a/react/components/BulkImportList/BulkImportList.tsx +++ b/react/components/BulkImportList/BulkImportList.tsx @@ -1,27 +1,22 @@ -import React from 'react' -import { ImportAlertError } from '@vtex/bulk-import-ui' +import React, { useState } from 'react' -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 [shouldPoll, setShouldPoll] = useState(true) + const { data, error } = useBulkImportsQuery({ + shouldPoll, + onError: () => setShouldPoll(false), + }) if (error?.message) { console.error(error) - - return ( - - {t('errorMessage')} - - ) } if (data) return - return <> + return null } export default BulkImportList diff --git a/react/components/CreateOrganizationButton/CreateOrganizationButton.tsx b/react/components/CreateOrganizationButton/CreateOrganizationButton.tsx index dded2027..8bca5f32 100644 --- a/react/components/CreateOrganizationButton/CreateOrganizationButton.tsx +++ b/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={} onClick={() => setOpen(true)} /> - } - onClick={() => setUploadModalOpen(true)} - /> + {!!data && ( + } + onClick={() => setUploadModalOpen(true)} + /> + )} { +type UseBulkImportQueryProps = { + shouldPoll?: boolean + onError?: () => void +} + +const useBulkImportQuery = ( + { shouldPoll, onError }: UseBulkImportQueryProps = { shouldPoll: false } +) => { const session = useSessionResponse() as Session const account = session?.namespaces?.account?.accountName?.value @@ -13,7 +20,8 @@ const useBulkImportQuery = () => { account ? '/buyer-orgs' : null, () => getBulkImportList(account), { - refreshInterval: 30 * 1000, // 30 seconds + refreshInterval: shouldPoll ? 30 * 1000 : 0, // 30 seconds + onError, } ) } From ea10017e1138af23fb0dac600de492cb117ab307 Mon Sep 17 00:00:00 2001 From: Arthur Andrade Date: Wed, 10 Jan 2024 16:30:18 -0300 Subject: [PATCH 2/3] chore: Changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ddd9ac8a..bf287f80 100644 --- a/CHANGELOG.md +++ b/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 From 5d84c577a00bfd7d4f24e4cbfef88768247865ca Mon Sep 17 00:00:00 2001 From: Arthur Andrade Date: Thu, 11 Jan 2024 17:13:53 -0300 Subject: [PATCH 3/3] refactor: bring the polling logic to useBulkImportsQuery --- .../BulkImportList/BulkImportList.tsx | 6 ++---- react/hooks/useBulkImportsQuery.ts | 18 ++++++++++++++---- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/react/components/BulkImportList/BulkImportList.tsx b/react/components/BulkImportList/BulkImportList.tsx index 75b3e9c1..41f93364 100644 --- a/react/components/BulkImportList/BulkImportList.tsx +++ b/react/components/BulkImportList/BulkImportList.tsx @@ -1,13 +1,11 @@ -import React, { useState } from 'react' +import React from 'react' import { useBulkImportsQuery } from '../../hooks' import ImportAlertList from '../ImportAlertList/ImportAlertList' const BulkImportList = () => { - const [shouldPoll, setShouldPoll] = useState(true) const { data, error } = useBulkImportsQuery({ - shouldPoll, - onError: () => setShouldPoll(false), + shouldPoll: true, }) if (error?.message) { diff --git a/react/hooks/useBulkImportsQuery.ts b/react/hooks/useBulkImportsQuery.ts index 3ef82827..d06aabe5 100644 --- a/react/hooks/useBulkImportsQuery.ts +++ b/react/hooks/useBulkImportsQuery.ts @@ -1,4 +1,5 @@ import useSWR from 'swr' +import { useState } from 'react' import type { Session } from '../modules/session' import { useSessionResponse } from '../modules/session' @@ -6,22 +7,31 @@ import { getBulkImportList } from '../services' type UseBulkImportQueryProps = { shouldPoll?: boolean - onError?: () => void } const useBulkImportQuery = ( - { shouldPoll, onError }: UseBulkImportQueryProps = { shouldPoll: false } + { 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: shouldPoll ? 30 * 1000 : 0, // 30 seconds - onError, + refreshInterval: shouldPoll ? 5 * 1000 : 0, // 30 seconds + onError: errorData => { + const status = errorData?.response?.status ?? 0 + + if (status >= 400 && status < 500) { + setShouldPoll(false) + } + }, } ) }