diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index a3088624..e461eb82 100644 --- a/src/assets/locales/en.json +++ b/src/assets/locales/en.json @@ -393,6 +393,28 @@ "colorLabel": "Color" }, "connections": { + "setup": { + "errorStatus": { + "title": "Something needs your attention", + "description": "It seems that one or more items in this setup need your attention." + }, + "unsetStatus": { + "title": "You haven't gone through setup", + "description": "Please click the button to the right to start the setup process." + }, + "successStatus": { + "title": "Everything is set up!", + "description": "All things are in place for you to start watching your favourite media." + }, + "redoSetup": "Redo setup", + "doSetup": "Do setup", + "itemError": "There is something wrong with this setting. Go through setup again to fix it.", + "items": { + "extension": "Extension", + "proxy": "Custom proxy", + "default": "Default setup" + } + }, "server": { "description": "If you would like to connect to a custom backend to store your data, enable this and provide the URL.", "label": "Custom server", diff --git a/src/pages/parts/settings/SetupPart.tsx b/src/pages/parts/settings/SetupPart.tsx index 478722c6..e9508d48 100644 --- a/src/pages/parts/settings/SetupPart.tsx +++ b/src/pages/parts/settings/SetupPart.tsx @@ -1,6 +1,6 @@ import classNames from "classnames"; -import { t } from "i18next"; import { ReactNode } from "react"; +import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; import { useAsync } from "react-use"; @@ -78,6 +78,7 @@ function SetupCheckList(props: { grey?: boolean; children?: ReactNode; }) { + const { t } = useTranslation(); const statusMap: Record = { error: "error", success: "success", @@ -97,17 +98,16 @@ function SetupCheckList(props: {

{props.children}

{props.status === "error" ? (

- There is something wrong with this setting. Go through setup again - to fix it. + {t("settings.connections.setup.itemError")}

) : null}
@@ -116,22 +116,29 @@ function SetupCheckList(props: { } export function SetupPart() { + const { t } = useTranslation(); const navigate = useNavigate(); const { loading, setupStates, globalState } = useIsSetup(); if (loading || !setupStates) return

Loading states...

; - const textLookupMap: Record = { + const textLookupMap: Record< + Status, + { title: string; desc: string; button: string } + > = { error: { - title: "err1", - desc: "err2", + title: "settings.connections.setup.errorStatus.title", + desc: "settings.connections.setup.errorStatus.description", + button: "settings.connections.setup.redoSetup", }, success: { - title: "success1", - desc: "success2", + title: "settings.connections.setup.successStatus.title", + desc: "settings.connections.setup.successStatus.description", + button: "settings.connections.setup.redoSetup", }, unset: { - title: "unset1", - desc: "unset2", + title: "settings.connections.setup.unsetStatus.title", + desc: "settings.connections.setup.unsetStatus.description", + button: "settings.connections.setup.doSetup", }, }; @@ -162,18 +169,18 @@ export function SetupPart() { {t(textLookupMap[globalState].desc)}

- Extension + {t("settings.connections.setup.items.extension")} - Custom proxy + {t("settings.connections.setup.items.proxy")} - Default setup + {t("settings.connections.setup.items.default")}