From ab2e85978f39fffa3a198c0d3b26f20cbc629591 Mon Sep 17 00:00:00 2001 From: Sem Bauke <46919888+Sembauke@users.noreply.github.com> Date: Thu, 28 Oct 2021 17:19:45 +0200 Subject: [PATCH] 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 * 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 * fix: linting issues Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> Co-authored-by: RobertoMSousa Co-authored-by: Shaun Hamilton --- .../{AsSeenIn.js => as-seen-in.tsx} | 2 +- ...CallToAction.js => big-call-to-action.tsx} | 14 +++---- .../{CampersImage.js => campers-image.tsx} | 42 ++++++++++--------- .../{Certifications.js => certifications.tsx} | 16 +++---- .../{LandingTop.js => landing-top.tsx} | 20 ++++----- .../{Testimonials.js => testimonials.tsx} | 8 +--- client/src/components/landing/index.js | 10 ++--- client/src/declarations.d.ts | 6 +++ client/src/pages/donate.tsx | 4 +- 9 files changed, 61 insertions(+), 61 deletions(-) rename client/src/components/landing/components/{AsSeenIn.js => as-seen-in.tsx} (93%) rename client/src/components/landing/components/{BigCallToAction.js => big-call-to-action.tsx} (59%) rename client/src/components/landing/components/{CampersImage.js => campers-image.tsx} (60%) rename client/src/components/landing/components/{Certifications.js => certifications.tsx} (70%) rename client/src/components/landing/components/{LandingTop.js => landing-top.tsx} (78%) rename client/src/components/landing/components/{Testimonials.js => testimonials.tsx} (95%) diff --git a/client/src/components/landing/components/AsSeenIn.js b/client/src/components/landing/components/as-seen-in.tsx similarity index 93% rename from client/src/components/landing/components/AsSeenIn.js rename to client/src/components/landing/components/as-seen-in.tsx index 9d1d93599b..febc767341 100644 --- a/client/src/components/landing/components/AsSeenIn.js +++ b/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 ( diff --git a/client/src/components/landing/components/BigCallToAction.js b/client/src/components/landing/components/big-call-to-action.tsx similarity index 59% rename from client/src/components/landing/components/BigCallToAction.js rename to client/src/components/landing/components/big-call-to-action.tsx index 252953cab8..b81f327adf 100644 --- a/client/src/components/landing/components/BigCallToAction.js +++ b/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 ( - - {page === 'landing' + + {pageName === 'landing' ? t('buttons.logged-in-cta-btn') : t('buttons.logged-out-cta-btn')} @@ -20,5 +19,4 @@ const BigCallToAction = ({ page }) => { }; BigCallToAction.displayName = 'BigCallToAction'; -BigCallToAction.propTypes = propTypes; export default BigCallToAction; diff --git a/client/src/components/landing/components/CampersImage.js b/client/src/components/landing/components/campers-image.tsx similarity index 60% rename from client/src/components/landing/components/CampersImage.js rename to client/src/components/landing/components/campers-image.tsx index cda1a77ef1..dda48610e2 100644 --- a/client/src/components/landing/components/CampersImage.js +++ b/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: { - spacerSize: 0, - height: 345, - width: 585 - }, - landing: { - spacerSize: 2, - height: 442, - width: 750 - } +interface campersImageProps { + pageName: string; +} + +interface imageSizeProps { + spacerSize: number; + height: number; + width: number; +} + +const donateImageSize: imageSizeProps = { + spacerSize: 0, + height: 345, + width: 585 }; -function CampersImage({ page }) { +const landingImageSize: imageSizeProps = { + spacerSize: 2, + height: 442, + width: 750 +}; +function CampersImage({ pageName }: campersImageProps): JSX.Element { const { t } = useTranslation(); - const { spacerSize, height, width } = imageConfig[page]; + + const { spacerSize, height, width } = + pageName === 'donate' ? donateImageSize : landingImageSize; return ( @@ -44,5 +49,4 @@ function CampersImage({ page }) { } CampersImage.displayName = 'CampersImage'; -CampersImage.propTypes = propTypes; export default CampersImage; diff --git a/client/src/components/landing/components/Certifications.js b/client/src/components/landing/components/certifications.tsx similarity index 70% rename from client/src/components/landing/components/Certifications.js rename to client/src/components/landing/components/certifications.tsx index d1af6cb536..db9d3563b9 100644 --- a/client/src/components/landing/components/Certifications.js +++ b/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' }) => {

{t('landing.certification-heading')}

- + @@ -27,5 +28,4 @@ const Certifications = ({ page = 'landing' }) => { }; Certifications.displayName = 'Certifications'; -Certifications.propTypes = propTypes; export default Certifications; diff --git a/client/src/components/landing/components/LandingTop.js b/client/src/components/landing/components/landing-top.tsx similarity index 78% rename from client/src/components/landing/components/LandingTop.js rename to client/src/components/landing/components/landing-top.tsx index 8ea62c676b..bf2ab5efe0 100644 --- a/client/src/components/landing/components/LandingTop.js +++ b/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 }) { -

+

{t('landing.big-heading-1')}

{t('landing.big-heading-2')}

@@ -54,8 +53,8 @@ function LandingTop({ page }) { )} - - + + @@ -64,5 +63,4 @@ function LandingTop({ page }) { } LandingTop.displayName = 'LandingTop'; -LandingTop.propTypes = propTypes; export default LandingTop; diff --git a/client/src/components/landing/components/Testimonials.js b/client/src/components/landing/components/testimonials.tsx similarity index 95% rename from client/src/components/landing/components/Testimonials.js rename to client/src/components/landing/components/testimonials.tsx index ff6e0fec5f..01cdbfbf61 100644 --- a/client/src/components/landing/components/Testimonials.js +++ b/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; diff --git a/client/src/components/landing/index.js b/client/src/components/landing/index.js index aff37de6ae..e4541719e5 100644 --- a/client/src/components/landing/index.js +++ b/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' }) => {
- + diff --git a/client/src/declarations.d.ts b/client/src/declarations.d.ts index 929499afaf..9ec83842fb 100644 --- a/client/src/declarations.d.ts +++ b/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: { diff --git a/client/src/pages/donate.tsx b/client/src/pages/donate.tsx index 16f4ec43d4..c79fa1209b 100644 --- a/client/src/pages/donate.tsx +++ b/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({ - +