From 8c1084a97b64dfbab9133fb28893a533dc7ec265 Mon Sep 17 00:00:00 2001
From: Parth Parth <34807532+thecodingaviator@users.noreply.github.com>
Date: Fri, 25 Jun 2021 21:01:08 +0530
Subject: [PATCH] feat(client): ts-migrate client/src/components/helpers/form
 and client/src/components/formHelpers (#42476)

* client(feat): migrate client/src/components/helpers/form

* compete migration

* migrate formHelpers

* migrate BlockSaveButton and BlockSaveWrapper

* finish migration

* kebab-caseify

* Update client/src/components/formHelpers/block-save-button.tsx

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

* fix linting errors

* make props optional

Co-authored-by: Parth Parth <thecodingaviator@users.noreply.github.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
---
 ...test.js.snap => block-save-button.test.tsx.snap} |  0
 ...est.js.snap => block-save-wrapper.test.tsx.snap} |  0
 ...aveButton.test.js => block-save-button.test.tsx} |  2 +-
 .../{BlockSaveButton.js => block-save-button.tsx}   |  8 ++------
 ...eWrapper.test.js => block-save-wrapper.test.tsx} |  2 +-
 .../{BlockSaveWrapper.js => block-save-wrapper.tsx} | 12 +++++-------
 client/src/components/formHelpers/index.js          |  4 ++--
 .../{BlockSaveButton.js => block-save-button.tsx}   | 11 ++++++-----
 .../{BlockSaveWrapper.js => block-save-wrapper.tsx} | 13 ++++++-------
 client/src/components/settings/About.js             |  2 +-
 client/src/components/settings/Email.js             |  2 +-
 client/src/components/settings/Internet.js          |  2 +-
 client/src/components/settings/Portfolio.js         |  2 +-
 client/src/components/settings/Username.js          |  2 +-
 14 files changed, 28 insertions(+), 34 deletions(-)
 rename client/src/components/formHelpers/__snapshots__/{BlockSaveButton.test.js.snap => block-save-button.test.tsx.snap} (100%)
 rename client/src/components/formHelpers/__snapshots__/{BlockSaveWrapper.test.js.snap => block-save-wrapper.test.tsx.snap} (100%)
 rename client/src/components/formHelpers/{BlockSaveButton.test.js => block-save-button.test.tsx} (92%)
 rename client/src/components/formHelpers/{BlockSaveButton.js => block-save-button.tsx} (66%)
 rename client/src/components/formHelpers/{BlockSaveWrapper.test.js => block-save-wrapper.test.tsx} (80%)
 rename client/src/components/formHelpers/{BlockSaveWrapper.js => block-save-wrapper.tsx} (54%)
 rename client/src/components/helpers/form/{BlockSaveButton.js => block-save-button.tsx} (74%)
 rename client/src/components/helpers/form/{BlockSaveWrapper.js => block-save-wrapper.tsx} (56%)

