From 012d78f8ed00f8c38fe852b6ae24fef11a19b0a4 Mon Sep 17 00:00:00 2001 From: Myzel394 <50424412+Myzel394@users.noreply.github.com> Date: Sun, 5 Mar 2023 11:31:39 +0100 Subject: [PATCH] refactor: Improve i18n for components --- public/locales/en-US/components.json | 33 +++++++++++++++++++ public/locales/en-US/translation.json | 33 +------------------ .../LockNavigationContextProvider.tsx | 10 +++--- .../widgets/ErrorLoadingDataMessage.tsx | 6 ++-- src/components/widgets/OpenMailButton.tsx | 4 +-- .../widgets/StringPoolField/AddNewDialog.tsx | 12 +++---- .../StringPoolField/StringPoolField.tsx | 6 ++-- src/components/widgets/TimedButton.tsx | 6 ++-- .../ConfirmCodeForm/ResendMailButton.tsx | 4 +-- .../YouGotMail/ResendMailButton.tsx | 4 +-- 10 files changed, 57 insertions(+), 61 deletions(-) create mode 100644 public/locales/en-US/components.json diff --git a/public/locales/en-US/components.json b/public/locales/en-US/components.json new file mode 100644 index 0000000..c735d6d --- /dev/null +++ b/public/locales/en-US/components.json @@ -0,0 +1,33 @@ +{ + "ResendMailButton": { + "label": "Resend Mail" + }, + "OpenMailButton": { + "label": "Open Mail" + }, + "TimedButton": { + "remainingTime_one": "({{count}})", + "remainingTime_other": "({{count}})" + }, + "ErrorLoadingDataMessage": { + "tryAgain": "Try Again" + }, + "LockNavigationContextProvider": { + "title": "Are you sure you want to leave?", + "description": "You have unsaved changes. If you leave, your changes will be lost.", + "continueLabel": "Leave" + }, + "StringPoolField": { + "addCustom": { + "label": "Add custom" + }, + "forms": { + "addNew": { + "title": "Add new value", + "description": "Enter your characters you would like to include", + "label": "Characters", + "submit": "Add" + } + } + } +} diff --git a/public/locales/en-US/translation.json b/public/locales/en-US/translation.json index 0f28243..a05b8e5 100644 --- a/public/locales/en-US/translation.json +++ b/public/locales/en-US/translation.json @@ -22,24 +22,6 @@ }, "components": { - "ResendMailButton": { - "label": "Resend Mail" - }, - "OpenMailButton": { - "label": "Open Mail" - }, - "TimedButton": { - "remainingTime_one": "({{count}})", - "remainingTime_other": "({{count}})" - }, - "ErrorLoadingDataMessage": { - "tryAgain": "Try Again" - }, - "LockNavigationContextProvider": { - "title": "Are you sure you want to leave?", - "description": "You have unsaved changes. If you leave, your changes will be lost.", - "continueLabel": "Leave" - }, "passwordShareConfirmationDialog": { "title": "Share Password?", "description": "An extension is asking for your password. Do you want to share it? Only continue if you initiated this action.", @@ -48,19 +30,6 @@ "doNotShare": "Do not share", "decideLater": "Decide later", "doNotAskAgain": "Do not ask again" - }, - "StringPoolField": { - "addCustom": { - "label": "Add custom" - }, - "forms": { - "addNew": { - "title": "Add new value", - "description": "Enter your characters you would like to include", - "label": "Characters", - "submit": "Add" - } - } } - }, + } } diff --git a/src/components/LockNavigation/LockNavigationContextProvider.tsx b/src/components/LockNavigation/LockNavigationContextProvider.tsx index 099d858..d4fe433 100644 --- a/src/components/LockNavigation/LockNavigationContextProvider.tsx +++ b/src/components/LockNavigation/LockNavigationContextProvider.tsx @@ -22,7 +22,7 @@ export interface LockNavigationContextProviderProps { export default function LockNavigationContextProvider({ children, }: LockNavigationContextProviderProps): JSX.Element { - const {t} = useTranslation() + const {t} = useTranslation(["components", "common"]) const navigate = useNavigate() const [isLocked, setIsLocked] = useState(false) @@ -97,18 +97,18 @@ export default function LockNavigationContextProvider({ {children} - {t("components.LockNavigationContextProvider.title")} + {t("LockNavigationContextProvider.title")} - {t("components.LockNavigationContextProvider.description")} + {t("LockNavigationContextProvider.description")} diff --git a/src/components/widgets/ErrorLoadingDataMessage.tsx b/src/components/widgets/ErrorLoadingDataMessage.tsx index 1072813..0029164 100644 --- a/src/components/widgets/ErrorLoadingDataMessage.tsx +++ b/src/components/widgets/ErrorLoadingDataMessage.tsx @@ -12,7 +12,7 @@ export default function ErrorLoadingDataMessage({ message, onRetry, }: ErrorLoadingDataMessageProps): ReactElement { - const {t} = useTranslation() + const {t} = useTranslation("components") return ( @@ -20,9 +20,7 @@ export default function ErrorLoadingDataMessage({ {message} - + ) diff --git a/src/components/widgets/OpenMailButton.tsx b/src/components/widgets/OpenMailButton.tsx index dbc1715..83476b9 100644 --- a/src/components/widgets/OpenMailButton.tsx +++ b/src/components/widgets/OpenMailButton.tsx @@ -12,14 +12,14 @@ export interface OpenMailButtonProps { } export default function OpenMailButton({domain}: OpenMailButtonProps): ReactElement { - const {t} = useTranslation() + const {t} = useTranslation("components") const userAgent = new UAParser() if (userAgent.getOS().name === "Android" && APP_LINK_MAP[domain]) { return ( ) } diff --git a/src/components/widgets/StringPoolField/AddNewDialog.tsx b/src/components/widgets/StringPoolField/AddNewDialog.tsx index 9ef899f..1c830e6 100644 --- a/src/components/widgets/StringPoolField/AddNewDialog.tsx +++ b/src/components/widgets/StringPoolField/AddNewDialog.tsx @@ -28,22 +28,22 @@ export default function AddNewDialog({ open = false, onClose, }: StringPoolFieldProps): ReactElement { - const {t} = useTranslation() + const {t} = useTranslation(["components", "common"]) const [value, setValue] = useState("") return ( - {t("components.StringPoolField.forms.addNew.title")} + {t("StringPoolField.forms.addNew.title")} - {t("components.StringPoolField.forms.addNew.description")} + {t("StringPoolField.forms.addNew.description")} setValue(e.target.value)} - label={t("components.StringPoolField.forms.addNew.label")} + label={t("StringPoolField.forms.addNew.label")} name="addNew" fullWidth autoFocus @@ -53,14 +53,14 @@ export default function AddNewDialog({ diff --git a/src/components/widgets/StringPoolField/StringPoolField.tsx b/src/components/widgets/StringPoolField/StringPoolField.tsx index 1263769..7f47860 100644 --- a/src/components/widgets/StringPoolField/StringPoolField.tsx +++ b/src/components/widgets/StringPoolField/StringPoolField.tsx @@ -51,7 +51,7 @@ export default function StringPoolField({ fullWidth, ...props }: StringPoolFieldProps): ReactElement { - const {t} = useTranslation() + const {t} = useTranslation("components") const reversedPoolsMap = useMemo( () => Object.fromEntries(Object.entries(pools).map(([key, value]) => [value, key])), @@ -155,9 +155,7 @@ export default function StringPoolField({ - + )} diff --git a/src/components/widgets/TimedButton.tsx b/src/components/widgets/TimedButton.tsx index bdcd711..0579de8 100644 --- a/src/components/widgets/TimedButton.tsx +++ b/src/components/widgets/TimedButton.tsx @@ -18,7 +18,7 @@ export default function TimedButton({ disabled: parentDisabled = false, ...props }: TimedButtonProps): ReactElement { - const {t} = useTranslation() + const {t} = useTranslation("components") const [startDate, resetInterval] = useIntervalUpdate(1000) @@ -35,9 +35,7 @@ export default function TimedButton({ }} > {children} - {secondsLeft > 0 && ( - {t("components.TimedButton.remainingTime", {count: secondsLeft})} - )} + {secondsLeft > 0 && {t("TimedButton.remainingTime", {count: secondsLeft})}} ) } diff --git a/src/route-widgets/LoginRoute/ConfirmCodeForm/ResendMailButton.tsx b/src/route-widgets/LoginRoute/ConfirmCodeForm/ResendMailButton.tsx index 3d52a46..152a1ae 100644 --- a/src/route-widgets/LoginRoute/ConfirmCodeForm/ResendMailButton.tsx +++ b/src/route-widgets/LoginRoute/ConfirmCodeForm/ResendMailButton.tsx @@ -19,8 +19,8 @@ export default function ResendMailButton({ email, sameRequestToken, }: ResendMailButtonProps): ReactElement { + const {t} = useTranslation("components") const settings = useLoaderData() as ServerSettings - const {t} = useTranslation() const mutation = useMutation(() => resendEmailLoginCode({ @@ -37,7 +37,7 @@ export default function ResendMailButton({ startIcon={} onClick={() => mutate()} > - {t("components.ResendMailButton.label")} + {t("ResendMailButton.label")} diff --git a/src/route-widgets/SignupRoute/YouGotMail/ResendMailButton.tsx b/src/route-widgets/SignupRoute/YouGotMail/ResendMailButton.tsx index a6426dc..81f1451 100644 --- a/src/route-widgets/SignupRoute/YouGotMail/ResendMailButton.tsx +++ b/src/route-widgets/SignupRoute/YouGotMail/ResendMailButton.tsx @@ -19,7 +19,7 @@ export default function ResendMailButton({ email, onEmailAlreadyVerified, }: ResendMailButtonProps): ReactElement { - const {t} = useTranslation() + const {t} = useTranslation("components") const settings = useLoaderData() as ServerSettings const mutation = useMutation( @@ -41,7 +41,7 @@ export default function ResendMailButton({ startIcon={} onClick={() => mutate()} > - {t("components.ResendMailButton.label")} + {t("ResendMailButton.label")}