npx react-codemod update-react-imports nusmods/website/src --force

Author: taneliang

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,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
+import * as React from 'react';
 
 type Props = React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string; children: ReactNode };
 

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 { useEffect } from 'react';
+import * as React 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 { useState, useRef } from 'react';
+import * as React 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;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Map as LeafletMap } from 'leaflet';
 import { Map, Marker, TileLayer, Polygon, Tooltip } from 'react-leaflet';
 import { GestureHandling } from 'leaflet-gesture-handling';

website/src/views/components/map/MapContext.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { createContext } from 'react';
 
 type MapContextValue = Readonly<{
   toggleMapExpanded: (boolean: boolean) => void;
@@ -13,6 +13,6 @@ const defaultValue: MapContextValue = {
   },
 };
 
-const MapContext = React.createContext<MapContextValue>(defaultValue);
+const MapContext = createContext<MapContextValue>(defaultValue);
 
 export default MapContext;

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

@@ -1,4 +1,4 @@
-import React, { ComponentType } from 'react';
+import { ComponentType } from 'react';
 import Loadable, { LoadingComponentProps } from 'react-loadable';
 
 import { VenueLocationMap } from 'types/venues';

website/src/views/components/module-info/AddModuleDropdown.test.tsx

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

website/src/views/components/module-info/AddModuleDropdown.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { PureComponent } from 'react';
 import Downshift from 'downshift';
 import classnames from 'classnames';
 import { connect } from 'react-redux';
@@ -36,7 +36,7 @@ function isModuleOnTimetable(
   return !!get(timetables, [String(semester), module.moduleCode]);
 }
 
-export class AddModuleDropdownComponent extends React.PureComponent<Props, State> {
+export class AddModuleDropdownComponent extends PureComponent<Props, State> {
   static getDerivedStateFromProps(nextProps: Props, prevState: State) {
     const { timetables, module } = nextProps;
     const { loading } = prevState;

website/src/views/components/module-info/ModuleExamClash.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow } from 'enzyme';
 
 import { Module, ModuleCode } from 'types/modules';

website/src/views/components/module-info/ModuleSemesterInfo.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component } from 'react';
 
 import { ModuleCode, Semester, SemesterDataCondensed } from 'types/modules';
 
@@ -17,7 +17,7 @@ type State = {
   selected: Semester;
 };
 
-export default class ModuleSemesterInfo extends React.Component<Props, State> {
+export default class ModuleSemesterInfo extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
 

website/src/views/components/module-info/ModuleWorkload.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import _ from 'lodash';
 

website/src/views/components/module-info/SemesterPicker.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { memo } from 'react';
 import { each } from 'lodash';
 
 import { Semester } from 'types/modules';
@@ -18,7 +18,7 @@ type Props = {
   onSelectSemester: (semester: Semester) => void;
 };
 
-const SemesterPicker = React.memo<Props>(
+const SemesterPicker = memo<Props>(
   ({
     semesters,
     showDisabled = false,

website/src/views/components/notfications/Announcements.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useState, useCallback } from 'react';
+import { memo, useState, useCallback } from 'react';
 import classnames from 'classnames';
 import { Sun } from 'react-feather';