Migrate most React class components to function components
This commit is contained in:
parent
4c9baaef80
commit
558b5a4a38
23 changed files with 1444 additions and 1775 deletions
|
@ -24,56 +24,56 @@ type PropsHousekeeping = {
|
|||
|
||||
export type Props = PropsData & PropsHousekeeping;
|
||||
|
||||
export class VerificationNotification extends React.Component<Props> {
|
||||
public renderContents(): JSX.Element {
|
||||
const { contact, isLocal, type, i18n } = this.props;
|
||||
function VerificationNotificationContents({
|
||||
contact,
|
||||
isLocal,
|
||||
type,
|
||||
i18n,
|
||||
}: Props) {
|
||||
const name = (
|
||||
<ContactName
|
||||
key="external-1"
|
||||
title={contact.title}
|
||||
module="module-verification-notification__contact"
|
||||
/>
|
||||
);
|
||||
|
||||
const name = (
|
||||
<ContactName
|
||||
key="external-1"
|
||||
title={contact.title}
|
||||
module="module-verification-notification__contact"
|
||||
/>
|
||||
);
|
||||
|
||||
switch (type) {
|
||||
case 'markVerified':
|
||||
return isLocal ? (
|
||||
<Intl
|
||||
id="icu:youMarkedAsVerified"
|
||||
components={{ name }}
|
||||
i18n={i18n}
|
||||
/>
|
||||
) : (
|
||||
<Intl
|
||||
id="icu:youMarkedAsVerifiedOtherDevice"
|
||||
components={{ name }}
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
case 'markNotVerified':
|
||||
return isLocal ? (
|
||||
<Intl
|
||||
id="icu:youMarkedAsNotVerified"
|
||||
components={{ name }}
|
||||
i18n={i18n}
|
||||
/>
|
||||
) : (
|
||||
<Intl
|
||||
id="icu:youMarkedAsNotVerifiedOtherDevice"
|
||||
components={{ name }}
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
throw missingCaseError(type);
|
||||
}
|
||||
}
|
||||
|
||||
public override render(): JSX.Element {
|
||||
const { type } = this.props;
|
||||
const icon = type === 'markVerified' ? 'verified' : 'verified-not';
|
||||
|
||||
return <SystemMessage icon={icon} contents={this.renderContents()} />;
|
||||
switch (type) {
|
||||
case 'markVerified':
|
||||
return isLocal ? (
|
||||
<Intl id="icu:youMarkedAsVerified" components={{ name }} i18n={i18n} />
|
||||
) : (
|
||||
<Intl
|
||||
id="icu:youMarkedAsVerifiedOtherDevice"
|
||||
components={{ name }}
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
case 'markNotVerified':
|
||||
return isLocal ? (
|
||||
<Intl
|
||||
id="icu:youMarkedAsNotVerified"
|
||||
components={{ name }}
|
||||
i18n={i18n}
|
||||
/>
|
||||
) : (
|
||||
<Intl
|
||||
id="icu:youMarkedAsNotVerifiedOtherDevice"
|
||||
components={{ name }}
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
throw missingCaseError(type);
|
||||
}
|
||||
}
|
||||
|
||||
export function VerificationNotification(props: Props): JSX.Element {
|
||||
const { type } = props;
|
||||
return (
|
||||
<SystemMessage
|
||||
icon={type === 'markVerified' ? 'verified' : 'verified-not'}
|
||||
contents={<VerificationNotificationContents {...props} />}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue