Merge pull request #1048 from devtron-labs/fix/user-export-list

fix: user export list

Author: arunjaindev

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "4.0.5",
+    "version": "4.0.6",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -24,12 +24,13 @@ const ExportToCsv = <HeaderItemType extends string>({
     downloadRequestId,
 }: ExportToCsvProps<HeaderItemType>) => {
     const csvRef = useRef(null)
-    const abortControllerRef = useRef<AbortController>(new AbortController())
+    const abortControllerRef = useRef<AbortController>(null)
 
     const [dataToExport, setDataToExport] = useState<Awaited<ReturnType<typeof apiPromise>>>([])
     const [confirmationModalType, setConfirmationModalType] = useState<'default' | 'custom' | null>(null)
     const [isLoading, setIsLoading] = useState(false)
     const [dataFetchError, setDataFetchError] = useState<ServerErrors>(null)
+    const [pendingDownload, setPendingDownload] = useState(false)
 
     const handleInitiateDownload = async () => {
         if (disabled) {
@@ -41,8 +42,7 @@ const ExportToCsv = <HeaderItemType extends string>({
             setDataFetchError(null)
             const data = await apiPromise({ signal: abortControllerRef.current.signal })
             setDataToExport(data)
-
-            csvRef.current?.link?.click()
+            setPendingDownload(true)
         } catch (error) {
             if (!getIsRequestAborted(error)) {
                 showError(error)
@@ -64,12 +64,12 @@ const ExportToCsv = <HeaderItemType extends string>({
         }
     }
 
-    useEffect(
-        () => () => {
-            abortControllerRef.current.abort()
-        },
-        [],
-    )
+    useEffect(() => {
+        abortControllerRef.current = new AbortController()
+        return () => {
+            abortControllerRef.current?.abort()
+        }
+    }, [])
 
     useEffect(() => {
         if (!isNullOrUndefined(downloadRequestId)) {
@@ -78,6 +78,13 @@ const ExportToCsv = <HeaderItemType extends string>({
         }
     }, [downloadRequestId])
 
+    useEffect(() => {
+        if (pendingDownload) {
+            csvRef.current?.link?.click()
+            setPendingDownload(false)
+        }
+    }, [pendingDownload])
+
     const handleCancelRequest = () => {
         abortControllerRef.current.abort()
         abortControllerRef.current = new AbortController()