working translation

frontend/app/src/config/store.ts

@@ -17,9 +17,18 @@ const initialAuthDataState: AuthDataType = {
   user: null,
 };
 
+export type SettingsType = {
+  language: string | null;
+};
+
+const initialSettingsState: SettingsType = {
+  language: null,
+};
+
 export type StorePrototype = {
   AuthApi: ReducerType;
   auth: AuthDataType;
+  settings: SettingsType;
 };
 
 export const updateToken = createAction<string>("auth/updateToken");
@@ -27,6 +36,9 @@ export const getLocalToken = createAction("auth/getLocalToken");
 export const updateUser = createAction<User>("auth/updateUser");
 export const logOut = createAction("auth/logOut");
 
+export const setLanguage = createAction<string>("settings/setLanguage");
+export const loadLanguage = createAction("settings/loadLanguage");
+
 export const store = configureStore({
   reducer: {
     // Add the generated reducer as a specific top-level slice
@@ -51,6 +63,20 @@ export const store = configureStore({
         state.user = null;
       });
     }),
+    settings: createReducer(initialSettingsState, (builder) => {
+      builder.addCase(setLanguage, (state, action) => {
+        state.language = action.payload || "en";
+        localStorage.setItem("language", action.payload || "en");
+      });
+      builder.addCase(loadLanguage, (state) => {
+        const language: string | null = localStorage.getItem("language");
+        if (language) {
+          state.language = language;
+        } else {
+          state.language = "en";
+        }
+      });
+    }),
   },
   // Adding the api middleware enables caching, invalidation, polling,
   // and other useful features of `rtk-query`.

frontend/app/src/config/translation.ts

@@ -0,0 +1,21 @@
+import trMapJson from "./translationMap.json";
+import { store } from "./store";
+
+const trMap: unknown = trMapJson;
+
+const tr = (phrase: string): string => {
+  const currentLanguage = store.getState().settings.language;
+  if (!currentLanguage || currentLanguage === "en") {
+    return phrase;
+  }
+  return (
+    ((trMap &&
+      typeof trMap === "object" &&
+      trMap[phrase as keyof object] &&
+      trMap[phrase as keyof object][
+        currentLanguage as keyof object
+      ]) as string) || phrase
+  );
+};
+
+export default tr;

frontend/app/src/config/translationMap.json

@@ -0,0 +1,53 @@
+{
+    "Queuing has never been so simple": {
+        "ru": "Организация очередей еще никогда не была настолько простой"
+    },
+    "Log in": {
+        "ru": "Войти"
+    },
+    "Log out": {
+        "ru": "Выйти"
+    },
+    "Register": {
+        "ru": "Зарегистрироваться"
+    },
+    "Username": {
+        "ru": "Логин"
+    },
+    "Password": {
+        "ru": "Пароль"
+    },
+    "Display name": {
+        "ru": "Отображаемое имя"
+    },
+    "Repeat password": {
+        "ru": "Повторите пароль"
+    },
+    "Cancel": {
+        "ru": "Отмена"
+    },
+    "Join a queue": {
+        "ru": "Присоединиться к очереди"
+    },
+    "Take a tour": {
+        "ru": "Взглянуть на функционал"
+    },
+    "Please input your Username!": {
+        "ru": "Пожалуйста, введите ваш Логин!"
+    },
+    "Please input your Password!": {
+        "ru": "Пожалуйста, введите ваш Пароль!"
+    },
+    "Please confirm your password!": {
+        "ru": "Пожалуйста, подтвердите ваш пароль!"
+    },
+    "The new password that you entered do not match!": {
+        "ru": "Пароли не совпадают!"
+    },
+    "Registration failed!": {
+        "ru": "Регистрация не удалась!"
+    },
+    "Login failed!": {
+        "ru": "Вход не удался!"
+    }
+}