chore: address review comments

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

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

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-sort-props */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
@@ -79,7 +80,7 @@ class ShowCertification extends Component {
     super(...args);
 
     this.state = {
-      showCloseBtn: false,
+      closeBtn: false,
       donationClosed: false
     };
 
@@ -100,11 +101,10 @@ class ShowCertification extends Component {
   }
 
   showDonationCloseBtn() {
-    this.setState({ showCloseBtn: true });
+    this.setState({ closeBtn: true });
   }
 
   render() {
-    console.log(this.props);
     const {
       cert,
       fetchState,
@@ -116,7 +116,7 @@ class ShowCertification extends Component {
       userFetchState
     } = this.props;
 
-    const { donationClosed, showCloseBtn } = this.state;
+    const { donationClosed, closeBtn } = this.state;
 
     if (!validCertName) {
       createFlashMessage(standardErrorMessage);
@@ -159,7 +159,7 @@ class ShowCertification extends Component {
           bsStyle='primary'
           onClick={this.hideDonationSection}
         >
-          close
+          Close.
         </Button>
       </div>
     );
@@ -184,12 +184,12 @@ class ShowCertification extends Component {
             </Col>
           </Row>
           <MinimalDonateForm
-            changeCloseBtnLabel={this.showDonationCloseBtn}
+            showCloseBtn={this.showDonationCloseBtn}
             defaultTheme='light'
           />
           <Row className='certification-donation'>
             <Col sm={10} smOffset={1} xs={12}>
-              {showCloseBtn ? donationCloseBtn : ''}
+              {closeBtn ? donationCloseBtn : ''}
             </Col>
           </Row>
         </Grid>

client/src/components/Donation/components/DonateFormChildViewForHOC.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/sort-prop-types */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
@@ -18,7 +19,7 @@ import { postChargeStripe } from '../../../utils/ajax';
 import { userSelector } from '../../../redux';
 
 const propTypes = {
-  changeCloseBtnLabel: PropTypes.func,
+  showCloseBtn: PropTypes.func,
   defaultTheme: PropTypes.string,
   donationAmount: PropTypes.number.isRequired,
   donationDuration: PropTypes.string.isRequired,
@@ -127,8 +128,11 @@ class DonateFormChildViewForHOC extends Component {
     // scroll to top
     window.scrollTo(0, 0);
 
-    // change the donation modal button to close
+    // change the donation modal button label to close
-    this.props.changeCloseBtnLabel();
+    // or display the close button for the cert donation section
+    if (this.props.showCloseBtn) {
+      this.props.showCloseBtn();
+    }
 
     return postChargeStripe({
       token,

client/src/components/Donation/components/DonationModal.js

@@ -50,8 +50,8 @@ const propTypes = {
 };
 
 function DonateModal({ show, block, isBlockDonation, closeDonationModal }) {
-  const [showCloseLabel, setCloseLabel] = React.useState(false);
+  const [closeLabel, setCloseLabel] = React.useState(false);
-  const changeCloseBtnLabel = () => {
+  const showCloseBtn = () => {
     setCloseLabel(true);
   };
 
@@ -97,7 +97,7 @@ function DonateModal({ show, block, isBlockDonation, closeDonationModal }) {
       <Modal.Body>
         {isBlockDonation ? blockDonationText : progressDonationText}
         <Spacer />
-        <MinimalDonateForm changeCloseBtnLabel={changeCloseBtnLabel} />
+        <MinimalDonateForm showCloseBtn={showCloseBtn} />
         <Spacer />
         <Row>
           <Col sm={10} smOffset={1} xs={12}>
@@ -108,7 +108,7 @@ function DonateModal({ show, block, isBlockDonation, closeDonationModal }) {
               className='btn-link'
               onClick={closeDonationModal}
             >
-              {showCloseLabel ? 'close' : 'Please ask me later.'}
+              {closeLabel ? 'Close.' : 'Please ask me later.'}
             </Button>
           </Col>
         </Row>

client/src/components/Donation/components/MinimalDonateForm.js

@@ -1,8 +1,10 @@
+/* eslint-disable react/sort-prop-types */
+/* eslint-disable react/jsx-sort-props */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { Button, Row, Col } from '@freecodecamp/react-bootstrap';
+import { Row, Col } from '@freecodecamp/react-bootstrap';
 import { StripeProvider, Elements } from 'react-stripe-elements';
 
 import {
@@ -10,14 +12,8 @@ import {
   durationsConfig,
   defaultStateConfig
 } from '../../../../../config/donation-settings';
-import { apiLocation } from '../../../../config/env.json';
 import DonateFormChildViewForHOC from './DonateFormChildViewForHOC';
-import {
+import { userSelector } from '../../../redux';
-  userSelector,
-  isSignedInSelector,
-  signInLoadingSelector,
-  hardGoTo as navigate
-} from '../../../redux';
 
 import '../Donation.css';
 import DonateCompletion from './DonateCompletion.js';
@@ -28,12 +24,9 @@ const numToCommas = num =>
   num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
 
 const propTypes = {
-  changeCloseBtnLabel: PropTypes.func,
+  showCloseBtn: PropTypes.func,
   defaultTheme: PropTypes.string,
   isDonating: PropTypes.bool,
-  isSignedIn: PropTypes.bool,
-  navigate: PropTypes.func.isRequired,
-  showLoading: PropTypes.bool.isRequired,
   stripe: PropTypes.shape({
     createToken: PropTypes.func.isRequired
   })
@@ -41,24 +34,11 @@ const propTypes = {
 
 const mapStateToProps = createSelector(
   userSelector,
-  signInLoadingSelector,
+  ({ isDonating }) => ({
-  isSignedInSelector,
+    isDonating
-  ({ isDonating }, showLoading, isSignedIn) => ({
-    isDonating,
-    isSignedIn,
-    showLoading
   })
 );
 
-const mapDispatchToProps = {
-  navigate
-};
-
-const createOnClick = navigate => e => {
-  e.preventDefault();
-  return navigate(`${apiLocation}/signin?returnTo=donate`);
-};
-
 class ModalDonateForm extends Component {
   constructor(...args) {
     super(...args);
@@ -138,14 +118,14 @@ class ModalDonateForm extends Component {
       stripe
     } = this.state;
 
-    const { changeCloseBtnLabel, defaultTheme } = this.props;
+    const { showCloseBtn, defaultTheme } = this.props;
     return (
       <div>
         {paymentType === 'Card' ? (
           <StripeProvider stripe={stripe}>
             <Elements>
               <DonateFormChildViewForHOC
-                changeCloseBtnLabel={changeCloseBtnLabel}
+                showCloseBtn={showCloseBtn}
                 defaultTheme={defaultTheme}
                 donationAmount={donationAmount}
                 donationDuration={donationDuration}
@@ -164,7 +144,7 @@ class ModalDonateForm extends Component {
   }
 
   render() {
-    const { isSignedIn, navigate, showLoading, isDonating } = this.props;
+    const { isDonating } = this.props;
 
     if (isDonating) {
       return (
@@ -179,17 +159,7 @@ class ModalDonateForm extends Component {
     return (
       <Row>
         <Col sm={10} smOffset={1} xs={12}>
-          {!showLoading && !isSignedIn ? (
+          {this.renderDonationOptions()}
-            <Button
-              bsStyle='default'
-              className='btn btn-block'
-              onClick={createOnClick(navigate)}
-            >
-              Become a supporter
-            </Button>
-          ) : (
-            this.renderDonationOptions()
-          )}
         </Col>
       </Row>
     );
@@ -201,5 +171,5 @@ ModalDonateForm.propTypes = propTypes;
 
 export default connect(
   mapStateToProps,
-  mapDispatchToProps
+  null
 )(ModalDonateForm);