11 lage en side for å vise værdataen for hvert enkeltsted

src/App.tsx

@@ -1,13 +1,16 @@
+import { useState } from "react"
 import "./App.css"
 import LocationList from "./components/location-list"
 import ViewCity from "./components/ViewCity"
 
 function App() {
+  const [selectedCity, setSelectedCity] = useState<string>("Sørumsand")
+
   return (
     <>
       <section id="center">
-        <LocationList />
-        <ViewCity city={"sørumsand"} />
+        <LocationList onCitySelect={setSelectedCity} />
+        <ViewCity city={selectedCity} />
       </section>
       <section id="spacer"></section>
     </>

src/components/ViewCity.tsx

@@ -6,8 +6,7 @@ interface ViewCityProp {
 }
 
 export default function ViewCity(arg: ViewCityProp) {
-  const cityFilter = { cityName: arg.city }
-  const data = useGetCityCoordinates(cityFilter)
+  const data = useGetCityCoordinates({ cityName: arg.city })
 
   const { isLoading, error, result } = useGetWeather(
     data.result[0]?.latitude,
@@ -29,6 +28,7 @@ export default function ViewCity(arg: ViewCityProp) {
       <div>Været i {arg.city}</div>
       <p>Temperatur: {temperature}</p>
       <p>Vindhastighet: {windSpeed}</p>
+      <button onClick={() => starLocation(arg.city)}>Favoritt</button>
     </div>
   )
 }

src/components/location-list.tsx

@@ -41,7 +41,11 @@ const getNextDays = (data?: WeatherApiResponse) => {
   return noonTemperatures
 }
 
-const LocationList = () => {
+interface LocationListProps {
+  onCitySelect: (cityName: string) => void
+}
+
+const LocationList = ({ onCitySelect }: LocationListProps) => {
   const { isLoading, results } = useGetWeatherForCities(cities)
 
   if (isLoading) {
@@ -90,7 +94,9 @@ const LocationList = () => {
         }}
       >
         {cityWeather.map((item) => (
-          <ListItem key={item.name} city={item} />
+          <div onClick={() => onCitySelect(item.name || "")}>
+            <ListItem key={item.name} city={item} />
+          </div>
         ))}
       </ul>
     </div>