Begin using react-router hooks in components.

Author: lindapaiste

client/modules/IDE/pages/FullView.jsx

@@ -1,7 +1,7 @@
-import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import Helmet from 'react-helmet';
 import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
 import PreviewFrame from '../components/PreviewFrame';
 import PreviewNav from '../../../components/PreviewNav';
 import { getProject } from '../actions/project';
@@ -14,14 +14,15 @@ import {
 import useInterval from '../hooks/useInterval';
 import RootPage from '../../../components/RootPage';
 
-function FullView(props) {
+function FullView() {
   const dispatch = useDispatch();
   const project = useSelector((state) => state.project);
   const [isRendered, setIsRendered] = useState(false);
+  const params = useParams();
 
   useEffect(() => {
-    dispatch(getProject(props.params.project_id, props.params.username));
-  }, []);
+    dispatch(getProject(params.project_id, params.username));
+  }, [params]);
 
   useEffect(() => {
     // if (isRendered) prevents startSketch() from being called twice
@@ -64,7 +65,7 @@ function FullView(props) {
         }}
         project={{
           name: project.name,
-          id: props.params.project_id
+          id: params.project_id
         }}
       />
       <main className="preview-frame-holder">
@@ -74,11 +75,4 @@ function FullView(props) {
   );
 }
 
-FullView.propTypes = {
-  params: PropTypes.shape({
-    project_id: PropTypes.string,
-    username: PropTypes.string
-  }).isRequired
-};
-
 export default FullView;

client/modules/IDE/pages/IDEView.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Prompt } from 'react-router-dom';
+import { useLocation, Prompt } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 import { connect, useSelector } from 'react-redux';
 import { useTranslation, withTranslation } from 'react-i18next';
@@ -49,11 +49,13 @@ function isOverlay(pathname) {
   return pathname === '/about' || pathname === '/feedback';
 }
 
