fix: replace hardgoto with api links

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);

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);

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;

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>

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} />
     );