chore: change texts to use i18n part d#161 (#286)

hasadna · Dec 11, 2023 · b5b8a0d · b5b8a0d
1 parent 1d6d636
commit b5b8a0d
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 31 deletions.
diff --git a/src/locale/en.json b/src/locale/en.json
@@ -96,5 +96,17 @@
   "bug_type_feature":"Feature Request",
   "funding_paragraph": "The Databus project is developed by the Hasadna for public knowledge, by the contributions of volunteers, and based upon",
   "all_rides_completed": "All/Almost the rides are completed",
-  "missing_rides": "Of the rides are missing"
+  "missing_rides": "Of the rides are missing",
+  "line": "line",
+  "from": "from",
+  "destination": "destination",
+  "velocity": "velocity",
+  "kmh": "kmh",
+  "sample_time": "sample time",
+  "vehicle_ref": "vehicle plate",
+  "drive_direction": "drive direction",
+  "bearing": "bearing",
+  "coords": "coords",
+  "hide_document": "hide document",
+  "show_document": "show document"
 }
diff --git a/src/locale/he.json b/src/locale/he.json
@@ -97,5 +97,17 @@
   "funding_paragraph": "דאטאבוס פותח בסדנא לידע ציבורי, בעבודת מתנדבים, ומבוסס על",
   "halufa_ride": "נסיעה חלופית מס",
   "all_rides_completed": "כמעט / כל הנסיעות בוצעו",
-  "missing_rides": "מהנסיעות חסרות"
+  "missing_rides": "מהנסיעות חסרות",
+  "line": "קו",
+  "from": "מוצא",
+  "destination": "יעד",
+  "velocity": "מהירות",
+  "kmh": "קמ״ש",
+  "sample_time": "זמן דגימה",
+  "vehicle_ref": "לוחית רישוי",
+  "drive_direction": "כיוון נסיעה:",
+  "bearing": "מעלות",
+  "coords": "נ.צ.",
+  "hide_document": "הסתר מידע לגיקים",
+  "show_document": "הצג מידע לגיקים"
 }
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
@@ -9,7 +9,6 @@ import { Label } from './components/Label'
 import { NotFound } from './components/NotFound'
 import { PageContainer } from './components/PageContainer'
 
-import { TEXTS } from 'src/resources/texts'
 import { useTranslation } from 'react-i18next'
 // import GapsPage from './GapsPage'
 // import SingleLineMapPage from './SingleLineMapPage'
