feat: [UEPR-57] migrate to react v18

package.json

@@ -52,10 +52,10 @@
     "lodash.defaults": "4.2.0",
     "lodash.get": "4.4.2",
     "react-confetti": "6.1.0",
-    "react-helmet": "5.2.1",
+    "react-helmet": "^6.0.0",
     "react-onclickoutside": "6.13.0",
-    "react-router-dom": "5.3.4",
-    "react-twitter-embed": "3.0.3",
+    "react-router-dom": "6.30.0",
+    "react-twitter-embed": "4.0.4",
     "react-use": "17.6.0",
     "scratch-parser": "6.0.0",
     "scratch-storage": "^4.0.55"
@@ -75,6 +75,9 @@
     "@formatjs/intl-pluralrules": "5.4.3",
     "@formatjs/intl-relativetimeformat": "11.4.10",
     "@scratch/scratch-gui": "^11.0.0-beta.2",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "29.5.14",
     "async": "3.2.6",
     "autoprefixer": "10.4.20",
@@ -90,8 +93,6 @@
     "css-loader": "5.2.7",
     "email-validator": "2.0.4",
     "emit-file-webpack-plugin": "2.0.1",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.8",
     "eslint": "8.57.1",
     "eslint-config-scratch": "9.0.9",
     "eslint-plugin-jest": "27.9.0",
@@ -100,7 +101,7 @@
     "eslint-plugin-react-hooks": "4.6.2",
     "fastly": "1.2.1",
     "file-loader": "6.2.0",
-    "formik": "1.5.8",
+    "formik": "2.4.6",
     "formsy-react": "1.1.6",
     "formsy-react-components": "1.1.0",
     "git-bundle-sha": "0.0.2",
@@ -130,18 +131,18 @@
     "postcss-simple-vars": "5.0.2",
     "prop-types": "15.8.1",
     "query-string": "9.1.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-intl": "5.25.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-intl": "6.8.9",
     "react-modal": "3.16.3",
     "react-plotly.js": "2.6.0",
-    "react-redux": "5.1.2",
-    "react-responsive": "3.0.0",
+    "react-redux": "^8.0.0",
+    "react-responsive": "9.0.0",
     "react-slick": "0.30.3",
     "react-string-replace": "0.4.1",
     "react-telephone-input": "4.75.5",
-    "react-test-renderer": "16.14.0",
-    "redux": "3.7.2",
+    "react-test-renderer": "18.3.1",
+    "redux": "^4.0.0",
     "redux-mock-store": "1.5.5",
     "redux-thunk": "2.4.2",
     "regenerator-runtime": "0.13.9",
@@ -152,7 +153,7 @@
     "slick-carousel": "1.8.1",
     "stream-browserify": "3.0.0",
     "style-loader": "4.0.0",
-    "tap": "14.11.0",
+    "tap": "16.3.10",
     "url-loader": "3.0.0",
     "use-onclickoutside": "0.4.1",
     "webpack": "5.98.0",
