src: use prop unpacking pattern

This makes the code a bit shorter by not having to use `props.` all of
the time. Also make everything VoidFunctionComponent while we are
touching this.
This commit is contained in:
David Lechner
2022-03-12 16:07:31 -06:00
parent 228ba4ebb8
commit 8e4045449c
18 changed files with 193 additions and 131 deletions
+6 -3
View File
@@ -1,5 +1,5 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2021 The Pybricks Authors
// Copyright (c) 2021-2022 The Pybricks Authors
// provides translation for notification text
@@ -13,14 +13,17 @@ type NotificationActionProps = {
replacements?: Replacements;
};
const NotificationAction: React.FC<NotificationActionProps> = (props) => {
const NotificationAction: React.VoidFunctionComponent<NotificationActionProps> = ({
messageId,
replacements,
}) => {
const [i18n] = useI18n({
id: 'notification',
translations: { en },
fallback: en,
});
return <>{i18n.translate(props.messageId, props.replacements)}</>;
return <>{i18n.translate(messageId, replacements)}</>;
};
export default NotificationAction;
+6 -3
View File
@@ -1,5 +1,5 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2021 The Pybricks Authors
// Copyright (c) 2021-2022 The Pybricks Authors
// provides translation for notification text
@@ -13,14 +13,17 @@ type NotificationMessageProps = {
replacements?: Replacements;
};
const NotificationMessage: React.FC<NotificationMessageProps> = (props) => {
const NotificationMessage: React.VoidFunctionComponent<NotificationMessageProps> = ({
messageId,
replacements,
}) => {
const [i18n] = useI18n({
id: 'notification',
translations: { en },
fallback: en,
});
let message = i18n.translate(props.messageId, props.replacements) as
let message = i18n.translate(messageId, replacements) as
| React.ReactElement
| string;
@@ -1,5 +1,5 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2021 The Pybricks Authors
// Copyright (c) 2021-2022 The Pybricks Authors
// Provides special notification contents for unexpected errors.
@@ -14,9 +14,9 @@ type UnexpectedErrorNotificationProps = {
err: Error;
};
const UnexpectedErrorNotification: React.FC<UnexpectedErrorNotificationProps> = (
props,
) => {
const UnexpectedErrorNotification: React.VoidFunctionComponent<
UnexpectedErrorNotificationProps
> = ({ messageId, err }) => {
const [i18n] = useI18n({
id: 'notification',
translations: { en },
@@ -25,9 +25,7 @@ const UnexpectedErrorNotification: React.FC<UnexpectedErrorNotificationProps> =
return (
<>
<p>
{i18n.translate(props.messageId, { errorMessage: props.err.message })}
</p>
<p>{i18n.translate(messageId, { errorMessage: err.message })}</p>
<div>
<ButtonGroup minimal={true} fill={true}>
<Button
@@ -35,9 +33,7 @@ const UnexpectedErrorNotification: React.FC<UnexpectedErrorNotificationProps> =
icon="duplicate"
onClick={() =>
navigator.clipboard.writeText(
`\`\`\`\n${
props.err.stack || props.err.message
}\n\`\`\``,
`\`\`\`\n${err.stack || err.message}\n\`\`\``,
)
}
>
@@ -48,7 +44,7 @@ const UnexpectedErrorNotification: React.FC<UnexpectedErrorNotificationProps> =
icon="virus"
href={`https://github.com/pybricks/support/issues?q=${encodeURIComponent(
'is:issue',
)}+${encodeURIComponent(props.err.message)}`}
)}+${encodeURIComponent(err.message)}`}
target="_blank"
>
{i18n.translate(MessageId.ReportBug)}