From be5ace039363016d76f7e852678b0814c227b952 Mon Sep 17 00:00:00 2001
From: EstherKalsmith <160218199+EstherKal@users.noreply.github.com>
Date: Fri, 20 Dec 2024 01:42:37 +0200
Subject: [PATCH] chore: add missing translations (#982)

Fix translation issues from Hebrew to English
---
 src/App.tsx                      | 24 ++++++++++++++++++------
 src/locale/en.json               |  2 +-
 src/pages/timeBasedMap/index.tsx |  5 +++--
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 87f5f5ac..db45befa 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,9 @@
 import './App.scss'
 import 'leaflet/dist/leaflet.css'
 import 'moment/locale/he'
+import { useTranslation } from 'react-i18next'
 import { RouterProvider } from 'react-router-dom'
-import { Suspense } from 'react'
+import { Suspense, useEffect } from 'react'
 import moment from 'moment-timezone'
 import Preloader from './shared/Preloader'
 import router from './routes'
@@ -18,9 +19,20 @@ if ('serviceWorker' in navigator) {
     .catch((err) => console.error('Service Worker Registration Failed', err))
 }
 
-export const RoutedApp = () => (
-  <Suspense fallback={<Preloader />}>
-    <RouterProvider router={router} />
-  </Suspense>
-)
+export const RoutedApp = () => {
+  const { i18n } = useTranslation() // Access i18n for language management
+  const currentLanguage = i18n.language // Get the current language
+
+  // Effect hook to update the title based on the current language
+  useEffect(() => {
+    const title = currentLanguage === 'he' ? 'דאטאבוס' : 'Databus' // Set title based on language
+    document.title = title // Update the <title> tag in the document
+  }, [currentLanguage]) // Re-run when the language changes
+
+  return (
+    <Suspense fallback={<Preloader />}>
+      <RouterProvider router={router} />
+    </Suspense>
+  )
+}
 export default RoutedApp
diff --git a/src/locale/en.json b/src/locale/en.json
index a5717990..11cce0e9 100644
--- a/src/locale/en.json
+++ b/src/locale/en.json
@@ -232,7 +232,7 @@
   "youtube_modal_info_title": "Video tutorial (Hebrew)",
   "open_video_about_this_page": "Open video about this page",
   "publicAppealPage": {
-    "title": "קול קורא",
+    "title": "Public Appeal",
     "tasks": [
       {
         "title": "What affect does the traffic have on the overall execusion time of bus ride?",
diff --git a/src/pages/timeBasedMap/index.tsx b/src/pages/timeBasedMap/index.tsx
index 58b5c1c5..243fa5f9 100644
--- a/src/pages/timeBasedMap/index.tsx
+++ b/src/pages/timeBasedMap/index.tsx
@@ -24,6 +24,7 @@ import { INPUT_SIZE } from 'src/resources/sizes'
 import { VehicleLocation } from 'src/model/vehicleLocation'
 import useVehicleLocations from 'src/api/useVehicleLocations'
 import getAgencyList, { Agency } from 'src/api/agencyList'
+import i18n from 'src/locale/allTranslations'
 
 export interface Point {
   loc: [number, number]
@@ -158,8 +159,8 @@ export default function TimeBasedMapPage() {
             {loaded} {`- `}
             {t('show_x_bus_locations')} {` `}
             {t('from_time_x_to_time_y')
-              .replace('XXX', moment(from).format('hh:mm A'))
-              .replace('YYY', moment(to).format('hh:mm A'))}
+              .replace('XXX', moment(from).locale(i18n.language).format('hh:mm A'))
+              .replace('YYY', moment(to).locale(i18n.language).format('hh:mm A'))}
           </p>
         </Grid>
         <Grid xs={1}>{isLoading && <CircularProgress size="20px" />}</Grid>