Add city slug route for weather view

package.json

@@ -14,7 +14,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-places-autocomplete": "^7.3.0",
-    "sass": "^1.66.1"
+    "sass": "^1.66.1",
+    "react-router-dom": "^6.17.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
@@ -27,6 +28,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "vite": "^4.4.5",
+    "@types/react-router-dom": "^5.3.3"
   }
 }

src/App.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { useParams, useNavigate } from "react-router-dom";
 import styles from "./App.module.scss";
 import "./App.css";
 import { getMeteoByLatLng } from "./Api/Meteo";
@@ -24,6 +25,25 @@ function App() {
   const [weatherType, setWeatherType] = useState<string>("");
   const [daySelected, setDaySelected] = useState<number>(0);
   const [dayName, setDayName] = useState<string>("Aujourd'hui");
+  const { city } = useParams<{ city?: string }>();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (city) {
+      const decoded = decodeURIComponent(city);
+      setAddress(decoded);
+      (async () => {
+        try {
+          const results = await geocodeByAddress(decoded);
+          const latLng = await getLatLng(results[0]);
+          setLat(latLng.lat);
+          setLng(latLng.lng);
+        } catch (error) {
+          console.error("Error fetching coordinates:", error);
+        }
+      })();
+    }
+  }, [city]);
 
   useEffect(() => {
     async function getMeteo() {
@@ -56,6 +76,7 @@ function App() {
 
       setLat(latLng.lat);
       setLng(latLng.lng);
+      navigate(`/weather/${encodeURIComponent(selected)}`);
     } catch (error) {
       console.error("Error fetching coordinates:", error);
     }

src/main.tsx

@@ -1,9 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import App from './App.tsx'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<App />} />
+        <Route path="/weather/:city" element={<App />} />
+      </Routes>
+    </BrowserRouter>
   </React.StrictMode>,
 )