From 0a3a5e7a53bf5f6224ddb90e1372836b1c0d2835 Mon Sep 17 00:00:00 2001 From: Parth Parth <34807532+thecodingaviator@users.noreply.github.com> Date: Fri, 25 Jun 2021 20:11:27 +0530 Subject: [PATCH] feat(client): migrate icons to TS (#42453) * migrate files and update tests fix: use more memory for gatsby develop (#42433) feat(client): remove whitespace from calculated values (#42400) * feat(client?): remove whitespace for calculated values * feat(client): remove whitespace from styledeclaration * do not automatically strip Co-authored-by: Oliver Eyton-Williams * fix: include all properties of CSSStyleDeclaration * fix test for getPropVal Co-authored-by: Oliver Eyton-Williams fix: get showUpcomingChange from env.json (#42440) fix(client): display legacy certs like current ones (#42038) * fix: display legacy certs like the current ones * fix: link projects in legacy certs to project pages * fix: update tests to changed legacy cert display * fix: update tests for removed legacy certs forms * fix: display legacy certs like the current ones * fix: submit projects for cert on projects pages * fix: remove legacy certs form submitting handling * fix: move claiming cert setup before both tests * fix: remove legacy cert update props and actions * fix: remove legacy cert updates from api * fix: correct merge conflict fix(curriculum): rework Project Euler 98 (#42423) * fix: rework challenge to use argument in function * fix: add solution * fix: use MathJax to improve math notation fix(curriculum): rework Project Euler 56 (#42364) * fix: rework challenge to use argument in function * fix: add solution * fix: use MathJax to improve look of math notation fix(curriculum): correct small english typo (#42447) chore: group together monaco-editor and plugin (#42443) This should get renovate to create PRs where both are modified. fix(deps): update dependency algoliasearch to v4.9.2 (#42432) Co-authored-by: Renovate Bot migrate files and update tests Algorithm moved to TSX first ten files renamed to tsx first 10 migration complete first 20 files renamed migrate some files. rename all test index.tsx forced to ignore ts issues rename and migrate all files update tests * remove missed propType declarations * kebab-caseify * fi xlinting Co-authored-by: Oliver Eyton-Williams Co-authored-by: Parth Parth Co-authored-by: Shaun Hamilton --- .../assets/icons/{APIIcon.js => API-icon.tsx} | 4 +- .../assets/icons/{D3Icon.js => D3-icon.tsx} | 4 +- ...eCodeCampLogo.js => FreeCodeCamp-logo.tsx} | 2 +- ...{JavaScriptIcon.js => JavaScript-icon.tsx} | 4 +- .../icons/{ReactIcon.js => React-icon.tsx} | 4 +- ...{TensorflowIcon.js => Tensorflow-icon.tsx} | 4 +- .../icons/{Algorithm.js => algorithm.tsx} | 4 +- .../icons/{Analytics.js => analytics.tsx} | 4 +- .../src/assets/icons/{Caret.js => caret.tsx} | 2 +- ...ficationIcon.js => certification-icon.tsx} | 2 +- .../icons/{Clipboard.js => clipboard.tsx} | 4 +- client/src/assets/icons/{Cup.js => cup.tsx} | 8 ++-- .../{DefaultAvatar.js => default-avatar.tsx} | 5 ++- ...teWithPayPal.js => donate-with-PayPal.tsx} | 7 ++-- client/src/assets/icons/{Fail.js => fail.tsx} | 8 +--- ...otCompleted.js => green-not-completed.tsx} | 9 ++--- .../icons/{GreenPass.js => green-pass.tsx} | 10 ++--- .../src/assets/icons/{Heart.js => heart.tsx} | 7 ++-- client/src/assets/icons/index.js | 34 ---------------- client/src/assets/icons/index.tsx | 40 +++++++++++++++++++ .../assets/icons/{Initial.js => initial.tsx} | 6 +-- ...roInformation.js => intro-information.tsx} | 11 ++--- .../icons/{LinkButton.js => link-button.tsx} | 4 +- .../icons/{PythonIcon.js => python-icon.tsx} | 4 +- ...ponsiveDesign.js => responsive-design.tsx} | 4 +- .../assets/icons/{Shield.js => shield.tsx} | 4 +- .../assets/icons/{Spacer.js => spacer.tsx} | 6 ++- .../{ToggleCheck.js => toggle-check.tsx} | 12 ++---- .../client-only-routes/ShowCertification.js | 2 +- .../src/components/Donation/DonationModal.js | 4 +- .../components/Header/components/NavLogo.js | 2 +- client/src/components/Map/index.js | 2 +- .../components/helpers/avatar-renderer.tsx | 2 +- .../src/components/helpers/toggle-button.tsx | 4 +- .../components/profile/components/TimeLine.js | 2 +- .../Challenges/components/Challenge-Title.js | 2 +- .../components/CompletionModalBody.js | 2 +- .../Challenges/components/Test-Suite.js | 6 +-- .../__snapshots__/ChallengeTitle.test.js.snap | 6 --- .../CompletionModalBody.test.js.snap | 6 --- .../Introduction/components/Block.js | 6 +-- .../Introduction/components/CertChallenge.js | 6 +-- .../components/CertificationCard.js | 2 +- .../Introduction/components/Challenges.js | 4 +- .../Introduction/components/ClaimCertSteps.js | 6 +-- 45 files changed, 137 insertions(+), 144 deletions(-) rename client/src/assets/icons/{APIIcon.js => API-icon.tsx} (92%) rename client/src/assets/icons/{D3Icon.js => D3-icon.tsx} (87%) rename client/src/assets/icons/{FreeCodeCampLogo.js => FreeCodeCamp-logo.tsx} (99%) rename client/src/assets/icons/{JavaScriptIcon.js => JavaScript-icon.tsx} (90%) rename client/src/assets/icons/{ReactIcon.js => React-icon.tsx} (96%) rename client/src/assets/icons/{TensorflowIcon.js => Tensorflow-icon.tsx} (84%) rename client/src/assets/icons/{Algorithm.js => algorithm.tsx} (92%) rename client/src/assets/icons/{Analytics.js => analytics.tsx} (93%) rename client/src/assets/icons/{Caret.js => caret.tsx} (93%) rename client/src/assets/icons/{CertificationIcon.js => certification-icon.tsx} (97%) rename client/src/assets/icons/{Clipboard.js => clipboard.tsx} (92%) rename client/src/assets/icons/{Cup.js => cup.tsx} (95%) rename client/src/assets/icons/{DefaultAvatar.js => default-avatar.tsx} (98%) rename client/src/assets/icons/{DonateWithPayPal.js => donate-with-PayPal.tsx} (96%) rename client/src/assets/icons/{Fail.js => fail.tsx} (84%) rename client/src/assets/icons/{GreenNotCompleted.js => green-not-completed.tsx} (82%) rename client/src/assets/icons/{GreenPass.js => green-pass.tsx} (85%) rename client/src/assets/icons/{Heart.js => heart.tsx} (90%) delete mode 100644 client/src/assets/icons/index.js create mode 100644 client/src/assets/icons/index.tsx rename client/src/assets/icons/{Initial.js => initial.tsx} (94%) rename client/src/assets/icons/{IntroInformation.js => intro-information.tsx} (81%) rename client/src/assets/icons/{LinkButton.js => link-button.tsx} (87%) rename client/src/assets/icons/{PythonIcon.js => python-icon.tsx} (91%) rename client/src/assets/icons/{ResponsiveDesign.js => responsive-design.tsx} (86%) rename client/src/assets/icons/{Shield.js => shield.tsx} (88%) rename client/src/assets/icons/{Spacer.js => spacer.tsx} (78%) rename client/src/assets/icons/{ToggleCheck.js => toggle-check.tsx} (83%) diff --git a/client/src/assets/icons/APIIcon.js b/client/src/assets/icons/API-icon.tsx similarity index 92% rename from client/src/assets/icons/APIIcon.js rename to client/src/assets/icons/API-icon.tsx index c798554d83..8e14713fc7 100644 --- a/client/src/assets/icons/APIIcon.js +++ b/client/src/assets/icons/API-icon.tsx @@ -1,7 +1,9 @@ import React, { Fragment } from 'react'; import { useTranslation } from 'react-i18next'; -function APIIcon(props) { +function APIIcon( + props: JSX.IntrinsicAttributes & React.SVGProps +): JSX.Element { const { t } = useTranslation(); return ( diff --git a/client/src/assets/icons/D3Icon.js b/client/src/assets/icons/D3-icon.tsx similarity index 87% rename from client/src/assets/icons/D3Icon.js rename to client/src/assets/icons/D3-icon.tsx index 3e7a8341e2..8793dd6722 100644 --- a/client/src/assets/icons/D3Icon.js +++ b/client/src/assets/icons/D3-icon.tsx @@ -1,7 +1,9 @@ import React, { Fragment } from 'react'; import { useTranslation } from 'react-i18next'; -function D3Icon(props) { +function D3Icon( + props: JSX.IntrinsicAttributes & React.SVGProps +): JSX.Element { const { t } = useTranslation(); return ( diff --git a/client/src/assets/icons/FreeCodeCampLogo.js b/client/src/assets/icons/FreeCodeCamp-logo.tsx similarity index 99% rename from client/src/assets/icons/FreeCodeCampLogo.js rename to client/src/assets/icons/FreeCodeCamp-logo.tsx index 7c035e37c3..b325af856f 100644 --- a/client/src/assets/icons/FreeCodeCampLogo.js +++ b/client/src/assets/icons/FreeCodeCamp-logo.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; -function FreeCodeCampLogo() { +function FreeCodeCampLogo(): JSX.Element { const { t } = useTranslation(); return ( diff --git a/client/src/assets/icons/JavaScriptIcon.js b/client/src/assets/icons/JavaScript-icon.tsx similarity index 90% rename from client/src/assets/icons/JavaScriptIcon.js rename to client/src/assets/icons/JavaScript-icon.tsx index 00afba058e..08b41ad8d0 100644 --- a/client/src/assets/icons/JavaScriptIcon.js +++ b/client/src/assets/icons/JavaScript-icon.tsx @@ -1,7 +1,9 @@ import React, { Fragment } from 'react'; import { useTranslation } from 'react-i18next'; -function JavaScriptIcon(props) { +function JavaScriptIcon( + props: JSX.IntrinsicAttributes & React.SVGProps +): JSX.Element { const { t } = useTranslation(); return ( diff --git a/client/src/assets/icons/ReactIcon.js b/client/src/assets/icons/React-icon.tsx similarity index 96% rename from client/src/assets/icons/ReactIcon.js rename to client/src/assets/icons/React-icon.tsx index 037a66d193..a170d652de 100644 --- a/client/src/assets/icons/ReactIcon.js +++ b/client/src/assets/icons/React-icon.tsx @@ -1,7 +1,9 @@ import React, { Fragment } from 'react'; import { useTranslation } from 'react-i18next'; -function ReactIcon(props) { +function ReactIcon( + props: JSX.IntrinsicAttributes & React.SVGProps +): JSX.Element { const { t } = useTranslation(); return ( diff --git a/client/src/assets/icons/TensorflowIcon.js b/client/src/assets/icons/Tensorflow-icon.tsx similarity index 84% rename from client/src/assets/icons/TensorflowIcon.js rename to client/src/assets/icons/Tensorflow-icon.tsx index acc0f31321..341d1c64ac 100644 --- a/client/src/assets/icons/TensorflowIcon.js +++ b/client/src/assets/icons/Tensorflow-icon.tsx @@ -1,7 +1,9 @@ import React, { Fragment } from 'react'; import { useTranslation } from 'react-i18next'; -function TensorflowIcon(props) { +function TensorflowIcon( + props: JSX.IntrinsicAttributes & React.SVGProps +): JSX.Element { const { t } = useTranslation(); return ( diff --git a/client/src/assets/icons/Algorithm.js b/client/src/assets/icons/algorithm.tsx similarity index 92% rename from client/src/assets/icons/Algorithm.js rename to client/src/assets/icons/algorithm.tsx index 3b4ec28558..e92de43686 100644 --- a/client/src/assets/icons/Algorithm.js +++ b/client/src/assets/icons/algorithm.tsx @@ -1,7 +1,9 @@ import React, { Fragment } from 'react'; import { useTranslation } from 'react-i18next'; -function Algorithm(props) { +function Algorithm( + props: JSX.IntrinsicAttributes & React.SVGProps +): JSX.Element { const { t } = useTranslation(); return ( diff --git a/client/src/assets/icons/Analytics.js b/client/src/assets/icons/analytics.tsx similarity index 93% rename from client/src/assets/icons/Analytics.js rename to client/src/assets/icons/analytics.tsx index 3d1263b173..39aef5ef00 100644 --- a/client/src/assets/icons/Analytics.js +++ b/client/src/assets/icons/analytics.tsx @@ -1,7 +1,9 @@ import React, { Fragment } from 'react'; import { useTranslation } from 'react-i18next'; -function Analytics(props) { +function Analytics( + props: JSX.IntrinsicAttributes & React.SVGProps +): JSX.Element { const { t } = useTranslation(); return ( diff --git a/client/src/assets/icons/Caret.js b/client/src/assets/icons/caret.tsx similarity index 93% rename from client/src/assets/icons/Caret.js rename to client/src/assets/icons/caret.tsx index 62e07f4361..70cd4e0573 100644 --- a/client/src/assets/icons/Caret.js +++ b/client/src/assets/icons/caret.tsx @@ -1,6 +1,6 @@ import React from 'react'; -function Caret() { +function Caret(): JSX.Element { return ( +): JSX.Element { const { t } = useTranslation(); return ( diff --git a/client/src/assets/icons/Cup.js b/client/src/assets/icons/cup.tsx similarity index 95% rename from client/src/assets/icons/Cup.js rename to client/src/assets/icons/cup.tsx index 05b72a63aa..673a973bab 100644 --- a/client/src/assets/icons/Cup.js +++ b/client/src/assets/icons/cup.tsx @@ -1,10 +1,9 @@ -/* eslint-disable max-len */ import React, { Fragment } from 'react'; import { useTranslation } from 'react-i18next'; -const propTypes = {}; - -function Cup(props) { +function Cup( + props: JSX.IntrinsicAttributes & React.SVGProps +): JSX.Element { const { t } = useTranslation(); return ( @@ -57,6 +56,5 @@ function Cup(props) { } Cup.displayName = 'Cup'; -Cup.propTypes = propTypes; export default Cup; diff --git a/client/src/assets/icons/DefaultAvatar.js b/client/src/assets/icons/default-avatar.tsx similarity index 98% rename from client/src/assets/icons/DefaultAvatar.js rename to client/src/assets/icons/default-avatar.tsx index c676992997..0f03fc9f73 100644 --- a/client/src/assets/icons/DefaultAvatar.js +++ b/client/src/assets/icons/default-avatar.tsx @@ -1,8 +1,9 @@ -/* eslint-disable max-len */ import React from 'react'; import { useTranslation } from 'react-i18next'; -function DefaultAvatar(props) { +function DefaultAvatar( + props: JSX.IntrinsicAttributes & React.SVGProps +): JSX.Element { const { t } = useTranslation(); return ( diff --git a/client/src/assets/icons/DonateWithPayPal.js b/client/src/assets/icons/donate-with-PayPal.tsx similarity index 96% rename from client/src/assets/icons/DonateWithPayPal.js rename to client/src/assets/icons/donate-with-PayPal.tsx index 936aaed203..c9f8cbce0a 100644 --- a/client/src/assets/icons/DonateWithPayPal.js +++ b/client/src/assets/icons/donate-with-PayPal.tsx @@ -2,9 +2,9 @@ import React, { Fragment } from 'react'; import { useTranslation } from 'react-i18next'; -const propTypes = {}; - -function DonateWithPayPal(props) { +function DonateWithPayPal( + props: JSX.IntrinsicAttributes & React.SVGProps +): JSX.Element { const { t } = useTranslation(); return ( @@ -56,6 +56,5 @@ function DonateWithPayPal(props) { } DonateWithPayPal.displayName = 'DonateWithPayPal'; -DonateWithPayPal.propTypes = propTypes; export default DonateWithPayPal; diff --git a/client/src/assets/icons/Fail.js b/client/src/assets/icons/fail.tsx similarity index 84% rename from client/src/assets/icons/Fail.js rename to client/src/assets/icons/fail.tsx index 6ee7ba7f61..0e23347b02 100644 --- a/client/src/assets/icons/Fail.js +++ b/client/src/assets/icons/fail.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; -function RedFail() { +function RedFail(): JSX.Element { const { t } = useTranslation(); return ( @@ -20,16 +20,12 @@ function RedFail() { r='95' stroke='(var--primary-color)' strokeDasharray='null' - strokeLinecap='null' - strokeLinejoin='null' /> +): JSX.Element { const { t } = useTranslation(); return ( @@ -25,8 +25,6 @@ function GreenNotCompleted(props) { r='95' stroke='var(--primary-color)' strokeDasharray='null' - strokeLinecap='null' - strokeLinejoin='null' strokeWidth='10' /> @@ -36,6 +34,5 @@ function GreenNotCompleted(props) { } GreenNotCompleted.displayName = 'GreenNotCompleted'; -GreenNotCompleted.propTypes = propTypes; export default GreenNotCompleted; diff --git a/client/src/assets/icons/GreenPass.js b/client/src/assets/icons/green-pass.tsx similarity index 85% rename from client/src/assets/icons/GreenPass.js rename to client/src/assets/icons/green-pass.tsx index c5eddb7af7..e2ff150bd4 100644 --- a/client/src/assets/icons/GreenPass.js +++ b/client/src/assets/icons/green-pass.tsx @@ -1,7 +1,9 @@ import React, { Fragment } from 'react'; import { useTranslation } from 'react-i18next'; -function GreenPass(props) { +function GreenPass( + props: JSX.IntrinsicAttributes & React.SVGProps +): JSX.Element { const { t } = useTranslation(); return ( @@ -23,16 +25,12 @@ function GreenPass(props) { r='95' stroke='var(--primary-color)' strokeDasharray='null' - strokeLinecap='null' - strokeLinejoin='null' /> +): JSX.Element { const { t } = useTranslation(); return ( @@ -36,6 +36,5 @@ function Heart(props) { } Heart.displayName = 'Heart'; -Heart.propTypes = propTypes; export default Heart; diff --git a/client/src/assets/icons/index.js b/client/src/assets/icons/index.js deleted file mode 100644 index c8a1a5dd80..0000000000 --- a/client/src/assets/icons/index.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import ResponsiveDesign from './ResponsiveDesign'; -import JavaScriptIcon from './JavaScriptIcon'; -import ReactIcon from './ReactIcon'; -import D3Icon from './D3Icon'; -import APIIcon from './APIIcon'; -import Clipboard from './Clipboard'; -import PythonIcon from './PythonIcon'; -import Analytics from './Analytics'; -import Shield from './Shield'; -import TensorflowIcon from './TensorflowIcon'; -import Algorithm from './Algorithm'; - -const generateIconComponent = (superBlock, className) => { - const iconMap = { - 'responsive-web-design': ResponsiveDesign, - 'javascript-algorithms-and-data-structures': JavaScriptIcon, - 'front-end-libraries': ReactIcon, - 'data-visualization': D3Icon, - 'apis-and-microservices': APIIcon, - 'quality-assurance': Clipboard, - 'scientific-computing-with-python': PythonIcon, - 'data-analysis-with-python': Analytics, - 'information-security': Shield, - 'machine-learning-with-python': TensorflowIcon, - 'coding-interview-prep': Algorithm - }; - // fallback in case super block doesn't exist and for tests - const Icon = iconMap[superBlock] ? iconMap[superBlock] : ResponsiveDesign; - - return ; -}; - -export { generateIconComponent }; diff --git a/client/src/assets/icons/index.tsx b/client/src/assets/icons/index.tsx new file mode 100644 index 0000000000..3fe4a33b3d --- /dev/null +++ b/client/src/assets/icons/index.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import ResponsiveDesign from './responsive-design'; +import JavaScriptIcon from './JavaScript-icon'; +import ReactIcon from './React-icon'; +import D3Icon from './D3-icon'; +import APIIcon from './API-icon'; +import Clipboard from './clipboard'; +import PythonIcon from './python-icon'; +import Analytics from './analytics'; +import Shield from './shield'; +import TensorflowIcon from './Tensorflow-icon'; +import Algorithm from './algorithm'; + +const iconMap = { + 'responsive-web-design': ResponsiveDesign, + 'javascript-algorithms-and-data-structures': JavaScriptIcon, + 'front-end-libraries': ReactIcon, + 'data-visualization': D3Icon, + 'apis-and-microservices': APIIcon, + 'quality-assurance': Clipboard, + 'scientific-computing-with-python': PythonIcon, + 'data-analysis-with-python': Analytics, + 'information-security': Shield, + 'machine-learning-with-python': TensorflowIcon, + 'coding-interview-prep': Algorithm +}; + +type SuperBlock = keyof typeof iconMap; + +const generateIconComponent = ( + superBlock: SuperBlock, + className: string +): JSX.Element => { + // fallback in case super block doesn't exist and for tests + const Icon = iconMap[superBlock] ? iconMap[superBlock] : ResponsiveDesign; + + return ; +}; + +export { generateIconComponent }; diff --git a/client/src/assets/icons/Initial.js b/client/src/assets/icons/initial.tsx similarity index 94% rename from client/src/assets/icons/Initial.js rename to client/src/assets/icons/initial.tsx index 82eba13614..3dc99c0774 100644 --- a/client/src/assets/icons/Initial.js +++ b/client/src/assets/icons/initial.tsx @@ -1,7 +1,9 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; -function Initial(props) { +function Initial( + props: JSX.IntrinsicAttributes & React.SVGProps +): JSX.Element { const { t } = useTranslation(); return ( @@ -21,8 +23,6 @@ function Initial(props) { r='95' stroke='var(--primary-color)' strokeDasharray='null' - strokeLinecap='null' - strokeLinejoin='null' /> +): JSX.Element { const { t } = useTranslation(); return ( @@ -25,8 +25,6 @@ function IntroInformation(props) { r='95' stroke='var(--primary-color)' strokeDasharray='null' - strokeLinecap='null' - strokeLinejoin='null' strokeWidth='10' /> @@ -47,6 +43,5 @@ function IntroInformation(props) { } IntroInformation.displayName = 'IntroInformation'; -IntroInformation.propTypes = propTypes; export default IntroInformation; diff --git a/client/src/assets/icons/LinkButton.js b/client/src/assets/icons/link-button.tsx similarity index 87% rename from client/src/assets/icons/LinkButton.js rename to client/src/assets/icons/link-button.tsx index 2501f384d7..799df61f90 100644 --- a/client/src/assets/icons/LinkButton.js +++ b/client/src/assets/icons/link-button.tsx @@ -1,6 +1,8 @@ import React from 'react'; -export default function LinkButton(props) { +export default function LinkButton( + props: JSX.IntrinsicAttributes & React.SVGProps +): JSX.Element { return (