Improve treeshaking

* Avoid default imports in ReactJS
  There were quite a few files where we imported react, but didn't
  actually use it.
* Use non-default imports where possible
* Use named imports where possible

Signed-off-by: Taylor Smock <[email protected]>

frontend/src/App.js

@@ -1,10 +1,10 @@
-import React, { Suspense, useEffect } from 'react';
+import { Suspense, useEffect } from 'react';
 import { RouterProvider } from 'react-router-dom';
 import { Toaster } from 'react-hot-toast';
 import ReactPlaceholder from 'react-placeholder';
 import { useMeta } from 'react-meta-elements';
 import { useSelector } from 'react-redux';
-import * as Sentry from '@sentry/react';
+import { ErrorBoundary } from '@sentry/react';
 
 import './assets/styles/index.scss';
 
@@ -28,7 +28,7 @@ const App = () => {
   }, []);
 
   return (
-    <Sentry.ErrorBoundary fallback={<FallbackComponent />}>
+    <ErrorBoundary fallback={<FallbackComponent />}>
       {isLoading ? (
         <Preloader />
       ) : (
@@ -53,7 +53,7 @@ const App = () => {
           />
         </div>
       )}
-    </Sentry.ErrorBoundary>
+    </ErrorBoundary>
   );
 };
 

frontend/src/components/banner/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';

frontend/src/components/banner/topBanner.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useLocation } from 'react-router-dom';
 import { useFetchWithAbort } from '../../hooks/UseFetch';
 import { htmlFromMarkdown } from '../../utils/htmlFromMarkdown';

frontend/src/components/basemapMenu.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import { MAPBOX_TOKEN, BASEMAP_OPTIONS } from '../config';
 

frontend/src/components/checkCircle.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { CheckIcon } from './svgIcons';
 
 export const CheckCircle = ({ className }: Object) => (

frontend/src/components/comments/commentInput.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import MDEditor from '@uiw/react-md-editor';
 import Tribute from 'tributejs';

frontend/src/components/comments/fileRejections.js

@@ -1,5 +1,3 @@
-import React from 'react';
-
 const FileRejections = ({ files }: Object) => {
   // Component that receives the rejected files from Dropzone
   return (

frontend/src/components/comments/hashtagPaste.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useIntl } from 'react-intl';
 
 import messages from './messages';

frontend/src/components/comments/tests/fileRejections.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 

frontend/src/components/comments/tests/hashtagPaste.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 

frontend/src/components/comments/tests/uploadStatus.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 

frontend/src/components/comments/uploadStatus.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';

frontend/src/components/contributions/myProjectsDropdown.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useSelector } from 'react-redux';
 import Select from 'react-select';
 import { FormattedMessage } from 'react-intl';

frontend/src/components/contributions/myTasksNav.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 

frontend/src/components/contributions/myTasksOrderDropdown.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Dropdown } from '../dropdown';
 import messages from './messages';

frontend/src/components/contributions/taskCard.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import Popup from 'reactjs-popup';
 import { FormattedMessage, useIntl } from 'react-intl';

frontend/src/components/contributions/taskResults.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage, FormattedNumber } from 'react-intl';
 import ReactPlaceholder from 'react-placeholder';
 import 'react-placeholder/lib/reactPlaceholder.css';

frontend/src/components/contributions/tests/taskCard.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 

