Merge pull request #147 from bas-kirill/feature/instrument-type-filte…

…rs-localization-client feat(instrument-type-filters): add localization for client side
bas-kirill · Aug 30, 2024 · abdf425 · abdf425
2 parents 31136f0 + 346244f
commit abdf425
Show file tree

Hide file tree

Showing 18 changed files with 207 additions and 58 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-type.ts b/client/src/generated/model/instrument-type.ts
@@ -29,5 +29,5 @@ export interface InstrumentType {
    * @type {string}
    * @memberof InstrumentType
    */
-  localized_text: string;
+  localized_text?: string;
 }
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

diff --git a/client/src/shared/instrument-card/ui/InstrumentDescription.tsx b/client/src/shared/instrument-card/ui/InstrumentDescription.tsx
@@ -2,17 +2,26 @@ import React from "react";
 import styles from "./styles/InstrumentDescription.module.css";
 import { InstrumentDetail } from "generated/model";
 import { useDarkMode } from "shared/dark-mode/use-dark-mode";
+import { useTranslation } from "react-i18next";
+import {
+  I18N_COUNTRY, I18N_INSTRUMENT_BASIC_MATERIALS,
+  I18N_INSTRUMENT_CARD_MANUFACTURER,
+  I18N_INSTRUMENT_TYPE_FILTER,
+  I18N_MANUFACTURER_DATE,
+  I18N_RELEASE_DATE
+} from "../../../i18n";
 
 interface Props {
   instrument: InstrumentDetail;
 }
 
 export const InstrumentDescription = (props: Props) => {
+  const {t } = useTranslation();
   const { darkMode } = useDarkMode();
 
   const {
     instrument_name: { instrument_name },
-    instrument_type: { instrument_type },
+    instrument_type: { code, localized_text },
     manufacturer_name: { manufacturer_name },
     manufacturer_date: { manufacture_date },
     release_date: { release_date },
@@ -29,17 +38,17 @@ export const InstrumentDescription = (props: Props) => {
         <b
           className={`${darkMode ? styles.secondary__dark : styles.secondary}`}
         >
-          Type
+          {t(I18N_INSTRUMENT_TYPE_FILTER)}
         </b>
         :{" "}
         <span className={`${darkMode ? styles.primary__dark : styles.primary}`}>
-          {instrument_type}
+          {localized_text}
         </span>
         <br />
         <b
           className={`${darkMode ? styles.secondary__dark : styles.secondary}`}
         >
-          Manufacturer
+          {t(I18N_INSTRUMENT_CARD_MANUFACTURER)}
         </b>
         :{" "}
         <span className={`${darkMode ? styles.primary__dark : styles.primary}`}>
@@ -49,7 +58,7 @@ export const InstrumentDescription = (props: Props) => {
         <b
           className={`${darkMode ? styles.secondary__dark : styles.secondary}`}
         >
-          Manufacturer date
+          {t(I18N_MANUFACTURER_DATE)}
         </b>
         :{" "}
         <span className={`${darkMode ? styles.primary__dark : styles.primary}`}>
@@ -59,7 +68,7 @@ export const InstrumentDescription = (props: Props) => {
         <b
           className={`${darkMode ? styles.secondary__dark : styles.secondary}`}
         >
-          Release Date
+          {t(I18N_RELEASE_DATE)}
         </b>
         :{" "}
         <span className={`${darkMode ? styles.primary__dark : styles.primary}`}>
@@ -69,7 +78,7 @@ export const InstrumentDescription = (props: Props) => {
         <b
           className={`${darkMode ? styles.secondary__dark : styles.secondary}`}
         >
-          Country
+          {t(I18N_COUNTRY)}
         </b>
         :{" "}
         <span className={`${darkMode ? styles.primary__dark : styles.primary}`}>
@@ -79,7 +88,7 @@ export const InstrumentDescription = (props: Props) => {
         <b
           className={`${darkMode ? styles.secondary__dark : styles.secondary}`}
         >
-          Basic Materials
+          {t(I18N_INSTRUMENT_BASIC_MATERIALS)}
         </b>
         :
         <>