feat(client): ts-migrate (/client/src/components/layouts/Certification.js) (#42939)

* change name to certification.tsx

* migrate certification.js to ts

* update ceritification import in index and fix prettier errors

* Update client/src/components/layouts/certification.tsx

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* Update client/src/components/layouts/certification.tsx

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* Update client/src/components/layouts/certification.tsx

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* Update client/src/components/layouts/certification.tsx

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* fix: reorder imports

Co-authored-by: Raymen Deol <raymen.deol@outlook.com>
Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/components/layouts/certification.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
 import { connect } from 'react-redux';
@@ -6,22 +5,33 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchUser, isSignedInSelector, executeGA } from '../../redux';
 
+interface CertificationProps {
+  children?: React.ReactNode;
+  executeGA?: (args: { type: string; data: string }) => void;
+  fetchUser: () => void;
+  isSignedIn?: boolean;
+  pathname: string;
+}
+
 const mapStateToProps = createSelector(isSignedInSelector, isSignedIn => ({
   isSignedIn
 }));
 
 const mapDispatchToProps = { fetchUser, executeGA };
 
-class CertificationLayout extends Component {
+class CertificationLayout extends Component<CertificationProps> {
+  static displayName = 'CertificationLayout';
   componentDidMount() {
     const { isSignedIn, fetchUser, pathname } = this.props;
     if (!isSignedIn) {
       fetchUser();
     }
-    this.props.executeGA({ type: 'page', data: pathname });
+    if (this.props.executeGA) {
+      this.props.executeGA({ type: 'page', data: pathname });
+    }
   }
 
-  render() {
+  render(): JSX.Element {
     const { children } = this.props;
 
     return (
@@ -33,15 +43,6 @@ class CertificationLayout extends Component {
   }
 }
 
-CertificationLayout.displayName = 'CertificationLayout';
-CertificationLayout.propTypes = {
-  children: PropTypes.any,
-  executeGA: PropTypes.func,
-  fetchUser: PropTypes.func.isRequired,
-  isSignedIn: PropTypes.bool,
-  pathname: PropTypes.string.isRequired
-};
-
 export default connect(
   mapStateToProps,
   mapDispatchToProps

client/src/components/layouts/index.ts

@@ -1,3 +1,3 @@
-export { default as CertificationLayout } from './Certification';
+export { default as CertificationLayout } from './certification';
 export { default as DefaultLayout } from './Default';
 export { default as LearnLayout } from './learn';