@commercetools-frontend-extensions/operations 0.0.0-canary-20251209161906

package/src/@hooks/use-fetch.spec.ts

@@ -0,0 +1,68 @@
+import { renderHook, act, waitFor } from '@testing-library/react'
+import { HttpError } from '../@errors'
+import { useFetch } from './use-fetch'
+
+jest.mock('@commercetools-frontend/sentry', () => ({
+  reportErrorToSentry: jest.fn(),
+}))
+
+describe('useFetch', () => {
+  const mockFetchFunction = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+  it('should fetch data successfully', async () => {
+    const data = { data: 'some data' }
+    mockFetchFunction.mockResolvedValueOnce(data)
+    const { result } = renderHook(() => useFetch(mockFetchFunction, {}))
+    expect(result.current.isLoading).toBe(true)
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    expect(result.current.data).toEqual(data)
+    expect(result.current.error).toBeNull()
+  })
+  it('should handle HttpError', async () => {
+    const error = new HttpError(500, 'Http error')
+    mockFetchFunction.mockRejectedValueOnce(error)
+    const { result } = renderHook(() => useFetch(mockFetchFunction, {}))
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+    expect(result.current.data).toBeNull()
+    expect(result.current.error).toEqual(error)
+  })
+  it('should refetch data', async () => {
+    const data = { data: 'some data' }
+    mockFetchFunction.mockResolvedValueOnce(data)
+    const { result } = renderHook(() => useFetch(mockFetchFunction, {}))
+    await waitFor(() => {
+      expect(result.current.data).toEqual(data)
+    })
+    const newData = { data: 'new data' }
+    mockFetchFunction.mockResolvedValueOnce(newData)
+    act(() => {
+      result.current.refetch()
+    })
+    await waitFor(() => {
+      expect(result.current.data).toEqual(newData)
+    })
+  })
+  it('should handle polling', async () => {
+    const data = { data: 'some data' }
+    mockFetchFunction.mockResolvedValue(data)
+    const { result } = renderHook(() =>
+      useFetch(mockFetchFunction, { pollingInterval: 50 })
+    )
+    await waitFor(() => {
+      expect(result.current.data).toEqual(data)
+    })
+    const newData = { data: 'new data' }
+    mockFetchFunction.mockResolvedValue(newData)
+    await waitFor(() => {
+      expect(result.current.data).toEqual(newData)
+    })
+  })
+})

package/src/@hooks/use-fetch.ts

@@ -0,0 +1,76 @@
+import React from 'react'
+import { reportErrorToSentry } from '@commercetools-frontend/sentry'
+import { HttpError } from '../@errors'
+
+export const useFetch = <Data>(
+  fetchFunction: () => Promise<Data>,
+  config: {
+    pollingInterval?: number
+    shouldContinuePolling?: (data: Data) => boolean
+  } = {}
+) => {
+  const [data, setData] = React.useState<Data | null>(null)
+  const [error, setError] = React.useState<Error | null>(null)
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [refetchCount, setRefetchCount] = React.useState(0)
+  const [lastFetchTime, setLastFetchTime] = React.useState<Date>(new Date())
+
+  const refetch = React.useCallback(() => {
+    setRefetchCount((count) => count + 1)
+  }, [])
+
+  React.useEffect(() => {
+    let pollingId: NodeJS.Timeout | null = null
+    const fetchData = async () => {
+      setIsLoading(true)
+      try {
+        const response = await fetchFunction()
+        setData(response)
+        setLastFetchTime(new Date())
+        if (
+          config.shouldContinuePolling &&
+          !config.shouldContinuePolling(response)
+        ) {
+          if (pollingId) {
+            clearInterval(pollingId)
+            pollingId = null
+          }
+        }
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err))
+        setError(error)
+
+        if (!(err instanceof HttpError)) {
+          reportErrorToSentry(
+            new Error('An unexpected error occurred in the `useFetch` hook'),
+            {
+              extra: {
+                error: err,
+              },
+            }
+          )
+        }
+      } finally {
+        setIsLoading(false)
+      }
+    }
+    fetchData()
+    if (config.pollingInterval && config.pollingInterval > 0) {
+      pollingId = setInterval(fetchData, config.pollingInterval)
+    }
+    return () => {
+      if (pollingId) {
+        clearInterval(pollingId)
+      }
+      setError(null)
+      setIsLoading(false)
+    }
+  }, [
+    fetchFunction,
+    refetchCount,
+    config.pollingInterval,
+    config.shouldContinuePolling,
+  ])
+
+  return { data, error, isLoading, refetch, lastFetchTime }
+}

