fix: replace navigate with hardgoto in showUser (#37363)

* fix: use hardGoTo in ShowUser

* refactor: clean up hardGoTo

Rather than using both navigate and hardGoTo this imports hardGoTo as
navigate and uses navigate everywhere


Co-authored-by: mrugesh <1884376+raisedadead@users.noreply.github.com>

client/src/client-only-routes/ShowSettings.js

@@ -1,6 +1,5 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Grid, Button } from '@freecodecamp/react-bootstrap';
@@ -11,7 +10,7 @@ import {
   signInLoadingSelector,
   userSelector,
   isSignedInSelector,
-  hardGoTo
+  hardGoTo as navigate
 } from '../redux';
 import { submitNewAbout, updateUserFlag, verifyCert } from '../redux/settings';
 import { createFlashMessage } from '../components/Flash/redux';
@@ -28,7 +27,6 @@ import DangerZone from '../components/settings/DangerZone';
 
 const propTypes = {
   createFlashMessage: PropTypes.func.isRequired,
-  hardGoTo: PropTypes.func.isRequired,
   isSignedIn: PropTypes.bool.isRequired,
   navigate: PropTypes.func.isRequired,
   showLoading: PropTypes.bool.isRequired,
@@ -98,32 +96,26 @@ const mapStateToProps = createSelector(
   })
 );
 
-const mapDispatchToProps = dispatch =>
-  bindActionCreators(
-    {
-      createFlashMessage,
-      hardGoTo,
-      navigate: location => dispatch(hardGoTo(location)),
-      submitNewAbout,
-      toggleNightMode: theme => updateUserFlag({ theme }),
-      updateInternetSettings: updateUserFlag,
-      updateIsHonest: updateUserFlag,
-      updatePortfolio: updateUserFlag,
-      updateQuincyEmail: sendQuincyEmail => updateUserFlag({ sendQuincyEmail }),
-      verifyCert
-    },
-    dispatch
-  );
+const mapDispatchToProps = {
+  createFlashMessage,
+  navigate,
+  submitNewAbout,
+  toggleNightMode: theme => updateUserFlag({ theme }),
+  updateInternetSettings: updateUserFlag,
+  updateIsHonest: updateUserFlag,
+  updatePortfolio: updateUserFlag,
+  updateQuincyEmail: sendQuincyEmail => updateUserFlag({ sendQuincyEmail }),
+  verifyCert
+};
 
-const createHandleSignoutClick = hardGoTo => e => {
+const createHandleSignoutClick = navigate => e => {
   e.preventDefault();
-  return hardGoTo(`${apiLocation}/signout`);
+  return navigate(`${apiLocation}/signout`);
 };
 
 export function ShowSettings(props) {
   const {
     createFlashMessage,
-    hardGoTo,
     isSignedIn,
     submitNewAbout,
     toggleNightMode,
@@ -194,7 +186,7 @@ export function ShowSettings(props) {
               bsStyle='primary'
               className='btn-invert'
               href={'/signout'}
-              onClick={createHandleSignoutClick(hardGoTo)}
+              onClick={createHandleSignoutClick(navigate)}
             >
               Sign me out of freeCodeCamp
             </Button>

client/src/client-only-routes/ShowUser.js

@@ -1,7 +1,5 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { bindActionCreators } from 'redux';
-import { navigate } from '@reach/router';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import {
@@ -18,6 +16,7 @@ import Helmet from 'react-helmet';
 import { apiLocation } from '../../config/env.json';
 
 import {
+  hardGoTo as navigate,
   isSignedInSelector,
   userFetchStateSelector,
   userSelector,
@@ -49,14 +48,10 @@ const mapStateToProps = createSelector(
   })
 );
 
-const mapDispatchToProps = dispatch =>
-  bindActionCreators(
-    {
-      navigate,
-      reportUser
-    },
-    dispatch
-  );
+const mapDispatchToProps = {
+  navigate,
+  reportUser
+};
 
 class ShowUser extends Component {
   constructor(props) {

client/src/components/Header/components/Login.js

@@ -5,7 +5,7 @@ import { createSelector } from 'reselect';
 import { navigate as gatsbyNavigate } from 'gatsby';
 import { Button } from '@freecodecamp/react-bootstrap';
 
-import { hardGoTo, isSignedInSelector } from '../../../redux';
+import { hardGoTo as navigate, isSignedInSelector } from '../../../redux';
 import { apiLocation } from '../../../../config/env.json';
 
 import { gtagReportConversion } from '../../../analytics/gtag';
@@ -18,9 +18,9 @@ const mapStateToProps = createSelector(
     isSignedIn
   })
 );
-const mapDispatchToProps = dispatch => ({
-  navigate: location => dispatch(hardGoTo(location))
-});
+const mapDispatchToProps = {
+  navigate
+};
 
 const createOnClick = (navigate, isSignedIn) => e => {
   e.preventDefault();

client/src/pages/donate.js

@@ -12,7 +12,11 @@ import DonateOther from '../components/Donation/components/DonateOther';
 import DonateForm from '../components/Donation/components/DonateForm';
 import DonateText from '../components/Donation/components/DonateText';
 import PoweredByStripe from '../components/Donation/components/poweredByStripe';
-import { signInLoadingSelector, isSignedInSelector, hardGoTo } from '../redux';
+import {
+  signInLoadingSelector,
+  isSignedInSelector,
+  hardGoTo as navigate
+} from '../redux';
 import { stripeScriptLoader } from '../utils/scriptLoaders';
 
 const mapStateToProps = createSelector(
@@ -24,9 +28,9 @@ const mapStateToProps = createSelector(
   })
 );
 
-const mapDispatchToProps = dispatch => ({
-  navigate: location => dispatch(hardGoTo(location))
-});
+const mapDispatchToProps = {
+  navigate
+};
 
 const propTypes = {
   isSignedIn: PropTypes.bool.isRequired,

client/src/pages/portfolio.js

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
 import { createSelector } from 'reselect';
 import PropTypes from 'prop-types';
 
@@ -11,7 +10,7 @@ import {
   signInLoadingSelector,
   userSelector,
   isSignedInSelector,
-  hardGoTo
+  hardGoTo as navigate
 } from '../redux';
 
 import Loader from '../components/helpers/Loader';
@@ -27,17 +26,11 @@ const mapStateToProps = createSelector(
   })
 );
 
-const mapDispatchToProps = dispatch =>
-  bindActionCreators(
-    {
-      hardGoTo,
-      navigate: location => dispatch(hardGoTo(location))
-    },
-    dispatch
-  );
+const mapDispatchToProps = {
+  navigate
+};
 
 const propTypes = {
-  hardGoTo: PropTypes.func.isRequired,
   isSignedIn: PropTypes.bool.isRequired,
   navigate: PropTypes.func.isRequired,
   showLoading: PropTypes.bool.isRequired,