🚚(frontend) use nested routes for deposit related resources

As we want to only use API nested routes, our deposit components needs to handle them. Also, filedepository has been renamed and retyped to filedepository_id in deposited file, because the API actually sends it as a uuid string, and not as a serialized object.
openfun · Aug 22, 2023 · 30e0ac8 · 30e0ac8
1 parent 3af9524
commit 30e0ac8
Show file tree

Hide file tree

Showing 10 changed files with 119 additions and 51 deletions.
diff --git a/src/frontend/apps/lti_site/apps/deposit/api/useDepositedFileMetadata/index.spec.tsx b/src/frontend/apps/lti_site/apps/deposit/api/useDepositedFileMetadata/index.spec.tsx
@@ -21,6 +21,7 @@ describe('useDepositedFileMetadata', () => {
   });
 
   it('requests the deposited file metadata', async () => {
+    const fileDepositoryId = '1';
     const depositedFileMetadata = {
       name: 'Deposited files List',
       description: 'Viewset for the API of the deposited file object.',
@@ -32,16 +33,24 @@ describe('useDepositedFileMetadata', () => {
       ],
       upload_max_size_bytes: 100,
     };
-    fetchMock.mock(`/api/depositedfiles/`, depositedFileMetadata);
+    fetchMock.mock(
+      `/api/filedepositories/${fileDepositoryId}/depositedfiles/`,
+      depositedFileMetadata,
+    );
 
-    const { result } = renderHook(() => useDepositedFileMetadata('fr'), {
-      wrapper: WrapperReactQuery,
-    });
+    const { result } = renderHook(
+      () => useDepositedFileMetadata('fr', fileDepositoryId),
+      {
+        wrapper: WrapperReactQuery,
+      },
+    );
     await waitFor(() => {
       expect(result.current.isSuccess).toBeTruthy();
     });
 
-    expect(fetchMock.lastCall()![0]).toEqual(`/api/depositedfiles/`);
+    expect(fetchMock.lastCall()![0]).toEqual(
+      `/api/filedepositories/${fileDepositoryId}/depositedfiles/`,
+    );
     expect(fetchMock.lastCall()![1]).toEqual({
       headers: {
         Authorization: 'Bearer some token',
@@ -55,17 +64,26 @@ describe('useDepositedFileMetadata', () => {
   });
 
   it('fails to get the deposited file metadata', async () => {
-    fetchMock.mock(`/api/depositedfiles/`, 404);
+    const fileDepositoryId = '1';
+    fetchMock.mock(
+      `/api/filedepositories/${fileDepositoryId}/depositedfiles/`,
+      404,
+    );
 
-    const { result } = renderHook(() => useDepositedFileMetadata('en'), {
-      wrapper: WrapperReactQuery,
-    });
+    const { result } = renderHook(
+      () => useDepositedFileMetadata('en', fileDepositoryId),
+      {
+        wrapper: WrapperReactQuery,
+      },
+    );
 
     await waitFor(() => {
       expect(result.current.isError).toBeTruthy();
     });
 
-    expect(fetchMock.lastCall()![0]).toEqual(`/api/depositedfiles/`);
+    expect(fetchMock.lastCall()![0]).toEqual(
+      `/api/filedepositories/${fileDepositoryId}/depositedfiles/`,
+    );
     expect(fetchMock.lastCall()![1]).toEqual({
       headers: {
         Authorization: 'Bearer some token',

diff --git a/src/frontend/apps/lti_site/apps/deposit/api/useDepositedFileMetadata/index.ts b/src/frontend/apps/lti_site/apps/deposit/api/useDepositedFileMetadata/index.ts
@@ -5,14 +5,15 @@ import { DepositedFileMetadata } from 'apps/deposit/types/metadata';
 
 export const useDepositedFileMetadata = (
   locale: string,
+  fileDepositoryId: string,
   queryConfig?: UseQueryOptions<
     DepositedFileMetadata,
     'depositedfiles',
     DepositedFileMetadata,
     string[]
   >,
 ) => {
-  const key = ['depositedfiles', locale];
+  const key = [`filedepositories/${fileDepositoryId}/depositedfiles`, locale];
   return useQuery<
     DepositedFileMetadata,
     'depositedfiles',

diff --git a/...ps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/UploadFiles/index.spec.tsx b/...ps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/UploadFiles/index.spec.tsx
@@ -96,6 +96,8 @@ describe('<UploadFiles />', () => {
       modelName.DepositedFiles,
       depositedFile.id,
       file,
+      modelName.FileDepositories,
+      depositedFile.file_depository_id,
     );
   });
 
@@ -112,7 +114,7 @@ describe('<UploadFiles />', () => {
     });
 
     fetchMock.mock(
-      '/api/depositedfiles/',
+      '/api/filedepositories/1/depositedfiles/',
       {
         upload_max_size_bytes: Math.pow(10, 9),
       },

diff --git a/...nd/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/UploadFiles/index.tsx b/...nd/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/UploadFiles/index.tsx
@@ -65,7 +65,10 @@ export const UploadFiles = () => {
   const { addUpload, uploadManagerState } = useUploadManager();
   const [filesToUpload, setFilesToUpload] = useState<File[]>([]);
   const [uploading, setUploading] = useState(false);
-  const metadata = useDepositedFileMetadata(intl.locale);
+  const metadata = useDepositedFileMetadata(
+    intl.locale,
+    depositAppData.fileDepository?.id || '',
+  );
 
   const uploadsInProgress = Object.values(uploadManagerState).filter((state) =>
     [UploadManagerStatus.INIT, UploadManagerStatus.UPLOADING].includes(
@@ -87,11 +90,19 @@ export const UploadFiles = () => {
 
     setUploading(true);
     try {
-      const depositedFile = await createDepositedFile({
-        size: file.size,
-        filename: file.name,
-      });
-      addUpload(modelName.DepositedFiles, depositedFile.id, file);
+      const depositedFile = await createDepositedFile(
+        {
+          size: file.size,
+          filename: file.name,
+        },
+        depositAppData.fileDepository?.id || '',
+      );
+      addUpload(
+        modelName.DepositedFiles,
+        depositedFile.id,
+        file,
+        depositedFile.file_depository_id,
+      );
       refreshDepositedFiles();
     } catch (error) {
       if ((error as object).hasOwnProperty('size') && metadata.data) {

diff --git a/...nd/apps/lti_site/apps/deposit/components/Dashboard/common/DepositedFileRow/index.spec.tsx b/...nd/apps/lti_site/apps/deposit/components/Dashboard/common/DepositedFileRow/index.spec.tsx
@@ -36,17 +36,20 @@ describe('<DepositedFileRow />', () => {
       'https://example.com/file.txt',
     );
 
-    fetchMock.patch(`/api/depositedfiles/${depositedFile.id}/`, {
-      ...depositedFile,
-      read: true,
-    });
+    fetchMock.patch(
+      `/api/filedepositories/${depositedFile.file_depository_id}/depositedfiles/${depositedFile.id}/`,
+      {
+        ...depositedFile,
+        read: true,
+      },
+    );
 
     fireEvent.click(downloadButton);
     fireEvent.blur(window);
 
     await waitFor(() =>
       expect(fetchMock.lastCall()![0]).toEqual(
-        `/api/depositedfiles/${depositedFile.id}/`,
+        `/api/filedepositories/${depositedFile.file_depository_id}/depositedfiles/${depositedFile.id}/`,
       ),
     );
     expect(fetchMock.lastCall()![1]).toEqual({

diff --git a/...rontend/apps/lti_site/apps/deposit/components/Dashboard/common/DepositedFileRow/index.tsx b/...rontend/apps/lti_site/apps/deposit/components/Dashboard/common/DepositedFileRow/index.tsx
@@ -29,7 +29,7 @@ export const DepositedFileRow = ({ file }: DepositedFileProps) => {
   const uploadedOnDate = uploadedOn ? uploadedOn.toFormat('dd/MM/yyyy') : null;
   const uploadedOnTime = uploadedOn ? uploadedOn.toFormat('HH:mm') : null;
 
-  const { mutate } = useUpdateDepositedFile(file.id);
+  const { mutate } = useUpdateDepositedFile(file.id, file.file_depository_id);
   const markFileAsRead = () => {
     const callback = () => {
       mutate(

diff --git a/src/frontend/apps/lti_site/apps/deposit/data/queries/index.spec.tsx b/src/frontend/apps/lti_site/apps/deposit/data/queries/index.spec.tsx
@@ -398,12 +398,16 @@ describe('queries', () => {
     it('updates the resource', async () => {
       const depositedFile = depositedFileMockFactory();
       fetchMock.patch(
-        `/api/depositedfiles/${depositedFile.id}/`,
+        `/api/filedepositories/${depositedFile.file_depository_id}/depositedfiles/${depositedFile.id}/`,
         depositedFile,
       );
 
       const { result } = renderHook(
-        () => useUpdateDepositedFile(depositedFile.id),
+        () =>
+          useUpdateDepositedFile(
+            depositedFile.id,
+            depositedFile.file_depository_id,
+          ),
         {
           wrapper: WrapperReactQuery,
         },
@@ -416,7 +420,7 @@ describe('queries', () => {
       });
 
       expect(fetchMock.lastCall()![0]).toEqual(
-        `/api/depositedfiles/${depositedFile.id}/`,
+        `/api/filedepositories/${depositedFile.file_depository_id}/depositedfiles/${depositedFile.id}/`,
       );
       expect(fetchMock.lastCall()![1]).toEqual({
         headers: {
@@ -434,10 +438,17 @@ describe('queries', () => {
 
     it('fails to update the resource', async () => {
       const depositedFile = depositedFileMockFactory();
-      fetchMock.patch(`/api/depositedfiles/${depositedFile.id}/`, 400);
+      fetchMock.patch(
+        `/api/filedepositories/${depositedFile.file_depository_id}/depositedfiles/${depositedFile.id}/`,
+        400,
+      );
 
       const { result } = renderHook(
-        () => useUpdateDepositedFile(depositedFile.id),
+        () =>
+          useUpdateDepositedFile(
+            depositedFile.id,
+            depositedFile.file_depository_id,
+          ),
         {
           wrapper: WrapperReactQuery,
         },
@@ -450,7 +461,7 @@ describe('queries', () => {
       });
 
       expect(fetchMock.lastCall()![0]).toEqual(
-        `/api/depositedfiles/${depositedFile.id}/`,
+        `/api/filedepositories/${depositedFile.file_depository_id}/depositedfiles/${depositedFile.id}/`,
       );
       expect(fetchMock.lastCall()![1]).toEqual({
         headers: {

diff --git a/src/frontend/apps/lti_site/apps/deposit/data/queries/index.tsx b/src/frontend/apps/lti_site/apps/deposit/data/queries/index.tsx
@@ -202,6 +202,7 @@ type UseUpdateDepositedFileOptions = UseMutationOptions<
 >;
 export const useUpdateDepositedFile = (
   id: string,
+  parentId: string,
   options?: UseUpdateDepositedFileOptions,
 ) => {
   const queryClient = useQueryClient();
@@ -212,7 +213,7 @@ export const useUpdateDepositedFile = (
   >({
     mutationFn: (updatedDepositedFile) =>
       updateOne({
-        name: modelName.DepositedFiles,
+        name: `${modelName.FileDepositories}/${parentId}/${modelName.DepositedFiles}`,
         id,
         object: updatedDepositedFile,
       }),

diff --git a/src/frontend/apps/lti_site/apps/deposit/data/sideEffects/createDepositedFile/index.spec.ts b/src/frontend/apps/lti_site/apps/deposit/data/sideEffects/createDepositedFile/index.spec.ts
@@ -13,19 +13,26 @@ describe('sideEffects/createDepositedFile', () => {
   afterEach(() => fetchMock.restore());
 
   it('creates a new deposited file and returns it', async () => {
-    fetchMock.mock('/api/depositedfiles/', {
-      id: 'shared_live_media_id',
-      is_ready_to_show: false,
-      show_download: true,
-      upload_state: 'pending',
-      video: 'video_id',
-    });
+    const fileDepositoryId = '1';
+    fetchMock.mock(
+      `/api/filedepositories/${fileDepositoryId}/depositedfiles/`,
+      {
+        id: 'shared_live_media_id',
+        is_ready_to_show: false,
+        show_download: true,
+        upload_state: 'pending',
+        video: 'video_id',
+      },
+    );
     const file = new File(['anrusitanrsui tnarsuit narsuit'], 'TestFile.txt');
 
-    const depositedFile = await createDepositedFile({
-      size: file.size,
-      filename: file.name,
-    });
+    const depositedFile = await createDepositedFile(
+      {
+        size: file.size,
+        filename: file.name,
+      },
+      fileDepositoryId,
+    );
 
     const fetchArgs = fetchMock.lastCall()![1]!;
 
@@ -44,23 +51,34 @@ describe('sideEffects/createDepositedFile', () => {
   });
 
   it('throws when it fails to create the deposited file (request failure)', async () => {
+    const fileDepositoryId = '1';
     fetchMock.mock(
-      '/api/depositedfiles/',
+      `/api/filedepositories/${fileDepositoryId}/depositedfiles/`,
       Promise.reject(new Error('Failed to perform the request')),
     );
     const file = new File(['anrusitanrsui tnarsuit narsuit'], 'TestFile.txt');
 
     await expect(
-      createDepositedFile({ size: file.size, filename: file.name }),
+      createDepositedFile(
+        { size: file.size, filename: file.name },
+        fileDepositoryId,
+      ),
     ).rejects.toThrow();
   });
 
   it('throws when it fails to create the deposited file (API error)', async () => {
-    fetchMock.mock('/api/depositedfiles/', 400);
+    const fileDepositoryId = '1';
+    fetchMock.mock(
+      `/api/filedepositories/${fileDepositoryId}/depositedfiles/`,
+      400,
+    );
     const file = new File(['anrusitanrsui tnarsuit narsuit'], 'TestFile.txt');
 
     await expect(
-      createDepositedFile({ size: file.size, filename: file.name }),
+      createDepositedFile(
+        { size: file.size, filename: file.name },
+        fileDepositoryId,
+      ),
     ).rejects.toThrow();
   });
 });
diff --git a/src/frontend/apps/lti_site/apps/deposit/data/sideEffects/createDepositedFile/index.ts b/src/frontend/apps/lti_site/apps/deposit/data/sideEffects/createDepositedFile/index.ts
@@ -7,18 +7,21 @@ import {
   useJwt,
 } from 'lib-components';
 
-export const createDepositedFile = async (file: {
-  size: number;
-  filename: string;
-}): Promise<DepositedFile> => {
+export const createDepositedFile = async (
+  file: {
+    size: number;
+    filename: string;
+  },
+  fileDepositoryId: string,
+): Promise<DepositedFile> => {
   const jwt = useJwt.getState().getJwt();
 
   if (!jwt) {
     throw new Error('No JWT found.');
   }
 
   const response = await fetchWrapper(
-    `${API_ENDPOINT}/${modelName.DepositedFiles}/`,
+    `${API_ENDPOINT}/${modelName.FileDepositories}/${fileDepositoryId}/${modelName.DepositedFiles}/`,
     {
       headers: {
         Authorization: `Bearer ${jwt}`,