Translations i18n

frontend-react/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": ["@babel/preset-react"],
+  "plugins": [
+    ["i18next-extract",
+      {
+        "locales": ["en", "uk", "so", "pl"],
+        "outputPath": "src/translations/{{locale}}/{{ns}}.json"
+      }
+    ]
+  ]
+}

frontend-react/extractedTranslations/en/translation.json

@@ -0,0 +1,6 @@
+{
+  "common": {
+    "intro": "",
+    "non_existent": ""
+  }
+}

frontend-react/extractedTranslations/pl/translation.json

@@ -0,0 +1,6 @@
+{
+  "common": {
+    "intro": "Polska Akcja Humanitarna jest polską organizacją pozarządową działającą w Polsce i innych krajach. Jego misją jest \"jest uczynienie świata lepszym miejscem poprzez łagodzenie ludzkiego cierpienia i promowanie wartości humanitarnych\".",
+    "non_existent": ""
+  }
+}

frontend-react/extractedTranslations/so/translation.json

@@ -0,0 +1,6 @@
+{
+  "common": {
+    "intro": "",
+    "non_existent": ""
+  }
+}

frontend-react/extractedTranslations/uk/translation.json

@@ -0,0 +1,6 @@
+{
+  "common": {
+    "intro": "",
+    "non_existent": ""
+  }
+}

frontend-react/package.json

@@ -9,17 +9,24 @@
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.0",
     "case-converter": "^1.0.1",
+    "i18next": "^19.8.4",
+    "i18next-browser-languagedetector": "^6.0.1",
     "js-cookie": "^2.2.1",
     "jwt-decode": "^3.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-i18next": "^11.8.5",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "web-vitals": "^0.2.4"
   },
   "devDependencies": {
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
+    "@babel/preset-react": "^7.12.10",
     "babel-eslint": "^10.1.0",
+    "babel-plugin-i18next-extract": "^0.8.2",
     "eslint": "^7.0.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-config-react-app": "^5.2.1",
@@ -36,7 +43,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "i18n-extract": "NODE_ENV=development babel -f .babelrc 'src/**/*.{js,jsx,ts,tsx}'"
   },
   "eslintConfig": {
     "extends": [

frontend-react/src/i18n.js

@@ -0,0 +1,39 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import enTranslation from './translations/en/translation.json';
+import ukTranslation from './translations/uk/translation.json';
+import soTranslation from './translations/so/translation.json';
+import plTranslation from './translations/pl/translation.json';
+
+const resources = {
+  en: {
+    translation: enTranslation
+  },
+  uk: {
+    translation: ukTranslation
+  },
+  so: {
+    translation: soTranslation
+  },
+  pl: {
+    translation: plTranslation
+  },
+};
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources,
+    fallbackLng: "en",
+    keySeparator: '.',
+    interpolation: {
+      escapeValue: false
+    },
+    detection: {
+      order: ['localStorage', 'navigator'],
+    },
+  });
+
+  export default i18n;

frontend-react/src/index.js

@@ -5,6 +5,7 @@ import { Provider } from 'react-redux';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import store from './store';
+import './i18n';
 
 import './index.css';
 

frontend-react/src/translations/en/translation.json

