From a7d595f349ff0bd9a41164a08ec4ad8cfed237e9 Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Mon, 10 Aug 2020 11:40:14 +0200
Subject: [PATCH] fix: replace hardgoto with api links

---
 .../ShowProfileOrFourOhFour.js                | 17 +++--------
 client/src/client-only-routes/ShowSettings.js |  8 +----
 client/src/client-only-routes/ShowUser.js     |  3 --
 client/src/components/Donation/DonateForm.js  | 17 ++---------
 .../src/components/Header/components/Login.js | 30 +++++--------------
 .../helpers/CurrentChallengeLink.js           | 27 ++---------------
 client/src/components/profile/Profile.js      | 11 ++-----
 .../components/settings/Certification.test.js | 14 ++++++---
 client/src/pages/learn.js                     | 14 ++-------
 9 files changed, 31 insertions(+), 110 deletions(-)

diff --git a/client/src/client-only-routes/ShowProfileOrFourOhFour.js b/client/src/client-only-routes/ShowProfileOrFourOhFour.js
index b8a01477d5..4b8dffc7fe 100644
--- a/client/src/client-only-routes/ShowProfileOrFourOhFour.js
+++ b/client/src/client-only-routes/ShowProfileOrFourOhFour.js
@@ -8,8 +8,7 @@ import {
   userByNameSelector,
   userProfileFetchStateSelector,
   fetchProfileForUser,
-  usernameSelector,
-  hardGoTo as navigate
+  usernameSelector
 } from '../redux';
 import FourOhFourPage from '../components/FourOhFour';
 import Profile from '../components/profile/Profile';
