notifications: use lambda syntax for components

This commit is contained in:
David Lechner
2021-12-27 12:38:50 -06:00
parent a58b30ed07
commit d5ad768122
3 changed files with 29 additions and 17 deletions
+7 -5
View File
@@ -8,17 +8,19 @@ import React from 'react';
import { MessageId } from './i18n';
import en from './i18n.en.json';
type OwnProps = {
type NotificationActionProps = {
messageId: MessageId;
replacements?: Replacements;
};
export default function NotificationAction(props: OwnProps): JSX.Element {
const NotificationAction: React.FC<NotificationActionProps> = (props) => {
const [i18n] = useI18n({
id: 'notification',
translations: { en },
fallback: en,
});
const { messageId, replacements } = props;
return <>{i18n.translate(messageId, replacements)}</>;
}
return <>{i18n.translate(props.messageId, props.replacements)}</>;
};
export default NotificationAction;
+7 -5
View File
@@ -8,19 +8,19 @@ import React from 'react';
import { MessageId } from './i18n';
import en from './i18n.en.json';
type OwnProps = {
type NotificationMessageProps = {
messageId: MessageId;
replacements?: Replacements;
};
export default function NotificationMessage(props: OwnProps): JSX.Element {
const NotificationMessage: React.FC<NotificationMessageProps> = (props) => {
const [i18n] = useI18n({
id: 'notification',
translations: { en },
fallback: en,
});
const { messageId, replacements } = props;
let message = i18n.translate(messageId, replacements) as
let message = i18n.translate(props.messageId, props.replacements) as
| React.ReactElement
| string;
@@ -36,4 +36,6 @@ export default function NotificationMessage(props: OwnProps): JSX.Element {
}
return message;
}
};
export default NotificationMessage;
@@ -9,21 +9,25 @@ import React from 'react';
import { MessageId } from './i18n';
import en from './i18n.en.json';
type OwnProps = {
type UnexpectedErrorNotificationProps = {
messageId: MessageId;
err: Error;
};
export default function UnexpectedErrorNotification(props: OwnProps): JSX.Element {
const UnexpectedErrorNotification: React.FC<UnexpectedErrorNotificationProps> = (
props,
) => {
const [i18n] = useI18n({
id: 'notification',
translations: { en },
fallback: en,
});
const { messageId, err } = props;
return (
<>
<p>{i18n.translate(messageId, { errorMessage: err.message })}</p>
<p>
{i18n.translate(props.messageId, { errorMessage: props.err.message })}
</p>
<div>
<ButtonGroup minimal={true} fill={true}>
<Button
@@ -31,7 +35,9 @@ export default function UnexpectedErrorNotification(props: OwnProps): JSX.Elemen
icon="duplicate"
onClick={() =>
navigator.clipboard.writeText(
`\`\`\`\n${err.stack || err.message}\n\`\`\``,
`\`\`\`\n${
props.err.stack || props.err.message
}\n\`\`\``,
)
}
>
@@ -42,7 +48,7 @@ export default function UnexpectedErrorNotification(props: OwnProps): JSX.Elemen
icon="virus"
href={`https://github.com/pybricks/support/issues?q=${encodeURIComponent(
'is:issue',
)}+${encodeURIComponent(err.message)}`}
)}+${encodeURIComponent(props.err.message)}`}
target="_blank"
>
{i18n.translate(MessageId.ReportBug)}
@@ -51,4 +57,6 @@ export default function UnexpectedErrorNotification(props: OwnProps): JSX.Elemen
</div>
</>
);
}
};
export default UnexpectedErrorNotification;