@@ -163,9 +164,9 @@
   },
   "jest": {
     "setupFiles": [
-      "<rootDir>/test/helpers/enzyme-setup.js",
       "jest-canvas-mock"
     ],
+    "testEnvironment": "jsdom",
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/fileMock.js",
       "\\.(css|less|scss)$": "<rootDir>/test/__mocks__/styleMock.js"

src/lib/render.jsx

@@ -1,6 +1,6 @@
 // JSX syntax transforms to React.createElement
 const React = require('react'); // eslint-disable-line
-const ReactDOM = require('react-dom');
+const ReactDOM = require('react-dom/client');
 const StoreProvider = require('react-redux').Provider;
 const IntlProvider = require('react-intl').IntlProvider;
 
@@ -33,8 +33,10 @@ const render = (jsx, element, reducers, initialState, enhancer) => {
     intlPolyfill(intlLocale).then(() => {
         const store = configureStore(reducers, initialState, enhancer);
 
+        const root = ReactDOM.createRoot(element);
+
         // Render view component
-        ReactDOM.render(
+        root.render(
             <StoreProvider store={store}>
                 <IntlProvider
                     locale={intlLocale}
@@ -43,8 +45,7 @@ const render = (jsx, element, reducers, initialState, enhancer) => {
                 >
                     {jsx}
                 </IntlProvider>
-            </StoreProvider>,
-            element
+            </StoreProvider>
         );
 
         // Get initial session & permissions

src/views/ideas/ideas.jsx

@@ -117,7 +117,7 @@ const Ideas = () => {
                     src="https://scratch.mit.edu/projects/1108790117/embed"
                     width="485"
                     height="402"
-                    allowfullscreen
+                    allowFullScreen
                     className="ideas-project"
                 />
                 <div className="banner-description">

src/views/studio/studio-description.jsx

@@ -1,10 +1,10 @@
 /* eslint-disable react/jsx-no-bind */
-import React, {useState} from 'react';
+import React, {useRef, useState} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import classNames from 'classnames';
 import {FormattedMessage} from 'react-intl';
-import onClickOutside from 'react-onclickoutside';
+import useOnClickOutside from 'use-onclickoutside';
 
 import {selectStudioDescription, selectIsFetchingInfo} from '../../redux/studio';
 import {selectCanEditInfo, selectShowEditMuteError} from '../../redux/studio-permissions';
@@ -33,9 +33,11 @@ const StudioDescription = ({
     const [showMuteMessage, setShowMuteMessage] = useState(false);
     const [hideValidationMessage, setHideValidationMessage] = useState(false);
 
-    StudioDescription.handleClickOutside = () => {
+    const ref = useRef(null);
+
+    useOnClickOutside(ref, () => {
         setHideValidationMessage(true);
-    };
+    });
 
     const fieldClassName = classNames('studio-description', {
         'mod-fetching': isFetching,
@@ -49,6 +51,7 @@ const StudioDescription = ({
             className="studio-info-section"
             onMouseEnter={() => isMutedEditor && setShowMuteMessage(true)}
             onMouseLeave={() => isMutedEditor && setShowMuteMessage(false)}
+            ref={ref}
         >
             {canEditInfo || isMutedEditor ? (
                 <React.Fragment>
@@ -81,10 +84,6 @@ const StudioDescription = ({
     );
 };
 
-const clickOutsideConfig = {
-    handleClickOutside: () => StudioDescription.handleClickOutside
-};
-
 StudioDescription.propTypes = {
     descriptionError: PropTypes.string,
     canEditInfo: PropTypes.bool,
@@ -95,7 +94,7 @@ StudioDescription.propTypes = {
     handleUpdate: PropTypes.func
 };
 
-const connectedStudioDescription = connect(
+export default connect(
     state => ({
         description: selectStudioDescription(state),
         canEditInfo: selectCanEditInfo(state),
@@ -108,5 +107,3 @@ const connectedStudioDescription = connect(
         handleUpdate: mutateStudioDescription
     }
 )(StudioDescription);
-
-export default onClickOutside(connectedStudioDescription, clickOutsideConfig);

src/views/studio/studio-follow.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-no-bind */
-import React, {useState} from 'react';
+import React, {useState, useRef} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {FormattedMessage} from 'react-intl';
@@ -32,7 +32,7 @@ const StudioFollow = ({
     });
     const [hideValidationMessage, setHideValidationMessage] = useState(false);
 
-    const ref = React.useRef(null);
+    const ref = useRef(null);
 
     useOnClickOutside(ref, () => {
         setHideValidationMessage(true);

src/views/studio/studio-image.jsx

@@ -1,10 +1,10 @@
 /* eslint-disable react/jsx-no-bind */
-import React, {useState} from 'react';
+import React, {useRef, useState} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import classNames from 'classnames';
 import {FormattedMessage} from 'react-intl';
-import onClickOutside from 'react-onclickoutside';
+import useOnClickOutside from 'use-onclickoutside';
 
 import {selectStudioImage, selectIsFetchingInfo} from '../../redux/studio';
 import {selectCanEditInfo, selectShowEditMuteError} from '../../redux/studio-permissions';
@@ -46,9 +46,12 @@ const StudioImage = ({
     const [showMuteMessage, setShowMuteMessage] = useState(false);
     const [hideValidationMessage, setHideValidationMessage] = useState(false);
 
-    StudioImage.handleClickOutside = () => {
+    const ref = useRef(null);
+
+    useOnClickOutside(ref, () => {
         setHideValidationMessage(true);
-    };
+    });
+
     return (
         <div
             className={fieldClassName}
@@ -99,10 +102,6 @@ const StudioImage = ({
     );
 };
 
-const clickOutsideConfig = {
-    handleClickOutside: () => StudioImage.handleClickOutside
-};
-
 StudioImage.propTypes = {
     imageError: PropTypes.string,
     canEditInfo: PropTypes.bool,
@@ -113,7 +112,7 @@ StudioImage.propTypes = {
     handleUpdate: PropTypes.func
 };
 
-const connectedStudioImage = connect(
+export default connect(
     state => ({
         image: selectStudioImage(state),
         canEditInfo: selectCanEditInfo(state),
@@ -126,5 +125,3 @@ const connectedStudioImage = connect(
         handleUpdate: mutateStudioImage
     }
 )(StudioImage);
-
-export default onClickOutside(connectedStudioImage, clickOutsideConfig);

src/views/studio/studio-tab-nav.jsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, {useCallback} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
-import {useRouteMatch, NavLink} from 'react-router-dom';
+import {useParams, NavLink} from 'react-router-dom';
 import {FormattedMessage} from 'react-intl';
 
 import SubNavigation from '../../components/subnavigation/subnavigation.jsx';
@@ -40,67 +40,67 @@ const countLimits = {
 };
 
 const StudioTabNav = ({isFetchingInfo, commentCount, projectCount}) => {
-    const {params: {studioPath, studioId}} = useRouteMatch();
+    const {studioPath, studioId} = useParams();
     const base = `/${studioPath}/${studioId}`;
+    const classes = useCallback(({isActive}) => `nav-link ${isActive ? 'activated' : ''}`);
     return (
         <SubNavigation
             align="left"
             className="studio-tab-nav"
         >
             <NavLink
-                activeClassName="active"
-                className="nav_link"
+                className={classes}
                 to={base}
-                exact
             >
-                <li><img
-                    src={projectsIcon}
-                /><FormattedMessage
-                    id={isFetchingInfo ? 'studio.tabNavProjects' : 'studio.tabNavProjectsWithCount'}
-                    values={{
-                        projectCount: (
-                            <span className="tab-count">
-                                ({limitCount(projectCount, countLimits.projects)})
-                            </span>
-                        )
-                    }}
-                /></li>
+                <li>
+                    <img src={projectsIcon} />
+                    <FormattedMessage
+                        id={isFetchingInfo ? 'studio.tabNavProjects' : 'studio.tabNavProjectsWithCount'}
+                        values={{
+                            projectCount: (
+                                <span className="tab-count">
+                                    ({limitCount(projectCount, countLimits.projects)})
+                                </span>
+                            )
+                        }}
+                    />
+                </li>
             </NavLink>
             <NavLink
-                activeClassName="active"
-                className="nav_link"
+                className={classes}
                 to={`${base}/comments`}
             >
-                <li><img
-                    src={commentsIcon}
-                /><FormattedMessage
-                    id={isFetchingInfo ? 'studio.tabNavComments' : 'studio.tabNavCommentsWithCount'}
-                    values={{
-                        commentCount: (
-                            <span className="tab-count">
-                                ({limitCount(commentCount, countLimits.comments)})
-                            </span>
-                        )
-                    }}
-                /></li>
+                <li>
+                    <img src={commentsIcon} />
+                    <FormattedMessage
+                        id={isFetchingInfo ? 'studio.tabNavComments' : 'studio.tabNavCommentsWithCount'}
+                        values={{
+                            commentCount: (
+                                <span className="tab-count">
+                                    ({limitCount(commentCount, countLimits.comments)})
+                                </span>
+                            )
+                        }}
+                    />
+                </li>
             </NavLink>
             <NavLink
-                activeClassName="active"
-                className="nav_link"
+                className={classes}
                 to={`${base}/curators`}
             >
-                <li><img
-                    src={curatorsIcon}
-                /><FormattedMessage id="studio.tabNavCurators" /></li>
+                <li>
+                    <img src={curatorsIcon} />
+                    <FormattedMessage id="studio.tabNavCurators" />
+                </li>
             </NavLink>
             <NavLink
-                activeClassName="active"
-                className="nav_link"
+                className={classes}
                 to={`${base}/activity`}
             >
-                <li><img
-                    src={activityIcon}
-                /><FormattedMessage id="studio.tabNavActivity" /></li>
+                <li>
+                    <img src={activityIcon} />
+                    <FormattedMessage id="studio.tabNavActivity" />
+                </li>
             </NavLink>
         </SubNavigation>
     );