package/src/@hooks/use-file-import-job-upload.spec.ts

@@ -0,0 +1,273 @@
+import { renderHook, waitFor, act } from '@testing-library/react'
+import {
+  createImportContainerForFileUpload,
+  deleteImportContainer,
+  createFileImportJob,
+} from '../@api'
+import { ProjectKeyNotAvailableError } from '../@errors'
+import { encodeFileNameWithTimestampToContainerKey } from '../@utils'
+import {
+  useFileImportJobUpload,
+  UseFileImportJobUploadConfig,
+} from './use-file-import-job-upload'
+
+jest.mock('../@api')
+jest.mock('../@utils')
+
+const mockCreateImportContainerForFileUpload =
+  createImportContainerForFileUpload as jest.MockedFunction<
+    typeof createImportContainerForFileUpload
+  >
+const mockCreateFileImportJob = createFileImportJob as jest.MockedFunction<
+  typeof createFileImportJob
+>
+const mockDeleteImportContainer = deleteImportContainer as jest.MockedFunction<
+  typeof deleteImportContainer
+>
+const mockEncodeFileNameWithTimestampToContainerKey =
+  encodeFileNameWithTimestampToContainerKey as jest.MockedFunction<
+    typeof encodeFileNameWithTimestampToContainerKey
+  >
+
+describe('useFileImportJobUpload', () => {
+  const projectKey = 'test-with-big-data'
+  const importContainerKey = 'test-container-key'
+  const mockFile = new File(['test content'], 'test.csv', { type: 'text/csv' })
+  const mockJobResponse = {
+    id: 'job-123',
+    fileName: 'test.csv',
+    importContainerKey,
+    state: 'queued' as const,
+    summary: {
+      total: 0,
+      invalid: 0,
+      valid: 0,
+      fieldsCount: 0,
+      fields: [],
+      ignoredFields: [],
+    },
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockEncodeFileNameWithTimestampToContainerKey.mockReturnValue(
+      importContainerKey
+    )
+    mockCreateImportContainerForFileUpload.mockResolvedValue({
+      key: importContainerKey,
+    })
+    mockCreateFileImportJob.mockResolvedValue(mockJobResponse)
+    mockDeleteImportContainer.mockResolvedValue(undefined)
+  })
+
+  it('should throw "ProjectKeyNotAvailableError" if "projectKey" is not available', async () => {
+    const { result } = renderHook(() =>
+      // @ts-ignore
+      useFileImportJobUpload({ projectKey: undefined })
+    )
+
+    await expect(
+      result.current.upload({
+        file: mockFile,
+        resourceType: 'product',
+        onSuccess: jest.fn(),
+      })
+    ).rejects.toThrow(ProjectKeyNotAvailableError)
+  })
+
+  it('should create container and file import job successfully', async () => {
+    const onSuccess = jest.fn()
+    const onProgress = jest.fn()
+
+    const { result } = renderHook(() => useFileImportJobUpload({ projectKey }))
+
+    const uploadConfig: UseFileImportJobUploadConfig = {
+      file: mockFile,
+      resourceType: 'product',
+      settings: { format: 'CSV' },
+      onSuccess,
+      onProgress,
+    }
+
+    await act(async () => {
+      await result.current.upload(uploadConfig)
+    })
+
+    expect(mockCreateImportContainerForFileUpload).toHaveBeenCalledWith({
+      importContainerDraft: {
+        key: importContainerKey,
+        resourceType: 'product',
+        tags: ['source:file-upload'],
+        settings: { format: 'CSV' },
+      },
+      projectKey,
+    })
+
+    expect(mockCreateFileImportJob).toHaveBeenCalledWith({
+      projectKey,
+      resourceType: 'product',
+      importContainerKey,
+      payload: {
+        fileType: 'csv',
+        fileName: 'test.csv',
+        file: mockFile,
+      },
+      onProgress: expect.any(Function),
+    })
+
+    expect(onSuccess).toHaveBeenCalledWith('job-123', importContainerKey)
+  })
+
+  it('should use json fileType for custom-object resource type', async () => {
+    const onSuccess = jest.fn()
+    const mockJsonFile = new File(
+      ['[{"key": "test-key", "value": {"number": "1.5"}}]'],
+      'test.json',
+      { type: 'application/json' }
+    )
+
+    const { result } = renderHook(() => useFileImportJobUpload({ projectKey }))
+
+    const uploadConfig: UseFileImportJobUploadConfig = {
+      file: mockJsonFile,
+      resourceType: 'custom-object',
+      onSuccess,
+    }
+
+    await act(async () => {
+      await result.current.upload(uploadConfig)
+    })
+
+    expect(mockCreateFileImportJob).toHaveBeenCalledWith({
+      projectKey,
+      resourceType: 'custom-object',
+      importContainerKey,
+      payload: {
+        fileType: 'json',
+        fileName: 'test.json',
+        file: mockJsonFile,
+      },
+      onProgress: expect.any(Function),
+    })
+
+    expect(onSuccess).toHaveBeenCalledWith('job-123', importContainerKey)
+  })
+
+  it('should delete container on job creation error', async () => {
+    const onError = jest.fn()
+    const jobError = new Error('Job creation failed')
+    mockCreateFileImportJob.mockRejectedValue(jobError)
+
+    const { result } = renderHook(() => useFileImportJobUpload({ projectKey }))
+
+    await act(async () => {
+      await result.current.upload({
+        file: mockFile,
+        resourceType: 'product',
+        onSuccess: jest.fn(),
+        onError,
+      })
+    })
+
+    await waitFor(() => {
+      expect(mockDeleteImportContainer).toHaveBeenCalledWith({
+        projectKey,
+        importContainerKey,
+      })
+    })
+    expect(onError).toHaveBeenCalledWith(jobError)
+  })
+
+  it('should delete container if container creation throws', async () => {
+    const onError = jest.fn()
+    const error = new Error('Container creation failed')
+    mockCreateImportContainerForFileUpload.mockRejectedValue(error)
+
+    const { result } = renderHook(() => useFileImportJobUpload({ projectKey }))
+
+    await act(async () => {
+      await result.current.upload({
+        file: mockFile,
+        resourceType: 'product',
+        onSuccess: jest.fn(),
+        onError,
+      })
+    })
+
+    await waitFor(() => {
+      expect(mockDeleteImportContainer).toHaveBeenCalledWith({
+        projectKey,
+        importContainerKey,
+      })
+    })
+    expect(onError).toHaveBeenCalledWith(error)
+  })
+
+  it('should update progress during upload', async () => {
+    const onProgress = jest.fn()
+
+    mockCreateFileImportJob.mockImplementation(
+      ({ onProgress: _onProgress }) => {
+        _onProgress?.(50)
+        _onProgress?.(100)
+        return Promise.resolve(mockJobResponse)
+      }
+    )
+
+    const { result } = renderHook(() => useFileImportJobUpload({ projectKey }))
+
+    await act(async () => {
+      await result.current.upload({
+        file: mockFile,
+        resourceType: 'product',
+        onSuccess: jest.fn(),
+        onProgress,
+      })
+    })
+
+    expect(onProgress).toHaveBeenCalledWith(50)
+    expect(onProgress).toHaveBeenCalledWith(100)
+  })
+
+  it('should update isUploading state correctly', async () => {
+    const { result } = renderHook(() => useFileImportJobUpload({ projectKey }))
+
+    expect(result.current.isUploading).toBe(false)
+
+    await act(async () => {
+      await result.current.upload({
+        file: mockFile,
+        resourceType: 'product',
+        onSuccess: jest.fn(),
+      })
+    })
+
+    expect(result.current.isUploading).toBe(false)
+    expect(result.current.progress).toBe(100)
+  })
+
+  it('should work without optional settings', async () => {
+    const onSuccess = jest.fn()
+
+    const { result } = renderHook(() => useFileImportJobUpload({ projectKey }))
+
+    await act(async () => {
+      await result.current.upload({
+        file: mockFile,
+        resourceType: 'category',
+        onSuccess,
+      })
+    })
+
+    expect(mockCreateImportContainerForFileUpload).toHaveBeenCalledWith({
+      importContainerDraft: {
+        key: importContainerKey,
+        resourceType: 'category',
+        tags: ['source:file-upload'],
+      },
+      projectKey,
+    })
+
+    expect(onSuccess).toHaveBeenCalledWith('job-123', importContainerKey)
+  })
+})

