feat(client): ts-migrate client/src/components/profile (#42378)

* feat: rename Link, Spacer, Profile for typescript

* feaat: migrate Spacer to typescript

* feat: migrate Link to typescript

* feat: migrate Profile to typescript

* feat: migrate Profile test to typescript

* feat: rename Camper.s to Camper.tsx

* feat: migrate Camper to typescript

* feat: rename Certifications

* feat: migrate Certifications to typescript

* feat: rename HeatMap

* feat: migrate HeatMap to typescript

* feat: rename HeatMap.test.

* feat: convert HeatMap.test. to typescript

* feat: make some props optional in ICertificationProps

* feat: rename Portfolio

* feat: migrate Portfolio to typescript

* feat: rename and migrate SocialIcons

* feat: rename TimeLine

* feat: migrate TimeLine to typescript

* feat: rename TimeLine.test.

* feat: migrate TimeLine.test. to typescript

* feat: rename TimelinePagination

* feat: migrate TimelinePagination to typescript

* feat: clean up for typescript migration

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

client/package-lock.json

@@ -4227,6 +4227,36 @@
         "@types/react": "*"
       }
     },
+    "@types/react-helmet": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.1.tgz",
+      "integrity": "sha512-VmSCMz6jp/06DABoY60vQa++h1YFt0PfAI23llxBJHbowqFgLUL0dhS1AQeVPNqYfRp9LAfokrfWACTNeobOrg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-redux": {
+      "version": "7.1.16",
+      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.16.tgz",
+      "integrity": "sha512-f/FKzIrZwZk7YEO9E1yoxIuDNRiDducxkFlkw/GNMGEnK9n4K8wJzlJBghpSuOVDgEUHoDkDF7Gi9lHNQR4siw==",
+      "dev": true,
+      "requires": {
+        "@types/hoist-non-react-statics": "^3.3.0",
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0",
+        "redux": "^4.0.0"
+      }
+    },
+    "@types/react-test-renderer": {
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz",
+      "integrity": "sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-transition-group": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
@@ -21608,4 +21638,4 @@
       "integrity": "sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw=="
     }
   }
-}
+}

client/package.json

@@ -160,4 +160,4 @@
     "webpack": "5.41.1",
     "webpack-cli": "4.7.2"
   }
-}
+}

client/src/components/profile/Profile.test.tsx

@@ -16,7 +16,8 @@ const userProps = {
       showName: false,
       showPoints: false,
       showPortfolio: false,
-      showTimeLine: false
+      showTimeLine: false,
+      showDonation: false
     },
     calendar: {},
     streak: {
@@ -40,8 +41,10 @@ const userProps = {
     twitter: 'string',
     username: 'string',
     website: 'string',
-    yearsTopContributor: []
+    yearsTopContributor: [],
+    isDonating: false
   },
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   navigate: () => {}
 };
 
