diff options
author | Kristóf Marussy <kristof@marussy.com> | 2022-03-30 21:47:45 +0200 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2022-05-16 00:54:57 +0200 |
commit | 85d91c64b5b3ec31df8acecd68a1fa6a68d57ff9 (patch) | |
tree | 277ab45a66a1c74e2d0a885c8a354aea27128d12 /packages/renderer/src/components/sidebar/ServiceSwitcher.tsx | |
parent | feat(main): Translation hot reloading during development (diff) | |
download | sophie-85d91c64b5b3ec31df8acecd68a1fa6a68d57ff9.tar.gz sophie-85d91c64b5b3ec31df8acecd68a1fa6a68d57ff9.tar.zst sophie-85d91c64b5b3ec31df8acecd68a1fa6a68d57ff9.zip |
feat(renderer): Renderer translations
Add react-i18n to make us able to use i18next translations in the
renderer process just like we do in the main process.
Translations are hot-reloaded automatically.
Signed-off-by: Kristóf Marussy <kristof@marussy.com>
Diffstat (limited to 'packages/renderer/src/components/sidebar/ServiceSwitcher.tsx')
-rw-r--r-- | packages/renderer/src/components/sidebar/ServiceSwitcher.tsx | 34 |
1 files changed, 33 insertions, 1 deletions
diff --git a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx index 404149b..010c716 100644 --- a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx +++ b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx | |||
@@ -21,9 +21,12 @@ | |||
21 | import Tab from '@mui/material/Tab'; | 21 | import Tab from '@mui/material/Tab'; |
22 | import Tabs from '@mui/material/Tabs'; | 22 | import Tabs from '@mui/material/Tabs'; |
23 | import { alpha, styled } from '@mui/material/styles'; | 23 | import { alpha, styled } from '@mui/material/styles'; |
24 | import type { TFunction } from 'i18next'; | ||
24 | import { observer } from 'mobx-react-lite'; | 25 | import { observer } from 'mobx-react-lite'; |
25 | import React from 'react'; | 26 | import React from 'react'; |
27 | import { useTranslation } from 'react-i18next'; | ||
26 | 28 | ||
29 | import type Service from '../../stores/Service'; | ||
27 | import { useStore } from '../StoreProvider'; | 30 | import { useStore } from '../StoreProvider'; |
28 | 31 | ||
29 | import ServiceIcon from './ServiceIcon'; | 32 | import ServiceIcon from './ServiceIcon'; |
@@ -63,7 +66,36 @@ const ServiceSwitcherTab = styled(Tab, { | |||
63 | }, | 66 | }, |
64 | })); | 67 | })); |
65 | 68 | ||
69 | function getServiceTitle(service: Service, t: TFunction) { | ||
70 | const { | ||
71 | settings: { name }, | ||
72 | directMessageCount, | ||
73 | indirectMessageCount, | ||
74 | } = service; | ||
75 | let messagesText: string | undefined; | ||
76 | if (indirectMessageCount > 0) { | ||
77 | messagesText = | ||
78 | directMessageCount > 0 | ||
79 | ? t('service.title.directAndIndirectMessageCount', { | ||
80 | directMessageCount, | ||
81 | indirectMessageCount, | ||
82 | }) | ||
83 | : t('service.title.indirectMessageCount', { | ||
84 | count: indirectMessageCount, | ||
85 | }); | ||
86 | } else if (directMessageCount > 0) { | ||
87 | messagesText = t('service.title.directMessageCount', { | ||
88 | count: directMessageCount, | ||
89 | }); | ||
90 | } | ||
91 | if (messagesText === undefined) { | ||
92 | return t('service.title.nameWithNoMessages', { name }); | ||
93 | } | ||
94 | return t('service.title.nameWithMessages', { name, messages: messagesText }); | ||
95 | } | ||
96 | |||
66 | function ServiceSwitcher(): JSX.Element { | 97 | function ServiceSwitcher(): JSX.Element { |
98 | const { t } = useTranslation(); | ||
67 | const { settings, services } = useStore(); | 99 | const { settings, services } = useStore(); |
68 | const { selectedService } = settings; | 100 | const { selectedService } = settings; |
69 | 101 | ||
@@ -81,7 +113,7 @@ function ServiceSwitcher(): JSX.Element { | |||
81 | key={service.id} | 113 | key={service.id} |
82 | value={service.id} | 114 | value={service.id} |
83 | icon={<ServiceIcon service={service} />} | 115 | icon={<ServiceIcon service={service} />} |
84 | aria-label={service.settings.name} | 116 | aria-label={getServiceTitle(service, t)} |
85 | /> | 117 | /> |
86 | ))} | 118 | ))} |
87 | </ServiceSwitcherRoot> | 119 | </ServiceSwitcherRoot> |