@@ -39,7 +38,7 @@ const Profile = () => {
 const GeneralDetailsAboutLine = () => {
   const { search, setSearch } = useContext(SearchContext)
   const { operatorId, lineNumber, routes, routeKey } = search
-
+  const { t } = useTranslation()
   return (
     <>
       <PageContainer className="line-data-container">
@@ -63,7 +62,7 @@ const GeneralDetailsAboutLine = () => {
         <Grid xs={12}>
           {routes &&
             (routes.length === 0 ? (
-              <NotFound>{TEXTS.line_not_found}</NotFound>
+              <NotFound>{t('line_not_found')}</NotFound>
             ) : (
               <RouteSelector
                 routes={routes}

diff --git a/src/pages/components/LineSelector.tsx b/src/pages/components/LineSelector.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useLayoutEffect, useState } from 'react'
-import { TEXTS } from 'src/resources/texts'
+import { useTranslation } from 'react-i18next'
 import debounce from 'lodash.debounce'
 import { TextField } from '@mui/material'
 import ClearButton from './ClearButton'
@@ -14,6 +14,7 @@ type LineSelectorProps = {
 const LineSelector = ({ lineNumber, setLineNumber }: LineSelectorProps) => {
   const [value, setValue] = useState<LineSelectorProps['lineNumber']>(lineNumber)
   const debouncedSetLineNumber = useCallback(debounce(setLineNumber, 200), [setLineNumber])
+  const { t } = useTranslation()
 
   useLayoutEffect(() => {
     setValue(lineNumber)
@@ -32,7 +33,7 @@ const LineSelector = ({ lineNumber, setLineNumber }: LineSelectorProps) => {
   return (
     <TextField
       className={textFieldClass}
-      label={TEXTS.choose_line}
+      label={t('choose_line')}
       type="number"
       value={value && +value < 0 ? 0 : value}
       onChange={(e) => {
@@ -43,7 +44,7 @@ const LineSelector = ({ lineNumber, setLineNumber }: LineSelectorProps) => {
         shrink: true,
       }}
       InputProps={{
-        placeholder: TEXTS.line_placeholder,
+        placeholder: t('line_placeholder'),
         endAdornment: <ClearButton onClearInput={handleClearInput} />,
       }}
     />

diff --git a/src/pages/components/MapLayers/BusToolTip.tsx b/src/pages/components/MapLayers/BusToolTip.tsx
@@ -6,7 +6,7 @@ import './BusToolTip.scss'
 
 import { getSiriRideWithRelated } from 'src/api/siriService'
 import { SiriRideWithRelatedPydanticModel } from 'open-bus-stride-client/openapi/models/SiriRideWithRelatedPydanticModel'
-import { TEXTS } from 'src/resources/texts'
+import { useTranslation } from 'react-i18next'
 import { Spin } from 'antd'
 import cn from 'classnames'
 
@@ -16,6 +16,7 @@ export function BusToolTip({ position, icon }: BusToolTipProps) {
   const [siriRide, setSiriRide] = useState<SiriRideWithRelatedPydanticModel | undefined>()
   const [isLoading, setIsLoading] = useState(false)
   const [showJson, setShowJson] = useState(false)
+  const { t } = useTranslation()
 
   useEffect(() => {
     setIsLoading(true)
@@ -31,60 +32,60 @@ export function BusToolTip({ position, icon }: BusToolTipProps) {
     <div className={cn({ 'extend-for-json': showJson }, 'bus-tooltip')}>
       {isLoading ? (
         <>
-          {TEXTS.loading_routes}
+          {t('loading_routes')}
           <Spin />
         </>
       ) : (
         <>
           <header className="header">
             <h1 className="title">
-              {TEXTS.line} :<span>{siriRide && siriRide!.gtfsRouteRouteShortName}</span>
+              {t('line')} :<span>{siriRide && siriRide!.gtfsRouteRouteShortName}</span>
             </h1>
             <img src={icon} alt="bus icon" className="bus-icon" />
           </header>
           <ul>
             <li>
-              {TEXTS.from} :
+              {t('from')} :
               <span>{siriRide && siriRide!.gtfsRouteRouteLongName?.split('<->')[0]}</span>
             </li>
             <li>
-              {TEXTS.destination} :
+              {t('destination')} :
               <span>{siriRide && siriRide!.gtfsRouteRouteLongName?.split('<->')[1]}</span>
             </li>
             <li>
-              {TEXTS.velocity} :<span>{`${position.point?.velocity}  ${TEXTS.kmh}`}</span>
+              {t('velocity')} :<span>{`${position.point?.velocity}  ${t('kmh')}`}</span>
             </li>
 
             <li>
-              {TEXTS.sample_time} :
+              {t('sample_time')} :
               <span>
                 {moment(position.point!.recorded_at_time as string, moment.ISO_8601)
                   .tz('Israel')
                   .format('DD/MM/yyyy בשעה HH:mm')}
               </span>
             </li>
             <li>
-              {TEXTS.vehicle_ref} :<span>{position.point?.siri_ride__vehicle_ref}</span>
+              {t('vehicle_ref')} :<span>{position.point?.siri_ride__vehicle_ref}</span>
             </li>
           </ul>
           {/*maybe option to add info like this in extend card for now I  put this condition */}
           {window.screen.height > 1100 && (
             <>
               <h4>
-                {TEXTS.drive_direction} :
+                {t('drive_direction')} :
                 <span>
-                  ( {position.point?.bearing} {TEXTS.bearing})
+                  ( {position.point?.bearing} {t('bearing')})
                 </span>
               </h4>
               <h4>
-                {TEXTS.coords} :<span>{position.loc.join(' , ')}</span>
+                {t('coords')} :<span>{position.loc.join(' , ')}</span>
               </h4>
             </>
           )}
         </>
       )}
       <Button onClick={() => setShowJson((showJson) => !showJson)}>
-        {showJson ? TEXTS.hide_document : TEXTS.show_document}
+        {showJson ? t('hide_document') : t('show_document')}
       </Button>
       {showJson && (
         <pre>

diff --git a/src/pages/components/MinuteSelector.tsx b/src/pages/components/MinuteSelector.tsx
@@ -1,4 +1,4 @@
-import { TEXTS } from 'src/resources/texts'
+import { useTranslation } from 'react-i18next'
 import { TextField } from '@mui/material'
 import ClearButton from './ClearButton'
 import './Selector.scss'
@@ -10,6 +10,7 @@ type MinuteSelectorProps = {
 }
 
 const MinuteSelector = ({ num, setNum }: MinuteSelectorProps) => {
+  const { t } = useTranslation()
   const handleClearInput = () => {
     setNum(1) // 1 minute this is the wanted default value
   }
@@ -21,7 +22,7 @@ const MinuteSelector = ({ num, setNum }: MinuteSelectorProps) => {
   return (
     <TextField
       className={textFieldClass}
-      label={TEXTS.minutes}
+      label={t('minutes')}
       type="number"
       value={num}
       onChange={(e) => setNum(+e.target.value)}

diff --git a/src/pages/components/OperatorSelector.tsx b/src/pages/components/OperatorSelector.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { TEXTS } from 'src/resources/texts'
+import { useTranslation } from 'react-i18next'
 import { Operator, RELEVANT_OPERATORS } from 'src/model/operator'
 import { Autocomplete, TextField } from '@mui/material'
 
@@ -14,6 +14,7 @@ const OperatorSelector = ({
   setOperatorId,
   onlyMajorOperators = false,
 }: OperatorSelectorProps) => {
+  const { t } = useTranslation()
   const [operators, setOperators] = useState<Operator[]>([])
   useEffect(() => {
     const majorOperatorsIds = ['3', '5', '15', '18', '25']
@@ -37,7 +38,7 @@ const OperatorSelector = ({
       onChange={(e, value) => setOperatorId(value ? value.id : '')}
       id="operator-select"
       options={operators}
-      renderInput={(params) => <TextField {...params} label={TEXTS.choose_operator} />}
+      renderInput={(params) => <TextField {...params} label={t('choose_operator')} />}
       getOptionLabel={(option) => option.name}
     />
   )

diff --git a/src/pages/components/RouteSelector.tsx b/src/pages/components/RouteSelector.tsx
@@ -1,4 +1,4 @@
-import { formatted, TEXTS } from 'src/resources/texts'
+import { formatted } from 'src/resources/texts'
 import { BusRoute } from 'src/model/busRoute'
 import { Autocomplete, TextField } from '@mui/material'
 import { useEffect } from 'react'
@@ -12,7 +12,7 @@ type RouteSelectorProps = {
 }
 
 const getRouteTitle = (route: BusRoute, t: TFunction<'translation', undefined>) =>
-  `${route.fromName} ${TEXTS.direction_arrow} ${route.toName}  ${
+  `${route.fromName} ${t('direction_arrow')} ${route.toName}  ${
     route.routeAlternative === '#' || route.routeAlternative === '0'
       ? ''
       : `(${t('halufa_ride')} ${route.routeAlternative})`
@@ -43,7 +43,7 @@ const RouteSelector = ({ routes, routeKey, setRouteKey }: RouteSelectorProps) =>
       id="route-select"
       options={routes}
       renderInput={(params) => (
-        <TextField {...params} label={formatted(TEXTS.choose_route, routes.length.toString())} />
+        <TextField {...params} label={formatted(t('choose_route'), routes.length.toString())} />
       )}
       getOptionLabel={(route) => getRouteTitle(route, t)}
     />

diff --git a/src/pages/components/StopSelector.tsx b/src/pages/components/StopSelector.tsx
@@ -1,6 +1,7 @@
-import { formatted, TEXTS } from 'src/resources/texts'
+import { formatted } from 'src/resources/texts'
 import { BusStop } from 'src/model/busStop'
 import { Autocomplete, TextField } from '@mui/material'
+import { useTranslation } from 'react-i18next'
 
 type StopSelectorProps = {
   stops: BusStop[]
@@ -11,6 +12,7 @@ type StopSelectorProps = {
 const StopSelector = ({ stops, stopKey, setStopKey }: StopSelectorProps) => {
   const valueFinned = stops.find((stop) => stop.key === stopKey)
   const value = valueFinned ? valueFinned : null
+  const { t } = useTranslation()
 
   return (
     <Autocomplete
@@ -20,7 +22,7 @@ const StopSelector = ({ stops, stopKey, setStopKey }: StopSelectorProps) => {
       id="stop-select"
       options={stops}
       renderInput={(params) => (
-        <TextField {...params} label={formatted(TEXTS.choose_stop, stops.length.toString())} />
+        <TextField {...params} label={formatted(t('choose_stop'), stops.length.toString())} />
       )}
       getOptionLabel={(stop) => stop.name}
     />

diff --git a/src/pages/components/TimeSelector.tsx b/src/pages/components/TimeSelector.tsx
@@ -1,12 +1,13 @@
-import { TEXTS } from 'src/resources/texts'
+import { useTranslation } from 'react-i18next'
 import { TimePicker, renderTimeViewClock } from '@mui/x-date-pickers'
 import { DataAndTimeSelectorProps } from './utils/dateAndTime'
 
 export function TimeSelector({ time, onChange }: DataAndTimeSelectorProps) {
+  const { t } = useTranslation()
   return (
     <TimePicker
       sx={{ width: '100%' }}
-      label={TEXTS.choose_time}
+      label={t('choose_time')}
       value={time}
       onChange={(ts) => onChange(ts!)}
       ampm={false}