@@ -54,10 +57,8 @@ describe('<Profile/>', () => {
   it('renders the report button on another persons profile', () => {
     const { getByText } = render(<Profile {...notMyProfileProps} />);
 
-    expect(getByText('buttons.flag-user')).toHaveAttribute(
+    const reportButton: HTMLElement = getByText('buttons.flag-user');
-      'href',
+    expect(reportButton).toHaveAttribute('href', '/user/string/report-user');
-      '/user/string/report-user'
-    );
   });
 
   it('renders correctly', () => {

client/src/components/profile/Profile.tsx

@@ -1,56 +1,62 @@
 import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
 import { Grid, Row } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';
-import Link from '../helpers/link';
+import { TFunction, useTranslation } from 'react-i18next';
-import { useTranslation } from 'react-i18next';
 
-import { CurrentChallengeLink, FullWidthRow, Spacer } from '../helpers';
+import { CurrentChallengeLink, FullWidthRow, Link, Spacer } from '../helpers';
 import Camper from './components/Camper';
 import HeatMap from './components/HeatMap';
 import Certifications from './components/Certifications';
 import Portfolio from './components/Portfolio';
 import Timeline from './components/TimeLine';
 
-const propTypes = {
+interface IProfileProps {
-  isSessionUser: PropTypes.bool,
+  isSessionUser: boolean;
-  user: PropTypes.shape({
+  user: {
-    profileUI: PropTypes.shape({
+    profileUI: {
-      isLocked: PropTypes.bool,
+      isLocked: boolean;
-      showAbout: PropTypes.bool,
+      showAbout: boolean;
-      showCerts: PropTypes.bool,
+      showCerts: boolean;
-      showDonation: PropTypes.bool,
+      showDonation: boolean;
-      showHeatMap: PropTypes.bool,
+      showHeatMap: boolean;
-      showLocation: PropTypes.bool,
+      showLocation: boolean;
-      showName: PropTypes.bool,
+      showName: boolean;
-      showPoints: PropTypes.bool,
+      showPoints: boolean;
-      showPortfolio: PropTypes.bool,
+      showPortfolio: boolean;
-      showTimeLine: PropTypes.bool
+      showTimeLine: boolean;
-    }),
+    };
-    calendar: PropTypes.object,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    completedChallenges: PropTypes.array,
+    calendar: any;
-    portfolio: PropTypes.array,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    about: PropTypes.string,
+    completedChallenges: any[];
-    githubProfile: PropTypes.string,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    isGithub: PropTypes.bool,
+    portfolio: any[];
-    isLinkedIn: PropTypes.bool,
+    about: string;
-    isTwitter: PropTypes.bool,
+    githubProfile: string;
-    isWebsite: PropTypes.bool,
+    isGithub: boolean;
-    joinDate: PropTypes.string,
+    isLinkedIn: boolean;
-    linkedin: PropTypes.string,
+    isTwitter: boolean;
-    location: PropTypes.string,
+    isWebsite: boolean;
-    name: PropTypes.string,
+    joinDate: string;
-    picture: PropTypes.string,
+    linkedin: string;
-    points: PropTypes.number,
+    location: string;
-    twitter: PropTypes.string,
+    name: string;
-    username: PropTypes.string,
+    picture: string;
-    website: PropTypes.string,
+    points: number;
-    yearsTopContributor: PropTypes.array,
+    twitter: string;
-    isDonating: PropTypes.bool
+    username: string;
-  })
+    website: string;
-};
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    yearsTopContributor: any[];
+    isDonating: boolean;
+  };
+}
 
-function renderMessage(isSessionUser, username, t) {
+function renderMessage(
+  isSessionUser: boolean,
+  username: string,
+  t: TFunction<'translation'>
+): JSX.Element {
   return isSessionUser ? (
     <Fragment>
       <FullWidthRow>
@@ -82,7 +88,7 @@ function renderMessage(isSessionUser, username, t) {
   );
 }
 
-function renderProfile(user) {
+function renderProfile(user: IProfileProps['user']): JSX.Element {
   const {
     profileUI: {
       showAbout = false,
@@ -95,6 +101,7 @@ function renderProfile(user) {
       showPortfolio = false,
       showTimeLine = false
     },
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     calendar,
     completedChallenges,
     githubProfile,
@@ -116,21 +123,20 @@ function renderProfile(user) {
     yearsTopContributor,
     isDonating
   } = user;
-
   return (
     <Fragment>
       <Camper
-        about={showAbout ? about : null}
+        about={about}
         githubProfile={githubProfile}
-        isDonating={showDonation ? isDonating : null}
+        isDonating={showDonation ? isDonating : false}
         isGithub={isGithub}
         isLinkedIn={isLinkedIn}
         isTwitter={isTwitter}
         isWebsite={isWebsite}
-        joinDate={showAbout ? joinDate : null}
+        joinDate={showAbout ? joinDate : ''}
         linkedin={linkedin}
-        location={showLocation ? location : null}
+        location={showLocation ? location : ''}
-        name={showName ? name : null}
+        name={showName ? name : ''}
         picture={picture}
         points={showPoints ? points : null}
         twitter={twitter}
@@ -138,6 +144,7 @@ function renderProfile(user) {
         website={website}
         yearsTopContributor={yearsTopContributor}
       />
+      {/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */}
       {showHeatMap ? <HeatMap calendar={calendar} /> : null}
       {showCerts ? <Certifications username={username} /> : null}
       {showPortfolio ? <Portfolio portfolio={portfolio} /> : null}
@@ -149,7 +156,7 @@ function renderProfile(user) {
   );
 }
 
-function Profile({ user, isSessionUser }) {
+function Profile({ user, isSessionUser }: IProfileProps): JSX.Element {
   const { t } = useTranslation();
   const {
     profileUI: { isLocked = true },
@@ -180,6 +187,5 @@ function Profile({ user, isSessionUser }) {
 }
 
 Profile.displayName = 'Profile';
-Profile.propTypes = propTypes;
 
 export default Profile;

client/src/components/profile/components/Camper.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Col, Row } from '@freecodecamp/react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faAward,
-  faHeart,
+  faCalendar,
-  faCalendar
+  faHeart
 } from '@fortawesome/free-solid-svg-icons';
-import { useTranslation } from 'react-i18next';
+import { TFunction, useTranslation } from 'react-i18next';
 
 import { AvatarRenderer } from '../../helpers';
 import SocialIcons from './SocialIcons';
@@ -16,32 +15,35 @@ import Link from '../../helpers/link';
 import './camper.css';
 
 import { langCodes } from '../../../../../config/i18n/all-langs';
-import envData from '../../../../../config/env.json';
+import envData from '../../../../../config/env';
 
 const { clientLocale } = envData;
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const localeCode = langCodes[clientLocale];
 
-const propTypes = {
+interface ICamperProps {
-  about: PropTypes.string,
+  about: string;
-  githubProfile: PropTypes.string,
+  githubProfile: string;
-  isDonating: PropTypes.bool,
+  isDonating: boolean;
-  isGithub: PropTypes.bool,
+  isGithub: boolean;
-  isLinkedIn: PropTypes.bool,
+  isLinkedIn: boolean;
-  isTwitter: PropTypes.bool,
+  isTwitter: boolean;
-  isWebsite: PropTypes.bool,
+  isWebsite: boolean;
-  joinDate: PropTypes.string,
+  joinDate: string;
-  linkedin: PropTypes.string,
+  linkedin: string;
-  location: PropTypes.string,
+  location: string;
-  name: PropTypes.string,
+  name: string;
-  picture: PropTypes.string,
+  picture: string;
-  points: PropTypes.number,
+  points: number | null;
-  twitter: PropTypes.string,
+  twitter: string;
-  username: PropTypes.string,
+  username: string;
-  website: PropTypes.string,
+  website: string;
-  yearsTopContributor: PropTypes.array
+  yearsTopContributor: string[];
-};
+}
 
-function joinArray(array, t) {
+function joinArray(array: string[], t: TFunction<'translation'>): string {
   return array.reduce((string, item, index, array) => {
     if (string.length > 0) {
       if (index === array.length - 1) {
@@ -55,9 +57,9 @@ function joinArray(array, t) {
   });
 }
 
-function parseDate(joinDate, t) {
+function parseDate(joinDate: string, t: TFunction<'translation'>): string {
-  joinDate = new Date(joinDate);
+  const convertedJoinDate = new Date(joinDate);
-  const date = joinDate.toLocaleString([localeCode, 'en-US'], {
+  const date = convertedJoinDate.toLocaleString([localeCode, 'en-US'], {
     year: 'numeric',
     month: 'long'
   });
@@ -82,7 +84,7 @@ function Camper({
   linkedin,
   twitter,
   website
-}) {
+}: ICamperProps): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -144,6 +146,5 @@ function Camper({
 }
 
 Camper.displayName = 'Camper';
-Camper.propTypes = propTypes;
 
 export default Camper;

client/src/components/profile/components/Certifications.tsx

@@ -1,36 +1,52 @@
 import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
 import { curry } from 'lodash-es';
 import { createSelector } from 'reselect';
 import { connect } from 'react-redux';
-import { Row, Col } from '@freecodecamp/react-bootstrap';
+import { Col, Row } from '@freecodecamp/react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
 import { certificatesByNameSelector } from '../../../redux';
 import { ButtonSpacer, FullWidthRow, Link, Spacer } from '../../helpers';
 import './certifications.css';
-import { CurrentCertsType } from '../../../redux/prop-types';
 
-const mapStateToProps = (state, props) =>
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const mapStateToProps = (state: any, props: ICertificationProps) =>
   createSelector(
     certificatesByNameSelector(props.username),
-    ({ hasModernCert, hasLegacyCert, currentCerts, legacyCerts }) => ({
+    ({
+      hasModernCert,
+      hasLegacyCert,
+      currentCerts,
+      legacyCerts
+    }: Pick<
+      ICertificationProps,
+      'hasModernCert' | 'hasLegacyCert' | 'currentCerts' | 'legacyCerts'
+    >) => ({
       hasModernCert,
       hasLegacyCert,
       currentCerts,
       legacyCerts
     })
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
   )(state, props);
 
-const propTypes = {
+interface ICert {
-  currentCerts: CurrentCertsType,
+  show: boolean;
-  hasLegacyCert: PropTypes.bool,
+  title: string;
-  hasModernCert: PropTypes.bool,
+  certSlug: string;
-  legacyCerts: CurrentCertsType,
+}
-  username: PropTypes.string
-};
 
-function renderCertShow(username, cert) {
+interface ICertificationProps {
+  currentCerts?: ICert[];
+  hasLegacyCert?: boolean;
+  hasModernCert?: boolean;
+  legacyCerts?: ICert[];
+  username: string;
+}
+
+function renderCertShow(username: string, cert: ICert): React.ReactNode {
   return cert.show ? (
     <Fragment key={cert.title}>
       <Row>
@@ -55,14 +71,14 @@ function Certificates({
   hasLegacyCert,
   hasModernCert,
   username
-}) {
+}: ICertificationProps): JSX.Element {
   const { t } = useTranslation();
   const renderCertShowWithUsername = curry(renderCertShow)(username);
   return (
     <FullWidthRow className='certifications'>
       <h2 className='text-center'>{t('profile.fcc-certs')}</h2>
       <br />
-      {hasModernCert ? (
+      {hasModernCert && currentCerts ? (
         currentCerts.map(renderCertShowWithUsername)
       ) : (
         <p className='text-center'>{t('profile.no-certs')}</p>
@@ -72,7 +88,7 @@ function Certificates({
           <br />
           <h3 className='text-center'>{t('settings.headings.legacy-certs')}</h3>
           <br />
-          {legacyCerts.map(renderCertShowWithUsername)}
+          {legacyCerts && legacyCerts.map(renderCertShowWithUsername)}
           <Spacer size={2} />
         </div>
       ) : null}
@@ -81,7 +97,6 @@ function Certificates({
   );
 }
 
-Certificates.propTypes = propTypes;
 Certificates.displayName = 'Certifications';
 
 export default connect(mapStateToProps)(Certificates);

client/src/components/profile/components/HeatMap.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import HeatMap from './HeatMap';
+import MockInstance = jest.MockInstance;
 
 // offset is used to shift the dates so that the calendar renders (for testing
 // purposes only) the same way in each timezone.
@@ -10,7 +11,7 @@ const date1 = 1580497504 + offset;
 const date2 = 1580597504 + offset;
 const date3 = 1580729769 + offset;
 
-const props = {
+const props: { calendar: { [key: number]: number } } = {
   calendar: {}
 };
 
@@ -18,7 +19,7 @@ props.calendar[date1] = 1;
 props.calendar[date2] = 1;
 props.calendar[date3] = 1;
 
-let dateNowMockFn;
+let dateNowMockFn: MockInstance<any, any>;
 
 beforeEach(() => {
   dateNowMockFn = jest

client/src/components/profile/components/HeatMap.tsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 import CalendarHeatMap from '@freecodecamp/react-calendar-heatmap';
 import { Row } from '@freecodecamp/react-bootstrap';
 import ReactTooltip from 'react-tooltip';
@@ -7,7 +8,7 @@ import addDays from 'date-fns/addDays';
 import addMonths from 'date-fns/addMonths';
 import startOfDay from 'date-fns/startOfDay';
 import isEqual from 'date-fns/isEqual';
-import { useTranslation } from 'react-i18next';
+import { TFunction, useTranslation } from 'react-i18next';
 
 import FullWidthRow from '../../helpers/full-width-row';
 import Spacer from '../../helpers/spacer';
@@ -16,27 +17,48 @@ import '@freecodecamp/react-calendar-heatmap/dist/styles.css';
 import './heatmap.css';
 
 import { langCodes } from '../../../../../config/i18n/all-langs';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 import envData from '../../../../../config/env.json';
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const { clientLocale } = envData;
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
 const localeCode = langCodes[clientLocale];
 
-const propTypes = {
+interface IHeatMapProps {
-  calendar: PropTypes.object
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-};
+  calendar: any;
+}
 
-const innerPropTypes = {
+interface IPageData {
-  calendarData: PropTypes.array,
+  startOfCalendar: Date;
-  currentStreak: PropTypes.number,
+  endOfCalendar: Date;
-  longestStreak: PropTypes.number,
+}
-  pages: PropTypes.array,
-  points: PropTypes.number,
-  t: PropTypes.func.isRequired
-};
 
-class HeatMapInner extends Component {
+interface ICalendarData {
-  constructor(props) {
+  date: Date;
+  count: number;
+}
+
+interface IHeatMapInnerProps {
+  calendarData: ICalendarData[];
+  currentStreak: number;
+  longestStreak: number;
+  pages: IPageData[];
+  points?: number;
+  t: TFunction<'translation'>;
+}
+
+interface IHeatMapInnerState {
+  pageIndex: number;
+}
+
+class HeatMapInner extends Component<IHeatMapInnerProps, IHeatMapInnerState> {
+  constructor(props: IHeatMapInnerProps) {
     super(props);
 
     this.state = {
@@ -85,6 +107,7 @@ class HeatMapInner extends Component {
           <button
             className='heatmap-nav-btn'
             disabled={!pages[this.state.pageIndex - 1]}
+            // eslint-disable-next-line @typescript-eslint/unbound-method
             onClick={this.prevPage}
             style={{
               visibility: pages[this.state.pageIndex - 1] ? 'unset' : 'hidden'
@@ -96,6 +119,7 @@ class HeatMapInner extends Component {
           <button
             className='heatmap-nav-btn'
             disabled={!pages[this.state.pageIndex + 1]}
+            // eslint-disable-next-line @typescript-eslint/unbound-method
             onClick={this.nextPage}
             style={{
               visibility: pages[this.state.pageIndex + 1] ? 'unset' : 'hidden'
@@ -107,17 +131,22 @@ class HeatMapInner extends Component {
         <Spacer />
 
         <CalendarHeatMap
-          classForValue={value => {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          classForValue={(value: any) => {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
             if (!value || value.count < 1) return 'color-empty';
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
             if (value.count < 4) return 'color-scale-1';
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
             if (value.count < 8) return 'color-scale-2';
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
             if (value.count >= 8) return 'color-scale-a-lot';
             return 'color-empty';
           }}
           endDate={endOfCalendar}
           startDate={startOfCalendar}
-          tooltipDataAttrs={value => {
+          tooltipDataAttrs={(value: { count: number; date: Date }) => {
-            const dateFormatted =
+            const dateFormatted: string =
               value && value.date
                 ? value.date.toLocaleDateString([localeCode, 'en-US'], {
                     year: 'numeric',
@@ -156,10 +185,9 @@ class HeatMapInner extends Component {
   }
 }
 
-HeatMapInner.propTypes = innerPropTypes;
+const HeatMap = (props: IHeatMapProps): JSX.Element => {
-
-const HeatMap = props => {
   const { t } = useTranslation();
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const { calendar } = props;
 
   /**
@@ -168,13 +196,14 @@ const HeatMap = props => {
    */
 
   // create array of timestamps and turn into milliseconds
-  const timestamps = Object.keys(calendar).map(stamp => stamp * 1000);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const timestamps = Object.keys(calendar).map((stamp: any) => stamp * 1000);
   const startOfTimestamps = startOfDay(new Date(timestamps[0]));
   let endOfCalendar = startOfDay(Date.now());
   let startOfCalendar;
 
   // creates pages for heatmap
-  let pages = [];
+  const pages: IPageData[] = [];
 
   do {
     startOfCalendar = addDays(addMonths(endOfCalendar, -6), 1);
@@ -191,7 +220,7 @@ const HeatMap = props => {
 
   pages.reverse();
 
-  let calendarData = [];
+  const calendarData: ICalendarData[] = [];
   let dayCounter = pages[0].startOfCalendar;
 
   // create an object for each day of the calendar period
@@ -258,6 +287,5 @@ const HeatMap = props => {
 };
 
 HeatMap.displayName = 'HeatMap';
-HeatMap.propTypes = propTypes;
 
 export default HeatMap;

client/src/components/profile/components/Portfolio.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Media } from '@freecodecamp/react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
@@ -7,19 +6,19 @@ import { FullWidthRow } from '../../helpers';
 
 import './portfolio.css';
 
-const propTypes = {
+interface IPortfolioData {
-  portfolio: PropTypes.arrayOf(
+  description: string;
-    PropTypes.shape({
+  id: string;
-      description: PropTypes.string,
+  image: string;
-      id: PropTypes.string,
+  title: string;
-      image: PropTypes.string,
+  url: string;
-      title: PropTypes.string,
+}
-      url: PropTypes.string
-    })
-  )
-};
 
-function Portfolio({ portfolio = [] }) {
+interface IPortfolioProps {
+  portfolio: IPortfolioData[];
+}
+
+function Portfolio({ portfolio = [] }: IPortfolioProps): JSX.Element | null {
   const { t } = useTranslation();
   if (!portfolio.length) {
     return null;
@@ -54,6 +53,5 @@ function Portfolio({ portfolio = [] }) {
 }
 
 Portfolio.displayName = 'Portfolio';
-Portfolio.propTypes = propTypes;
 
 export default Portfolio;

client/src/components/profile/components/SocialIcons.tsx

@@ -11,21 +11,21 @@ import { faLink } from '@fortawesome/free-solid-svg-icons';
 import { useTranslation } from 'react-i18next';
 import './social-icons.css';
 
-const propTypes = {
+interface ISocialIconsProps {
-  email: PropTypes.string,
+  email?: string;
-  githubProfile: PropTypes.string,
+  githubProfile: string;
-  isGithub: PropTypes.bool,
+  isGithub: boolean;
-  isLinkedIn: PropTypes.bool,
+  isLinkedIn: boolean;
-  isTwitter: PropTypes.bool,
+  isTwitter: boolean;
-  isWebsite: PropTypes.bool,
+  isWebsite: boolean;
-  linkedin: PropTypes.string,
+  linkedin: string;
-  show: PropTypes.bool,
+  show?: boolean;
-  twitter: PropTypes.string,
+  twitter: string;
-  username: PropTypes.string,
+  username: string;
-  website: PropTypes.string
+  website: string;
-};
+}
 
-function LinkedInIcon(linkedIn, username) {
+function LinkedInIcon(linkedIn: string, username: string): JSX.Element {
   const { t } = useTranslation();
   return (
     <a
@@ -39,7 +39,7 @@ function LinkedInIcon(linkedIn, username) {
   );
 }
 
-function GithubIcon(ghURL, username) {
+function GithubIcon(ghURL: string, username: string): JSX.Element {
   const { t } = useTranslation();
   return (
     <a
@@ -53,7 +53,7 @@ function GithubIcon(ghURL, username) {
   );
 }
 
-function WebsiteIcon(website, username) {
+function WebsiteIcon(website: string, username: string): JSX.Element {
   const { t } = useTranslation();
   return (
     <a
@@ -67,7 +67,7 @@ function WebsiteIcon(website, username) {
   );
 }
 
-function TwitterIcon(handle, username) {
+function TwitterIcon(handle: string, username: string): JSX.Element {
   const { t } = useTranslation();
   return (
     <a
@@ -81,7 +81,7 @@ function TwitterIcon(handle, username) {
   );
 }
 
-function SocialIcons(props) {
+function SocialIcons(props: ISocialIconsProps): JSX.Element | null {
   const {
     githubProfile,
     isLinkedIn,
@@ -111,6 +111,5 @@ function SocialIcons(props) {
 }
 
 SocialIcons.displayName = 'SocialIcons';
-SocialIcons.propTypes = propTypes;
 
 export default SocialIcons;

client/src/components/profile/components/TimeLine.test.tsx

@@ -4,6 +4,7 @@ import TimeLine from './TimeLine';
 import { useStaticQuery } from 'gatsby';
 
 beforeEach(() => {
+  // @ts-ignore
   useStaticQuery.mockImplementationOnce(() => ({
     allChallengeNode: {
       edges: [
@@ -41,6 +42,7 @@ beforeEach(() => {
 
 describe('<TimeLine />', () => {
   it('Render button when only solution is present', () => {
+    // @ts-ignore
     const { container } = render(<TimeLine {...propsForOnlySolution} />);
 
     expect(
@@ -49,11 +51,13 @@ describe('<TimeLine />', () => {
   });
 
   it('Render button when both githubLink and solution is present', () => {
+    // @ts-ignore
     const { container } = render(<TimeLine {...propsForOnlySolution} />);
 
     const linkList = container.querySelector(
       '#dropdown-for-5e4f5c4b570f7e3a4949899f + ul'
     );
+    // @ts-ignore
     const links = linkList.querySelectorAll('a');
 
     expect(links[0]).toHaveAttribute(
@@ -68,6 +72,7 @@ describe('<TimeLine />', () => {
   });
 
   it('rendering the correct button when files is present', () => {
+    // @ts-ignore
     const { getByText } = render(<TimeLine {...propsForOnlySolution} />);
 
     const button = getByText('buttons.show-code');

client/src/components/profile/components/TimeLine.tsx

@@ -1,5 +1,4 @@
 import React, { Component, useMemo } from 'react';
-import PropTypes from 'prop-types';
 import { reverse, sortBy } from 'lodash-es';
 import {
   Button,
@@ -9,7 +8,7 @@ import {
   MenuItem
 } from '@freecodecamp/react-bootstrap';
 import { useStaticQuery, graphql } from 'gatsby';
-import { withTranslation } from 'react-i18next';
+import { TFunction, withTranslation } from 'react-i18next';
 
 import './timeline.css';
 import TimelinePagination from './TimelinePagination';
@@ -26,63 +25,75 @@ import { maybeUrlRE } from '../../../utils';
 import CertificationIcon from '../../../assets/icons/certification-icon';
 
 import { langCodes } from '../../../../../config/i18n/all-langs';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 import envData from '../../../../../config/env.json';
 
-const SolutionViewer = Loadable(() =>
+const SolutionViewer = Loadable(
-  import('../../SolutionViewer/SolutionViewer')
+  () =>
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    import('../../SolutionViewer/SolutionViewer')
 );
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const { clientLocale } = envData;
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/ban-ts-comment
+// @ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
 const localeCode = langCodes[clientLocale];
 
 // Items per page in timeline.
 const ITEMS_PER_PAGE = 15;
 
-const propTypes = {
+interface ICompletedMap {
-  completedMap: PropTypes.arrayOf(
+  id: string;
-    PropTypes.shape({
+  completedDate: number;
-      id: PropTypes.string,
+  challengeType: number;
-      completedDate: PropTypes.number,
+  solution: string;
-      challengeType: PropTypes.number,
+  files: IFile[];
-      solution: PropTypes.string,
+  githubLink: string;
-      files: PropTypes.arrayOf(
+}
-        PropTypes.shape({
-          ext: PropTypes.string,
-          contents: PropTypes.string
-        })
-      )
-    })
-  ),
-  t: PropTypes.func.isRequired,
-  username: PropTypes.string
-};
 
-const innerPropTypes = {
+interface ITimelineProps {
-  ...propTypes,
+  completedMap: ICompletedMap[];
-  idToNameMap: PropTypes.objectOf(
+  t: TFunction<'translation'>;
-    PropTypes.shape({
+  username: string;
-      challengePath: PropTypes.string,
+}
-      challengeTitle: PropTypes.string
-    })
-  ).isRequired,
-  sortedTimeline: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      completedDate: PropTypes.number,
-      files: PropTypes.arrayOf(
-        PropTypes.shape({
-          ext: PropTypes.string,
-          contents: PropTypes.string
-        })
-      )
-    })
-  ).isRequired,
-  totalPages: PropTypes.number.isRequired
-};
 
-class TimelineInner extends Component {
+interface IFile {
-  constructor(props) {
+  ext: string;
+  contents: string;
+}
+
+interface ISortedTimeline {
+  id: string;
+  completedDate: number;
+  files: IFile[];
+  githubLink: string;
+  solution: string;
+}
+
+interface ITimelineInnerProps extends ITimelineProps {
+  idToNameMap: Map<string, string>;
+  sortedTimeline: ISortedTimeline[];
+  totalPages: number;
+}
+
+interface ITimeLineInnerState {
+  solutionToView: string | null;
+  solutionOpen: boolean;
+  pageNo: number;
+  solution: string | null;
+  files: IFile[] | null;
+}
+
+class TimelineInner extends Component<
+  ITimelineInnerProps,
+  ITimeLineInnerState
+> {
+  constructor(props: ITimelineInnerProps) {
     super(props);
 
     this.state = {
@@ -103,7 +114,12 @@ class TimelineInner extends Component {
     this.renderViewButton = this.renderViewButton.bind(this);
   }
 
-  renderViewButton(id, files, githubLink, solution) {
+  renderViewButton(
+    id: string,
+    files: IFile[],
+    githubLink: string,
+    solution: string
+  ): React.ReactNode {
     const { t } = this.props;
     if (files && files.length) {
       return (
@@ -165,10 +181,12 @@ class TimelineInner extends Component {
     }
   }
 
-  renderCompletion(completed) {
+  renderCompletion(completed: ISortedTimeline): JSX.Element {
     const { idToNameMap, username } = this.props;
     const { id, files, githubLink, solution } = completed;
     const completedDate = new Date(completed.completedDate);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     const { challengeTitle, challengePath, certPath } = idToNameMap.get(id);
     return (
       <tr className='timeline-row' key={id}>
@@ -199,7 +217,7 @@ class TimelineInner extends Component {
       </tr>
     );
   }
-  viewSolution(id, solution, files) {
+  viewSolution(id: string, solution: string, files: IFile[]): void {
     this.setState(state => ({
       ...state,
       solutionToView: id,
@@ -286,13 +304,17 @@ class TimelineInner extends Component {
             <Modal.Header closeButton={true}>
               <Modal.Title id='contained-modal-title'>
                 {`${username}'s Solution to ${
+                  // @ts-ignore
                   idToNameMap.get(id).challengeTitle
                 }`}
               </Modal.Title>
             </Modal.Header>
             <Modal.Body>
+              {/* @ts-ignore */}
               <SolutionViewer
+                // @ts-ignore
                 files={this.state.files}
+                // @ts-ignore
                 solution={this.state.solution}
               />
             </Modal.Body>
@@ -316,9 +338,7 @@ class TimelineInner extends Component {
   }
 }
 
-TimelineInner.propTypes = innerPropTypes;
+function useIdToNameMap(): Map<string, string> {
-
-function useIdToNameMap() {
   const {
     allChallengeNode: { edges }
   } = useStaticQuery(graphql`
@@ -337,7 +357,7 @@ function useIdToNameMap() {
     }
   `);
   const idToNameMap = new Map();
-  for (let id of getCertIds()) {
+  for (const id of getCertIds()) {
     idToNameMap.set(id, {
       challengeTitle: `${getTitleFromId(id)} Certification`,
       certPath: getPathFromID(id)
@@ -346,8 +366,11 @@ function useIdToNameMap() {
   edges.forEach(
     ({
       node: {
+        // @ts-ignore
         id,
+        // @ts-ignore
         title,
+        // @ts-ignore
         fields: { slug }
       }
     }) => {
@@ -357,7 +380,7 @@ function useIdToNameMap() {
   return idToNameMap;
 }
 
-const Timeline = props => {
+const Timeline = (props: ITimelineProps): JSX.Element => {
   const idToNameMap = useIdToNameMap();
   const { completedMap } = props;
   // Get the sorted timeline along with total page count.
@@ -380,8 +403,6 @@ const Timeline = props => {
   );
 };
 
-Timeline.propTypes = propTypes;
-
 Timeline.displayName = 'Timeline';
 
 export default withTranslation()(Timeline);

client/src/components/profile/components/TimelinePagination.tsx

@@ -3,7 +3,16 @@ import PropTypes from 'prop-types';
 
 import { useTranslation } from 'react-i18next';
 
-const TimelinePagination = props => {
+interface ITimelinePaginationProps {
+  firstPage: () => void;
+  lastPage: () => void;
+  nextPage: () => void;
+  pageNo: number;
+  prevPage: () => void;
+  totalPages: number;
+}
+
+const TimelinePagination = (props: ITimelinePaginationProps): JSX.Element => {
   const { pageNo, totalPages, firstPage, prevPage, nextPage, lastPage } = props;
   const { t } = useTranslation();
 
@@ -81,13 +90,4 @@ const TimelinePagination = props => {
   );
 };
 
-TimelinePagination.propTypes = {
-  firstPage: PropTypes.func.isRequired,
-  lastPage: PropTypes.func.isRequired,
-  nextPage: PropTypes.func.isRequired,
-  pageNo: PropTypes.number.isRequired,
-  prevPage: PropTypes.func.isRequired,
-  totalPages: PropTypes.number.isRequired
-};
-
 export default TimelinePagination;

package-lock.json

@@ -7372,6 +7372,15 @@
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
       "dev": true
     },
+    "@types/loadable__component": {
+      "version": "5.13.3",
+      "resolved": "https://registry.npmjs.org/@types/loadable__component/-/loadable__component-5.13.3.tgz",
+      "integrity": "sha512-nkRRYpKxspH9yiYGSvyfM7GX1m57B9AVMrVEWY7Hlv9ueK2XCu39M5QyBTDHXcj5qixdD+MyAmNgoy2dEDxGLQ==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -7408,6 +7417,29 @@
       "integrity": "sha512-PijRCG/K3s3w1We6ynUKdxEc5AcuuH3NBmMDP8uvKVp6X43UY7NQlTzczakXP3DJR0F4dfNQIGjU2cUeRYs2AA==",
       "dev": true
     },
+    "@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
+      "dev": true
+    },
+    "@types/react": {
+      "version": "17.0.9",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.9.tgz",
+      "integrity": "sha512-2Cw7FvevpJxQrCb+k5t6GH1KIvmadj5uBbjPaLlJB/nZWUj56e1ZqcD6zsoMFB47MsJUTFl9RJ132A7hb3QFJA==",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/scheduler": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
+      "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==",
+      "dev": true
+    },
     "@types/sinonjs__fake-timers": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.2.tgz",
@@ -10508,6 +10540,12 @@
         }
       }
     },
+    "csstype": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
+      "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==",
+      "dev": true
+    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",

package.json

@@ -142,4 +142,4 @@
     "typescript": "4.3.4",
     "webpack-bundle-analyzer": "4.4.2"
   }
-}
+}