@@ -0,0 +1,103 @@
+{
+  "common": {
+    "about": "About",
+    "error": "Error",
+    "home": "Home",
+    "intro": "The Polish Humanitarian Action is a Polish non-governmental organisation which operates in Poland and other countries. Its mission is \"to make the world a better place through alleviation of human suffering and promotion of humanitarian values\".",
+    "loading": "Loading",
+    "login": "Login",
+    "logout": "Logout",
+    "new_drive": "Add new drive",
+    "confirm_drive": "Confirm drive",
+    "no": "no",
+    "page_not_found": "The page you're looking for does not exist.",
+    "please_correct_errors": "Please correct the following error(s):",
+    "drives": "Drives",
+    "unexpected_error": "Unexpected error occurred. Please contact the administrator.",
+    "yes": "yes",
+    "are_you_sure": "Are you sure?",
+    "cancel": "Cancel",
+    "skip": "Skip"
+  },
+  "drive_form": {
+    "cars": "Choose a car:",
+    "signature": "Signature",
+    "date": "Date:",
+    "description": "Description:",
+    "distance_traveled": "{distance} km traveled",
+    "drive_added_offline_notification": "Drive will be added to database after restoring connection to the internet",
+    "drive_added_online_notification": "Drive was successfully added to database",
+    "drive_hash": "Drive checksum",
+    "ending_mileage": "Ending mileage:",
+    "end_location": "End location:",
+    "end_mileage_error": "End mileage is incorrect",
+    "fetching_cars_error": "Fetching cars unsuccessful",
+    "no_project_message": "Project is required",
+    "no_cars_message": "No cars available",
+    "passenger": "Passenger:",
+    "passenger_error": "Passenger is required",
+    "project": "Project",
+    "reset": "Reset",
+    "start_location": "Start location:",
+    "starting_mileage": "Starting mileage:",
+    "start_mileage_error": "Start mileage is incorrect",
+    "submit": "Submit"
+  },
+  "passenger_form": {
+    "hash": "Driver code",
+    "invalid_length": "Driver code should be of length 6"
+  },
+  "drives": {
+    "car": "With car:",
+    "description": "Description:",
+    "ending_mileage": "Ending mileage:",
+    "from_to": "From {from} to {destination}",
+    "no_driver_drives": "You have no drives stored in database. You can add a new drive by choosing option from the menu.",
+    "synced_drives": "Previous drives",
+    "project": "Project",
+    "starting_mileage": "Starting mileage:",
+    "unsynced_drives": "Unsynchronized drives",
+    "total_mileage": "Total {total} km",
+    "unverified_drive": "This drive was not verified, contact with a person from PAH responsible for drives to solve it.",
+    "verified_drive": "This drive was verified."
+  },
+  "header": {
+    "polish_humanitarian_action": "Polish Humanitarian Action"
+  },
+  "login": {
+    "login_error": "Login unsuccessful",
+    "password": "Password",
+    "password_required": "Password is required",
+    "user": "User: %{username}",
+    "username": "Username",
+    "username_required": "Username is required"
+  },
+  "logout": {
+    "thank_you": "Thank you!",
+    "successfully_logged_out": "Successfully logged out.",
+    "login_again": "Login again",
+    "offline_logout_warning": "You are offline, so if you log out right now then you won't be able to log in until you become online again.",
+    "logout_warning": "You will be able to log back in only if will be online!"
+  },
+  "refresh": {
+    "new_version": "A new version of website is available.",
+    "reload": "Reload"
+  },
+  "confirmation": {
+    "comment_label": "Please add a comment.",
+    "drive_ok_label": "Was the drive OK?",
+    "submission_success": "Your confirmation was sent. Thank you!",
+    "token_inactive": "Your link expired or has already been confirmed. Thank you!"
+  },
+  "form_errors": {
+    "car": "Car",
+    "end_location": "End location",
+    "end_mileage": "Ending mileage",
+    "hash": "Code",
+    "passenger": "Passenger",
+    "project": "Project",
+    "start_location": "Start location",
+    "start_mileage": "Starting mileage",
+    "validation_error": "{field} is required"
+  }
+}

frontend-react/src/translations/pl/translation.json