diff --git a/client/src/components/formHelpers/__snapshots__/BlockSaveButton.test.js.snap b/client/src/components/formHelpers/__snapshots__/block-save-button.test.tsx.snap
similarity index 100%
rename from client/src/components/formHelpers/__snapshots__/BlockSaveButton.test.js.snap
rename to client/src/components/formHelpers/__snapshots__/block-save-button.test.tsx.snap
diff --git a/client/src/components/formHelpers/__snapshots__/BlockSaveWrapper.test.js.snap b/client/src/components/formHelpers/__snapshots__/block-save-wrapper.test.tsx.snap
similarity index 100%
rename from client/src/components/formHelpers/__snapshots__/BlockSaveWrapper.test.js.snap
rename to client/src/components/formHelpers/__snapshots__/block-save-wrapper.test.tsx.snap
diff --git a/client/src/components/formHelpers/BlockSaveButton.test.js b/client/src/components/formHelpers/block-save-button.test.tsx
similarity index 92%
rename from client/src/components/formHelpers/BlockSaveButton.test.js
rename to client/src/components/formHelpers/block-save-button.test.tsx
index 8e17095cb74..6f891e22f6b 100644
--- a/client/src/components/formHelpers/BlockSaveButton.test.js
+++ b/client/src/components/formHelpers/block-save-button.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import BlockSaveButton from './BlockSaveButton';
+import BlockSaveButton from './block-save-button';
 
 test('<BlockSaveButton /> snapshot', () => {
   const { container } = render(<BlockSaveButton />);
diff --git a/client/src/components/formHelpers/BlockSaveButton.js b/client/src/components/formHelpers/block-save-button.tsx
similarity index 66%
rename from client/src/components/formHelpers/BlockSaveButton.js
rename to client/src/components/formHelpers/block-save-button.tsx
index 1b3785a3681..86a2c622cce 100644
--- a/client/src/components/formHelpers/BlockSaveButton.js
+++ b/client/src/components/formHelpers/block-save-button.tsx
@@ -1,20 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Button } from '@freecodecamp/react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
-function BlockSaveButton(props) {
+function BlockSaveButton(props?: Record<string, unknown>): JSX.Element {
   const { t } = useTranslation();
   return (
     <Button block={true} bsStyle='primary' {...props} type='submit'>
-      {props.children || t('buttons.save')}
+      {props?.children || t('buttons.save')}
     </Button>
   );
 }
 
 BlockSaveButton.displayName = 'BlockSaveButton';
-BlockSaveButton.propTypes = {
-  children: PropTypes.any
-};
 
 export default BlockSaveButton;
diff --git a/client/src/components/formHelpers/BlockSaveWrapper.test.js b/client/src/components/formHelpers/block-save-wrapper.test.tsx
similarity index 80%
rename from client/src/components/formHelpers/BlockSaveWrapper.test.js
rename to client/src/components/formHelpers/block-save-wrapper.test.tsx
index 5091ac325a2..93cd59dce51 100644
--- a/client/src/components/formHelpers/BlockSaveWrapper.test.js
+++ b/client/src/components/formHelpers/block-save-wrapper.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import BlockSaveWrapper from './BlockSaveWrapper';
+import BlockSaveWrapper from './block-save-wrapper';
 
 test('<BlockSaveWrapper /> snapshot', () => {
   const { container } = render(<BlockSaveWrapper />);
diff --git a/client/src/components/formHelpers/BlockSaveWrapper.js b/client/src/components/formHelpers/block-save-wrapper.tsx
similarity index 54%
rename from client/src/components/formHelpers/BlockSaveWrapper.js
rename to client/src/components/formHelpers/block-save-wrapper.tsx
index 9e977789b6b..2f5776997cd 100644
--- a/client/src/components/formHelpers/BlockSaveWrapper.js
+++ b/client/src/components/formHelpers/block-save-wrapper.tsx
@@ -1,19 +1,17 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
-const propTypes = {
-  children: PropTypes.node
-};
 
 const style = {
   padding: '0 15px'
 };
 
-function BlockSaveWrapper({ children }) {
+function BlockSaveWrapper({
+  children
+}: {
+  children?: React.ReactElement;
+}): JSX.Element {
   return <div style={style}>{children}</div>;
 }
 
 BlockSaveWrapper.displayName = 'BlockSaveWrapper';
-BlockSaveWrapper.propTypes = propTypes;
 
 export default BlockSaveWrapper;
diff --git a/client/src/components/formHelpers/index.js b/client/src/components/formHelpers/index.js
index 40daf0da609..3e692a3e6ea 100644
--- a/client/src/components/formHelpers/index.js
+++ b/client/src/components/formHelpers/index.js
@@ -7,8 +7,8 @@ import {
   httpValidator
 } from './FormValidators';
 
-export { default as BlockSaveButton } from './BlockSaveButton.js';
-export { default as BlockSaveWrapper } from './BlockSaveWrapper.js';
+export { default as BlockSaveButton } from './block-save-button';
+export { default as BlockSaveWrapper } from './block-save-wrapper';
 export { default as Form } from './Form.js';
 export { default as FormFields } from './FormFields.js';
 
diff --git a/client/src/components/helpers/form/BlockSaveButton.js b/client/src/components/helpers/form/block-save-button.tsx
similarity index 74%
rename from client/src/components/helpers/form/BlockSaveButton.js
rename to client/src/components/helpers/form/block-save-button.tsx
index a605b18c958..7726171639b 100644
--- a/client/src/components/helpers/form/BlockSaveButton.js
+++ b/client/src/components/helpers/form/block-save-button.tsx
@@ -1,9 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Button } from '@freecodecamp/react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
-function BlockSaveButton({ children, ...restProps }) {
+function BlockSaveButton({
+  children,
+  ...restProps
+}: {
+  children?: React.ReactNode;
+}): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -20,8 +24,5 @@ function BlockSaveButton({ children, ...restProps }) {
 }
 
 BlockSaveButton.displayName = 'BlockSaveButton';
-BlockSaveButton.propTypes = {
-  children: PropTypes.any
-};
 
 export default BlockSaveButton;
diff --git a/client/src/components/helpers/form/BlockSaveWrapper.js b/client/src/components/helpers/form/block-save-wrapper.tsx
similarity index 56%
rename from client/src/components/helpers/form/BlockSaveWrapper.js
rename to client/src/components/helpers/form/block-save-wrapper.tsx
index 2fcb127b005..8cef7fb5b62 100644
--- a/client/src/components/helpers/form/BlockSaveWrapper.js
+++ b/client/src/components/helpers/form/block-save-wrapper.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
-const propTypes = {
-  children: PropTypes.node
-};
 
 const style = {
   padding: '0 15px'
 };
 
-function BlockSaveWrapper({ children, ...restProps }) {
+function BlockSaveWrapper({
+  children,
+  ...restProps
+}: {
+  children?: React.ReactNode;
+}): JSX.Element {
   return (
     <div style={style} {...restProps}>
       {children}
@@ -18,6 +18,5 @@ function BlockSaveWrapper({ children, ...restProps }) {
 }
 
 BlockSaveWrapper.displayName = 'BlockSaveWrapper';
-BlockSaveWrapper.propTypes = propTypes;
 
 export default BlockSaveWrapper;
diff --git a/client/src/components/settings/About.js b/client/src/components/settings/About.js
index 3e058ed3b82..189221cc4af 100644
--- a/client/src/components/settings/About.js
+++ b/client/src/components/settings/About.js
@@ -11,7 +11,7 @@ import {
 import { FullWidthRow, Spacer } from '../helpers';
 import ThemeSettings from './Theme';
 import UsernameSettings from './Username';
-import BlockSaveButton from '../helpers/form/BlockSaveButton';
+import BlockSaveButton from '../helpers/form/block-save-button';
 import { withTranslation } from 'react-i18next';
 
 const propTypes = {
diff --git a/client/src/components/settings/Email.js b/client/src/components/settings/Email.js
index 137e153d119..9f69eddebde 100644
--- a/client/src/components/settings/Email.js
+++ b/client/src/components/settings/Email.js
@@ -20,7 +20,7 @@ import { maybeEmailRE } from '../../utils';
 import FullWidthRow from '../helpers/full-width-row';
 import Spacer from '../helpers/spacer';
 import SectionHeader from './SectionHeader';
-import BlockSaveButton from '../helpers/form/BlockSaveButton';
+import BlockSaveButton from '../helpers/form/block-save-button';
 import ToggleSetting from './ToggleSetting';
 
 const mapStateToProps = () => ({});
diff --git a/client/src/components/settings/Internet.js b/client/src/components/settings/Internet.js
index 60ad5996399..9ab97a1fe57 100644
--- a/client/src/components/settings/Internet.js
+++ b/client/src/components/settings/Internet.js
@@ -15,7 +15,7 @@ import { maybeUrlRE } from '../../utils';
 
 import SectionHeader from './SectionHeader';
 import { FullWidthRow } from '../helpers';
-import BlockSaveButton from '../helpers/form/BlockSaveButton';
+import BlockSaveButton from '../helpers/form/block-save-button';
 
 const propTypes = {
   githubProfile: PropTypes.string,
diff --git a/client/src/components/settings/Portfolio.js b/client/src/components/settings/Portfolio.js
index 5d9f60b67f7..3f38ce719f0 100644
--- a/client/src/components/settings/Portfolio.js
+++ b/client/src/components/settings/Portfolio.js
@@ -16,7 +16,7 @@ import { hasProtocolRE } from '../../utils';
 
 import { FullWidthRow, ButtonSpacer, Spacer } from '../helpers';
 import SectionHeader from './SectionHeader';
-import BlockSaveButton from '../helpers/form/BlockSaveButton';
+import BlockSaveButton from '../helpers/form/block-save-button';
 
 const propTypes = {
   picture: PropTypes.string,
diff --git a/client/src/components/settings/Username.js b/client/src/components/settings/Username.js
index 9a6f53ed4a8..7e621440865 100644
--- a/client/src/components/settings/Username.js
+++ b/client/src/components/settings/Username.js
@@ -16,8 +16,8 @@ import {
   usernameValidationSelector,
   submitNewUsername
 } from '../../redux/settings';
-import BlockSaveButton from '../helpers/form/BlockSaveButton';
 import FullWidthRow from '../helpers/full-width-row';
+import BlockSaveButton from '../helpers/form/block-save-button';
 import { isValidUsername } from '../../../../utils/validate';
 
 const propTypes = {