🚚(frontend) use nested routes for classroom related resources

As we want to only use API nested routes, our classroom components needs to handle them.
openfun · Aug 22, 2023 · 3af9524 · 3af9524
1 parent e76787a
commit 3af9524
Show file tree

Hide file tree

Showing 10 changed files with 165 additions and 70 deletions.
diff --git a/...ClassroomWidgetProvider/widgets/SupportSharing/UploadDocuments/DocumentRow/index.spec.tsx b/...ClassroomWidgetProvider/widgets/SupportSharing/UploadDocuments/DocumentRow/index.spec.tsx
@@ -1,5 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import { uploadState, useJwt } from 'lib-components';
 import { wrapInIntlProvider } from 'lib-tests';
@@ -73,6 +74,39 @@ describe('<DocumentRow />', () => {
     ).toBeEnabled();
   });
 
+  it('sets a document as default', async () => {
+    const classroom = classroomMockFactory({ started: false });
+    const document = classroomDocumentMockFactory({
+      filename: 'my_document.pdf',
+      classroom_id: classroom.id,
+    });
+    fetchMock.patch(
+      `/api/classrooms/${classroom.id}/classroomdocuments/${document.id}/`,
+      {
+        ...document,
+        is_default: true,
+      },
+    );
+    render(
+      wrapInIntlProvider(
+        wrapInClassroom(
+          <QueryClientProvider client={queryClient}>
+            <DocumentRow
+              onRetryFailedUpload={mockedOnRetryFailedUpload}
+              document={document}
+            />
+          </QueryClientProvider>,
+          classroom,
+        ),
+      ),
+    );
+
+    userEvent.click(
+      screen.getByRole('button', { name: 'Click to set as default document' }),
+    );
+    await waitFor(() => expect(fetchMock.calls()).toHaveLength(1));
+  });
+
   it('renders a row in UPLOAD_IN_PROGRESS state', () => {
     const classroom = classroomMockFactory({ id: '1', started: false });
     const document = classroomDocumentMockFactory({

diff --git a/...ents/ClassroomWidgetProvider/widgets/SupportSharing/UploadDocuments/DocumentRow/index.tsx b/...ents/ClassroomWidgetProvider/widgets/SupportSharing/UploadDocuments/DocumentRow/index.tsx
@@ -65,7 +65,10 @@ export const DocumentRow = ({
   uploadingObject,
 }: DocumentRowProps) => {
   const intl = useIntl();
-  const updateClassroomMutation = useUpdateClassroomDocument(document.id);
+  const updateClassroomMutation = useUpdateClassroomDocument(
+    document.classroom_id,
+    document.id,
+  );
   const deleteDocumentMutation = useDeleteClassroomDocument();
   const [isUploadInProgress, setIsUploadInProgress] = useState<boolean>(false);
 
@@ -88,12 +91,18 @@ export const DocumentRow = ({
   }, [updateClassroomMutation]);
 
   const setDeleteDocument = useCallback(() => {
-    deleteDocumentMutation.mutate(document.id, {
-      onSuccess: () => {
-        window.dispatchEvent(new CustomEvent('classroomDocumentUpdated'));
+    deleteDocumentMutation.mutate(
+      {
+        classroomId: document.classroom_id,
+        classroomDocumentId: document.id,
+      },
+      {
+        onSuccess: () => {
+          window.dispatchEvent(new CustomEvent('classroomDocumentUpdated'));
+        },
       },
-    });
-  }, [deleteDocumentMutation, document.id]);
+    );
+  }, [deleteDocumentMutation, document.classroom_id, document.id]);
 
   useEffect(() => {
     (document.upload_state === uploadState.PENDING && uploadingObject) ||

diff --git a/.../components/ClassroomWidgetProvider/widgets/SupportSharing/UploadDocuments/index.spec.tsx b/.../components/ClassroomWidgetProvider/widgets/SupportSharing/UploadDocuments/index.spec.tsx
@@ -12,7 +12,10 @@ import { Deferred, render } from 'lib-tests';
 import React, { PropsWithChildren } from 'react';
 
 import { createClassroomDocument } from '@lib-classroom/data/sideEffects/createClassroomDocument';
-import { classroomDocumentMockFactory } from '@lib-classroom/utils/tests/factories';
+import {
+  classroomDocumentMockFactory,
+  classroomMockFactory,
+} from '@lib-classroom/utils/tests/factories';
 
 import { UploadDocuments } from '.';
 
@@ -55,7 +58,7 @@ describe('<UploadDocuments />', () => {
 
   it('renders a Dropzone with the relevant messages', () => {
     fetchMock.mock(
-      '/api/classroomdocuments/',
+      '/api/classrooms/1/classroomdocuments/',
       {
         upload_max_size_bytes: Math.pow(10, 9),
       },
@@ -93,7 +96,7 @@ describe('<UploadDocuments />', () => {
     });
 
     fetchMock.mock(
-      '/api/classroomdocuments/',
+      '/api/classrooms/1/classroomdocuments/',
       {
         upload_max_size_bytes: Math.pow(10, 9),
       },
@@ -128,6 +131,7 @@ describe('<UploadDocuments />', () => {
       modelName.CLASSROOM_DOCUMENTS,
       classroomDocument.id,
       file,
+      '1',
     );
   });
 
@@ -143,7 +147,7 @@ describe('<UploadDocuments />', () => {
     });
 
     fetchMock.mock(
-      '/api/classroomdocuments/',
+      '/api/classrooms/1/classroomdocuments/',
       {
         upload_max_size_bytes: Math.pow(10, 9),
       },
@@ -191,7 +195,7 @@ describe('<UploadDocuments />', () => {
     });
 
     fetchMock.mock(
-      '/api/classroomdocuments/',
+      '/api/classrooms/1/classroomdocuments/',
       {
         upload_max_size_bytes: Math.pow(10, 9),
       },
@@ -236,7 +240,7 @@ describe('<UploadDocuments />', () => {
     });
 
     fetchMock.mock(
-      '/api/classroomdocuments/',
+      '/api/classrooms/1/classroomdocuments/',
       {
         upload_max_size_bytes: Math.pow(10, 9),
       },
@@ -274,40 +278,49 @@ describe('<UploadDocuments />', () => {
   });
 
   it('updates classroom documents defaults', async () => {
+    const classroom = classroomMockFactory();
     const classroomDocument = classroomDocumentMockFactory({
+      classroom_id: classroom.id,
       filename: 'file.txt',
       is_default: false,
       upload_state: READY,
       uploaded_on: '2020-01-01T00:00:00Z',
       url: 'https://example.com/file.txt',
     });
     const classroomDocument2 = classroomDocumentMockFactory({
+      classroom_id: classroom.id,
       filename: 'file2.txt',
       is_default: true,
       upload_state: READY,
       uploaded_on: '2020-01-01T00:00:00Z',
       url: 'https://example.com/file2.txt',
     });
-    fetchMock.get('/api/classrooms/1/classroomdocuments/?limit=999', {
-      count: 2,
-      next: null,
-      previous: null,
-      results: [classroomDocument, classroomDocument2],
-    });
+    fetchMock.get(
+      `/api/classrooms/${classroom.id}/classroomdocuments/?limit=999`,
+      {
+        count: 2,
+        next: null,
+        previous: null,
+        results: [classroomDocument, classroomDocument2],
+      },
+    );
 
     fetchMock.mock(
-      '/api/classroomdocuments/',
+      `/api/classrooms/${classroom.id}/classroomdocuments/`,
       {
         upload_max_size_bytes: Math.pow(10, 9),
       },
       { method: 'OPTIONS' },
     );
 
-    fetchMock.patch(`/api/classroomdocuments/${classroomDocument.id}/`, {
-      status: 200,
-    });
+    fetchMock.patch(
+      `/api/classrooms/${classroom.id}/classroomdocuments/${classroomDocument.id}/`,
+      {
+        status: 200,
+      },
+    );
 
-    render(<UploadDocuments classroomId="1" />);
+    render(<UploadDocuments classroomId={classroom.id} />);
 
     await screen.findByText('file.txt');
     const setDefaultButton = screen.getByRole('button', {
@@ -331,14 +344,18 @@ describe('<UploadDocuments />', () => {
       uploaded_on: '2020-01-01T00:00:00Z',
       url: 'https://example.com/file.txt',
     });
-    fetchMock.get('/api/classrooms/1/classroomdocuments/?limit=999', {
-      count: 1,
-      next: null,
-      previous: null,
-      results: [classroomDocument],
-    });
+    const classroomId = classroomDocument.classroom_id;
+    fetchMock.get(
+      `/api/classrooms/${classroomId}/classroomdocuments/?limit=999`,
+      {
+        count: 1,
+        next: null,
+        previous: null,
+        results: [classroomDocument],
+      },
+    );
     fetchMock.mock(
-      '/api/classroomdocuments/',
+      `/api/classrooms/${classroomId}/classroomdocuments/`,
       {
         upload_max_size_bytes: Math.pow(10, 9),
       },
@@ -351,9 +368,12 @@ describe('<UploadDocuments />', () => {
       uploadManagerState: {},
     });
 
-    fetchMock.delete(`/api/classroomdocuments/${classroomDocument.id}/`, 204);
+    fetchMock.delete(
+      `/api/classrooms/${classroomId}/classroomdocuments/${classroomDocument.id}/`,
+      204,
+    );
 
-    render(<UploadDocuments classroomId="1" />);
+    render(<UploadDocuments classroomId={classroomId} />);
 
     await screen.findByRole('link', { name: 'file.txt' });
 
@@ -362,12 +382,12 @@ describe('<UploadDocuments />', () => {
     });
     await userEvent.click(deleteButton);
 
-    await waitFor(() => expect(fetchMock.calls()).toHaveLength(5));
+    await waitFor(() => expect(fetchMock.calls()).toHaveLength(6));
     const deleteCall = fetchMock.calls(
-      `/api/classroomdocuments/${classroomDocument.id}/`,
+      `/api/classrooms/${classroomId}/classroomdocuments/${classroomDocument.id}/`,
     );
     expect(deleteCall[0][0]).toEqual(
-      `/api/classroomdocuments/${classroomDocument.id}/`,
+      `/api/classrooms/${classroomId}/classroomdocuments/${classroomDocument.id}/`,
     );
     expect(deleteCall[0][1]).toEqual({
       headers: {
@@ -393,7 +413,7 @@ describe('<UploadDocuments />', () => {
       results: [classroomDocument],
     });
     fetchMock.mock(
-      '/api/classroomdocuments/',
+      '/api/classrooms/1/classroomdocuments/',
       {
         upload_max_size_bytes: Math.pow(10, 9),
       },

diff --git a/...m/src/components/ClassroomWidgetProvider/widgets/SupportSharing/UploadDocuments/index.tsx b/...m/src/components/ClassroomWidgetProvider/widgets/SupportSharing/UploadDocuments/index.tsx
@@ -80,7 +80,7 @@ export const UploadDocuments = ({ classroomId }: UploadDocumentsProps) => {
   const intl = useIntl();
   const { data: classroomDocuments, refetch: refreshClassroomDocuments } =
     useClassroomDocuments(classroomId, {});
-  const metadata = useClassroomDocumentMetadata(intl.locale);
+  const metadata = useClassroomDocumentMetadata(classroomId, intl.locale);
 
   const { addUpload, uploadManagerState } = useUploadManager();
   const [filesToUpload, setFilesToUpload] = useState<File[]>([]);
@@ -125,9 +125,9 @@ export const UploadDocuments = ({ classroomId }: UploadDocumentsProps) => {
       const document = await createClassroomDocument({
         filename: file.name,
         size: file.size,
-        classroom: classroomId,
+        classroom_id: classroomId,
       });
-      addUpload(modelName.CLASSROOM_DOCUMENTS, document.id, file);
+      addUpload(modelName.CLASSROOM_DOCUMENTS, document.id, file, classroomId);
       refreshClassroomDocuments();
     } catch (error) {
       if ((error as object).hasOwnProperty('size') && metadata.data) {

diff --git a/src/frontend/packages/lib_classroom/src/components/DashboardClassroom/index.spec.tsx b/src/frontend/packages/lib_classroom/src/components/DashboardClassroom/index.spec.tsx
@@ -90,7 +90,7 @@ describe('<DashboardClassroom />', () => {
       results: [],
     });
     fetchMock.mock(
-      '/api/classroomdocuments/',
+      `/api/classrooms/${classroom.id}/classroomdocuments/`,
       {
         upload_max_size_bytes: Math.pow(10, 9),
       },
@@ -126,7 +126,7 @@ describe('<DashboardClassroom />', () => {
       results: [],
     });
     fetchMock.mock(
-      '/api/classroomdocuments/',
+      `/api/classrooms/${classroom.id}/classroomdocuments/`,
       {
         upload_max_size_bytes: Math.pow(10, 9),
       },
@@ -293,7 +293,7 @@ describe('<DashboardClassroom />', () => {
       results: [],
     });
     fetchMock.mock(
-      '/api/classroomdocuments/',
+      `/api/classrooms/${classroom.id}/classroomdocuments/`,
       {
         upload_max_size_bytes: Math.pow(10, 9),
       },

diff --git a/src/frontend/packages/lib_classroom/src/data/queries/index.spec.tsx b/src/frontend/packages/lib_classroom/src/data/queries/index.spec.tsx
@@ -538,12 +538,16 @@ describe('queries', () => {
     it('updates the resource', async () => {
       const classroomDocument = classroomDocumentMockFactory();
       fetchMock.patch(
-        `/api/classroomdocuments/${classroomDocument.id}/`,
+        `/api/classrooms/${classroomDocument.classroom_id}/classroomdocuments/${classroomDocument.id}/`,
         classroomDocument,
       );
 
       const { result } = renderHook(
-        () => useUpdateClassroomDocument(classroomDocument.id),
+        () =>
+          useUpdateClassroomDocument(
+            classroomDocument.classroom_id,
+            classroomDocument.id,
+          ),
         {
           wrapper: WrapperReactQuery,
         },
@@ -556,7 +560,7 @@ describe('queries', () => {
       });
 
       expect(fetchMock.lastCall()![0]).toEqual(
-        `/api/classroomdocuments/${classroomDocument.id}/`,
+        `/api/classrooms/${classroomDocument.classroom_id}/classroomdocuments/${classroomDocument.id}/`,
       );
       expect(fetchMock.lastCall()![1]).toEqual({
         headers: {
@@ -574,10 +578,17 @@ describe('queries', () => {
 
     it('fails to update the resource', async () => {
       const classroomDocument = classroomDocumentMockFactory();
-      fetchMock.patch(`/api/classroomdocuments/${classroomDocument.id}/`, 400);
+      fetchMock.patch(
+        `/api/classrooms/${classroomDocument.classroom_id}/classroomdocuments/${classroomDocument.id}/`,
+        400,
+      );
 
       const { result } = renderHook(
-        () => useUpdateClassroomDocument(classroomDocument.id),
+        () =>
+          useUpdateClassroomDocument(
+            classroomDocument.classroom_id,
+            classroomDocument.id,
+          ),
         {
           wrapper: WrapperReactQuery,
         },
@@ -590,7 +601,7 @@ describe('queries', () => {
       });
 
       expect(fetchMock.lastCall()![0]).toEqual(
-        `/api/classroomdocuments/${classroomDocument.id}/`,
+        `/api/classrooms/${classroomDocument.classroom_id}/classroomdocuments/${classroomDocument.id}/`,
       );
       expect(fetchMock.lastCall()![1]).toEqual({
         headers: {