diff --git a/package.json b/package.json index ce7df3f..1f0a63c 100644 --- a/package.json +++ b/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" } } diff --git a/src/App.tsx b/src/App.tsx index 51fdaae..4d2fcb5 100644 --- a/src/App.tsx +++ b/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(""); const [daySelected, setDaySelected] = useState(0); const [dayName, setDayName] = useState("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); } diff --git a/src/main.tsx b/src/main.tsx index e63eef4..bc71de5 100644 --- a/src/main.tsx +++ b/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( - + + + } /> + } /> + + , )