@@ -0,0 +1,102 @@
+{
+  "common": {
+    "about": "O nas",
+    "are_you_sure": "Jesteś pewien/pewna?",
+    "cancel": "Anuluj",
+    "confirm_drive": "Potwierdź przejazd",
+    "drives": "Trasy",
+    "error": "Błąd",
+    "home": "Strona główna",
+    "intro": "Polska Akcja Humanitarna jest polską organizacją pozarządową działającą w Polsce i innych krajach. Jego misją jest \"jest uczynienie świata lepszym miejscem poprzez łagodzenie ludzkiego cierpienia i promowanie wartości humanitarnych\".",
+    "loading": "Ładowanie",
+    "login": "Zaloguj",
+    "logout": "Wyloguj",
+    "new_drive": "Dodaj nową trasę",
+    "no": "nie",
+    "page_not_found": "Wyszukiwana strona nie istnieje.",
+    "please_correct_errors": "Proszę poprawić następujące błędy:",
+    "skip": "Pomiń",
+    "unexpected_error": "Wystąpił nieoczekiwany błąd. Prosimy o kontakt z administratorem.",
+    "yes": "tak"
+  },
+  "confirmation": {
+    "comment_label": "Proszę dodać komentarz",
+    "drive_ok_label": "Czy przejazd był OK?",
+    "submission_success": "Potwierdzenie zostało wysłane. Dziękujemy!",
+    "token_inactive": "Link wygasł albo został już potwierdzony. Dziękujemy!"
+  },
+  "drive_form": {
+    "cars": "Wybierz samochód:",
+    "date": "Data:",
+    "description": "Opis trasy:",
+    "distance_traveled": "Łącznie przejechano {distance} km",
+    "drive_added_offline_notification": "Przejazd zostanie dodany do bazy przy ponownym połączeniu z internetem",
+    "drive_added_online_notification": "Przejazd został dodany do bazy i oczekuje na potwierdzenie",
+    "drive_hash": "Kod przejazdu",
+    "end_location": "Lokalizacja końcowa:",
+    "end_mileage_error": "Końcowy stan licznika jest niepoprawny",
+    "ending_mileage": "Końcowy stan licznika:",
+    "fetching_cars_error": "Pobranie aut nie powiodło się",
+    "no_cars_message": "Auta są niedostępne",
+    "no_project_message": "Projekt jest wymagany",
+    "passenger": "Pasażer",
+    "passenger_error": "Pasażer jest wymagany",
+    "project": "Projekt",
+    "reset": "Resetuj",
+    "signature": "Kod potwierdzenia",
+    "start_location": "Lokalizacja początkowa:",
+    "start_mileage_error": "Stan licznika jest niepoprawny",
+    "starting_mileage": "Początkowy stan licznika:",
+    "submit": "Wyślij"
+  },
+  "drives": {
+    "car": "Samochodem:",
+    "description": "Opis trasy:",
+    "ending_mileage": "Końcowy stan licznika:",
+    "from_to": "Z {from} do {destination}",
+    "no_driver_drives": "Nie masz żadnych tras zapisanych w bazie danych. Możesz dodać nową trasę, wybierając opcję z menu.",
+    "project": "Projekt",
+    "starting_mileage": "Początkowy stan licznika:",
+    "synced_drives": "Poprzednie przejazdy",
+    "total_mileage": "Razem {total} km",
+    "unsynced_drives": "Przejazdy niezsynchronizowane",
+    "unverified_drive": "Ten przejazd nie został zweryfikowany, skontaktuj się z osobą z PAH odpowiedzialną za przejazdy by to wyjaśnić.",
+    "verified_drive": "Ten przejazd został zweryfikowany."
+  },
+  "form_errors": {
+    "car": "Samochód",
+    "end_location": "Lokalizacja końcowa",
+    "end_mileage": "Końcowy stan licznika",
+    "hash": "Kod",
+    "passenger": "Pasażer",
+    "project": "Projekt",
+    "start_location": "Lokalizacja początkowa",
+    "start_mileage": "Początkowy stan licznika",
+    "validation_error": "Pole {field} jest wymagane"
+  },
+  "header": {
+    "polish_humanitarian_action": "Polska Akcja Humanitarna"
+  },
+  "login": {
+    "password": "Hasło",
+    "password_required": "Hasło jest wymagane",
+    "user": "Użytkownik: %{username}",
+    "username": "Nazwa użytkownika",
+    "username_required": "Nazwa użytkownika jest wymagana"
+  },
+  "logout": {
+    "login_again": "Zaloguj się ponownie",
+    "logout_warning": "Aby się zalogować ponownie będziesz potrzebował połączenie z internetem",
+    "offline_logout_warning": "Nie masz połączenia z internetem, więc jeśli się teraz wylogujesz to będziesz mógł się zalogować dopiero gdy odzyskasz połączenie.",
+    "successfully_logged_out": "Wylogowano pomyślnie.",
+    "thank_you": "Dziękujemy!"
+  },
+  "passenger_form": {
+    "hash": "Kod kierowcy",
+    "invalid_length": "Kod kierowcy powiniem mieć długość 6"
+  },
+  "refresh": {
+    "new_version": "Jest dostępna nowa wersja strony.",
+    "reload": "Odśwież"
+  }
+}