chore(client): migrate-landing-components (#43769)

* feat: migrate landing components

* fix: import declarations

* fix: interface names

* fix: typing

* fix: attribute name

* fix: interface names

* Update client/src/declarations.d.ts

Co-authored-by: RobertoMSousa <beto.sousa22@gmail.com>

* Update client/src/components/landing/components/campers-image.tsx

* Update client/src/components/landing/components/campers-image.tsx

* Apply suggestions from code review

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

* fix: linting issues

Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
Co-authored-by: RobertoMSousa <beto.sousa22@gmail.com>
Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

client/src/components/landing/components/as-seen-in.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AsSeenInText } from '../../../assets/images/components';
 
-const AsSeenIn = () => {
+const AsSeenIn = (): JSX.Element => {
   const { t } = useTranslation();
 
   return (

client/src/components/landing/components/big-call-to-action.tsx

@@ -1,18 +1,17 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import Login from '../../Header/components/Login';
 
-const propTypes = {
-  page: PropTypes.string
-};
+interface bigCallToActionProps {
+  pageName: string;
+}
 
-const BigCallToAction = ({ page }) => {
+const BigCallToAction = ({ pageName }: bigCallToActionProps): JSX.Element => {
   const { t } = useTranslation();
 
   return (
-    <Login block={true} data-test-label={`${page}-big-cta`}>
-      {page === 'landing'
+    <Login block={true} data-test-label={`${pageName}-big-cta`}>
+      {pageName === 'landing'
         ? t('buttons.logged-in-cta-btn')
         : t('buttons.logged-out-cta-btn')}
     </Login>
@@ -20,5 +19,4 @@ const BigCallToAction = ({ page }) => {
 };
 
 BigCallToAction.displayName = 'BigCallToAction';
-BigCallToAction.propTypes = propTypes;
 export default BigCallToAction;

client/src/components/landing/components/campers-image.tsx

@@ -1,32 +1,37 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import Media from 'react-responsive';
 import wideImg from '../../../assets/images/landing/wide-image.png';
 import { Spacer, ImageLoader } from '../../helpers';
 
-const propTypes = {
-  page: PropTypes.string
-};
-
 const LARGE_SCREEN_SIZE = 1200;
 
-const imageConfig = {
-  donate: {
+interface campersImageProps {
+  pageName: string;
+}
+
+interface imageSizeProps {
+  spacerSize: number;
+  height: number;
+  width: number;
+}
+
+const donateImageSize: imageSizeProps = {
   spacerSize: 0,
   height: 345,
   width: 585
-  },
-  landing: {
+};
+
+const landingImageSize: imageSizeProps = {
   spacerSize: 2,
   height: 442,
   width: 750
-  }
 };
-
-function CampersImage({ page }) {
+function CampersImage({ pageName }: campersImageProps): JSX.Element {
   const { t } = useTranslation();
-  const { spacerSize, height, width } = imageConfig[page];
+
+  const { spacerSize, height, width } =
+    pageName === 'donate' ? donateImageSize : landingImageSize;
 
   return (
     <Media minWidth={LARGE_SCREEN_SIZE}>
@@ -44,5 +49,4 @@ function CampersImage({ page }) {
 }
 
 CampersImage.displayName = 'CampersImage';
-CampersImage.propTypes = propTypes;
 export default CampersImage;

client/src/components/landing/components/certifications.tsx

@@ -1,16 +1,17 @@
 import { Col, Row } from '@freecodecamp/react-bootstrap';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import Map from '../../Map/index';
 import { Spacer } from '../../helpers';
-import BigCallToAction from './BigCallToAction';
+import BigCallToAction from './big-call-to-action';
 
-const propTypes = {
-  page: PropTypes.string
-};
+interface certificationProps {
+  pageName: string;
+}
 
-const Certifications = ({ page = 'landing' }) => {
+const Certifications = ({
+  pageName = 'landing'
+}: certificationProps): JSX.Element => {
   const { t } = useTranslation();
 
   return (
@@ -19,7 +20,7 @@ const Certifications = ({ page = 'landing' }) => {
         <h1 className='big-heading'>{t('landing.certification-heading')}</h1>
         <Map forLanding={true} />
         <Spacer />
-        <BigCallToAction page={page} />
+        <BigCallToAction pageName={pageName} />
         <Spacer />
       </Col>
     </Row>
@@ -27,5 +28,4 @@ const Certifications = ({ page = 'landing' }) => {
 };
 
 Certifications.displayName = 'Certifications';
-Certifications.propTypes = propTypes;
 export default Certifications;

client/src/components/landing/components/landing-top.tsx

@@ -1,5 +1,4 @@
 import { Col, Row } from '@freecodecamp/react-bootstrap';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import envData from '../../../../../config/env.json';
@@ -13,15 +12,15 @@ import {
   AlibabaLogo
 } from '../../../assets/images/components';
 import { Spacer } from '../../helpers';
-import BigCallToAction from './BigCallToAction';
-import CampersImage from './CampersImage';
+import BigCallToAction from './big-call-to-action';
+import CampersImage from './campers-image';
 
-const propTypes = {
-  page: PropTypes.string
-};
+interface landingTopProps {
+  pageName: string;
+}
 
 const { clientLocale } = envData;
-function LandingTop({ page }) {
+function LandingTop({ pageName }: landingTopProps): JSX.Element {
   const { t } = useTranslation();
   const showChineseLogos = ['chinese', 'chinese-tradition'].includes(
     clientLocale
@@ -31,7 +30,7 @@ function LandingTop({ page }) {
       <Row>
         <Spacer />
         <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
-          <h1 className='big-heading' data-test-label={`${page}-header`}>
+          <h1 className='big-heading' data-test-label={`${pageName}-header`}>
             {t('landing.big-heading-1')}
           </h1>
           <p className='big-heading'>{t('landing.big-heading-2')}</p>
@@ -54,8 +53,8 @@ function LandingTop({ page }) {
             )}
           </div>
           <Spacer />
-          <BigCallToAction page={page} />
-          <CampersImage page={page} />
+          <BigCallToAction pageName={pageName} />
+          <CampersImage pageName={pageName} />
           <Spacer />
         </Col>
       </Row>
@@ -64,5 +63,4 @@ function LandingTop({ page }) {
 }
 
 LandingTop.displayName = 'LandingTop';
-LandingTop.propTypes = propTypes;
 export default LandingTop;

client/src/components/landing/components/testimonials.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 
 import { Trans, useTranslation } from 'react-i18next';
@@ -7,11 +6,7 @@ import sarahImg from '../../../assets/images/landing/Sarah.png';
 import shawnImg from '../../../assets/images/landing/Shawn.png';
 import { ImageLoader } from '../../helpers';
 
-const propTypes = {
-  page: PropTypes.string
-};
-
-const Testimonials = () => {
+const Testimonials = (): JSX.Element => {
   const { t } = useTranslation();
 
   return (
@@ -106,5 +101,4 @@ const Testimonials = () => {
 };
 
 Testimonials.displayName = 'Testimonals';
-Testimonials.propTypes = propTypes;
 export default Testimonials;

client/src/components/landing/index.js

@@ -4,10 +4,10 @@ import React from 'react';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 
-import AsSeenIn from './components/AsSeenIn';
-import Certifications from './components/Certifications';
-import LandingTop from './components/LandingTop';
-import Testimonials from './components/Testimonials';
+import AsSeenIn from './components/as-seen-in';
+import Certifications from './components/certifications';
+import LandingTop from './components/landing-top';
+import Testimonials from './components/testimonials';
 
 import './landing.css';
 
@@ -25,7 +25,7 @@ export const Landing = ({ page = 'landing' }) => {
       </Helmet>
       <main className='landing-page'>
         <Grid>
-          <LandingTop page={page} />
+          <LandingTop pageName={page} />
         </Grid>
         <Grid fluid={true}>
           <AsSeenIn />

client/src/declarations.d.ts

@@ -9,6 +9,12 @@ declare module '*.svg' {
   const content: string;
   export default content;
 }
+
+declare module '*.png' {
+  const content: string;
+  export default content;
+}
+
 declare namespace NodeJS {
   interface Global {
     MathJax: {

client/src/pages/donate.tsx

@@ -16,7 +16,7 @@ import {
   DonationOptionsAlertText
 } from '../components/Donation/DonationTextComponents';
 import { Spacer, Loader } from '../components/helpers';
-import CampersImage from '../components/landing/components/CampersImage';
+import CampersImage from '../components/landing/components/campers-image';
 import { signInLoadingSelector, userSelector, executeGA } from '../redux';
 
 interface ExecuteGaArg {
@@ -121,7 +121,7 @@ function DonatePage({
               </Row>
             </Col>
             <Col lg={6}>
-              <CampersImage page='donate' />
+              <CampersImage pageName='donate' />
             </Col>
           </>
         </Row>