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

vær/src/App.tsx

@@ -3,121 +3,17 @@ import heroImg from './assets/hero.png'
 import reactLogo from './assets/react.svg'
 import viteLogo from './assets/vite.svg'
 import './App.css'
+import ViewCity from './components/ViewCity'
 import useGetWeather from './hooks/fetchWeather/useGetWeather'
 
 function App() {
   const [count, setCount] = useState(0)
-  // Example fetch, plz remove asap
-  const { result } = useGetWeather(67, 67, 420)
 
   return (
     <>
       <section id="center">
-        <div className="hero">
-          <img src={heroImg} className="base" width="170" height="179" alt="" />
-          <img src={reactLogo} className="framework" alt="React logo" />
-          <img src={viteLogo} className="vite" alt="Vite logo" />
-        </div>
-        <div>
-          {JSON.stringify(result)}
-          <h1>Get started</h1>
-          <p>
-            Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
-          </p>
-        </div>
-        <button
-          type="button"
-          className="counter"
-          onClick={() => setCount((count) => count + 1)}
-        >
-          Count is {count}
-        </button>
-      </section>
-
-      <div className="ticks"></div>
-
-      <section id="next-steps">
-        <div id="docs">
-          <svg className="icon" role="presentation" aria-hidden="true">
-            <use href="/icons.svg#documentation-icon"></use>
-          </svg>
-          <h2>Documentation</h2>
-          <p>Your questions, answered</p>
-          <ul>
-            <li>
-              <a href="https://vite.dev/" target="_blank">
-                <img className="logo" src={viteLogo} alt="" />
-                Explore Vite
-              </a>
-            </li>
-            <li>
-              <a href="https://react.dev/" target="_blank">
-                <img className="button-icon" src={reactLogo} alt="" />
-                Learn more
-              </a>
-            </li>
-          </ul>
-        </div>
-        <div id="social">
-          <svg className="icon" role="presentation" aria-hidden="true">
-            <use href="/icons.svg#social-icon"></use>
-          </svg>
-          <h2>Connect with us</h2>
-          <p>Join the Vite community</p>
-          <ul>
-            <li>
-              <a href="https://github.com/vitejs/vite" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#github-icon"></use>
-                </svg>
-                GitHub
-              </a>
-            </li>
-            <li>
-              <a href="https://chat.vite.dev/" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#discord-icon"></use>
-                </svg>
-                Discord
-              </a>
-            </li>
-            <li>
-              <a href="https://x.com/vite_js" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#x-icon"></use>
-                </svg>
-                X.com
-              </a>
-            </li>
-            <li>
-              <a href="https://bsky.app/profile/vite.dev" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#bluesky-icon"></use>
-                </svg>
-                Bluesky
-              </a>
-            </li>
-          </ul>
-        </div>
-      </section>
-
-      <div className="ticks"></div>
+          <ViewCity city = {'sørumsand'}/>
+      </section>      
       <section id="spacer"></section>
     </>
   )

vær/src/components/ViewCity.tsx

@@ -0,0 +1,32 @@
+import useGetWeather from "../hooks/fetchWeather/useGetWeather";
+import useGetCityCoordinates from "../hooks/useGetCityCoordinates";
+
+interface ViewCityProp {
+    city: string
+}
+
+export default function ViewCity(arg: ViewCityProp){ 
+
+    const data = useGetCityCoordinates(arg.city);
+
+    const {isLoading, error, result} = useGetWeather(data.result[0]?.latitude, data.result[0]?.longitude);
+
+    if(isLoading){
+        return <p>Laster</p>;
+    }
+    if(error){
+
+        return <p>Det skjedde en feil</p>
+    }
+    const firstTimeStep = result?.properties.timeseries[0];
+    const windSpeed = firstTimeStep?.data.instant.details?.wind_speed;
+    const temperature = firstTimeStep?.data.instant.details?.air_temperature;
+
+    return (
+        <div>
+            <div>Været i {arg.city}</div>
+            <p>Temperatur: {temperature}</p>
+            <p>Vindhastighet: {windSpeed}</p>
+        </div>
+    );
+}

vær/src/hooks/useGetCityCoordinates.ts

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query"
 
 export type citySearchResult = {
-	result: {
+	results: {
 		name: string,
 		latitude: number,
 		longitude: number
@@ -16,7 +16,7 @@ const useGetCityCoordinates = (cityName: string) => {
 		queryFn: () => fetch(`https://geocoding-api.open-meteo.com/v1/search?name=${cityName}`).then((res) => res.json() as Promise<citySearchResult>)
 	})
 
-	const result = data?.result ?? []
+	const result = data?.results ?? []
 
 	return { isLoading, error, result }
 }

vær/src/main.tsx

@@ -2,6 +2,7 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
+import ViewCity from './components/ViewCity.tsx'
 import {
   QueryClient, QueryClientProvider
 } from '@tanstack/react-query'
@@ -11,7 +12,7 @@ const queryClient = new QueryClient()
 createRoot(document.getElementById('root')!).render(
   <QueryClientProvider client={queryClient}>
     <StrictMode>
-      <App />
+      <App/>
     </StrictMode>
   </QueryClientProvider>,
 )