translations

src/components/bookmarks/BookmarkButton.tsx

@@ -3,8 +3,8 @@ import {
   BookmarkAdd24Regular,
   BookmarkOff24Filled,
 } from "@fluentui/react-icons";
-import { t } from "i18next";
 import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
 
 import { StopBookmark, stopBookmarksRedux } from "../../models/etaObjects.js";
 import {
@@ -14,6 +14,7 @@ import {
 import { useAppDispatch, useAppSelector } from "../../store/index.js";
 
 export function BookmarkButton(props: StopBookmark) {
+  const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const stopBookmarks: stopBookmarksRedux = useAppSelector(
     (state) => state.stopBookmarks

src/components/etaCard/EtaCard.tsx

@@ -10,8 +10,8 @@ import {
   DialogTrigger,
 } from "@fluentui/react-components";
 import { Dismiss12Filled, Edit12Filled } from "@fluentui/react-icons";
-import { t } from "i18next";
 import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 import { EtaBusWithID } from "../../models/etaObjects.js";
@@ -115,6 +115,8 @@ function FavouriteEditor(props: {
   enabled?: string[];
   onDelete?: () => void;
 }) {
+  const { t } = useTranslation();
+
   const dispatch = useAppDispatch();
 
   const onChangeFunction = useCallback(

src/components/nearby/Nearby.tsx

@@ -1,6 +1,7 @@
 import { Button, Spinner, Switch, Tooltip } from "@fluentui/react-components";
 import { Info16Regular } from "@fluentui/react-icons";
 import { useCallback, useEffect, useState } from "react";
+import { Trans, useTranslation } from "react-i18next";
 
 import { store, useAppDispatch } from "../../store/index.js";
 import {
@@ -12,6 +13,8 @@ import style from "./Nearby.module.css";
 import NearbyList from "./NearbyList.js";
 
 export default function Nearby() {
+  const { t } = useTranslation();
+
   const [number, useNumber] = useState<number>(-1);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [coordinate, setCoordinate] = useState<{ lat?: number; lon?: number }>(
@@ -96,18 +99,18 @@ export default function Nearby() {
   return (
     <div className={style.nearby}>
       {number >= 0
-        ? `There are ${number} stops in the local database.`
-        : "Checking database ... "}
+        ? t("nearby.totalStopsSummary", { stopsTotal: number })
+        : t("nearby.checkingDb")}
       <div className={style["nearby-controls"]}>
         <Button onClick={handleRefresh}>
-          {isLoading ? "reloading..." : "Refresh database"}
+          {isLoading ? t("nearby.checkingDb") : t("nearby.checkDb")}
         </Button>
         <Button onClick={handleGeolocation}>
           {isLoadingLocation
-            ? "Checking your location..."
+            ? t("nearby.checkingLocation")
             : coordinate.lat && coordinate.lon
-              ? "Refresh my location"
-              : "Set my location"}
+              ? t("nearby.recheckLocation")
+              : t("nearby.checkLocation")}
         </Button>
         <div className={style.spinner}>
           {(isLoading || isLoadingLocation) && <Spinner />}
@@ -117,19 +120,11 @@ export default function Nearby() {
         <Switch
           checked={locationMode}
           onChange={locationModeChange}
-          label="Provide my locations on load"
+          label={t("nearby.alwaysProvideLocation")}
         />
         <Tooltip
           content={{
-            children: (
-              <p>
-                Even though we do not send your location to the internet, you
-                still have a choice to only use your location when you want.
-                <br />
-                For convenience, you can provide your location automatically
-                when you load TOBus.ca.
-              </p>
-            ),
+            children: <Trans>nearby.locationPolicy</Trans>,
           }}
           relationship={"label"}
           mountNode={document.querySelector("#root .fui-FluentProvider")}

src/components/nearby/NearbyList.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import { getStopsWithinRange } from "../../store/ttcRouteDb.js";
 import RawDisplay from "../rawDisplay/RawDisplay.js";
@@ -11,6 +12,8 @@ export default function NearbyList(props: {
     lon?: number;
   };
 }) {
+  const { t } = useTranslation();
+
   const [stopsList, setStopsList] = useState<
     {
       id: string;
@@ -36,15 +39,15 @@ export default function NearbyList(props: {
     <div>
       {props.coordinate.lat && props.coordinate.lon ? (
         <>
-          <p>The closest bus stops are:</p>
+          <p>{t("nearby.closestStopsLead")}</p>
           <ul className={style["nearby-stops-list"]}>
             {stopsList.map((stop) => (
               <NearbyStopCard key={stop.id} stop={stop} />
             ))}
           </ul>
         </>
       ) : (
-        <p>Nearby feature requires your location.</p>
+        <p>{t("nearby.locationNeeded")}</p>
       )}
       <RawDisplay data={stopsList} />
     </div>

src/components/nearby/NearbyStopCard.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import { EtaBusWithID } from "../../models/etaObjects.js";
 import { EtaCard } from "../etaCard/EtaCard.js";
@@ -16,6 +17,8 @@ export default function NearbyStopCard({
     directions: string;
   };
 }) {
+  const { t } = useTranslation();
+
   const [unifiedEta, setUnifiedEta] = useState<EtaBusWithID[]>([]);
 
   useEffect(() => {
@@ -46,7 +49,7 @@ export default function NearbyStopCard({
       key={stop.id}
       direction={stop.directions}
       lines={stop.lines}
-      name={`${stop.title}\n${stop.realDistance.toPrecision(4)}m away`}
+      name={`${stop.title}\n${stop.realDistance.toPrecision(4)}${t("nearby.mAway")}`}
       id={stop.id}
       stopUrl={`/stops/${stop.id}`}
       etas={unifiedEta}

src/i18n/en/locales.json

@@ -6,7 +6,8 @@
       "about": "About",
       "lang": "Language",
       "settings": "Settings",
-      "bookmarks": "Bookmarks"
+      "bookmarks": "Bookmarks",
+      "nearby": "Nearby"
     }
   },
   "home": {
@@ -31,6 +32,19 @@
     "lineAndStopInfo": "Line {{lineNum}} Stop {{stopNum}} =",
     "noLineInDb": "Error: This line is not in the route database. Subway lines are unsupported for now."
   },
+  "nearby": {
+    "totalStopsSummary": "There are {{stopsTotal}} stops in the local database.",
+    "checkingDb": "Downloading database ...",
+    "checkDb": "Download database",
+    "checkingLocation": "Checking your location...",
+    "checkLocation": "Set my location",
+    "recheckLocation": "Refresh my location",
+    "alwaysProvideLocation": "Provide my locations on load",
+    "locationPolicy": "<p>Even though we do not send your location to the internet, you still have a choice to only use your location when you want. <br /> For convenience, you can provide your location automatically when you load TOBus.ca.</p>",
+    "closestStopsLead": "The closest bus stops are:",
+    "locationNeeded": "Nearby feature requires your location.",
+    "mAway": "m away"
+  },
   "settings": {
     "etaLists": "ETA lists",
     "separateLines": "separate for each line",

src/i18n/zh/locales.json

@@ -6,7 +6,8 @@
       "about": "關於",
       "lang": "語言",
       "settings": "設定",
-      "bookmarks": "書籤"
+      "bookmarks": "書籤",
+      "nearby": "附近"
     }
   },
   "home": {
@@ -18,9 +19,9 @@
     "bookmarkReminder": "(試下響你成日等車嘅站撳個書籤 icon)",
     "homeNoEta": "你所有書籤裏面嘅站都冇下班車嘅資料。",
     "nextVehicle": "Next vehicle",
-    "or": "or",
-    "orSee": "Or, see",
-    "allRoutes": "All routes"
+    "or": "或者",
+    "orSee": "或者睇下",
+    "allRoutes": "所有路線"
   },
   "lines": {
     "ariaLabel": "輸入路線",
@@ -35,18 +36,31 @@
     "ariaLabel": "輸入車站號碼",
     "stopId": "車站編號 {{stopNum}}  ="
   },
+  "nearby": {
+    "totalStopsSummary": "離線資料庫裏面有 {{stopsTotal}} 個巴士站。",
+    "checkingDb": "Down 緊 ...",
+    "checkDb": "Down 過個資料庫",
+    "checkingLocation": "Check 緊你個位...",
+    "checkLocation": "Set 你宜家個位",
+    "recheckLocation": "重設你宜家個位",
+    "alwaysProvideLocation": "自動提供我個位置",
+    "locationPolicy": "<p>雖然你個位置唔會 send 上任何 server，我都想你幾時都有權揀俾定唔俾。<br /> 如果你想嘅話，亦都可以每次一開都自動 check 你個位置。</p>",
+    "closestStopsLead": "你最接近嘅巴士站係：",
+    "locationNeeded": "呢個功能需要你嘅位置。",
+    "mAway": "米"
+  },
   "settings": {
-    "etaLists": "ETA lists",
-    "separateLines": "separate for each line",
-    "singleList": "single list"
+    "etaLists": "到站時間",
+    "separateLines": "每條線分開睇",
+    "singleList": "合併所有線咁睇"
   },
   "buttons": {
     "search": "搜尋",
     "refresh": "更新",
     "clear": "清除全部",
     "mapPin": "響 Google 地圖睇佢個位置",
     "busIcon": "睇巴士幾時到站",
-    "languageChange": "選擇語言",
+    "languageChange": "語言",
     "delete": "刪除",
     "bookmarkAdd": "加呢頁落書籤",
     "bookmarkDelete": "響書籤刪除呢頁",

src/routes/Home.tsx

@@ -7,8 +7,8 @@ import {
   TabList,
   TabValue,
 } from "@fluentui/react-components";
-import { t } from "i18next";
 import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 import FavouriteEta from "../components/eta/FavouriteEta.js";
@@ -20,6 +20,8 @@ import style from "./Home.module.css";
 import Search from "./Search.js";
 
 export default function Home() {
+  const { t } = useTranslation();
+
   const stopBookmarks = stopBookmarksSelectors.selectAll(
     store.getState().stopBookmarks
   );
@@ -54,9 +56,10 @@ export default function Home() {
         onTabSelect={handleTabClick}
       >
         <Tab value={"nearby"} className={style["button-with-badge"]}>
-          Nearby<Badge>Beta</Badge>
+          {t("nav.label.nearby")}
+          <Badge>Beta</Badge>
         </Tab>
-        <Tab value={"favourites"}>Favourites</Tab>
+        <Tab value={"favourites"}>{t("nav.label.bookmarks")}</Tab>
       </TabList>
       <div className={enabledTab === "nearby" ? "" : style.hidden}>
         <Nearby />