🚸(frontend) let loader until resource ready

The backend can analyze the upload file, this take
time, so we need to show a loader
until the backend finish the analysis.

Author: AntoLC

src/frontend/apps/impress/src/features/docs/doc-editor/__tests__/useUploadFile.test.tsx

@@ -0,0 +1,146 @@
+import { act, renderHook } from '@testing-library/react';
+import fetchMock from 'fetch-mock';
+
+import { useMediaUrl } from '@/core/config';
+import { AppWrapper } from '@/tests/utils';
+import { sleep } from '@/utils';
+
+import { useUploadFile } from '../hook/useUploadFile';
+
+// Mock dependencies
+jest.mock('@/core/config', () => ({
+  useMediaUrl: jest.fn(),
+}));
+
+jest.mock('@/utils', () => ({
+  sleep: jest.fn(),
+}));
+
+describe('useUploadFile', () => {
+  const mockDocId = 'doc-123';
+  const mockMediaUrl = 'https://media.example.com/';
+  const mockFile = new File(['test content'], 'test.jpg', {
+    type: 'image/jpeg',
+  });
+  const mockFilePath = 'uploads/test.jpg';
+  const mockFullUrl = `${mockMediaUrl}${mockFilePath}`;
+  const mockUploadAttachment = `http://test.jest/api/v1.0/documents/${mockDocId}/attachment-upload/`;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    fetchMock.reset();
+
+    // Setup mocks
+    (useMediaUrl as jest.Mock).mockReturnValue(mockMediaUrl);
+    (sleep as jest.Mock).mockResolvedValue(undefined);
+  });
+
+  test('should upload file successfully', async () => {
+    fetchMock
+      .postOnce(mockUploadAttachment, {
+        body: {
+          file: mockFilePath,
+        },
+      })
+      .head(mockFullUrl, 200);
+
+    const { result } = renderHook(() => useUploadFile(mockDocId), {
+      wrapper: AppWrapper,
+    });
+
+    let fileUrl;
+    await act(async () => {
+      fileUrl = await result.current.uploadFile(mockFile);
+    });
+
+    expect(fetchMock.called(mockUploadAttachment)).toBeTruthy();
+    expect(fetchMock.called(mockFullUrl)).toBeTruthy();
+    expect(fetchMock.calls().length).toBe(2);
+    expect(fileUrl).toBe(mockFullUrl);
+  });
+
+  test('should retry when file is not yet analyzed (status 403)', async () => {
+    fetchMock
+      .postOnce(mockUploadAttachment, {
+        body: {
+          file: mockFilePath,
+        },
+      })
+      .headOnce(mockFullUrl, 403, {
+        overwriteRoutes: true,
+      })
+      .headOnce(mockFullUrl, 200, {
+        overwriteRoutes: false,
+      });
+
+    const { result } = renderHook(() => useUploadFile(mockDocId), {
+      wrapper: AppWrapper,
+    });
+
+    let fileUrl;
+    await act(async () => {
+      fileUrl = await result.current.uploadFile(mockFile);
+    });
+
+    expect(sleep).toHaveBeenCalledWith(4000);
+    expect(fetchMock.calls().length).toBe(3);
+    expect(fileUrl).toBe(mockFullUrl);
+  });
+
+  test('should handle max retries exceeded', async () => {
+    fetchMock
+      .postOnce(mockUploadAttachment, {
+        body: {
+          file: mockFilePath,
+        },
+      })
+      .head(mockFullUrl, 403);
+
+    const { result } = renderHook(() => useUploadFile(mockDocId), {
+      wrapper: AppWrapper,
+    });
+
+    let fileUrl;
+    await act(async () => {
+      fileUrl = await result.current.uploadFile(mockFile);
+    });
+
+    expect(fetchMock.calls().length).toBe(13);
+    expect(sleep).toHaveBeenCalledTimes(11);
+    expect(fileUrl).toBe(mockFullUrl);
+  });
+
+  test('should handle non-200 successful responses', async () => {
+    fetchMock
+      .postOnce(mockUploadAttachment, {
+        body: {
+          file: mockFilePath,
+        },
+      })
+      .head(mockFullUrl, 204);
+
+    const { result } = renderHook(() => useUploadFile(mockDocId), {
+      wrapper: AppWrapper,
+    });
+
+    let fileUrl;
+    await act(async () => {
+      fileUrl = await result.current.uploadFile(mockFile);
+    });
+
+    expect(fetchMock.calls().length).toBe(2);
+    expect(fileUrl).toBe(mockFullUrl);
+  });
+
+  test('should handle attachment creation error', async () => {
+    fetchMock.postOnce(mockUploadAttachment, {
+      throws: new Error('Attachment creation error'),
+    });
+
+    const { result } = renderHook(() => useUploadFile(mockDocId), {
+      wrapper: AppWrapper,
+    });
+
+    await expect(result.current.uploadFile(mockFile)).rejects.toThrow();
+  });
+});

src/frontend/apps/impress/src/features/docs/doc-editor/hook/useUploadFile.tsx

@@ -1,9 +1,36 @@
 import { useCallback } from 'react';
 
 import { useMediaUrl } from '@/core/config';
+import { sleep } from '@/utils';
 
 import { useCreateDocAttachment } from '../api';
 
+/**
+ * Upload file can be analyzed on the server side,
+ * we had this function to wait for the analysis to be done
+ * before returning the file url. It will keep the loader
+ * on the upload button until the analysis is done.
+ * @param url
+ * @param retry
+ * @returns boolean
+ * @description Waits for the upload to be analyzed by checking the status of the file.
+ */
+const waitForUploadAnalyze = async (url: string, retry = 0) => {
+  const RETRY_LIMIT = 10;
+  const SLEEP_TIME = 4000;
+  const { status } = await fetch(url, {
+    method: 'HEAD',
+    credentials: 'include',
+  });
+
+  if (status !== 403 || retry > RETRY_LIMIT) {
+    return retry > RETRY_LIMIT || status !== 200 ? false : true;
+  } else {
+    await sleep(SLEEP_TIME);
+    return await waitForUploadAnalyze(url, retry + 1);
+  }
+};
+
 export const useUploadFile = (docId: string) => {
   const mediaUrl = useMediaUrl();
   const {
@@ -22,6 +49,8 @@ export const useUploadFile = (docId: string) => {
         body,
       });
 
+      await waitForUploadAnalyze(`${mediaUrl}${ret.file}`);
+
       return `${mediaUrl}${ret.file}`;
     },
     [createDocAttachment, docId, mediaUrl],