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 });
+      showCert({ username, certName });
     }
-    return null;
-  }
+    // 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,185 +144,177 @@ class ShowCertification extends Component {
         value: amount
       }
     });
-    this.setState({ isDonationSubmitted: true });
+    setIsDonationSubmitted(true);
+  };
+
+  const {
+    cert,
+    fetchState,
+    validCertName,
+    createFlashMessage,
+    signedInUserName,
+    location: { pathname }
+  } = props;
+
+  if (!validCertName) {
+    createFlashMessage(standardErrorMessage);
+    return <RedirectHome />;
   }
 
-  render() {
-    const {
-      cert,
-      fetchState,
-      validCertName,
-      createFlashMessage,
-      signedInUserName,
-      location: { pathname }
-    } = this.props;
+  const { pending, complete, errored } = fetchState;
 
-    const {
-      isDonationSubmitted,
-      isDonationDisplayed,
-      isDonationClosed
-    } = this.state;
+  if (pending) {
+    return <Loader fullScreen={true} />;
+  }
 
-    if (!validCertName) {
-      createFlashMessage(standardErrorMessage);
-      return <RedirectHome />;
-    }
+  if (!pending && errored) {
+    createFlashMessage(standardErrorMessage);
+    return <RedirectHome />;
+  }
 
-    const { pending, complete, errored } = fetchState;
+  if (!pending && !complete && !errored) {
+    createFlashMessage(reallyWeirdErrorMessage);
+    return <RedirectHome />;
+  }
 
-    if (pending) {
-      return <Loader fullScreen={true} />;
-    }
+  const {
+    date,
+    name: userFullName,
+    username,
+    certTitle,
+    completionTime
+  } = cert;
 
-    if (!pending && errored) {
-      createFlashMessage(standardErrorMessage);
-      return <RedirectHome />;
-    }
+  const certDate = new Date(date);
+  const certYear = certDate.getFullYear();
+  const certMonth = certDate.getMonth();
+  const certURL = `https://freecodecamp.org${pathname}`;
 
-    if (!pending && !complete && !errored) {
-      createFlashMessage(reallyWeirdErrorMessage);
-      return <RedirectHome />;
-    }
+  const donationCloseBtn = (
+    <div>
+      <Button
+        block={true}
+        bsSize='sm'
+        bsStyle='primary'
+        onClick={hideDonationSection}
+      >
+        Close
+      </Button>
+    </div>
+  );
 
-    const {
-      date,
-      name: userFullName,
-      username,
-      certTitle,
-      completionTime
-    } = cert;
-
-    const certDate = new Date(date);
-    const certYear = certDate.getFullYear();
-    const certMonth = certDate.getMonth();
-    const certURL = `https://freecodecamp.org${pathname}`;
-
-    const donationCloseBtn = (
-      <div>
-        <Button
-          block={true}
-          bsSize='sm'
-          bsStyle='primary'
-          onClick={this.hideDonationSection}
-        >
-          Close
-        </Button>
-      </div>
-    );
-
-    let donationSection = (
-      <Grid className='donation-section'>
-        {!isDonationSubmitted && (
-          <Row>
-            <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.
-              </p>
-            </Col>
-          </Row>
-        )}
-        <DonateForm
-          handleProcessing={this.handleProcessing}
-          defaultTheme='light'
-          isMinimalForm={true}
-        />
+  let donationSection = (
+    <Grid className='donation-section'>
+      {!isDonationSubmitted && (
         <Row>
-          <Col sm={4} smOffset={4} xs={6} xsOffset={3}>
-            {isDonationSubmitted && donationCloseBtn}
+          <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.
+            </p>
           </Col>
         </Row>
-      </Grid>
-    );
-
-    const shareCertBtns = (
-      <Row className='text-center'>
-        <Spacer size={2} />
-        <Button
-          block={true}
-          bsSize='lg'
-          bsStyle='primary'
-          target='_blank'
-          href={`https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name=${certTitle}&organizationId=4831032&issueYear=${certYear}&issueMonth=${certMonth}&certUrl=${certURL}`}
-        >
-          Add this certification to my LinkedIn profile
-        </Button>
-        <Spacer />
-        <Button
-          block={true}
-          bsSize='lg'
-          bsStyle='primary'
-          target='_blank'
-          href={`https://twitter.com/intent/tweet?text=I just earned the ${certTitle} certification @freeCodeCamp! Check it out here: ${certURL}`}
-        >
-          Share this certification on Twitter
-        </Button>
+      )}
+      <DonateForm
+        handleProcessing={handleProcessing}
+        defaultTheme='light'
+        isMinimalForm={true}
+      />
+      <Row>
+        <Col sm={4} smOffset={4} xs={6} xsOffset={3}>
+          {isDonationSubmitted && donationCloseBtn}
+        </Col>
       </Row>
-    );
+    </Grid>
+  );
 
-    return (
-      <div className='certificate-outer-wrapper'>
-        {isDonationDisplayed && !isDonationClosed ? donationSection : ''}
-        <Grid className='certificate-wrapper certification-namespace'>
-          <Row>
-            <header>
-              <Col md={5} sm={12}>
-                <div className='logo'>
-                  <FreeCodeCampLogo />
-                </div>
-              </Col>
-              <Col md={7} sm={12}>
-                <div data-cy='issue-date' className='issue-date'>
-                  Issued&nbsp;
-                  <strong>{format(certDate, 'MMMM d, y')}</strong>
-                </div>
-              </Col>
-            </header>
+  const shareCertBtns = (
+    <Row className='text-center'>
+      <Spacer size={2} />
+      <Button
+        block={true}
+        bsSize='lg'
+        bsStyle='primary'
+        target='_blank'
+        href={`https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name=${certTitle}&organizationId=4831032&issueYear=${certYear}&issueMonth=${certMonth}&certUrl=${certURL}`}
+      >
+        Add this certification to my LinkedIn profile
+      </Button>
+      <Spacer />
+      <Button
+        block={true}
+        bsSize='lg'
+        bsStyle='primary'
+        target='_blank'
+        href={`https://twitter.com/intent/tweet?text=I just earned the ${certTitle} certification @freeCodeCamp! Check it out here: ${certURL}`}
+      >
+        Share this certification on Twitter
+      </Button>
+    </Row>
+  );
 
-            <main className='information'>
-              <div className='information-container'>
-                <h3>This certifies that</h3>
-                <h1>
-                  <strong>{userFullName}</strong>
-                </h1>
-                <h3>has successfully completed the freeCodeCamp.org</h3>
-                <h1>
-                  <strong>{certTitle}</strong>
-                </h1>
-                <h4>
-                  Developer Certification, representing approximately{' '}
-                  {completionTime} hours of coursework
-                </h4>
+  return (
+    <div className='certificate-outer-wrapper'>
+      {isDonationDisplayed && !isDonationClosed ? donationSection : ''}
+      <Grid className='certificate-wrapper certification-namespace'>
+        <Row>
+          <header>
+            <Col md={5} sm={12}>
+              <div className='logo'>
+                <FreeCodeCampLogo />
               </div>
-            </main>
-            <footer>
-              <div className='row signatures'>
-                <Image
-                  alt="Quincy Larson's Signature"
-                  src={
-                    'https://cdn.freecodecamp.org' +
-                    '/platform/english/images/quincy-larson-signature.svg'
-                  }
-                />
-                <p>
-                  <strong>Quincy Larson</strong>
-                </p>
-                <p>Executive Director, freeCodeCamp.org</p>
+            </Col>
+            <Col md={7} sm={12}>
+              <div data-cy='issue-date' className='issue-date'>
+                Issued&nbsp;
+                <strong>{format(certDate, 'MMMM d, y')}</strong>
               </div>
-              <Row>
-                <p className='verify'>Verify this certification at {certURL}</p>
-              </Row>
-            </footer>
-          </Row>
-        </Grid>
-        {signedInUserName === username ? shareCertBtns : ''}
-      </div>
-    );
-  }
-}
+            </Col>
+          </header>
+
+          <main className='information'>
+            <div className='information-container'>
+              <h3>This certifies that</h3>
+              <h1>
+                <strong>{userFullName}</strong>
+              </h1>
+              <h3>has successfully completed the freeCodeCamp.org</h3>
+              <h1>
+                <strong>{certTitle}</strong>
+              </h1>
+              <h4>
+                Developer Certification, representing approximately{' '}
+                {completionTime} hours of coursework
+              </h4>
+            </div>
+          </main>
+          <footer>
+            <div className='row signatures'>
+              <Image
+                alt="Quincy Larson's Signature"
+                src={
+                  'https://cdn.freecodecamp.org' +
+                  '/platform/english/images/quincy-larson-signature.svg'
+                }
+              />
+              <p>
+                <strong>Quincy Larson</strong>
+              </p>
+              <p>Executive Director, freeCodeCamp.org</p>
+            </div>
+            <Row>
+              <p className='verify'>Verify this certification at {certURL}</p>
+            </Row>
+          </footer>
+        </Row>
+      </Grid>
+      {signedInUserName === username ? shareCertBtns : ''}
+    </div>
+  );
+};
 
 ShowCertification.displayName = 'ShowCertification';
 ShowCertification.propTypes = propTypes;