From 604027829851cd61b92e4e45ca6eb8e6b7f0b08a Mon Sep 17 00:00:00 2001 From: Nicolas Clerc Date: Mon, 7 Aug 2023 14:22:30 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=9A(frontend)=20use=20nested=20routes?= =?UTF-8?q?=20for=20deposit=20related=20resources?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../useDepositedFileMetadata/index.spec.tsx | 38 +++++++++++---- .../api/useDepositedFileMetadata/index.ts | 3 +- .../UploadFiles/index.spec.tsx | 4 +- .../DashboardStudent/UploadFiles/index.tsx | 24 +++++++--- .../common/DepositedFileRow/index.spec.tsx | 13 +++-- .../common/DepositedFileRow/index.tsx | 2 +- .../apps/deposit/data/queries/index.spec.tsx | 23 ++++++--- .../apps/deposit/data/queries/index.tsx | 3 +- .../createDepositedFile/index.spec.ts | 48 +++++++++++++------ .../sideEffects/createDepositedFile/index.ts | 13 +++-- 10 files changed, 120 insertions(+), 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 index eb6bf249a6..55a63df5fc 100644 --- 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 index 779123d12e..50ceda1c93 100644 --- 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,6 +5,7 @@ import { DepositedFileMetadata } from 'apps/deposit/types/metadata'; export const useDepositedFileMetadata = ( locale: string, + fileDepositoryId: string, queryConfig?: UseQueryOptions< DepositedFileMetadata, 'depositedfiles', @@ -12,7 +13,7 @@ export const useDepositedFileMetadata = ( string[] >, ) => { - const key = ['depositedfiles', locale]; + const key = [`filedepositories/${fileDepositoryId}/depositedfiles`, locale]; return useQuery< DepositedFileMetadata, 'depositedfiles', diff --git a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/UploadFiles/index.spec.tsx b/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/UploadFiles/index.spec.tsx index c5945be6c8..9e9d804561 100644 --- a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/UploadFiles/index.spec.tsx +++ b/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/UploadFiles/index.spec.tsx @@ -96,6 +96,8 @@ describe('', () => { modelName.DepositedFiles, depositedFile.id, file, + modelName.FileDepositories, + depositedFile.file_depository_id, ); }); @@ -112,7 +114,7 @@ describe('', () => { }); fetchMock.mock( - '/api/depositedfiles/', + '/api/filedepositories/1/depositedfiles/', { upload_max_size_bytes: Math.pow(10, 9), }, diff --git a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/UploadFiles/index.tsx b/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/UploadFiles/index.tsx index 115612e41b..ca806e6bc8 100644 --- a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/UploadFiles/index.tsx +++ b/src/frontend/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([]); 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,20 @@ 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, + modelName.FileDepositories, + depositedFile.file_depository_id, + ); refreshDepositedFiles(); } catch (error) { if ((error as object).hasOwnProperty('size') && metadata.data) { diff --git a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/common/DepositedFileRow/index.spec.tsx b/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/common/DepositedFileRow/index.spec.tsx index 768392c3cf..f041fa8082 100644 --- a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/common/DepositedFileRow/index.spec.tsx +++ b/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/common/DepositedFileRow/index.spec.tsx @@ -36,17 +36,20 @@ describe('', () => { '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/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/common/DepositedFileRow/index.tsx b/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/common/DepositedFileRow/index.tsx index bac8d83846..7324629cff 100644 --- a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/common/DepositedFileRow/index.tsx +++ b/src/frontend/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 index 605829996f..f781983dc3 100644 --- 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 index 7f07db4e64..f10bfd1127 100644 --- 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 index 67f894ec16..125229b551 100644 --- 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 index 66c343d89d..07e8cd9ac4 100644 --- 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,10 +7,13 @@ import { useJwt, } from 'lib-components'; -export const createDepositedFile = async (file: { - size: number; - filename: string; -}): Promise => { +export const createDepositedFile = async ( + file: { + size: number; + filename: string; + }, + fileDepositoryId: string, +): Promise => { const jwt = useJwt.getState().getJwt(); if (!jwt) { @@ -18,7 +21,7 @@ export const createDepositedFile = async (file: { } const response = await fetchWrapper( - `${API_ENDPOINT}/${modelName.DepositedFiles}/`, + `${API_ENDPOINT}/${modelName.FileDepositories}/${fileDepositoryId}/${modelName.DepositedFiles}/`, { headers: { Authorization: `Bearer ${jwt}`,