fix(client): refactor to use correct i18n t type (#42865)

* fix(client): refactor to use correct i18n t type

* appease Oliver by importing directly from react-i18n

* fix: use default TFunction type variable

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

client/src/client-only-routes/show-user.tsx

@@ -11,7 +11,7 @@ import {
   Row
 } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';
-import { Trans, withTranslation } from 'react-i18next';
+import { TFunction, Trans, withTranslation } from 'react-i18next';
 
 import Login from '../components/Header/components/Login';
 
@@ -30,7 +30,7 @@ interface IShowUserProps {
     username: string;
     reportDescription: string;
   }) => void;
-  t: (payload: unknown, ops?: Record<string, unknown>) => string;
+  t: TFunction;
   userFetchState: {
     pending: boolean;
     complete: boolean;

client/src/components/Header/components/nav-links.tsx

@@ -10,7 +10,7 @@
 // @ts-nocheck
 import React, { Component, Fragment } from 'react';
 import { connect } from 'react-redux';
-import { withTranslation } from 'react-i18next';
+import { TFunction, withTranslation } from 'react-i18next';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faCheck,
@@ -38,7 +38,7 @@ export interface NavLinksProps {
   displayMenu?: boolean;
   fetchState?: { pending: boolean };
   i18n: Object;
-  t: (x: any) => any;
+  t: TFunction;
   toggleDisplayMenu?: React.MouseEventHandler<HTMLButtonElement>;
   toggleNightMode: (x: any) => any;
   user?: Record<string, unknown>;

client/src/components/profile/Profile.tsx

@@ -55,7 +55,7 @@ interface IProfileProps {
 function renderMessage(
   isSessionUser: boolean,
   username: string,
-  t: TFunction<'translation'>
+  t: TFunction
 ): JSX.Element {
   return isSessionUser ? (
     <>

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

@@ -43,7 +43,7 @@ interface ICamperProps {
   yearsTopContributor: string[];
 }
 
-function joinArray(array: string[], t: TFunction<'translation'>): string {
+function joinArray(array: string[], t: TFunction): string {
   return array.reduce((string, item, index, array) => {
     if (string.length > 0) {
       if (index === array.length - 1) {
@@ -57,7 +57,7 @@ function joinArray(array: string[], t: TFunction<'translation'>): string {
   });
 }
 
-function parseDate(joinDate: string, t: TFunction<'translation'>): string {
+function parseDate(joinDate: string, t: TFunction): string {
   const convertedJoinDate = new Date(joinDate);
   const date = convertedJoinDate.toLocaleString([localeCode, 'en-US'], {
     year: 'numeric',

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

@@ -50,7 +50,7 @@ interface IHeatMapInnerProps {
   longestStreak: number;
   pages: IPageData[];
   points?: number;
-  t: TFunction<'translation'>;
+  t: TFunction;
 }
 
 interface IHeatMapInnerState {

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

@@ -64,7 +64,7 @@ interface ICompletedMap {
 
 interface ITimelineProps {
   completedMap: ICompletedMap[];
-  t: TFunction<'translation'>;
+  t: TFunction;
   username: string;
 }
 

client/src/components/settings/about.tsx

@@ -13,7 +13,7 @@ import { FullWidthRow, Spacer } from '../helpers';
 import ThemeSettings from './theme';
 import UsernameSettings from './username';
 import BlockSaveButton from '../helpers/form/block-save-button';
-import { withTranslation } from 'react-i18next';
+import { TFunction, withTranslation } from 'react-i18next';
 
 type FormValues = {
   name: string;
@@ -30,7 +30,7 @@ type AboutProps = {
   picture: string;
   points: number;
   submitNewAbout: (formValues: FormValues) => void;
-  t: (str: string) => string;
+  t: TFunction;
   toggleNightMode: (theme: string) => void;
   username: string;
 };

client/src/components/settings/danger-zone.tsx

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import { Button, Panel } from '@freecodecamp/react-bootstrap';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { withTranslation } from 'react-i18next';
+import { TFunction, withTranslation } from 'react-i18next';
 import type { Dispatch } from 'redux';
 
 import { FullWidthRow, ButtonSpacer, Spacer } from '../helpers';
@@ -17,7 +17,7 @@ import './danger-zone.css';
 type DangerZoneProps = {
   deleteAccount: () => void;
   resetProgress: () => void;
-  t: (str: string) => JSX.Element;
+  t: TFunction;
 };
 
 type DangerZoneState = {

client/src/components/settings/email.tsx

@@ -13,7 +13,7 @@ import {
   // @ts-ignore
 } from '@freecodecamp/react-bootstrap';
 import isEmail from 'validator/lib/isEmail';
-import { Trans, withTranslation } from 'react-i18next';
+import { TFunction, Trans, withTranslation } from 'react-i18next';
 import type { Dispatch } from 'redux';
 
 import { updateMyEmail } from '../../redux/settings';
@@ -33,7 +33,7 @@ type EmailProps = {
   email: string;
   isEmailVerified: boolean;
   sendQuincyEmail: boolean;
-  t: (str: string) => string;
+  t: TFunction;
   updateMyEmail: (email: string) => void;
   updateQuincyEmail: (sendQuincyEmail: boolean) => void;
 };

client/src/components/settings/internet.tsx

@@ -10,7 +10,7 @@ import {
   // @ts-ignore
 } from '@freecodecamp/react-bootstrap';
 import isURL from 'validator/lib/isURL';
-import { withTranslation } from 'react-i18next';
+import { TFunction, withTranslation } from 'react-i18next';
 
 import { maybeUrlRE } from '../../utils';
 
@@ -26,7 +26,7 @@ interface InternetFormValues {
 }
 
 interface InternetProps extends InternetFormValues {
-  t: (str: string) => string;
+  t: TFunction;
   updateInternetSettings: (formValues: InternetFormValues) => void;
 }
 

client/src/components/settings/portfolio.tsx

@@ -11,7 +11,7 @@ import {
 } from '@freecodecamp/react-bootstrap';
 import { findIndex, find, isEqual } from 'lodash-es';
 import isURL from 'validator/lib/isURL';
-import { withTranslation } from 'react-i18next';
+import { TFunction, withTranslation } from 'react-i18next';
 
 import { hasProtocolRE } from '../../utils';
 
@@ -30,7 +30,7 @@ type PortfolioValues = {
 type PortfolioProps = {
   picture?: string;
   portfolio: PortfolioValues[];
-  t: (str: string, obj?: { charsLeft: number }) => string;
+  t: TFunction;
   updatePortfolio: (obj: { portfolio: PortfolioValues[] }) => void;
   username?: string;
 };

client/src/components/settings/privacy.tsx

@@ -5,7 +5,7 @@ import { createSelector } from 'reselect';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { Button, Form } from '@freecodecamp/react-bootstrap';
-import { withTranslation } from 'react-i18next';
+import { TFunction, withTranslation } from 'react-i18next';
 import type { Dispatch } from 'redux';
 
 import { userSelector } from '../../redux';
@@ -39,7 +39,7 @@ type ProfileUIType = {
 
 type PrivacyProps = {
   submitProfileUI: (profileUI: ProfileUIType) => void;
-  t: (str: string) => string;
+  t: TFunction;
   user: {
     profileUI: ProfileUIType;
     username: string;

client/src/components/settings/username.tsx

@@ -11,7 +11,7 @@ import {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
 } from '@freecodecamp/react-bootstrap';
-import { withTranslation } from 'react-i18next';
+import { TFunction, withTranslation } from 'react-i18next';
 import type { Dispatch } from 'redux';
 
 import {
@@ -26,7 +26,7 @@ import { isValidUsername } from '../../../../utils/validate';
 type UsernameProps = {
   isValidUsername: boolean;
   submitNewUsername: (name: string) => void;
-  t: (str: string, obj?: { username: string }) => string;
+  t: TFunction;
   username: string;
   validateUsername: (name: string) => void;
   validating: boolean;

client/src/pages/donate.tsx

@@ -5,7 +5,7 @@ import type { Dispatch } from 'redux';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Grid, Row, Col, Alert } from '@freecodecamp/react-bootstrap';
-import { withTranslation } from 'react-i18next';
+import { TFunction, withTranslation } from 'react-i18next';
 
 import { Spacer, Loader } from '../components/helpers';
 import DonateForm from '../components/Donation/DonateForm';
@@ -32,7 +32,7 @@ interface DonatePageProps {
   executeGA: (arg: ExecuteGaArg) => void;
   isDonating?: boolean;
   showLoading: boolean;
-  t: (s: string) => string;
+  t: TFunction;
 }
 
 const mapStateToProps = createSelector(

client/src/pages/email-sign-up.tsx

@@ -4,7 +4,7 @@ import type { Dispatch } from 'redux';
 import { connect } from 'react-redux';
 import SectionHeader from '../components/settings/section-header';
 import IntroDescription from '../components/Intro/components/IntroDescription';
-import { withTranslation } from 'react-i18next';
+import { TFunction, withTranslation } from 'react-i18next';
 
 import { Row, Col, Button, Grid } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';
@@ -19,7 +19,7 @@ import './email-sign-up.css';
 interface AcceptPrivacyTermsProps {
   acceptTerms: (accept: boolean | null) => void;
   acceptedPrivacyTerms: boolean;
-  t: (s: string) => string;
+  t: TFunction;
 }
 
 const mapStateToProps = createSelector(

client/src/pages/update-email.tsx

@@ -18,7 +18,7 @@ import {
 import Helmet from 'react-helmet';
 import isEmail from 'validator/lib/isEmail';
 import { isString } from 'lodash-es';
-import { withTranslation } from 'react-i18next';
+import { TFunction, withTranslation } from 'react-i18next';
 
 import { Spacer } from '../components/helpers';
 import './update-email.css';
@@ -28,7 +28,7 @@ import { maybeEmailRE } from '../utils';
 
 interface UpdateEmailProps {
   isNewEmail: boolean;
-  t: (s: string) => string;
+  t: TFunction;
   updateMyEmail: (e: string) => void;
 }
 

client/src/templates/Challenges/classic/Show.tsx

@@ -9,7 +9,7 @@ import { connect } from 'react-redux';
 import Helmet from 'react-helmet';
 import { graphql } from 'gatsby';
 import Media from 'react-responsive';
-import { withTranslation } from 'react-i18next';
+import { TFunction, withTranslation } from 'react-i18next';
 
 // Local Utilities
 import LearnLayout from '../../../components/layouts/learn';
@@ -87,7 +87,7 @@ interface ShowClassicProps {
   pageContext: {
     challengeMeta: ChallengeMetaType;
   };
-  t: (arg0: string) => string;
+  t: TFunction;
   tests: TestType[];
   updateChallengeMeta: (arg0: ChallengeMetaType) => void;
 }

client/src/templates/Challenges/components/completion-modal-body.tsx

@@ -1,13 +1,13 @@
 import React, { PureComponent } from 'react';
 import BezierEasing from 'bezier-easing';
 import GreenPass from '../../../assets/icons/green-pass';
-import { withTranslation } from 'react-i18next';
+import { TFunction, withTranslation } from 'react-i18next';
 
 interface CompletionModalBodyProps {
   block: string;
   completedPercent: number;
   superBlock: string;
-  t: (arg0: string, arg1?: { percent: number }) => string;
+  t: TFunction;
 }
 
 interface CompletionModalBodyState {

client/src/templates/Challenges/components/completion-modal.tsx

@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Button, Modal } from '@freecodecamp/react-bootstrap';
 import { useStaticQuery, graphql } from 'gatsby';
-import { withTranslation } from 'react-i18next';
+import { TFunction, withTranslation } from 'react-i18next';
 import { Dispatch } from 'redux';
 
 import Login from '../../../components/Header/components/Login';
@@ -106,7 +106,7 @@ interface CompletionModalsProps {
   message: string;
   submitChallenge: () => void;
   superBlock: string;
-  t: (arg0: string) => string;
+  t: TFunction;
   title: string;
 }
 

client/src/templates/Challenges/projects/backend/Show.tsx

@@ -8,7 +8,7 @@ import { createSelector } from 'reselect';
 import { connect } from 'react-redux';
 import { graphql } from 'gatsby';
 import Helmet from 'react-helmet';
-import { withTranslation } from 'react-i18next';
+import { TFunction, withTranslation } from 'react-i18next';
 
 // Local Utilities
 import {
@@ -88,7 +88,7 @@ interface BackEndProps {
   pageContext: {
     challengeMeta: ChallengeMetaType;
   };
-  t: (arg0: string) => string;
+  t: TFunction;
   tests: TestType[];
   title: string;
   updateChallengeMeta: (arg0: ChallengeMetaType) => void;

client/src/templates/Challenges/projects/frontend/Show.tsx

@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { graphql } from 'gatsby';
 import Helmet from 'react-helmet';
-import { withTranslation } from 'react-i18next';
+import { TFunction, withTranslation } from 'react-i18next';
 import { createSelector } from 'reselect';
 import type { Dispatch } from 'redux';
 
@@ -62,7 +62,7 @@ interface ProjectProps {
   pageContext: {
     challengeMeta: ChallengeMetaType;
   };
-  t: (arg0: string) => string;
+  t: TFunction;
   updateChallengeMeta: (arg0: ChallengeMetaType) => void;
   updateSolutionFormValues: () => void;
 }

client/src/templates/Challenges/projects/tool-panel.tsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { bindActionCreators, Dispatch } from 'redux';
 import { connect } from 'react-redux';
 import { Button } from '@freecodecamp/react-bootstrap';
-import { withTranslation } from 'react-i18next';
+import { TFunction, withTranslation } from 'react-i18next';
 
 import { openModal } from '../redux';
 
@@ -21,7 +21,7 @@ const mapDispatchToProps = (dispatch: Dispatch) =>
 interface ToolPanelProps {
   guideUrl?: string;
   openHelpModal: () => void;
-  t: (args: string) => void;
+  t: TFunction;
 }
 
 export class ToolPanel extends Component<ToolPanelProps> {

client/src/templates/Challenges/video/Show.tsx

@@ -8,7 +8,7 @@ import Helmet from 'react-helmet';
 import YouTube from 'react-youtube';
 import { createSelector } from 'reselect';
 import { ObserveKeys } from 'react-hotkeys';
-import { withTranslation } from 'react-i18next';
+import { TFunction, withTranslation } from 'react-i18next';
 import type { Dispatch } from 'redux';
 
 // Local Utilities
@@ -63,7 +63,7 @@ interface ShowVideoProps {
   pageContext: {
     challengeMeta: ChallengeMetaType;
   };
-  t: (arg0: string) => string;
+  t: TFunction;
   updateChallengeMeta: (arg0: ChallengeMetaType) => void;
   updateSolutionFormValues: () => void;
 }