translation added

stefan-dudu · Jan 21, 2025 · 914a988 · 914a988
1 parent 1c4bb40
commit 914a988
Show file tree

Hide file tree

Showing 17 changed files with 483 additions and 150 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,17 +10,20 @@
     "@types/node": "^22.10.5",
     "@types/react": "^19.0.4",
     "@types/react-dom": "^19.0.2",
+    "@types/react-i18next": "^7.8.3",
     "cra-template": "1.2.0",
+    "i18next": "^24.2.1",
+    "i18next-browser-languagedetector": "^8.0.2",
     "mapbox-gl": "^3.9.2",
     "oidc-client-ts": "^3.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-i18next": "^15.4.0",
     "react-map-gl": "^7.1.8",
     "react-oidc-context": "^3.2.0",
     "react-router-dom": "^7.1.1",
     "react-scripts": "5.0.1",
-    "sass": "^1.83.4",
-    "typescript": "^4.9.5"
+    "sass": "^1.83.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -45,5 +48,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "typescript": "^5.7.3"
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -4,12 +4,12 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="lightgreen" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Află ce terenuri publice de tenis sunt disponibile chiar acum!"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.ico" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Find courts</title>
+    <title>Find tennis courts</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,19 +1,19 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Find tennis courts",
+  "name": "Find tennis courts",
   "icons": [
     {
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "favicon.ico",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "favicon.ico",
       "type": "image/png",
       "sizes": "512x512"
     }

diff --git a/src/Components/BasicMap.tsx b/src/Components/BasicMap.tsx
@@ -2,13 +2,15 @@ import React, { useState, useEffect } from "react";
 import Map, { Marker, Popup } from "react-map-gl";
 import "mapbox-gl/dist/mapbox-gl.css";
 import CircularProgress from "@mui/material/CircularProgress";
+import { useTranslation } from "react-i18next";
 
 const MAPBOX_TOKEN = process.env.REACT_APP_MAPBOX_TOKEN; // Replace with your token
 
 const BasicMap = () => {
   const [courts, setCourts] = useState([]);
   const [popupInfo, setPopupInfo] = useState(null);
   const [loading, setLoading] = useState<boolean>(true);
+  const { t } = useTranslation();
 
   useEffect(() => {
     fetchCourts();
@@ -30,19 +32,11 @@ const BasicMap = () => {
     return (
       <div style={{ textAlign: "center", marginTop: "20px" }}>
         <CircularProgress />
-        <p>Loading map information...</p>
+        <p>{t("loading.mapInfo")}</p>
       </div>
     );
   }
 
-  // if (error) {
-  //   return (
-  //     <div style={{ textAlign: "center", marginTop: "20px", color: "red" }}>
-  //       <p>{error}</p>
-  //     </div>
-  //   );
-  // }
-
   return (
     <div style={{ height: "500px", width: "100%" }}>
       <Map
@@ -87,7 +81,9 @@ const BasicMap = () => {
           >
             <div>
               <h4>{popupInfo.courtName}</h4>
-              <p>No of courts: {popupInfo.courts.length}</p>
+              <p>
+                {t("map.noOfCourts")} {popupInfo.courts.length}
+              </p>
             </div>
           </Popup>
         )}