refactor: Improve i18n for components

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"
+      }
+    }
+  }
+}

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"
         }
     }
 }
-    },
-}

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<boolean>(false)
@@ -97,18 +97,18 @@ export default function LockNavigationContextProvider({
 				{children}
 			</LockNavigationContext.Provider>
 			<Dialog open={showDialog} onClose={cancel}>
-				<DialogTitle>{t("components.LockNavigationContextProvider.title")}</DialogTitle>
+				<DialogTitle>{t("LockNavigationContextProvider.title")}</DialogTitle>
 				<DialogContent>
 					<DialogContentText>
-						{t("components.LockNavigationContextProvider.description")}
+						{t("LockNavigationContextProvider.description")}
 					</DialogContentText>
 				</DialogContent>
 				<DialogActions>
 					<Button startIcon={<TiCancel />} onClick={cancel}>
-						{t("general.cancelLabel")}
+						{t("general.cancelLabel", {ns: "common"})}
 					</Button>
 					<Button startIcon={<MdLogout />} onClick={leave}>
-						{t("components.LockNavigationContextProvider.continueLabel")}
+						{t("LockNavigationContextProvider.continueLabel")}
 					</Button>
 				</DialogActions>
 			</Dialog>

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 (
 		<Grid container spacing={2} flexDirection="column" alignItems="center">
@@ -20,9 +20,7 @@ export default function ErrorLoadingDataMessage({
 				<Alert severity="error">{message}</Alert>
 			</Grid>
 			<Grid item>
-				<Button onClick={onRetry}>
+				<Button onClick={onRetry}>{t("ErrorLoadingDataMessage.tryAgain")}</Button>
-					{t("components.ErrorLoadingDataMessage.tryAgain")}
-				</Button>
 			</Grid>
 		</Grid>
 	)

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 (
 			<Button startIcon={<IoMdMailOpen />} variant="text" href={APP_LINK_MAP[domain].android}>
-				{t("components.OpenMailButton.label")}
+				{t("OpenMailButton.label")}
 			</Button>
 		)
 	}

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<string>("")
 
 	return (
 		<Dialog open={open} onClose={onClose}>
-			<DialogTitle>{t("components.StringPoolField.forms.addNew.title")}</DialogTitle>
+			<DialogTitle>{t("StringPoolField.forms.addNew.title")}</DialogTitle>
 			<DialogContent>
 				<DialogContentText>
-					{t("components.StringPoolField.forms.addNew.description")}
+					{t("StringPoolField.forms.addNew.description")}
 				</DialogContentText>
 				<Box my={2}>
 					<TextField
 						value={value}
 						onChange={e => 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({
 			</DialogContent>
 			<DialogActions>
 				<Button onClick={onClose} startIcon={<TiCancel />} variant="text">
-					{t("general.cancelLabel")}
+					{t("general.cancelLabel", {ns: "common"})}
 				</Button>
 				<Button
 					onClick={() => onCreated(value)}
 					variant="contained"
 					startIcon={<MdCheck />}
 				>
-					{t("components.StringPoolField.forms.addNew.submit")}
+					{t("StringPoolField.forms.addNew.submit")}
 				</Button>
 			</DialogActions>
 		</Dialog>

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({
 							<ListItemIcon>
 								<MdAdd />
 							</ListItemIcon>
-							<ListItemText
+							<ListItemText primary={t("StringPoolField.addCustom.label")} />
-								primary={t("components.StringPoolField.addCustom.label")}
-							/>
 						</MenuItem>
 					)}
 				</Select>

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({
 			}}
 		>
 			<span>{children} </span>
-			{secondsLeft > 0 && (
+			{secondsLeft > 0 && <span>{t("TimedButton.remainingTime", {count: secondsLeft})}</span>}
-				<span>{t("components.TimedButton.remainingTime", {count: secondsLeft})}</span>
-			)}
 		</LoadingButton>
 	)
 }

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<SimpleDetailResponse, AxiosError, void>(() =>
 		resendEmailLoginCode({
@@ -37,7 +37,7 @@ export default function ResendMailButton({
 				startIcon={<MdMail />}
 				onClick={() => mutate()}
 			>
-				{t("components.ResendMailButton.label")}
+				{t("ResendMailButton.label")}
 			</TimedButton>
 			<MutationStatusSnackbar mutation={mutation} />
 		</>

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<ResendEmailVerificationCodeResponse, AxiosError, void>(
@@ -41,7 +41,7 @@ export default function ResendMailButton({
 				startIcon={<MdMail />}
 				onClick={() => mutate()}
 			>
-				{t("components.ResendMailButton.label")}
+				{t("ResendMailButton.label")}
 			</TimedButton>
 			<MutationStatusSnackbar mutation={mutation} />
 		</>