⬆️(frontend) upgrade react to 18

- upgrade the frontend to React 18 - adapt the modules to the new interfaces
openfun · Jun 8, 2023 · efe2962 · efe2962
1 parent 9556798
commit efe2962
Show file tree

Hide file tree

Showing 35 changed files with 182 additions and 280 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,6 +26,7 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 ### Changed
 
 - Refacto routes contents website (#2253)
+- Upgrade frontend to React 18 (#2280)
 
 ## [4.1.0] - 2023-05-23
 

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
@@ -1,6 +1,7 @@
 import { renderHook, WrapperComponent } from '@testing-library/react-hooks';
 import fetchMock from 'fetch-mock';
 import { useJwt } from 'lib-components';
+import { WrapperReactQuery } from 'lib-tests';
 import React from 'react';
 import { QueryClient, QueryClientProvider, setLogger } from 'react-query';
 
@@ -19,23 +20,9 @@ jest.mock('lib-components', () => ({
  report: jest.fn(),
 }));
 
-let Wrapper: WrapperComponent<Element>;
-
 describe('useDepositedFileMetadata', () => {
  beforeEach(() => {
  useJwt.getState().setJwt('some token');
-
- const queryClient = new QueryClient({
- defaultOptions: {
- queries: {
- retry: false,
- },
- },
- });
-
- Wrapper = ({ children }: Element) => (
- <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
- );
  });
 
  afterEach(() => {
@@ -60,7 +47,7 @@ describe('useDepositedFileMetadata', () => {
  const { result, waitFor } = renderHook(
  () => useDepositedFileMetadata('fr'),
  {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  },
  );
  await waitFor(() => result.current.isSuccess);
@@ -84,7 +71,7 @@ describe('useDepositedFileMetadata', () => {
  const { result, waitFor } = renderHook(
  () => useDepositedFileMetadata('en'),
  {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  },
  );
 

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
@@ -1,8 +1,7 @@
 import fetchMock from 'fetch-mock';
 import { useJwt } from 'lib-components';
-import React from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { renderHook, WrapperComponent } from '@testing-library/react-hooks';
+import { WrapperReactQuery } from 'lib-tests';
+import { renderHook } from '@testing-library/react-hooks';
 
 import {
  depositedFileMockFactory,
@@ -23,23 +22,9 @@ jest.mock('lib-components', () => ({
  report: jest.fn(),
 }));
 
-let Wrapper: WrapperComponent<Element>;
-
 describe('queries', () => {
  beforeEach(() => {
  useJwt.getState().setJwt('some token');
-
- const queryClient = new QueryClient({
- defaultOptions: {
- queries: {
- retry: false,
- },
- },
- });
-
- Wrapper = ({ children }: Element) => (
- <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
- );
  });
 
  afterEach(() => {
@@ -58,7 +43,7 @@ describe('queries', () => {
  const { result, waitFor } = renderHook(
  () => useFileDepositories({ organization: '1' }),
  {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  },
  );
  await waitFor(() => result.current.isSuccess);
@@ -81,7 +66,7 @@ describe('queries', () => {
 
  const { result, waitFor } = renderHook(
  () => useFileDepositories({ organization: '1' }),
- { wrapper: Wrapper },
+ { wrapper: WrapperReactQuery },
  );
 
  await waitFor(() => result.current.isError);
@@ -111,7 +96,7 @@ describe('queries', () => {
  const { result, waitFor } = renderHook(
  () => useFileDepository(fileDepository.id),
  {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  },
  );
  await waitFor(() => result.current.isSuccess);
@@ -136,7 +121,7 @@ describe('queries', () => {
  const { result, waitFor } = renderHook(
  () => useFileDepository(fileDepository.id),
  {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  },
  );
 
@@ -162,7 +147,7 @@ describe('queries', () => {
  fetchMock.post('/api/filedepositories/', fileDepository);
 
  const { result, waitFor } = renderHook(() => useCreateFileDepository(), {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  });
  result.current.mutate({
  playlist: fileDepository.playlist.id,
@@ -191,7 +176,7 @@ describe('queries', () => {
  fetchMock.post('/api/filedepositories/', 400);
 
  const { result, waitFor } = renderHook(() => useCreateFileDepository(), {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  });
  result.current.mutate({
  playlist: fileDepository.playlist.id,
@@ -228,7 +213,7 @@ describe('queries', () => {
  const { result, waitFor } = renderHook(
  () => useUpdateFileDepository(fileDepository.id),
  {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  },
  );
  result.current.mutate({
@@ -260,7 +245,7 @@ describe('queries', () => {
  const { result, waitFor } = renderHook(
  () => useUpdateFileDepository(fileDepository.id),
  {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  },
  );
  result.current.mutate({
@@ -300,7 +285,7 @@ describe('queries', () => {
  const { result, waitFor } = renderHook(
  () => useDepositedFiles(fileDepository.id, { limit: 3 }),
  {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  },
  );
  await waitFor(() => result.current.isSuccess);
@@ -331,7 +316,7 @@ describe('queries', () => {
  const { result, waitFor } = renderHook(
  () => useDepositedFiles(fileDepository.id, { limit: 3, offset: 3 }),
  {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  },
  );
  await waitFor(() => result.current.isSuccess);
@@ -362,7 +347,7 @@ describe('queries', () => {
  const { result, waitFor } = renderHook(
  () => useDepositedFiles(fileDepository.id, { limit: 3 }),
  {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  },
  );
 
@@ -393,7 +378,7 @@ describe('queries', () => {
  const { result, waitFor } = renderHook(
  () => useUpdateDepositedFile(depositedFile.id),
  {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  },
  );
  result.current.mutate({
@@ -425,7 +410,7 @@ describe('queries', () => {
  const { result, waitFor } = renderHook(
  () => useUpdateDepositedFile(depositedFile.id),
  {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  },
  );
  result.current.mutate({

diff --git a/src/frontend/apps/lti_site/data/queries/index.spec.tsx b/src/frontend/apps/lti_site/data/queries/index.spec.tsx
@@ -1,4 +1,4 @@
-import { renderHook, WrapperComponent } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react-hooks';
 import fetchMock from 'fetch-mock';
 import {
  useJwt,
@@ -7,10 +7,9 @@ import {
  playlistMockFactory,
  portabilityRequestMockFactory,
  thumbnailMockFactory,
- timedTextMockFactory,
 } from 'lib-components';
-import React from 'react';
-import { QueryClient, QueryClientProvider, setLogger } from 'react-query';
+import { WrapperReactQuery } from 'lib-tests';
+import { setLogger } from 'react-query';
 
 import {
  useCreateDocument,
@@ -35,23 +34,9 @@ jest.mock('lib-components', () => ({
  report: jest.fn(),
 }));
 
-let Wrapper: WrapperComponent<Element>;
-
 describe('queries', () => {
  beforeEach(() => {
  useJwt.getState().setJwt('some token');
-
- const queryClient = new QueryClient({
- defaultOptions: {
- queries: {
- retry: false,
- },
- },
- });
-
- Wrapper = ({ children }: Element) => (
- <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
- );
  });
 
  afterEach(() => {
@@ -66,7 +51,7 @@ describe('queries', () => {
 
  const { result, waitFor } = renderHook(
  () => useOrganization(organization.id),
- { wrapper: Wrapper },
+ { wrapper: WrapperReactQuery },
  );
  await waitFor(() => result.current.isSuccess);
 
@@ -90,7 +75,7 @@ describe('queries', () => {
 
  const { result, waitFor } = renderHook(
  () => useOrganization(organization.id),
- { wrapper: Wrapper },
+ { wrapper: WrapperReactQuery },
  );
 
  await waitFor(() => result.current.isError);
@@ -115,7 +100,7 @@ describe('queries', () => {
  fetchMock.mock(`/api/playlists/${playlist.id}/`, playlist);
 
  const { result, waitFor } = renderHook(() => usePlaylist(playlist.id), {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  });
  await waitFor(() => result.current.isSuccess);
 
@@ -137,7 +122,7 @@ describe('queries', () => {
  fetchMock.mock(`/api/playlists/${playlist.id}/`, 404);
 
  const { result, waitFor } = renderHook(() => usePlaylist(playlist.id), {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  });
 
  await waitFor(() => result.current.isError);
@@ -164,7 +149,7 @@ describe('queries', () => {
  const { result, waitFor } = renderHook(
  () => useUpdatePlaylist(playlist.id),
  {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  },
  );
  result.current.mutate({
@@ -196,7 +181,7 @@ describe('queries', () => {
  const { result, waitFor } = renderHook(
  () => useUpdatePlaylist(playlist.id),
  {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  },
  );
  result.current.mutate({
@@ -230,7 +215,7 @@ describe('queries', () => {
  const { result, waitFor } = renderHook(
  () => usePlaylists({ organization: '1' }),
  {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  },
  );
  await waitFor(() => result.current.isSuccess);
@@ -253,7 +238,7 @@ describe('queries', () => {
 
  const { result, waitFor } = renderHook(
  () => usePlaylists({ organization: '1' }),
- { wrapper: Wrapper },
+ { wrapper: WrapperReactQuery },
  );
 
  await waitFor(() => result.current.isError);
@@ -278,7 +263,7 @@ describe('queries', () => {
  fetchMock.mock(`/api/thumbnails/${thumbnail.id}/`, thumbnail);
 
  const { result, waitFor } = renderHook(() => useThumbnail(thumbnail.id), {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  });
  await waitFor(() => result.current.isSuccess);
 
@@ -301,7 +286,7 @@ describe('queries', () => {
  fetchMock.mock(`/api/thumbnails/${thumbnail.id}/`, 404);
 
  const { result, waitFor } = renderHook(() => useThumbnail(thumbnail.id), {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  });
 
  await waitFor(() => result.current.isError);
@@ -326,7 +311,7 @@ describe('queries', () => {
  fetchMock.post('/api/documents/', document);
 
  const { result, waitFor } = renderHook(() => useCreateDocument(), {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  });
  result.current.mutate({
  playlist: document.playlist.id,
@@ -355,7 +340,7 @@ describe('queries', () => {
  fetchMock.post('/api/documents/', 400);
 
  const { result, waitFor } = renderHook(() => useCreateDocument(), {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  });
  result.current.mutate({
  playlist: document.playlist.id,
@@ -390,7 +375,7 @@ describe('queries', () => {
  const { result, waitFor } = renderHook(
  () => useCreatePortabilityRequest(),
  {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  },
  );
  result.current.mutate({
@@ -426,7 +411,7 @@ describe('queries', () => {
  const { result, waitFor } = renderHook(
  () => useCreatePortabilityRequest(),
  {
- wrapper: Wrapper,
+ wrapper: WrapperReactQuery,
  },
  );
  result.current.mutate({