✨ upgrade to react18 #2280
Merged
✨ upgrade to react18 #2280
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
AntoLC
force-pushed
the
feature/anthony/react18
branch
7 times, most recently
from
bea0ac5
to
cf9faa9
Compare
AntoLC
force-pushed
the
feature/anthony/react18
branch
11 times, most recently
from
c70fd7c
to
c0b62d8
Compare
kernicPanel
reviewed
Jun 23, 2023
lunika
reviewed
Jun 23, 2023
There was a problem hiding this comment.
- When I create a new video in LTI, once I click on the
create videobutton, I have this screen.
- When I upload a subtitle, I have this error once the file selected and the upload begins :
Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
CheckBox<@webpack://marsha/../../node_modules/grommet/es6/components/CheckBox/CheckBox.js?:36:19
styled_components__WEBPACK_IMPORTED_MODULE_1__.ThemeContext.Extend@webpack://marsha/../../node_modules/grommet/es6/contexts/ThemeContext/ThemeContext.js?:18:18
ToggleButton@webpack://marsha/../../packages/lib_components/src/common/ToggleButton/index.tsx?:48:18
div
P@webpack://marsha/../../node_modules/styled-components/dist/styled-components.browser.esm.js?:30:19658
Box<@webpack://marsha/../../node_modules/grommet/es6/components/Box/Box.js?:31:19
ToggleInput@webpack://marsha/../../packages/lib_components/src/common/ToggleInput/index.tsx?:31:17
ToggleSubtitlesAsTranscript@webpack://marsha/../../packages/lib_video/src/components/common/VideoWidgetProvider/widgets/UploadSubtitles/ToggleSubtitlesAsTranscript/index.tsx?:61:68
div
P@webpack://marsha/../../node_modules/styled-components/dist/styled-components.browser.esm.js?:30:19658
Box<@webpack://marsha/../../node_modules/grommet/es6/components/Box/Box.js?:31:19
div
P@webpack://marsha/../../node_modules/styled-components/dist/styled-components.browser.esm.js?:30:19658
Box<@webpack://marsha/../../node_modules/grommet/es6/components/Box/Box.js?:31:19
P@webpack://marsha/../../node_modules/styled-components/dist/styled-components.browser.esm.js?:30:19658
Collapsible<@webpack://marsha/../../node_modules/grommet/es6/components/Collapsible/Collapsible.js?:28:18
div
P@webpack://marsha/../../node_modules/styled-components/dist/styled-components.browser.esm.js?:30:19658
Box<@webpack://marsha/../../node_modules/grommet/es6/components/Box/Box.js?:31:19
FoldableItem@webpack://marsha/../../packages/lib_components/src/common/FoldableItem/index.tsx?:46:18
UploadSubtitles@webpack://marsha/../../packages/lib_video/src/components/common/VideoWidgetProvider/widgets/UploadSubtitles/index.tsx?:38:68
div
P@webpack://marsha/../../node_modules/styled-components/dist/styled-components.browser.esm.js?:30:19658
Box<@webpack://marsha/../../node_modules/grommet/es6/components/Box/Box.js?:31:19
div
P@webpack://marsha/../../node_modules/styled-components/dist/styled-components.browser.esm.js?:30:19658
Box<@webpack://marsha/../../node_modules/grommet/es6/components/Box/Box.js?:31:19
div
P@webpack://marsha/../../node_modules/styled-components/dist/styled-components.browser.esm.js?:30:19658
Box<@webpack://marsha/../../node_modules/grommet/es6/components/Box/Box.js?:31:19
WidgetsContainer@webpack://marsha/../../packages/lib_components/src/common/WidgetsContainer/index.tsx?:39:18
Provider@webpack://marsha/../../packages/lib_components/src/utils/createContext.tsx?:26:20
Provider@webpack://marsha/../../packages/lib_components/src/utils/createContext.tsx?:26:20
Provider@webpack://marsha/../../packages/lib_components/src/utils/createContext.tsx?:26:20
VideoWidgetProvider@webpack://marsha/../../packages/lib_video/src/components/common/VideoWidgetProvider/index.tsx?:171:16
div
P@webpack://marsha/../../node_modules/styled-components/dist/styled-components.browser.esm.js?:30:19658
div
P@webpack://marsha/../../node_modules/styled-components/dist/styled-components.browser.esm.js?:30:19658
Box<@webpack://marsha/../../node_modules/grommet/es6/components/Box/Box.js?:31:19
P@webpack://marsha/../../node_modules/styled-components/dist/styled-components.browser.esm.js?:30:19658
Tabs<@webpack://marsha/../../node_modules/grommet/es6/components/Tabs/Tabs.js?:41:23
styled_components__WEBPACK_IMPORTED_MODULE_1__.ThemeContext.Extend@webpack://marsha/../../node_modules/grommet/es6/contexts/ThemeContext/ThemeContext.js?:18:18
div
P@webpack://marsha/../../node_modules/styled-components/dist/styled-components.browser.esm.js?:30:19658
Box<@webpack://marsha/../../node_modules/grommet/es6/components/Box/Box.js?:31:19
DashboardControlPane@webpack://marsha/../../packages/lib_video/src/components/common/DashboardControlPane/index.tsx?:60:16
DashboardContent@webpack://marsha/../../packages/lib_video/src/components/vod/Teacher/Dashboard.tsx?:56:15
div
P@webpack://marsha/../../node_modules/styled-components/dist/styled-components.browser.esm.js?:30:19658
Box<@webpack://marsha/../../node_modules/grommet/es6/components/Box/Box.js?:31:19
WebSocketInitializer@webpack://marsha/../../packages/lib_video/src/components/common/VideoWebSocketInitializer/WebSocketInitializer/index.tsx?:15:13
VideoWebSocketInitializer@webpack://marsha/../../packages/lib_video/src/components/common/VideoWebSocketInitializer/index.tsx?:35:18
Dashboard@webpack://marsha/../../packages/lib_video/src/components/vod/Teacher/Dashboard.tsx?:81:15
DashboardVideoWrapper@webpack://marsha/../../packages/lib_video/src/components/common/DashboardVideoWrapper/index.tsx?:24:15
div
P@webpack://marsha/../../node_modules/styled-components/dist/styled-components.browser.esm.js?:30:19658
Dashboard@webpack://marsha/./components/Dashboard/index.tsx?:32:77
Routes@webpack://marsha/../../node_modules/react-router/index.js?:273:7
Suspense
div
UploadManager@webpack://marsha/../../packages/lib_components/src/common/UploadManager/index.tsx?:70:18
Router@webpack://marsha/../../node_modules/react-router/index.js?:211:7
MemoryRouter@webpack://marsha/../../node_modules/react-router/index.js?:122:7
Wrappers@webpack://marsha/./components/LTIRoutes/index.tsx?:73:18
LTIRoutes@webpack://marsha/./components/LTIRoutes/index.tsx?:92:78
AppContent@webpack://marsha/./components/App/AppContentLoader/index.tsx?:80:80
Suspense
ErrorBoundary@webpack://marsha/../../node_modules/react-error-boundary/dist/react-error-boundary.esm.js?:21:5
div
P@webpack://marsha/../../node_modules/styled-components/dist/styled-components.browser.esm.js?:30:19658
AnalyticsProvider@webpack://marsha/../../node_modules/grommet/es6/contexts/AnalyticsContext/AnalyticsContext.js?:15:21
Grommet<@webpack://marsha/../../node_modules/grommet/es6/components/Grommet/Grommet.js?:62:18
QueryClientProvider@webpack://marsha/../../node_modules/react-query/es/react/QueryClientProvider.js?:39:16
Provider@webpack://marsha/../../packages/lib_components/src/utils/createContext.tsx?:26:20
AppContentLoader@webpack://marsha/./components/App/AppContentLoader/index.tsx?:113:66
Suspense
AppInitializer@webpack://marsha/./components/App/AppInitializer/index.tsx?:29:66
AppConfigProvider@webpack://marsha/../../packages/lib_components/src/data/stores/useAppConfig/index.tsx?:13:18
App
- When a webinar is running and I am streaming, if I click on the record button, the video is reloaded on all student views.
- Every change made on a webinar on the instructor dashabord, when the live is running, reloads the video on the student view.
- Shared presentation navigation is not working but only on the instructor dashboard. The slide is not changing but the change is reflected on the student dashboard.
AntoLC
force-pushed
the
feature/anthony/react18
branch
from
210c010
to
6497a5d
Compare
Fix here: 30c22b8
It is fixed in this PR: #2300
Fix here and here, not sure if it was touching only this PR Menu items were too highlighted, this commit fix this issue: ec6cbcd |
- upgrade the frontend to React 18 - adapt the modules to the new interfaces
The interface of react-icaleandar-link has a problem with react-18. We rewrite the interface to solve this problem.
The children prop of the List component from grommet is not typed correctly. An issue has been open on their repo. Here is a quick fix for the time being.
- add testing-library packages to all our apps and packages - upgrade
Adapt tests with the upgrade of react 18 and the new version of testing library.
Adapt tests with the upgrade of react 18 and the new version of testing library.
Adapt tests with the upgrade of react 18 and the new version of testing library.
React 18 have a new feature, the Automatic Batching. https://react.dev/blog/2022/03/29/react-v18#new-feature-automatic-batching It means that it will batch the state updates and the effects together, and it will run them in the same tick. With jest.advanceTimersByTime, we can advance the timers by time, but it will not advance the effects by time, so we have to replay them in a loop until we get the expected result.
Adapt tests with the upgrade of react 18 and the new version of testing library.
Adapt tests with the upgrade of react 18 and the new version of testing library.
Adapt `lib-markdown` tests with the upgrade of react 18 and the new version of testing library.
react-router-v5 is not compatible with React 18. We have to upgrade to react-router-v6, the upgrade is not trivial, we have to change the way we use react-router.
Refactorise standalone site to be react-router v6 compliant.
Refactorise LTI and packages to be react-router v6 compliant.
After beeing mounted, a Provider cannot have is initial value updated, so we had a useEffect to update the context value. Problem, in some cases, the initial state of the context was overloading the updated state, depend if the initial state was considered as mutated by the useEffect on render or not (if the initial state was a deep object by example). To fix the problem we removed the useEffect that updated the initial state of the context, if we want to update the context value, we have to use the context value setter.
AntoLC
force-pushed
the
feature/anthony/react18
branch
from
9a27ef0
to
6ccb9b1
Compare
lunika
added a commit
that referenced
this pull request
Aug 29, 2023
Added - Create a default playlist for new shibboleth user - Add Cunningham design system (#2297) - Lifecycle rule on source bucket to expire uploaded object after 21 days. - Add P2p feature on videojs player - Webtorrent tracker for P2P video feature - eslint sort the modules name (#2338) - Add retention date and s3 lifecycle rules to classroom / video - Add a command to delete expired classrooms / videos - Add retention duration on playlist form - Add retention date widget to video and classroom - Add a download-video widget directly in the video player - Configure sentry in the webtorrent application - Add custom frontend site management - Manage multiple ingresses - Manage shibboleth config per site config - Add a shared media widget directly in the video player - Add a transcript plugin to the video player - Add a link to LTI resources to retrieve them in the standalone website - Add Language Picker in the standalone website (#2366) - Add xapi statements cache to avoid duplicate statements - Add variable to override PVC in arnold deployment Changed - Upgrade frontend to React 18 (#2280) - Upgrade to django 4.2 - `DJANGO_STATICFILES_STORAGE` environment variable is replaced by `DJANGO_STORAGES_STATICFILES_BACKEND` - Use alpine for installing mediainfo in lambda docker images - Add compatibility with docker compose 2 - tslint is replaced by eslint in lti app (#2321) - refactor videojs id3 tags handling as videojs plugin - refactor videojs xapi handling as videojs plugin - upgrade react-query to @tanstack/react-query (v4) (#2340) - Replace component SortableTable by Cunningham DataGrid (#2311) - Replace grommet DatePicker by Cunningham DatePicker (#2359) Fixed - Video player reset when attributes update (#2300) - Fix panel closing and resizing on live video player chat (#2310) - Fix download video button when video is not downloadable
Merged
lunika
added a commit
that referenced
this pull request
Aug 30, 2023
Added - Create a default playlist for new shibboleth user - Add Cunningham design system (#2297) - Lifecycle rule on source bucket to expire uploaded object after 21 days. - Add P2p feature on videojs player - Webtorrent tracker for P2P video feature - eslint sort the modules name (#2338) - Add retention date and s3 lifecycle rules to classroom / video - Add a command to delete expired classrooms / videos - Add retention duration on playlist form - Add retention date widget to video and classroom - Add a download-video widget directly in the video player - Configure sentry in the webtorrent application - Add custom frontend site management - Manage multiple ingresses - Manage shibboleth config per site config - Add a shared media widget directly in the video player - Add a transcript plugin to the video player - Add a link to LTI resources to retrieve them in the standalone website - Add Language Picker in the standalone website (#2366) - Add xapi statements cache to avoid duplicate statements - Add variable to override PVC in arnold deployment Changed - Upgrade frontend to React 18 (#2280) - Upgrade to django 4.2 - `DJANGO_STATICFILES_STORAGE` environment variable is replaced by `DJANGO_STORAGES_STATICFILES_BACKEND` - Use alpine for installing mediainfo in lambda docker images - Add compatibility with docker compose 2 - tslint is replaced by eslint in lti app (#2321) - refactor videojs id3 tags handling as videojs plugin - refactor videojs xapi handling as videojs plugin - upgrade react-query to @tanstack/react-query (v4) (#2340) - Replace component SortableTable by Cunningham DataGrid (#2311) - Replace grommet DatePicker by Cunningham DatePicker (#2359) Fixed - Video player reset when attributes update (#2300) - Fix panel closing and resizing on live video player chat (#2310) - Fix download video button when video is not downloadable
lunika
added a commit
that referenced
this pull request
Aug 30, 2023
Added - Create a default playlist for new shibboleth user - Add Cunningham design system (#2297) - Lifecycle rule on source bucket to expire uploaded object after 21 days. - Add P2p feature on videojs player - Webtorrent tracker for P2P video feature - eslint sort the modules name (#2338) - Add retention date and s3 lifecycle rules to classroom / video - Add a command to delete expired classrooms / videos - Add retention duration on playlist form - Add retention date widget to video and classroom - Add a download-video widget directly in the video player - Configure sentry in the webtorrent application - Add custom frontend site management - Manage multiple ingresses - Manage shibboleth config per site config - Add a shared media widget directly in the video player - Add a transcript plugin to the video player - Add a link to LTI resources to retrieve them in the standalone website - Add Language Picker in the standalone website (#2366) - Add xapi statements cache to avoid duplicate statements - Add variable to override PVC in arnold deployment Changed - Upgrade frontend to React 18 (#2280) - Upgrade to django 4.2 - `DJANGO_STATICFILES_STORAGE` environment variable is replaced by `DJANGO_STORAGES_STATICFILES_BACKEND` - Use alpine for installing mediainfo in lambda docker images - Add compatibility with docker compose 2 - tslint is replaced by eslint in lti app (#2321) - refactor videojs id3 tags handling as videojs plugin - refactor videojs xapi handling as videojs plugin - upgrade react-query to @tanstack/react-query (v4) (#2340) - Replace component SortableTable by Cunningham DataGrid (#2311) - Replace grommet DatePicker by Cunningham DatePicker (#2359) Fixed - Video player reset when attributes update (#2300) - Fix panel closing and resizing on live video player chat (#2310) - Fix download video button when video is not downloadable
lunika
added a commit
that referenced
this pull request
Aug 30, 2023
Added - Create a default playlist for new shibboleth user - Add Cunningham design system (#2297) - Lifecycle rule on source bucket to expire uploaded object after 21 days. - Add P2p feature on videojs player - Webtorrent tracker for P2P video feature - eslint sort the modules name (#2338) - Add retention date and s3 lifecycle rules to classroom / video - Add a command to delete expired classrooms / videos - Add retention duration on playlist form - Add retention date widget to video and classroom - Add a download-video widget directly in the video player - Configure sentry in the webtorrent application - Add custom frontend site management - Manage multiple ingresses - Manage shibboleth config per site config - Add a shared media widget directly in the video player - Add a transcript plugin to the video player - Add a link to LTI resources to retrieve them in the standalone website - Add Language Picker in the standalone website (#2366) - Add xapi statements cache to avoid duplicate statements - Add variable to override PVC in arnold deployment Changed - Upgrade frontend to React 18 (#2280) - Upgrade to django 4.2 - `DJANGO_STATICFILES_STORAGE` environment variable is replaced by `DJANGO_STORAGES_STATICFILES_BACKEND` - Use alpine for installing mediainfo in lambda docker images - Add compatibility with docker compose 2 - tslint is replaced by eslint in lti app (#2321) - refactor videojs id3 tags handling as videojs plugin - refactor videojs xapi handling as videojs plugin - upgrade react-query to @tanstack/react-query (v4) (#2340) - Replace component SortableTable by Cunningham DataGrid (#2311) - Replace grommet DatePicker by Cunningham DatePicker (#2359) Fixed - Video player reset when attributes update (#2300) - Fix panel closing and resizing on live video player chat (#2310) - Fix download video button when video is not downloadable
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Purpose: Upgrade to react18
The upgrade of ReactQuery asks a big refacto, but the upgrade doesn't seem necessary to have our apps working correctly with React 18, better to do it in another PR.
Proposal
Issue
Noticeable differences
userEventis now a promise, it is better to putawaitbefore to help reducing the side effects. Thanks to that we have less problems with things that we have to put inside aact.await screen.findBycan let a bit of time to the state to setup correctly and remove the warning.