add i18n (#239)

src/App.tsx

@@ -27,6 +27,7 @@ import SourceConfigure from 'screens/SourceConfigure';
 import SourceMangas from 'screens/SourceMangas';
 import Sources from 'screens/Sources';
 import Updates from 'screens/Updates';
+import 'i18n';
 
 const App: React.FC = () => (
     <AppContext>

src/components/navbar/DefaultNavBar.tsx

@@ -31,11 +31,13 @@ import { createPortal } from 'react-dom';
 import useBackTo from 'util/useBackTo';
 import DesktopSideBar from 'components/navbar/navigation/DesktopSideBar';
 import MobileBottomBar from 'components/navbar/navigation/MobileBottomBar';
+// import { useTranslation } from 'react-i18next';
+import { t } from 'i18next';
 
 const navbarItems: Array<NavbarItem> = [
     {
         path: '/library',
-        title: 'Library',
+        title: t('DefaultNavBar.navbarItems.Library'),
         SelectedIconComponent: CollectionsBookmarkIcon,
         IconComponent: CollectionsOutlinedBookmarkIcon,
         show: 'both',
@@ -85,6 +87,7 @@ const navbarItems: Array<NavbarItem> = [
 ];
 
 export default function DefaultNavBar() {
+    // const { t } = useTranslation();
     const { title, action, override } = useContext(NavBarContext);
     const backTo = useBackTo();
 

src/i18n/index.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import { use } from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import resources from 'i18n/translations';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+const i18n = use(initReactI18next)
+    .use(LanguageDetector)
+    .init({
+        resources,
+
+        fallbackLng: 'en',
+        interpolation: {
+            escapeValue: false,
+        },
+        debug: true,
+    });
+
+export default i18n;

src/i18n/translations.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+const resources = {
+    en: {
+        translation: {
+            'DefaultNavBar.navbarItems.Library': 'Library',
+            'screens/Library/Library': 'Library',
+        },
+    },
+    fr: {
+        translation: {
+            'DefaultNavBar.navbarItems.Library': 'fr(Library)',
+            'screens/Library/Library': 'fr(Library)',
+        },
+    },
+};
+
+export default resources;

src/screens/Library.tsx

@@ -17,15 +17,17 @@ import AppbarSearch from 'components/util/AppbarSearch';
 import { useQueryParam, NumberParam } from 'use-query-params';
 import { useQuery } from 'util/client';
 import UpdateChecker from 'components/library/UpdateChecker';
+import { useTranslation } from 'react-i18next';
 
 export default function Library() {
+    const { t } = useTranslation();
     const [lastLibraryUpdate, setLastLibraryUpdate] = useState(Date.now());
     const { data: tabsData, error: tabsError, loading } = useQuery<ICategory[]>('/api/v1/category');
     const tabs = tabsData ?? [];
 
     const [tabSearchParam, setTabSearchParam] = useQueryParam('tab', NumberParam);
 
-    const activeTab = tabs.find((t) => t.order === tabSearchParam) ?? tabs[0];
+    const activeTab = tabs.find((tab) => tab.order === tabSearchParam) ?? tabs[0];
     const {
         data: mangaData,
         error: mangaError,
@@ -37,7 +39,7 @@ export default function Library() {
 
     const { setTitle, setAction } = useContext(NavbarContext);
     useEffect(() => {
-        setTitle('Library');
+        setTitle(t('screens/Library/Library'));
         setAction(
             <>
                 <AppbarSearch />