package/src/@hooks/use-file-import-job-upload.ts

@@ -0,0 +1,101 @@
+import React from 'react'
+import type { ResourceTypeId } from '@commercetools/importapi-sdk'
+import {
+  createFileImportJob,
+  createImportContainerForFileUpload,
+  deleteImportContainer,
+} from '../@api'
+import { ProjectKeyNotAvailableError } from '../@errors'
+import { TAG_KEY_SOURCE_FILE_UPLOAD } from '../@constants'
+import {
+  encodeFileNameWithTimestampToContainerKey,
+  getFileImportJobFileType,
+} from '../@utils'
+import type { ExtendedImportContainerDraft } from '../@types'
+
+export type UseFileImportJobUploadConfig = {
+  file: File
+  resourceType: ResourceTypeId
+  settings?: ExtendedImportContainerDraft['settings']
+  onSuccess: (jobId: string, importContainerKey: string) => void
+  onError?: (error: unknown) => void
+  onProgress?: (progress: number) => void
+  abortSignal?: AbortSignal
+}
+
+export const useFileImportJobUpload = ({
+  projectKey,
+}: {
+  projectKey: string
+}) => {
+  const [isUploading, setIsUploading] = React.useState(false)
+  const [progress, setProgress] = React.useState(0)
+
+  const upload = React.useCallback(
+    async (config: UseFileImportJobUploadConfig) => {
+      if (!projectKey) {
+        throw new ProjectKeyNotAvailableError()
+      }
+
+      setIsUploading(true)
+      setProgress(0)
+
+      const importContainerKey = encodeFileNameWithTimestampToContainerKey(
+        config.file.name
+      )
+
+      try {
+        await createImportContainerForFileUpload({
+          importContainerDraft: {
+            key: importContainerKey,
+            resourceType: config.resourceType,
+            tags: [TAG_KEY_SOURCE_FILE_UPLOAD],
+            ...(config.settings ? { settings: config.settings } : {}),
+          },
+          projectKey,
+        })
+
+        const jobResponse = await createFileImportJob({
+          projectKey,
+          resourceType: config.resourceType,
+          importContainerKey,
+          payload: {
+            fileType: getFileImportJobFileType(config.resourceType),
+            fileName: config.file.name,
+            file: config.file,
+          },
+          onProgress: (uploadProgress) => {
+            setProgress(uploadProgress)
+            config.onProgress?.(uploadProgress)
+          },
+          abortSignal: config.abortSignal,
+        })
+
+        setIsUploading(false)
+        setProgress(100)
+        config.onSuccess(jobResponse.id, importContainerKey)
+      } catch (error) {
+        try {
+          await deleteImportContainer({
+            projectKey,
+            importContainerKey,
+          })
+        } catch {
+          // Ignore cleanup errors - container will be cleaned up by TTL retention policy
+          // Cleanup errors are unlikely unless there is a network issue or container was removed externally
+        }
+
+        setIsUploading(false)
+        setProgress(0)
+        config.onError?.(error)
+      }
+    },
+    [projectKey]
+  )
+
+  return {
+    upload,
+    isUploading,
+    progress,
+  }
+}