Upgrade to React 17 and new JSX transform (#2935)

website/.eslintrc.js

@@ -83,6 +83,9 @@ module.exports = {
     'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
     'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
 
+    // Unnecessary with JSX transform
+    'react/react-in-jsx-scope': 'off',
+
     // TODO: Replace divs with buttons, but remove all button styling.
     'jsx-a11y/no-static-element-interactions': 'off',
 

website/babel.config.js

@@ -21,7 +21,16 @@ module.exports = (api) => {
         exclude: ['transform-typeof-symbol'],
       },
     ],
-    ['@babel/preset-react', { development: !IS_PROD }],
+    [
+      '@babel/preset-react',
+      {
+        development: !IS_PROD,
+        // Enable JSX transform
+        // TODO: Remove in Babel 8, when this will be the default option
+        // See: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#manual-babel-setup
+        runtime: 'automatic',
+      },
+    ],
   ];
 
   const plugins = [

website/package.json

@@ -34,7 +34,7 @@
     "@babel/preset-env": "7.12.1",
     "@babel/preset-react": "7.12.1",
     "@babel/preset-typescript": "7.12.1",
-    "@hot-loader/react-dom": "16.14.0",
+    "@hot-loader/react-dom": "17.0.0",
     "@packtracker/webpack-plugin": "2.3.0",
     "@svgr/webpack": "5.4.0",
     "@types/classnames": "2.2.11",
@@ -62,6 +62,7 @@
     "@types/webpack-env": "1.15.3",
     "@typescript-eslint/eslint-plugin": "4.6.0",
     "@typescript-eslint/parser": "4.6.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.2.0",
     "babel-jest": "26.5.2",
     "babel-loader": "8.1.0",
     "babel-plugin-dynamic-import-node": "2.3.3",
@@ -78,7 +79,6 @@
     "css-loader": "3.6.0",
     "cssnano": "4.1.10",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.5",
     "enzyme-to-json": "3.6.1",
     "eslint": "7.12.1",
     "eslint-config-airbnb": "18.2.0",
@@ -151,9 +151,9 @@
     "no-scroll": "2.1.1",
     "nusmoderator": "3.0.0",
     "query-string": "5.0.0",
-    "react": "16.14.0",
+    "react": "17.0.1",
     "react-beautiful-dnd": "13.0.0",
-    "react-dom": "16.14.0",
+    "react-dom": "17.0.1",
     "react-feather": "2.0.8",
     "react-helmet": "6.1.0",
     "react-hot-loader": "4.13.0",

website/scripts/test.js

@@ -1,6 +1,6 @@
 const { configure } = require('enzyme');
 const { setAutoFreeze } = require('immer');
-const Adapter = require('enzyme-adapter-react-16');
+const Adapter = require('@wojtekmaj/enzyme-adapter-react-17');
 
 configure({ adapter: new Adapter() });
 

website/src/__mocks__/svgMock.tsx

@@ -1,3 +1 @@
-import * as React from 'react';
-
 module.exports = () => <svg />;

website/src/entry/App.tsx

@@ -2,7 +2,7 @@ import { Store } from 'redux';
 import { State } from 'types/state';
 import { Persistor } from 'storage/persistReducer';
 
-import React from 'react';
+import * as React from 'react';
 import { hot } from 'react-hot-loader/root';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { Provider } from 'react-redux';

website/src/entry/export/TimetableOnly.tsx

@@ -1,5 +1,5 @@
 import { Store } from 'redux';
-import * as React from 'react';
+import { Component } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 
@@ -20,7 +20,7 @@ type State = {
   colors: ColorMapping;
 };
 
-export default class TimetableOnly extends React.Component<Props, State> {
+export default class TimetableOnly extends Component<Props, State> {
   state = {
     semester: 1,
     timetable: {},

website/src/entry/export/main.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { createRef } from 'react';
 import ReactDOM from 'react-dom';
 import { Store } from 'redux';
 
@@ -27,7 +27,7 @@ const { store } = configureStore();
 window.store = store;
 
 // For Puppeteer to import data
-const timetableRef = React.createRef<TimetableOnly>();
+const timetableRef = createRef<TimetableOnly>();
 window.setData = function setData(modules, data, callback) {
   const { semester, timetable, colors } = data;
 

website/src/entry/main.tsx

@@ -6,7 +6,6 @@ import 'bootstrapping/sentry';
 // See: https://github.com/zloirock/core-js/issues/579#issuecomment-504325213
 import 'core-js/es/promise/finally';
 
-import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactModal from 'react-modal';
 

website/src/utils/react.test.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component, PureComponent } from 'react';
 import { render } from 'enzyme';
 import { highlight, wrapComponentName, Counter } from './react';
 
@@ -32,9 +32,9 @@ describe(highlight, () => {
 
 describe('wrapComponentName()', () => {
   /* eslint-disable react/prefer-stateless-function */
-  class TestComponent extends React.Component {}
-  class TestPureComponent extends React.PureComponent {}
-  class TestComponentWithDisplayName extends React.Component {
+  class TestComponent extends Component {}
+  class TestPureComponent extends PureComponent {}
+  class TestComponentWithDisplayName extends Component {
     static displayName = 'TestComponentName';
   }
   const FunctionalComponent = () => null;

website/src/views/AppShell.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { SemTimetableConfig, TimetableConfig } from 'types/timetables';
 import { ModuleList, NotificationOptions } from 'types/reducers';
 import { Semester } from 'types/modules';

website/src/views/components/ColorPicker.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
 import ColorPicker from 'views/components/ColorPicker';
 import { ColorIndex } from 'types/timetables';

website/src/views/components/ColorPicker.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { memo } from 'react';
 import classnames from 'classnames';
 import Downshift, { ChildrenFunction } from 'downshift';
 import _ from 'lodash';
@@ -20,7 +20,7 @@ type Props = {
  *
  * For use in places like changing module colors
  */
-const ColorPicker = React.memo<Props>((props) => {
+const ColorPicker = memo<Props>((props) => {
   const renderColorPicker: ChildrenFunction<ColorIndex> = ({
     getToggleButtonProps,
     getItemProps,

website/src/views/components/ExternalLink.tsx

@@ -1,15 +1,16 @@
-import React, { ReactNode } from 'react';
+import { AnchorHTMLAttributes, forwardRef, ReactNode } from 'react';
 
-type Props = React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string; children: ReactNode };
+type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {
+  href: string;
+  children: ReactNode;
+};
 
 // Renders an anchor tag that safely opens href in a new tab or window.
 // See https://mathiasbynens.github.io/rel-noopener/
-const ExternalLink = React.forwardRef<HTMLAnchorElement, Props>(
-  ({ children, ...otherProps }, ref) => (
-    <a target="_blank" rel="noopener noreferrer" ref={ref} {...otherProps}>
-      {children}
-    </a>
-  ),
-);
+const ExternalLink = forwardRef<HTMLAnchorElement, Props>(({ children, ...otherProps }, ref) => (
+  <a target="_blank" rel="noopener noreferrer" ref={ref} {...otherProps}>
+    {children}
+  </a>
+));
 
 export default ExternalLink;

website/src/views/components/LinkModuleCodes.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { mount } from 'enzyme';
 import { entries } from 'lodash';

website/src/views/components/Online.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow } from 'enzyme';
 import { OnlineComponent } from './Online';
 

website/src/views/components/RandomKawaii.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { sample } from 'lodash';
 import { SpeechBubble, Mug, Browser, Ghost, KawaiiMood, KawaiiProps } from 'react-kawaii';
 

website/src/views/components/ScrollToTop.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { mount, ReactWrapper } from 'enzyme';
 import mockDom from 'test-utils/mockDom';

website/src/views/components/ScrollToTop.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component } from 'react';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { scrollToHash } from 'utils/react';
 
@@ -12,7 +12,7 @@ function scrollToTop() {
   window.scrollTo(0, 0);
 }
 
-export class ScrollToTopComponent extends React.Component<Props> {
+export class ScrollToTopComponent extends Component<Props> {
   static defaultProps = {
     onComponentDidMount: false,
     onPathChange: false,

website/src/views/components/SearchBox.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow } from 'enzyme';
 import SearchBox from './SearchBox';
 

website/src/views/components/SearchkitSearchBox.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   QueryAccessor,
   SearchkitComponent,

website/src/views/components/SemesterBadge.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import classnames from 'classnames';
 import config from 'config';
 import { Semester } from 'types/modules';

website/src/views/components/Title.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import config from 'config';
 

website/src/views/components/Tooltip/Tooltip.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Tippy, { TippyProps, TippySingleton, TippySingletonProps } from '@tippy.js/react';
 import { animateFill } from 'tippy.js'; // eslint-disable-line import/no-extraneous-dependencies
 

website/src/views/components/Tooltip/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { retryImport } from 'utils/error';
 

website/src/views/components/disqus/CommentCount.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { mount } from 'enzyme';
 import insertScript from 'utils/insertScript';
 import { CommentCountComponent } from './CommentCount';

website/src/views/components/disqus/CommentCount.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react';
+import * as React from 'react';
+import { useEffect } from 'react';
 import { connect } from 'react-redux';
 
 import config from 'config';

website/src/views/components/disqus/DisqusComments.tsx

@@ -1,5 +1,5 @@
 import { DisqusConfig } from 'types/views';
-import * as React from 'react';
+import { PureComponent } from 'react';
 import classnames from 'classnames';
 import { connect } from 'react-redux';
 
@@ -26,7 +26,7 @@ type State = {
 
 const SCRIPT_ID = 'dsq-embed-scr';
 
-class DisqusComments extends React.PureComponent<Props, State> {
+class DisqusComments extends PureComponent<Props, State> {
   state = {
     allowDisqus: false,
   };

website/src/views/components/filters/CheckboxItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import classnames from 'classnames';
 import { NBSP } from 'utils/react';
 import styles from './styles.scss';

website/src/views/components/filters/CheckboxItemFilter.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { mount } from 'enzyme';
 import { SearchkitManager } from 'searchkit';
 

website/src/views/components/filters/CheckboxItemFilter.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { CheckboxFilterAccessor, SearchkitComponent, SearchkitComponentProps } from 'searchkit';
 
 import { ElasticSearchFilter } from 'types/vendor/elastic-search';

website/src/views/components/filters/ChecklistFilter.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { memo } from 'react';
 
 import { ElasticSearchFilter } from 'types/vendor/elastic-search';
 import FilterContainer from './FilterContainer';
@@ -17,7 +17,7 @@ interface ChecklistFilterProps {
   disabled?: boolean;
 }
 
-const ChecklistFilter = React.memo<ChecklistFilterProps>(
+const ChecklistFilter = memo<ChecklistFilterProps>(
   ({ title, items, disabled = false, showCount = true }) => {
     return (
       <FilterContainer title={title} disabled={disabled}>

website/src/views/components/filters/DropdownListFilters.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { mount } from 'enzyme';
 
 import { RefinementItem } from 'types/views';

website/src/views/components/filters/DropdownListFilters.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useRef } from 'react';
+import * as React from 'react';
+import { useState, useRef } from 'react';
 import Downshift, { DownshiftState, StateChangeOptions } from 'downshift';
 import { ListProps } from 'searchkit';
 import classnames from 'classnames';

website/src/views/components/filters/FilterContainer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { PanelProps } from 'searchkit';
 
 import styles from './styles.scss';

website/src/views/components/icons/weather.test.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import Cloudy from 'img/weather/cloudy.svg';
 import Rain from 'img/weather/rain.svg';

website/src/views/components/map/ArrivalTimes.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { memo } from 'react';
 import classnames from 'classnames';
 import { entries, sortBy } from 'lodash';
 
@@ -46,7 +46,7 @@ function fixRouteName(name: string) {
   return name.replace(/\s?\(/, ' (');
 }
 
-export const ArrivalTimes = React.memo<Props>((props: Props) => {
+export const ArrivalTimes = memo<Props>((props: Props) => {
   if (props.error) {
     return (
       <>

website/src/views/components/map/BusStops.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 import { DivIcon, DragEndEvent } from 'leaflet';
 import { Marker, Popup } from 'react-leaflet';
 import classnames from 'classnames';
@@ -39,7 +39,7 @@ busStops.forEach((stop: BusStop) => {
 /**
  * Displays bus stop routes as markers, and timings in a popup when they are clicked
  */
-export default class BusStops extends React.PureComponent<Props, State> {
+export default class BusStops extends PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
 

website/src/views/components/map/ExpandMap.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { PureComponent } from 'react';
 import { withLeaflet, ContextProps } from 'react-leaflet';
 import Control from 'react-leaflet-control';
 import { Maximize, Minimize } from 'react-feather';
@@ -9,7 +9,7 @@ type Props = ContextProps & {
   readonly onToggleExpand: (boolean: boolean) => void;
 };
 
-class ExpandMap extends React.PureComponent<Props> {
+class ExpandMap extends PureComponent<Props> {
   componentDidUpdate() {
     if (this.props.leaflet && this.props.leaflet.map) {
       const { map } = this.props.leaflet;