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>pull/42624/head
parent
6cd8a025a7
commit
8c1084a97b
|
@ -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 />);
|
|
@ -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;
|
|
@ -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 />);
|
|
@ -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;
|
|
@ -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';
|
||||
|
||||
|
|
|
@ -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;
|
|
@ -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;
|
|
@ -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 = {
|
||||
|
|
|
@ -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 = () => ({});
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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 = {
|
||||
|
|
Loading…
Reference in New Issue