CHORE: migrate intro component (#43784)

* migrate intro component

* Update client/src/components/Intro/index.tsx

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

* Update client/src/components/Intro/index.tsx

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

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

client/src/components/Intro/Intro.test.tsx

@@ -3,11 +3,11 @@ import { Provider } from 'react-redux';
 import renderer from 'react-test-renderer';
 import { createStore } from '../../redux/createStore';
 
-import Intro from './';
+import Intro from '.';
 
 jest.mock('../../analytics');
 
-function rendererCreateWithRedux(ui) {
+function rendererCreateWithRedux(ui: JSX.Element) {
   return renderer.create(<Provider store={createStore()}>{ui}</Provider>);
 }
 
@@ -57,7 +57,7 @@ const loggedInProps = {
   complete: true,
   isSignedIn: true,
   name: 'Development User',
-  navigate: () => {},
+  navigate: () => jest.fn(),
   pending: false,
   slug: '/',
   username: 'DevelopmentUser'
@@ -67,7 +67,7 @@ const loggedOutProps = {
   complete: true,
   isSignedIn: false,
   name: '',
-  navigate: () => {},
+  navigate: () => jest.fn(),
   pending: false,
   slug: '/',
   username: ''

client/src/components/Intro/index.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { randomQuote } from '../../utils/get-words';
@@ -9,24 +8,24 @@ import IntroDescription from './components/IntroDescription';
 
 import './intro.css';
 
-const propTypes = {
+interface IntroProps {
-  complete: PropTypes.bool,
+  complete?: boolean;
-  completedChallengeCount: PropTypes.number,
+  completedChallengeCount?: number;
-  isSignedIn: PropTypes.bool,
+  isSignedIn?: boolean;
-  name: PropTypes.string,
+  name?: string;
-  pending: PropTypes.bool,
+  pending?: boolean;
-  slug: PropTypes.string,
+  slug?: string;
-  username: PropTypes.string
+  username?: string;
-};
+}
 
-function Intro({
+const Intro = ({
   isSignedIn,
   name,
   pending,
   complete,
   completedChallengeCount,
   slug
-}) {
+}: IntroProps): JSX.Element => {
   const { t } = useTranslation();
   if (pending && !complete) {
     return (
@@ -48,7 +47,7 @@ function Intro({
         </h1>
         <Spacer />
         <FullWidthRow>
-          {completedChallengeCount > 0 ? (
+          {completedChallengeCount && completedChallengeCount > 0 ? (
             <CurrentChallengeLink isLargeBtn={true}>
               {t('buttons.current-challenge')}
             </CurrentChallengeLink>
@@ -67,7 +66,7 @@ function Intro({
             </span>
           </blockquote>
         </div>
-        {completedChallengeCount < 15 ? (
+        {completedChallengeCount && slug && completedChallengeCount < 15 ? (
           <div className='intro-description'>
             <Spacer />
             <p>
@@ -94,9 +93,8 @@ function Intro({
       </>
     );
   }
-}
+};
 
-Intro.propTypes = propTypes;
 Intro.displayName = 'Intro';
 
 export default Intro;