-function WarnIfUnsavedChanges({ currentLocation }) {
+function WarnIfUnsavedChanges() {
   const hasUnsavedChanges = useSelector((state) => state.ide.unsavedChanges);
 
   const { t } = useTranslation();
 
+  const currentLocation = useLocation();
+
   return (
     <Prompt
       when={hasUnsavedChanges}
@@ -72,12 +74,6 @@ function WarnIfUnsavedChanges({ currentLocation }) {
   );
 }
 
-WarnIfUnsavedChanges.propTypes = {
-  currentLocation: PropTypes.shape({
-    pathname: PropTypes.string
-  }).isRequired
-};
-
 class IDEView extends React.Component {
   constructor(props) {
     super(props);

client/modules/IDE/pages/Legal.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import { useHistory, useLocation } from 'react-router-dom';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import styled from 'styled-components';
 import { useTranslation } from 'react-i18next';
@@ -8,7 +8,6 @@ import TermsOfUse from './TermsOfUse';
 import CodeOfConduct from './CodeOfConduct';
 import RootPage from '../../../components/RootPage';
 import Nav from '../../../components/Nav';
-import browserHistory from '../../../browserHistory';
 import { remSize, prop } from '../../../theme';
 
 const StyledTabList = styled(TabList)`
@@ -29,9 +28,12 @@ const TabTitle = styled.p`
   }
 `;
 
-function Legal({ location }) {
+function Legal() {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const { t } = useTranslation();
+  const location = useLocation();
+  const history = useHistory();
+
   useEffect(() => {
     if (location.pathname === '/privacy-policy') {
       setSelectedIndex(0);
@@ -46,13 +48,13 @@ function Legal({ location }) {
     if (index === lastIndex) return;
     if (index === 0) {
       setSelectedIndex(0);
-      browserHistory.push('/privacy-policy');
+      history.push('/privacy-policy');
     } else if (index === 1) {
       setSelectedIndex(1);
-      browserHistory.push('/terms-of-use');
+      history.push('/terms-of-use');
     } else if (index === 2) {
       setSelectedIndex(2);
-      browserHistory.push('/code-of-conduct');
+      history.push('/code-of-conduct');
     }
   }
 
@@ -85,10 +87,4 @@ function Legal({ location }) {
   );
 }
 
-Legal.propTypes = {
-  location: PropTypes.shape({
-    pathname: PropTypes.string
-  }).isRequired
-};
-
 export default Legal;

client/modules/Mobile/MobileDashboardView.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useSelector } from 'react-redux';
-import { withRouter } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import Screen from '../../components/mobile/MobileScreen';
@@ -178,10 +177,10 @@ const NavItem = styled.li`
 const renderPanel = (name, props) =>
   ((Component) => Component && <Component {...props} mobile />)(Panels[name]);
 
-const MobileDashboard = ({ params, location }) => {
+const MobileDashboard = () => {
   const user = useSelector((state) => state.user);
-  const { username: paramsUsername } = params;
-  const { pathname } = location;
+  const { username: paramsUsername } = useParams();
+  const { pathname } = useLocation();
   const { t } = useTranslation();
 
   const Tabs = Object.keys(Panels);
@@ -253,14 +252,4 @@ const MobileDashboard = ({ params, location }) => {
   );
 };
 
-MobileDashboard.propTypes = {
-  location: PropTypes.shape({
-    pathname: PropTypes.string.isRequired
-  }).isRequired,
-  params: PropTypes.shape({
-    username: PropTypes.string.isRequired
-  })
-};
-MobileDashboard.defaultProps = { params: {} };
-
-export default withRouter(MobileDashboard);
+export default MobileDashboard;

client/modules/User/pages/AccountView.jsx

@@ -1,16 +1,14 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
-import { withRouter } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 import { parse } from 'query-string';
 import { createApiKey, removeApiKey } from '../actions';
 import AccountForm from '../components/AccountForm';
 import SocialAuthButton from '../components/SocialAuthButton';
 import APIKeyForm from '../components/APIKeyForm';
-import browserHistory from '../../../browserHistory';
 import Nav from '../../../components/Nav';
 import ErrorModal from '../../IDE/components/ErrorModal';
 import Overlay from '../../App/components/Overlay';
@@ -45,16 +43,18 @@ function SocialLoginPanel() {
   );
 }
 
-function AccountView({ location }) {
+function AccountView() {
   const { t } = useTranslation();
 
+  const location = useLocation();
   const queryParams = parse(location.search);
   const showError = !!queryParams.error;
   const errorType = queryParams.error;
   const accessTokensUIEnabled = window.process.env.UI_ACCESS_TOKEN_ENABLED;
 
   const apiKeys = useSelector((state) => state.user.apiKeys);
   const dispatch = useDispatch();
+  const history = useHistory();
 
   return (
     <div className="account-settings__container">
@@ -70,7 +70,7 @@ function AccountView({ location }) {
           title={t('ErrorModal.LinkTitle')}
           ariaLabel={t('ErrorModal.LinkTitle')}
           closeOverlay={() => {
-            browserHistory.push(location.pathname);
+            history.push(location.pathname);
           }}
         >
           <ErrorModal type="oauthError" service={errorType} />
@@ -119,11 +119,4 @@ function AccountView({ location }) {
   );
 }
 
-AccountView.propTypes = {
-  location: PropTypes.shape({
-    search: PropTypes.string.isRequired,
-    pathname: PropTypes.string.isRequired
-  }).isRequired
-};
-
-export default withRouter(AccountView);
+export default AccountView;

client/modules/User/pages/NewPasswordView.jsx

@@ -1,17 +1,18 @@
-import PropTypes from 'prop-types';
 import React, { useEffect } from 'react';
 import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
 import NewPasswordForm from '../components/NewPasswordForm';
 import { validateResetPasswordToken } from '../actions';
 import Nav from '../../../components/Nav';
 import RootPage from '../../../components/RootPage';
 
-function NewPasswordView(props) {
+function NewPasswordView() {
   const { t } = useTranslation();
-  const resetPasswordToken = props.params.reset_password_token;
+  const params = useParams();
+  const resetPasswordToken = params.reset_password_token;
   const resetPasswordInvalid = useSelector(
     (state) => state.user.resetPasswordInvalid
   );
@@ -48,10 +49,4 @@ function NewPasswordView(props) {
   );
 }
 
-NewPasswordView.propTypes = {
-  params: PropTypes.shape({
-    reset_password_token: PropTypes.string
-  }).isRequired
-};
-
 export default NewPasswordView;