frontend/src/components/deleteModal/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { forwardRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
@@ -10,7 +10,7 @@ import { DeleteButton } from '../teamsAndOrgs/management';
 import { Button } from '../button';
 import { AlertIcon } from '../svgIcons';
 
-const DeleteTrigger = React.forwardRef((props, ref) => <DeleteButton {...props} />);
+const DeleteTrigger = forwardRef((props, ref) => <DeleteButton {...props} />);
 
 export function DeleteModal({ id, name, type, className }: Object) {
   const navigate = useNavigate();

frontend/src/components/deleteModal/tests/index.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { screen, waitFor, within } from '@testing-library/react';
 import '@testing-library/jest-dom';
 

frontend/src/components/dropdown.js

@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
+import { createRef, forwardRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { useOnClickOutside } from '../hooks/UseOnClickOutside';
 import { ChevronDownIcon, CheckIcon } from './svgIcons';
 import { CustomButton } from './button';
 
-const DropdownContent = React.forwardRef((props, ref) => {
+const DropdownContent = forwardRef((props, ref) => {
   const navigate = useNavigate();
   const isActive = (obj) => {
     return props.value === obj.value;
@@ -120,7 +120,7 @@ const DropdownContent = React.forwardRef((props, ref) => {
 
 export function Dropdown(props) {
   const [display, setDisplay] = useState(false);
-  const contentRef = React.createRef();
+  const contentRef = createRef();
 
   const toggleDropdown = () => {
     setDisplay(!display);

frontend/src/components/editor.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import * as iD from '@hotosm/id';
 import '@hotosm/id/dist/iD.css';

frontend/src/components/footer/index.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import { Fragment } from 'react';
 import { useSelector } from 'react-redux';
 import { Link, matchRoutes, useLocation } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';

frontend/src/components/formInputs.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { Field } from 'react-final-form';
 import Select from 'react-select';

frontend/src/components/header/NavLink.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link, useMatch } from 'react-router-dom';
 
 export const TopNavLink = (props) => {

frontend/src/components/header/burgerMenu.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { MenuIcon, CloseIcon } from '../svgIcons';
 
-export const BurgerMenu = React.forwardRef((props, ref) => (
+export const BurgerMenu = forwardRef((props, ref) => (
   <button
     className="blue-dark bg-white br1 f5 bn pointer ml3"
     ref={ref}

frontend/src/components/header/index.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useRef, forwardRef } from 'react';
+import { Fragment, useRef, forwardRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
 import Popup from 'reactjs-popup';

frontend/src/components/header/notificationBell.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
 import { TopNavLink } from './NavLink';

frontend/src/components/header/signUp.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
@@ -8,7 +8,7 @@ import { registerUser } from '../../store/actions/user';
 import { store } from '../../store';
 import { createLoginWindow } from '../../utils/login';
 import { ORG_PRIVACY_POLICY_URL, OSM_REGISTER_URL } from '../../config';
-import * as safeStorage from '../../utils/safe_storage';
+import { setItem } from '../../utils/safe_storage';
 
 export const LoginModal = ({ step, login }) => {
   return (
@@ -51,8 +51,8 @@ export const ProceedOSM = ({ data, step, setStep, login }) => {
 
   const handleLogin = () => {
     login();
-    safeStorage.setItem('email_address', data.email);
-    safeStorage.setItem('name', data.name);
+    setItem('email_address', data.email);
+    setItem('name', data.name);
   };
 
   return (
@@ -103,8 +103,8 @@ const SignupForm = ({ data, setData, step, setStep }) => {
     const registerPromise = store.dispatch(registerUser(formData));
     registerPromise.then((res) => {
       if (res.success === true) {
-        safeStorage.setItem('email_address', data.email);
-        safeStorage.setItem('name', data.name);
+        setItem('email_address', data.email);
+        setItem('name', data.name);
         setStep({ number: 2, errMessage: null });
       } else {
         setStep({ number: 1, errMessage: res.details });

frontend/src/components/header/tests/authButtons.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 

frontend/src/components/header/topBar.js

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export function TopBar({ pageName }: Object) {
   return (
     <div className="cf w-100 bg-mask">

frontend/src/components/header/updateDialog.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 

frontend/src/components/header/updateEmail.js

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import PropTypes from 'prop-types';
+import { func } from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
@@ -83,5 +83,5 @@ export const UpdateEmail = ({ closeModal }) => {
 };
 
 UpdateEmail.propTypes = {
-  closeModal: PropTypes.func.isRequired,
+  closeModal: func.isRequired,
 };

frontend/src/components/homepage/contactForm.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Form, Field } from 'react-final-form';
 import { FormattedMessage } from 'react-intl';
 

frontend/src/components/homepage/featuredProjects.js

@@ -1,11 +1,10 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import ReactPlaceholder from 'react-placeholder';
 import { nCardPlaceholders } from '../projectCard/nCardPlaceholder';
 import 'react-placeholder/lib/reactPlaceholder.css';
 
 import { RightIcon, LeftIcon } from '../svgIcons';
-import { ProjectCard } from '../../components/projectCard/projectCard';
+import { ProjectCard } from '../projectCard/projectCard';
 
 import messages from './messages';
 

frontend/src/components/homepage/jumbotron.js

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import Popup from 'reactjs-popup';

frontend/src/components/homepage/mappingFlow.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage, FormattedNumber } from 'react-intl';
 
 import messages from './messages';

frontend/src/components/homepage/stats.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormattedMessage, FormattedNumber } from 'react-intl';
 import axios from 'axios';
 import shortNumber from 'short-number';

frontend/src/components/homepage/testimonials.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';

frontend/src/components/homepage/tests/featuredProjects.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 

frontend/src/components/homepage/whoIsMapping.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 

frontend/src/components/horizontalScroll/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { ChevronRightIcon } from '../svgIcons';
 import { useWindowSize } from '../../hooks/UseWindowSize';
 

frontend/src/components/interests/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Form, Field } from 'react-final-form';
 import { FormattedMessage } from 'react-intl';

frontend/src/components/licenses/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Form, Field } from 'react-final-form';
 import { FormattedMessage } from 'react-intl';

frontend/src/components/licenses/licensesPlaceholder.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { TextRow } from 'react-placeholder/lib/placeholders';
 import { CopyrightIcon } from '../svgIcons';
 

frontend/src/components/licenses/tests/licenses.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 

frontend/src/components/localeSelect.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { connect } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 import Select from 'react-select';

frontend/src/components/mappingLevel.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';

frontend/src/components/mappingTypes.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useIntl } from 'react-intl';
 
 import messages from './messages';

frontend/src/components/menu.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useLocation, Link } from 'react-router-dom';
 
 export function SectionMenu({ items }: Object) {

frontend/src/components/notifications/deleteNotificationsButton.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 

frontend/src/components/notifications/inboxNav.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';

frontend/src/components/notifications/notificationBodyCard.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import ReactPlaceholder from 'react-placeholder';
 import 'react-placeholder/lib/reactPlaceholder.css';

frontend/src/components/notifications/notificationCard.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import Popup from 'reactjs-popup';
 import { Tooltip } from 'react-tooltip';