From 00f18dc21cde7df54fa8cd24f04ad53ca575586d Mon Sep 17 00:00:00 2001 From: Ahmad Abdolsaheb Date: Wed, 11 Dec 2019 13:05:40 +0100 Subject: [PATCH] chore: address review comments Co-Authored-By: Oliver Eyton-Williams --- .../client-only-routes/ShowCertification.js | 14 ++--- .../components/DonateFormChildViewForHOC.js | 10 ++-- .../Donation/components/DonationModal.js | 8 +-- .../Donation/components/MinimalDonateForm.js | 54 +++++-------------- 4 files changed, 30 insertions(+), 56 deletions(-) diff --git a/client/src/client-only-routes/ShowCertification.js b/client/src/client-only-routes/ShowCertification.js index e6eb0f66c0..1dd133d2b6 100644 --- a/client/src/client-only-routes/ShowCertification.js +++ b/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. ); @@ -184,12 +184,12 @@ class ShowCertification extends Component { - {showCloseBtn ? donationCloseBtn : ''} + {closeBtn ? donationCloseBtn : ''} diff --git a/client/src/components/Donation/components/DonateFormChildViewForHOC.js b/client/src/components/Donation/components/DonateFormChildViewForHOC.js index 7c4ae1101a..b8a0aeb14e 100644 --- a/client/src/components/Donation/components/DonateFormChildViewForHOC.js +++ b/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 - this.props.changeCloseBtnLabel(); + // change the donation modal button label to close + // or display the close button for the cert donation section + if (this.props.showCloseBtn) { + this.props.showCloseBtn(); + } return postChargeStripe({ token, diff --git a/client/src/components/Donation/components/DonationModal.js b/client/src/components/Donation/components/DonationModal.js index bb49618429..d620ba6a42 100644 --- a/client/src/components/Donation/components/DonationModal.js +++ b/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 changeCloseBtnLabel = () => { + const [closeLabel, setCloseLabel] = React.useState(false); + const showCloseBtn = () => { setCloseLabel(true); }; @@ -97,7 +97,7 @@ function DonateModal({ show, block, isBlockDonation, closeDonationModal }) { {isBlockDonation ? blockDonationText : progressDonationText} - + @@ -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.'} diff --git a/client/src/components/Donation/components/MinimalDonateForm.js b/client/src/components/Donation/components/MinimalDonateForm.js index 9ca0d71030..56d9368de2 100644 --- a/client/src/components/Donation/components/MinimalDonateForm.js +++ b/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 { - userSelector, - isSignedInSelector, - signInLoadingSelector, - hardGoTo as navigate -} from '../../../redux'; +import { userSelector } 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, - isSignedInSelector, - ({ isDonating }, showLoading, isSignedIn) => ({ - isDonating, - isSignedIn, - showLoading + ({ isDonating }) => ({ + isDonating }) ); -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 (
{paymentType === 'Card' ? ( - {!showLoading && !isSignedIn ? ( - - ) : ( - this.renderDonationOptions() - )} + {this.renderDonationOptions()} ); @@ -201,5 +171,5 @@ ModalDonateForm.propTypes = propTypes; export default connect( mapStateToProps, - mapDispatchToProps + null )(ModalDonateForm);