feat(i18n): localize siderbar menu

bas-kirill · Aug 30, 2024 · 346244f · 346244f
1 parent cbee10b
commit 346244f
Show file tree

Hide file tree

Showing 17 changed files with 206 additions and 56 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -17,10 +17,12 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "axios": "^1.7.2",
+    "i18next": "^23.14.0",
     "js-base64": "^3.7.7",
     "jwt-decode": "^4.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-i18next": "^15.0.1",
     "react-router-dom": "^6.25.1",
     "react-scripts": "5.0.1",
     "react-slideshow-image": "^4.3.1",

diff --git a/client/src/generated/model/instrument-detail-without-id.ts b/client/src/generated/model/instrument-detail-without-id.ts
@@ -23,6 +23,9 @@ import type { Country } from "./country";
 import type { InstrumentName } from "./instrument-name";
 // May contain unused imports in some cases
 // @ts-ignore
+import type { InstrumentType } from "./instrument-type";
+// May contain unused imports in some cases
+// @ts-ignore
 import type { ManufactureDate } from "./manufacture-date";
 // May contain unused imports in some cases
 // @ts-ignore
@@ -45,10 +48,10 @@ export interface InstrumentDetailWithoutId {
   instrument_name: InstrumentName;
   /**
    *
-   * @type {string}
+   * @type {InstrumentType}
    * @memberof InstrumentDetailWithoutId
    */
-  instrument_type_code: string;
+  instrument_type: InstrumentType;
   /**
    *
    * @type {ManufacturerName}

diff --git a/client/src/i18n.ts b/client/src/i18n.ts
@@ -0,0 +1,50 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+export const I18N_INSTRUMENT_TYPE_FILTER = "instrument.type.filter";
+export const I18N_INSTRUMENT_CARD_MANUFACTURER = "instrument.card.manufacturer";
+export const I18N_MANUFACTURER_DATE = "instrument.manufacturer.manufacture.date";
+export const I18N_RELEASE_DATE = "instrument.manufacturer.release.date"
+export const I18N_COUNTRY = "country";
+export const I18N_INSTRUMENT_BASIC_MATERIALS = "instrument.basic.materials";
+export const I18N_INSTRUMENT_DATE_FROM = "instrument.date.from";
+export const I18N_INSTRUMENT_DATE_TO = "instrument.date.to";
+
+const resources = {
+  en: {
+    translation: {
+      [I18N_INSTRUMENT_TYPE_FILTER]: "Type",
+      [I18N_INSTRUMENT_CARD_MANUFACTURER]: "Manufacturer",
+      [I18N_MANUFACTURER_DATE]: "Manufacturer Date",
+      [I18N_RELEASE_DATE]: "Release Date",
+      [I18N_COUNTRY]: "Country",
+      [I18N_INSTRUMENT_BASIC_MATERIALS]: "Basic Materials",
+      [I18N_INSTRUMENT_DATE_FROM]: "From",
+      [I18N_INSTRUMENT_DATE_TO]: "To",
+    }
+  },
+  ru: {
+    translation: {
+      [I18N_INSTRUMENT_TYPE_FILTER]: "Тип",
+      [I18N_INSTRUMENT_CARD_MANUFACTURER]: "Производитель",
+      [I18N_MANUFACTURER_DATE]: "Дата производства",
+      [I18N_RELEASE_DATE]: "Дата выпуска",
+      [I18N_COUNTRY]: "Страна",
+      [I18N_INSTRUMENT_BASIC_MATERIALS]: "Основные материалы",
+      [I18N_INSTRUMENT_DATE_FROM]: "С",
+      [I18N_INSTRUMENT_DATE_TO]: "По",
+    }
+  }
+};
+
+i18n
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources,
+    lng: window.navigator.language,
+    interpolation: {
+      escapeValue: false // react already safes from xss
+    }
+  });
+
+export default i18n;
diff --git a/client/src/index.tsx b/client/src/index.tsx
@@ -1,16 +1,16 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import "./i18n";
 import App from "./app/App";
 import { ThemeProvider } from "shared/dark-mode/use-dark-mode";
 
 const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement,
+  document.getElementById("root") as HTMLElement
 );
 root.render(
   <ThemeProvider>
     <React.StrictMode>
       <App />
-    </React.StrictMode>
-    ,
-  </ThemeProvider>,
+    </React.StrictMode>,
+  </ThemeProvider>
 );
diff --git a/client/src/pages/create-instrument/ui/CreateInstrument.page.tsx b/client/src/pages/create-instrument/ui/CreateInstrument.page.tsx
@@ -5,8 +5,11 @@ import { FooterWidget } from "widgets/footer";
 import { Form, useActionData, useLoaderData } from "react-router-dom";
 import { CreateInstrumentLoader } from "pages/create-instrument";
 import { CreateInstrumentAction } from "pages/create-instrument/api/action";
+import { I18N_COUNTRY, I18N_MANUFACTURER_DATE, I18N_RELEASE_DATE } from "../../../i18n";
+import { useTranslation } from "react-i18next";
 
 export const CreateInstrumentPage = () => {
+  const { t, i18n } = useTranslation();
   const loader = useLoaderData() as CreateInstrumentLoader;
   const actionData = useActionData() as CreateInstrumentAction;
 
@@ -48,10 +51,10 @@ export const CreateInstrumentPage = () => {
           >
             {loader.instrumentTypes.map((instrumentType) => (
               <option
-                key={instrumentType.instrument_type}
-                value={instrumentType.instrument_type}
+                key={instrumentType.code}
+                value={instrumentType.localized_text}
               >
-                {instrumentType.instrument_type}
+                {instrumentType.localized_text}
               </option>
             ))}
           </select>
@@ -85,7 +88,7 @@ export const CreateInstrumentPage = () => {
             htmlFor="manufacturer-date"
             className={styles.create_instrument__form__field__key}
           >
-            Manufacturer date
+            {t(I18N_MANUFACTURER_DATE)}
           </label>
 
           <input
@@ -103,7 +106,7 @@ export const CreateInstrumentPage = () => {
             htmlFor="release-date"
             className={styles.create_instrument__form__field__key}
           >
-            Release date
+            {t(I18N_RELEASE_DATE)}
           </label>
 
           <input
@@ -121,7 +124,7 @@ export const CreateInstrumentPage = () => {
             htmlFor="country"
             className={styles.create_instrument__form__field__key}
           >
-            Country
+            {t(I18N_COUNTRY)}
           </label>
 
           <select

diff --git a/client/src/pages/edit-instrument/ui/EditInstrument.page.tsx b/client/src/pages/edit-instrument/ui/EditInstrument.page.tsx
@@ -7,10 +7,13 @@ import { EditInstrumentLoader } from "pages/edit-instrument/api/loader";
 import { EditInstrumentAction } from "pages/edit-instrument/api/action";
 import { InstrumentBasicMaterialField } from "./InstrumentBasicMaterial.field";
 import { useJwt } from "shared/jwt/use-jwt";
+import { I18N_COUNTRY, I18N_MANUFACTURER_DATE, I18N_RELEASE_DATE } from "../../../i18n";
+import { useTranslation } from "react-i18next";
 
 export const EditInstrumentPage = () => {
   useJwt();
 
+  const { t, i18n } = useTranslation();
   const loader = useLoaderData() as EditInstrumentLoader;
   const actionData = useActionData() as EditInstrumentAction;
 
@@ -68,17 +71,14 @@ export const EditInstrumentPage = () => {
             <select
               name="instrument-type"
               defaultValue={
-                loader.instrumentForEdit.instrument_type.instrument_type
+                loader.instrumentForEdit.instrument_type.localized_text
               }
               required
               className={styles.edit_instrument__form__field__value}
             >
               {loader.instrumentTypes.map((instrumentType) => (
-                <option
-                  key={instrumentType.instrument_type}
-                  value={instrumentType.instrument_type}
-                >
-                  {instrumentType.instrument_type}
+                <option key={instrumentType.code} value={instrumentType.code}>
+                  {instrumentType.localized_text}
                 </option>
               ))}
             </select>
@@ -116,7 +116,7 @@ export const EditInstrumentPage = () => {
               htmlFor="manufacturer-date"
               className={styles.edit_instrument__form__field__key}
             >
-              Manufacturer date
+              {t(I18N_MANUFACTURER_DATE)}
             </label>
 
             <input
@@ -137,7 +137,7 @@ export const EditInstrumentPage = () => {
               htmlFor="release-date"
               className={styles.edit_instrument__form__field__key}
             >
-              Release date
+              {t(I18N_RELEASE_DATE)}
             </label>
 
             <input
@@ -156,7 +156,7 @@ export const EditInstrumentPage = () => {
               htmlFor="country"
               className={styles.edit_instrument__form__field__key}
             >
-              Country
+              {t(I18N_COUNTRY)}
             </label>
 
             <select