refactor(client): make ShowCertification functional (#39735)

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

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-sort-props */
-import React, { Component } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -83,37 +83,27 @@ const mapStateToProps = (state, { certName }) => {
 const mapDispatchToProps = dispatch =>
   bindActionCreators({ createFlashMessage, showCert, executeGA }, dispatch);
 
-class ShowCertification extends Component {
-  constructor(...args) {
-    super(...args);
+const ShowCertification = props => {
+  const [isDonationSubmitted, setIsDonationSubmitted] = useState(false);
+  const [isDonationDisplayed, setIsDonationDisplayed] = useState(false);
+  const [isDonationClosed, setIsDonationClosed] = useState(false);
 
-    this.state = {
-      isDonationSubmitted: false,
-      isDonationDisplayed: false,
-      isDonationClosed: false
-    };
-
-    this.hideDonationSection = this.hideDonationSection.bind(this);
-    this.handleProcessing = this.handleProcessing.bind(this);
-  }
-
-  componentDidMount() {
-    const { username, certName, validCertName, showCert } = this.props;
+  useEffect(() => {
+    const { username, certName, validCertName, showCert } = props;
     if (validCertName) {
-      return showCert({ username, certName });
-    }
-    return null;
+      showCert({ username, certName });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-  shouldComponentUpdate(nextProps) {
+  useEffect(() => {
     const {
       userFetchState: { complete: userComplete },
       signedInUserName,
       isDonating,
       cert: { username = '' },
       executeGA
-    } = nextProps;
-    const { isDonationDisplayed } = this.state;
+    } = props;
 
     if (
       !isDonationDisplayed &&
@@ -122,9 +112,7 @@ class ShowCertification extends Component {
       signedInUserName === username &&
       !isDonating
     ) {
-      this.setState({
-        isDonationDisplayed: true
-      });
+      setIsDonationDisplayed(true);
 
       executeGA({
         type: 'event',
@@ -135,15 +123,19 @@ class ShowCertification extends Component {
         }
       });
     }
-    return true;
-  }
+  }, [isDonationDisplayed, props]);
 
-  hideDonationSection() {
-    this.setState({ isDonationDisplayed: false, isDonationClosed: true });
-  }
+  const hideDonationSection = () => {
+    setIsDonationDisplayed(false);
+    setIsDonationClosed(true);
+  };
 
-  handleProcessing(duration, amount, action = 'stripe form submission') {
-    this.props.executeGA({
+  const handleProcessing = (
+    duration,
+    amount,
+    action = 'stripe form submission'
+  ) => {
+    props.executeGA({
       type: 'event',
       data: {
         category: 'donation',
@@ -152,10 +144,9 @@ class ShowCertification extends Component {
         value: amount
       }
     });
-    this.setState({ isDonationSubmitted: true });
-  }
+    setIsDonationSubmitted(true);
+  };
 
-  render() {
   const {
     cert,
     fetchState,
@@ -163,13 +154,7 @@ class ShowCertification extends Component {
     createFlashMessage,
     signedInUserName,
     location: { pathname }
-    } = this.props;
-
-    const {
-      isDonationSubmitted,
-      isDonationDisplayed,
-      isDonationClosed
-    } = this.state;
+  } = props;
 
   if (!validCertName) {
     createFlashMessage(standardErrorMessage);
@@ -211,7 +196,7 @@ class ShowCertification extends Component {
         block={true}
         bsSize='sm'
         bsStyle='primary'
-          onClick={this.hideDonationSection}
+        onClick={hideDonationSection}
       >
         Close
       </Button>
@@ -225,16 +210,16 @@ class ShowCertification extends Component {
           <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
             <p>
               Only you can see this message. Congratulations on earning this
-                certification. It’s no easy task. Running freeCodeCamp isn’t
-                easy either. Nor is it cheap. Help us help you and many other
-                people around the world. Make a tax-deductible supporting
-                donation to our nonprofit today.
+              certification. It’s no easy task. Running freeCodeCamp isn’t easy
+              either. Nor is it cheap. Help us help you and many other people
+              around the world. Make a tax-deductible supporting donation to our
+              nonprofit today.
             </p>
           </Col>
         </Row>
       )}
       <DonateForm
-          handleProcessing={this.handleProcessing}
+        handleProcessing={handleProcessing}
         defaultTheme='light'
         isMinimalForm={true}
       />
@@ -329,8 +314,7 @@ class ShowCertification extends Component {
       {signedInUserName === username ? shareCertBtns : ''}
     </div>
   );
-  }
-}
+};
 
 ShowCertification.displayName = 'ShowCertification';
 ShowCertification.propTypes = propTypes;