@@ -19,7 +18,6 @@ const propTypes = {
   fetchProfileForUser: PropTypes.func.isRequired,
   isSessionUser: PropTypes.bool,
   maybeUser: PropTypes.string,
-  navigate: PropTypes.func.isRequired,
   requestedUser: PropTypes.shape({
     username: PropTypes.string,
     profileUI: PropTypes.object
@@ -45,8 +43,7 @@ const makeMapStateToProps = () => (state, props) => {
 };
 
 const mapDispatchToProps = {
-  fetchProfileForUser,
-  navigate
+  fetchProfileForUser
 };
 
 class ShowProfileOrFourOhFour extends Component {
@@ -62,7 +59,7 @@ class ShowProfileOrFourOhFour extends Component {
       return null;
     }
 
-    const { isSessionUser, requestedUser, showLoading, navigate } = this.props;
+    const { isSessionUser, requestedUser, showLoading } = this.props;
     if (isEmpty(requestedUser)) {
       if (showLoading) {
         // We don't know if /:maybeUser is a user or not, we will show
@@ -77,13 +74,7 @@ class ShowProfileOrFourOhFour extends Component {
 
     // We have a response from the API, and we have some state in the
     // store for /:maybeUser, we now handover rendering to the Profile component
-    return (
-      <Profile
-        isSessionUser={isSessionUser}
-        navigate={navigate}
-        user={requestedUser}
-      />
-    );
+    return <Profile isSessionUser={isSessionUser} user={requestedUser} />;
   }
 }
 
diff --git a/client/src/client-only-routes/ShowSettings.js b/client/src/client-only-routes/ShowSettings.js
index 9d2f8d7a70..ddbea7bc61 100644
--- a/client/src/client-only-routes/ShowSettings.js
+++ b/client/src/client-only-routes/ShowSettings.js
@@ -113,11 +113,6 @@ const mapDispatchToProps = {
   verifyCert
 };
 
-const createHandleSignoutClick = navigate => e => {
-  e.preventDefault();
-  return navigate(`${apiLocation}/signout`);
-};
-
 export function ShowSettings(props) {
   const {
     createFlashMessage,
@@ -194,8 +189,7 @@ export function ShowSettings(props) {
               bsSize='lg'
               bsStyle='primary'
               className='btn-invert'
-              href={'/signout'}
-              onClick={createHandleSignoutClick(navigate)}
+              href={`${apiLocation}/signout`}
             >
               Sign me out of freeCodeCamp
             </Button>
diff --git a/client/src/client-only-routes/ShowUser.js b/client/src/client-only-routes/ShowUser.js
index ab9794333c..cb7d6137b7 100644
--- a/client/src/client-only-routes/ShowUser.js
+++ b/client/src/client-only-routes/ShowUser.js
@@ -16,7 +16,6 @@ import Helmet from 'react-helmet';
 import Login from '../components/Header/components/Login';
 
 import {
-  hardGoTo as navigate,
   isSignedInSelector,
   userFetchStateSelector,
   userSelector,
@@ -29,7 +28,6 @@ import './showuser.css';
 const propTypes = {
   email: PropTypes.string,
   isSignedIn: PropTypes.bool,
-  navigate: PropTypes.func.isRequired,
   reportUser: PropTypes.func.isRequired,
   userFetchState: PropTypes.shape({
     pending: PropTypes.bool,
@@ -51,7 +49,6 @@ const mapStateToProps = createSelector(
 );
 
 const mapDispatchToProps = {
-  navigate,
   reportUser
 };
 
diff --git a/client/src/components/Donation/DonateForm.js b/client/src/components/Donation/DonateForm.js
index ece32f5708..ba984c3792 100644
--- a/client/src/components/Donation/DonateForm.js
+++ b/client/src/components/Donation/DonateForm.js
@@ -11,7 +11,6 @@ import {
   ToggleButton,
   ToggleButtonGroup
 } from '@freecodecamp/react-bootstrap';
-// import { StripeProvider, Elements } from 'react-stripe-elements';
 import ApplePay from './assets/ApplePay';
 import GooglePay from './assets/GooglePay';
 import acceptedCards from './assets/accepted-cards.png';
@@ -24,14 +23,9 @@ import {
 } from '../../../../config/donation-settings';
 import { deploymentEnv } from '../../../config/env.json';
 import Spacer from '../helpers/Spacer';
-// import DonateFormChildViewForHOC from './DonateFormChildViewForHOC';
 import PaypalButton from './PaypalButton';
 import DonateCompletion from './DonateCompletion';
-import {
-  isSignedInSelector,
-  signInLoadingSelector,
-  hardGoTo as navigate
-} from '../../redux';
+import { isSignedInSelector, signInLoadingSelector } from '../../redux';
 
 import './Donation.css';
 
@@ -42,7 +36,6 @@ const propTypes = {
   handleProcessing: PropTypes.func,
   isDonating: PropTypes.bool,
   isSignedIn: PropTypes.bool,
-  navigate: PropTypes.func.isRequired,
   showLoading: PropTypes.bool.isRequired,
   stripe: PropTypes.shape({
     createToken: PropTypes.func.isRequired,
@@ -58,9 +51,6 @@ const mapStateToProps = createSelector(
     showLoading
   })
 );
-const mapDispatchToProps = {
-  navigate
-};
 
 const initialState = {
   donationState: {
@@ -345,7 +335,4 @@ class DonateForm extends Component {
 DonateForm.displayName = 'DonateForm';
 DonateForm.propTypes = propTypes;
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(DonateForm);
+export default connect(mapStateToProps)(DonateForm);
diff --git a/client/src/components/Header/components/Login.js b/client/src/components/Header/components/Login.js
index 0974d09fb9..f8c990ba71 100644
--- a/client/src/components/Header/components/Login.js
+++ b/client/src/components/Header/components/Login.js
@@ -2,10 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { navigate as gatsbyNavigate } from 'gatsby';
 import { Button } from '@freecodecamp/react-bootstrap';
 
-import { hardGoTo as navigate, isSignedInSelector } from '../../../redux';
+import { isSignedInSelector } from '../../../redux';
 import { apiLocation } from '../../../../config/env.json';
 
 import { gtagReportConversion } from '../../../analytics/gtag';
@@ -18,27 +17,16 @@ const mapStateToProps = createSelector(
     isSignedIn
   })
 );
-const mapDispatchToProps = {
-  navigate
-};
-
-const createOnClick = (navigate, isSignedIn) => e => {
-  e.preventDefault();
-  gtagReportConversion();
-  if (isSignedIn) {
-    return gatsbyNavigate('/learn');
-  }
-  return navigate(`${apiLocation}/signin`);
-};
 
 function Login(props) {
-  const { children, navigate, isSignedIn, ...restProps } = props;
+  const { children, isSignedIn, ...restProps } = props;
+  const href = isSignedIn ? '/learn' : `${apiLocation}/signin`;
   return (
     <Button
       bsStyle='default'
       className={(restProps.block ? 'btn-cta-big' : '') + ' signup-btn btn-cta'}
-      href='/signin'
-      onClick={createOnClick(navigate, isSignedIn)}
+      href={href}
+      onClick={() => gtagReportConversion()}
       {...restProps}
     >
       {children || 'Sign In'}
@@ -49,11 +37,7 @@ function Login(props) {
 Login.displayName = 'Login';
 Login.propTypes = {
   children: PropTypes.any,
-  isSignedIn: PropTypes.bool,
-  navigate: PropTypes.func.isRequired
+  isSignedIn: PropTypes.bool
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Login);
+export default connect(mapStateToProps)(Login);
diff --git a/client/src/components/helpers/CurrentChallengeLink.js b/client/src/components/helpers/CurrentChallengeLink.js
index cbd3dabc2c..c4c2bb6f66 100644
--- a/client/src/components/helpers/CurrentChallengeLink.js
+++ b/client/src/components/helpers/CurrentChallengeLink.js
@@ -1,30 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
 
 import { apiLocation } from '../../../config/env.json';
 
-import { hardGoTo } from '../../redux';
-
 const currentChallengeApi = '/challenges/current-challenge';
 
 const propTypes = {
   children: PropTypes.any,
-  hardGoTo: PropTypes.func.isRequired,
   isLargeBtn: PropTypes.bool
 };
 
-const mapStateToProps = () => ({});
-const mapDispatchToProps = dispatch =>
-  bindActionCreators({ hardGoTo }, dispatch);
-
-const createClickHandler = hardGoTo => e => {
-  e.preventDefault();
-  return hardGoTo(`${apiLocation}${currentChallengeApi}`);
-};
-
-function CurrentChallengeLink({ children, hardGoTo, isLargeBtn }) {
+function CurrentChallengeLink({ children, isLargeBtn }) {
   let classNames;
   if (isLargeBtn) {
     classNames = 'btn btn-lg btn-primary btn-block';
@@ -32,11 +18,7 @@ function CurrentChallengeLink({ children, hardGoTo, isLargeBtn }) {
     classNames = 'btn btn-cta-big btn-primary btn-block';
   }
   return (
-    <a
-      className={classNames}
-      href={currentChallengeApi}
-      onClick={createClickHandler(hardGoTo)}
-    >
+    <a className={classNames} href={`${apiLocation}${currentChallengeApi}`}>
       {children}
     </a>
   );
@@ -45,7 +27,4 @@ function CurrentChallengeLink({ children, hardGoTo, isLargeBtn }) {
 CurrentChallengeLink.displayName = 'CurrentChallengeLink';
 CurrentChallengeLink.propTypes = propTypes;
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(CurrentChallengeLink);
+export default CurrentChallengeLink;
diff --git a/client/src/components/profile/Profile.js b/client/src/components/profile/Profile.js
index 680357b69d..b783a5b28a 100644
--- a/client/src/components/profile/Profile.js
+++ b/client/src/components/profile/Profile.js
@@ -14,7 +14,6 @@ import { apiLocation } from '../../../config/env.json';
 
 const propTypes = {
   isSessionUser: PropTypes.bool,
-  navigate: PropTypes.func.isRequired,
   user: PropTypes.shape({
     profileUI: PropTypes.shape({
       isLocked: PropTypes.bool,
@@ -157,17 +156,12 @@ function renderProfile(user) {
   );
 }
 
-function Profile({ user, isSessionUser, navigate }) {
+function Profile({ user, isSessionUser }) {
   const {
     profileUI: { isLocked = true },
     username
   } = user;
 
-  const createHandleSignoutClick = navigate => e => {
-    e.preventDefault();
-    return navigate(`${apiLocation}/signout`);
-  };
-
   return (
     <Fragment>
       <Helmet>
@@ -185,8 +179,7 @@ function Profile({ user, isSessionUser, navigate }) {
               bsSize='lg'
               bsStyle='primary'
               className='btn-invert'
-              href={'/signout'}
-              onClick={createHandleSignoutClick(navigate)}
+              href={`${apiLocation}/signout`}
             >
               Sign me out of freeCodeCamp
             </Button>
diff --git a/client/src/components/settings/Certification.test.js b/client/src/components/settings/Certification.test.js
index 7285efc45a..6237d57415 100644
--- a/client/src/components/settings/Certification.test.js
+++ b/client/src/components/settings/Certification.test.js
@@ -3,14 +3,20 @@
 import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
 import { render } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { createStore } from '../../redux/createStore';
 
 import { CertificationSettings } from './Certification';
 
+function renderWithRedux(ui) {
+  return render(<Provider store={createStore()}>{ui}</Provider>);
+}
+
 describe('<certification />', () => {
   // shallow rendering does not render children component
   // form buttons are not included in shallow render
   it('Should render show cert button for claimed legacy cert', () => {
-    const { container } = render(
+    const { container } = renderWithRedux(
       <CertificationSettings {...defaultTestProps} />
     );
 
@@ -20,7 +26,7 @@ describe('<certification />', () => {
   });
 
   it('Should link show cert button to the claimed legacy cert', () => {
-    const { container } = render(
+    const { container } = renderWithRedux(
       <CertificationSettings {...defaultTestProps} />
     );
 
@@ -34,7 +40,7 @@ describe('<certification />', () => {
 
   // full forms with unclaimed certs should should not shallow render button
   it('Should not render show cert button for unclaimed full form', () => {
-    const { container } = render(
+    const { container } = renderWithRedux(
       <CertificationSettings {...defaultTestProps} />
     );
 
@@ -45,7 +51,7 @@ describe('<certification />', () => {
 
   // empty forms with unclaimed certs should should not shallow render button
   it('Should not render show cert button for empty form', () => {
-    const { container } = render(
+    const { container } = renderWithRedux(
       <CertificationSettings {...defaultTestProps} />
     );
 
diff --git a/client/src/pages/learn.js b/client/src/pages/learn.js
index 78a6a0413e..c95ac80400 100644
--- a/client/src/pages/learn.js
+++ b/client/src/pages/learn.js
@@ -13,8 +13,7 @@ import Intro from '../components/Intro';
 import {
   userFetchStateSelector,
   isSignedInSelector,
-  userSelector,
-  hardGoTo as navigate
+  userSelector
 } from '../redux';
 import {
   ChallengeNode,
@@ -47,7 +46,6 @@ const propTypes = {
   hash: PropTypes.string,
   isSignedIn: PropTypes.bool,
   location: PropTypes.object,
-  navigate: PropTypes.func.isRequired,
   state: PropTypes.object,
   user: PropTypes.shape({
     name: PropTypes.string,
@@ -62,14 +60,10 @@ const hashValueSelector = (state, hash) => {
   else if (hash) return hash.substr(1);
   else return null;
 };
-const mapDispatchToProps = {
-  navigate
-};
 
 export const LearnPage = ({
   location: { hash = '', state = '' },
   isSignedIn,
-  navigate,
   fetchState: { pending, complete },
   user: { name = '', username = '', completedChallengeCount = 0 },
   data: {
@@ -90,7 +84,6 @@ export const LearnPage = ({
           completedChallengeCount={completedChallengeCount}
           isSignedIn={isSignedIn}
           name={name}
-          navigate={navigate}
           pending={pending}
           slug={slug}
           username={username}
@@ -111,10 +104,7 @@ export const LearnPage = ({
 LearnPage.displayName = 'LearnPage';
 LearnPage.propTypes = propTypes;
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(LearnPage);
+export default connect(mapStateToProps)(LearnPage);
 
 export const query = graphql`
   query FirstChallenge {