Feature/update i18next to v23.x (#391)

* Update i18next to v23.x

Update to version 23.2.7

* Use new "ParseKeys" (old: "TFuncKey") type

* Remove unnecessary casts to string

Not needed anymore with the latest version

package.json

@@ -31,7 +31,7 @@
     "@vitejs/plugin-react": "^4.0.0",
     "axios": "^1.4.0",
     "file-selector": "^0.6.0",
-    "i18next": "^22.5.0",
+    "i18next": "^23.2.7",
     "i18next-browser-languagedetector": "^7.0.2",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",

src/components/ExtensionCard.tsx

@@ -159,7 +159,7 @@ export default function ExtensionCard(props: IProps) {
                     sx={{ color: installedState === InstalledState.OBSOLETE ? 'red' : 'inherit' }}
                     onClick={() => handleButtonClick()}
                 >
-                    {t(INSTALLED_STATE_TO_TRANSLATION_KEY_MAP[installedState]) as string}
+                    {t(INSTALLED_STATE_TO_TRANSLATION_KEY_MAP[installedState])}
                 </Button>
             </CardContent>
         </Card>

src/components/library/LibraryOptionsPanel.tsx

@@ -48,7 +48,7 @@ const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
             open={open}
             onClose={onClose}
             tabs={['filter', 'sort', 'display']}
-            tabTitle={(key) => t(TITLES[key]) as string}
+            tabTitle={(key) => t(TITLES[key])}
             tabContent={(key) => {
                 if (key === 'filter') {
                     return (
@@ -70,7 +70,7 @@ const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
                     return SORT_OPTIONS.map(([mode, label]) => (
                         <SortRadioInput
                             key={mode}
-                            label={t(label) as string}
+                            label={t(label)}
                             checked={options.sorts === mode}
                             sortDescending={options.sortDesc}
                             onClick={() =>

src/components/manga/ChapterList.tsx

@@ -168,9 +168,9 @@ const ChapterList: React.FC<IProps> = ({ mangaId }) => {
         }
 
         actionPromise
-            .then(() => makeToast(t(actionsStrings[action].success, { count: chapterIds.length }) as string, 'success'))
+            .then(() => makeToast(t(actionsStrings[action].success, { count: chapterIds.length }), 'success'))
             .then(() => mutate())
-            .catch(() => makeToast(t(actionsStrings[action].error, { count: chapterIds.length }) as string, 'error'));
+            .catch(() => makeToast(t(actionsStrings[action].error, { count: chapterIds.length }), 'error'));
     };
 
     if (isLoading) {

src/components/manga/ChapterOptions.tsx

@@ -38,7 +38,7 @@ const ChapterOptions: React.FC<IProps> = ({ open, onClose, options, optionsDispa
             onClose={onClose}
             minHeight={150}
             tabs={['filter', 'sort', 'display']}
-            tabTitle={(key) => t(TITLES[key]) as string}
+            tabTitle={(key) => t(TITLES[key])}
             tabContent={(key) => {
                 if (key === 'filter') {
                     return (
@@ -83,7 +83,7 @@ const ChapterOptions: React.FC<IProps> = ({ open, onClose, options, optionsDispa
                     return SORT_OPTIONS.map(([mode, label]) => (
                         <SortRadioInput
                             key={mode}
-                            label={t(label) as string}
+                            label={t(label)}
                             checked={options.sortBy === mode}
                             sortDescending={options.reverse}
                             onClick={() =>

src/components/navbar/navigation/DesktopSideBar.tsx

@@ -48,7 +48,7 @@ export default function DesktopSideBar({ navBarItems }: IProps) {
                 <Link to={path} style={{ color: 'inherit', textDecoration: 'none' }} key={path}>
                     <ListItemButton disableRipple key={title}>
                         <ListItemIcon sx={{ minWidth: '0' }}>
-                            <Tooltip placement="right" title={t(title) as string}>
+                            <Tooltip placement="right" title={t(title)}>
                                 {iconFor(path, IconComponent, SelectedIconComponent)}
                             </Tooltip>
                         </ListItemIcon>

src/components/navbar/navigation/MobileBottomBar.tsx

@@ -70,7 +70,7 @@ export default function MobileBottomBar({ navBarItems }: IProps) {
                                             : 'grey.600',
                                 }}
                             >
-                                {t(title) as string}
+                                {t(title)}
                             </Box>
                         </Box>
                     </ListItemButton>

src/screens/Library.tsx

@@ -126,7 +126,7 @@ export default function Library() {
             <LibraryMangaGrid
                 mangas={mangas}
                 lastLibraryUpdate={lastLibraryUpdate}
-                message={t('library.error.label.empty') as string}
+                message={t('library.error.label.empty')}
                 isLoading={activeTab != null && mangaLoading}
             />
         );
@@ -173,7 +173,7 @@ export default function Library() {
                             <LibraryMangaGrid
                                 mangas={mangas}
                                 lastLibraryUpdate={lastLibraryUpdate}
-                                message={t('library.error.label.empty') as string}
+                                message={t('library.error.label.empty')}
                                 isLoading={mangaLoading}
                             />
                         ))}

src/screens/Reader.tsx

@@ -143,7 +143,7 @@ export default function Reader() {
                     [ChapterOffset.NEXT]: 'reader.error.label.unable_to_get_next_chapter_skip_dup',
                 };
 
-                makeToast(t(offsetToTranslationKeyMap[offset]) as string, 'error');
+                makeToast(t(offsetToTranslationKeyMap[offset]), 'error');
             } finally {
                 setRetrievingNextChapter(false);
             }

src/screens/SourceMangas.tsx

@@ -191,7 +191,7 @@ export default function SourceMangas() {
     const { data: source } = requestManager.useGetSource(sourceId);
     const [triggerDataRefresh, setTriggerDataRefresh] = useState(false);
 
-    const message = !isLoading ? (t(SOURCE_CONTENT_TYPE_TO_ERROR_MSG_KEY[contentType]) as string) : undefined;
+    const message = !isLoading ? t(SOURCE_CONTENT_TYPE_TO_ERROR_MSG_KEY[contentType]) : undefined;
     const isLocalSource = sourceId === '0';
     const messageExtra = isLocalSource ? (
         <>

src/screens/util/Extensions.ts

@@ -51,5 +51,5 @@ export const isExtensionStateOrLanguage = (languageCode: string): boolean =>
 
 export const translateExtensionLanguage = (languageCode: string): string =>
     isExtensionStateOrLanguage(languageCode)
-        ? (t(extensionLanguageToTranslationKey[languageCode as ExtensionState | DefaultLanguage]) as string)
+        ? t(extensionLanguageToTranslationKey[languageCode as ExtensionState | DefaultLanguage])
         : langCodeToName(languageCode);

src/typings.ts

@@ -8,7 +8,7 @@
 
 import { OverridableComponent } from '@mui/material/OverridableComponent';
 import { SvgIconTypeMap } from '@mui/material/SvgIcon/SvgIcon';
-import { TFuncKey } from 'i18next';
+import { ParseKeys } from 'i18next';
 import { Location } from 'react-router-dom';
 
 type GenericLocation<State = any> = Omit<Location, 'state'> & { state?: State };
@@ -19,7 +19,7 @@ declare module 'react-router-dom' {
     export function useLocation<State = any>(): GenericLocation<State>;
 }
 
-export type TranslationKey = TFuncKey;
+export type TranslationKey = ParseKeys;
 
 export interface IExtension {
     name: string;

yarn.lock

@@ -1877,12 +1877,12 @@ i18next-browser-languagedetector@^7.0.2:
   dependencies:
     "@babel/runtime" "^7.19.4"
 
-i18next@^22.5.0:
+i18next@^23.2.7:
-  version "22.5.1"
+  version "23.2.7"
-  resolved "https://registry.yarnpkg.com/i18next/-/i18next-22.5.1.tgz#99df0b318741a506000c243429a7352e5f44d424"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.2.7.tgz#1e528b71061ca62668d7d2b6586fb4e6cfe5adb4"
-  integrity sha512-8TGPgM3pAD+VRsMtUMNknRz3kzqwp/gPALrWMsDnmC1mKqJwpWyooQRLMcbTwq8z8YwSmuj+ZYvc+xCuEpkssA==
+  integrity sha512-EsbHHvF6b+p+B6Cht5fYWY7VE/WYOrqB1+DNwa1UpLTw6mG5g4tc8KCEjUUOSMUA2yqCsdYQP+PqVq5nBMtOtQ==
   dependencies:
-    "@babel/runtime" "^7.20.6"
+    "@babel/runtime" "^7.22.5"
 
 ignore@^5.2.0:
   version "5.2.4"