From 0c8cadcb23a0e8efe2fec62852bc178ceebc15aa Mon Sep 17 00:00:00 2001 From: sivertlv Date: Tue, 15 Sep 2026 21:20:47 +0200 Subject: [PATCH 1/8] Add ViewCity.tsx --- "v\303\246r/src/components/ViewCity.tsx" | 43 ++++++++++++++++++++++++ "v\303\246r/src/main.tsx" | 3 +- 2 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 "v\303\246r/src/components/ViewCity.tsx" diff --git "a/v\303\246r/src/components/ViewCity.tsx" "b/v\303\246r/src/components/ViewCity.tsx" new file mode 100644 index 0000000..19eaec9 --- /dev/null +++ "b/v\303\246r/src/components/ViewCity.tsx" @@ -0,0 +1,43 @@ +import useGetWeather from "../hooks/fetchWeather/useGetWeather"; +//import types from "../hooks/fetchWeather/types"; + +//props +type ViewCityProps = { + city: string; + latitude: number; + longitude: number; + altitude?: number; +} + +const ViewCityProps DEFAULT{ + city = "Sørumsand", + latitude = "Nord øst for Oslo", + longitude = "Nord øst for Oslo", + altitude = "idk", +}; + +export default function ViewCity(arg: ViewCityProps){ + + const {isLoading, error, result} = useGetWeather(arg.latitude, arg.longitude, arg.altitude); + + if(isLoading){ + return

Laster

; + } + if(error){ + + return

Det skjedde en feil

+ } + const firstTimeStep = result?.properties.timeseries[0]; + const windSpeed = firstTimeStep?.data.instant.details?.wind_speed; + const temperature = firstTimeStep?.data.instant.details?.air_temperature; + + + return ( + +
+
Været i {arg.city}
+

Temperatur: {temperature}

+

Vindhastighet: {windSpeed}

+
+ ); +} \ No newline at end of file diff --git "a/v\303\246r/src/main.tsx" "b/v\303\246r/src/main.tsx" index 34913a4..b7a5a3b 100644 --- "a/v\303\246r/src/main.tsx" +++ "b/v\303\246r/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( - + , ) From 92b9ab31d7b35c07a7d8ffaa39ee192b4e97c9ba Mon Sep 17 00:00:00 2001 From: sivertlv Date: Wed, 16 Sep 2026 10:23:29 +0200 Subject: [PATCH 2/8] Add viewcity component --- "v\303\246r/src/components/ViewCity.tsx" | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git "a/v\303\246r/src/components/ViewCity.tsx" "b/v\303\246r/src/components/ViewCity.tsx" index 19eaec9..4ac4754 100644 --- "a/v\303\246r/src/components/ViewCity.tsx" +++ "b/v\303\246r/src/components/ViewCity.tsx" @@ -9,13 +9,14 @@ type ViewCityProps = { altitude?: number; } -const ViewCityProps DEFAULT{ - city = "Sørumsand", - latitude = "Nord øst for Oslo", - longitude = "Nord øst for Oslo", - altitude = "idk", +const DEFAULT: ViewCityProps = { + city: "Sørumsand", + latitude: 0, + longitude: 0, + altitude: 0, }; + export default function ViewCity(arg: ViewCityProps){ const {isLoading, error, result} = useGetWeather(arg.latitude, arg.longitude, arg.altitude); @@ -24,14 +25,13 @@ export default function ViewCity(arg: ViewCityProps){ return

Laster

; } if(error){ - + arg = DEFAULT; return

Det skjedde en feil

} const firstTimeStep = result?.properties.timeseries[0]; const windSpeed = firstTimeStep?.data.instant.details?.wind_speed; const temperature = firstTimeStep?.data.instant.details?.air_temperature; - return (
From 6519ae390bc15b1a55e9d995184a790ab3b8c387 Mon Sep 17 00:00:00 2001 From: sivertlv Date: Thu, 17 Sep 2026 17:22:22 +0200 Subject: [PATCH 3/8] fix shit --- "v\303\246r/src/App.tsx" | 5 +++-- "v\303\246r/src/components/ViewCity.tsx" | 8 +++----- "v\303\246r/src/main.tsx" | 2 +- 3 files changed, 7 insertions(+), 8 deletions(-) diff --git "a/v\303\246r/src/App.tsx" "b/v\303\246r/src/App.tsx" index 8ef557e..9897e90 100644 --- "a/v\303\246r/src/App.tsx" +++ "b/v\303\246r/src/App.tsx" @@ -3,12 +3,14 @@ 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) + //const { result } = useGetWeather(67, 67, 420) + return ( <> @@ -19,7 +21,6 @@ function App() { Vite logo
- {JSON.stringify(result)}

Get started

Edit src/App.tsx and save to test HMR diff --git "a/v\303\246r/src/components/ViewCity.tsx" "b/v\303\246r/src/components/ViewCity.tsx" index 4ac4754..7a65f40 100644 --- "a/v\303\246r/src/components/ViewCity.tsx" +++ "b/v\303\246r/src/components/ViewCity.tsx" @@ -11,21 +11,20 @@ type ViewCityProps = { const DEFAULT: ViewCityProps = { city: "Sørumsand", - latitude: 0, - longitude: 0, + latitude: 59, + longitude: 11, altitude: 0, }; - export default function ViewCity(arg: ViewCityProps){ + arg = DEFAULT; const {isLoading, error, result} = useGetWeather(arg.latitude, arg.longitude, arg.altitude); if(isLoading){ return

Laster

; } if(error){ - arg = DEFAULT; return

Det skjedde en feil

} const firstTimeStep = result?.properties.timeseries[0]; @@ -33,7 +32,6 @@ export default function ViewCity(arg: ViewCityProps){ const temperature = firstTimeStep?.data.instant.details?.air_temperature; return ( -
Været i {arg.city}

Temperatur: {temperature}

diff --git "a/v\303\246r/src/main.tsx" "b/v\303\246r/src/main.tsx" index b7a5a3b..accea2b 100644 --- "a/v\303\246r/src/main.tsx" +++ "b/v\303\246r/src/main.tsx" @@ -12,7 +12,7 @@ const queryClient = new QueryClient() createRoot(document.getElementById('root')!).render( - + , ) From 58c44f78f0f55b67ab41e173df759d2819addb1c Mon Sep 17 00:00:00 2001 From: sivertlv Date: Thu, 17 Sep 2026 18:34:58 +0200 Subject: [PATCH 4/8] ViewCity now takes name of a city as prop and used getWeather hook to get info --- "v\303\246r/src/App.tsx" | 109 +---------------------- "v\303\246r/src/components/ViewCity.tsx" | 24 ++--- 2 files changed, 10 insertions(+), 123 deletions(-) diff --git "a/v\303\246r/src/App.tsx" "b/v\303\246r/src/App.tsx" index 9897e90..d90955b 100644 --- "a/v\303\246r/src/App.tsx" +++ "b/v\303\246r/src/App.tsx" @@ -8,117 +8,12 @@ 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 ( <>
-
- - React logo - Vite logo -
-
-

Get started

-

- Edit src/App.tsx and save to test HMR -

-
- -
- -
- -
-
- -

Documentation

-

Your questions, answered

- -
-
- -

Connect with us

-

Join the Vite community

- -
-
- -
+ +
) diff --git "a/v\303\246r/src/components/ViewCity.tsx" "b/v\303\246r/src/components/ViewCity.tsx" index 7a65f40..07d55e6 100644 --- "a/v\303\246r/src/components/ViewCity.tsx" +++ "b/v\303\246r/src/components/ViewCity.tsx" @@ -1,30 +1,22 @@ import useGetWeather from "../hooks/fetchWeather/useGetWeather"; -//import types from "../hooks/fetchWeather/types"; +import useGetCityCoordinates from "../hooks/useGetCityCoordinates"; -//props -type ViewCityProps = { - city: string; - latitude: number; - longitude: number; - altitude?: number; +interface ViewCityProp { + city: string } -const DEFAULT: ViewCityProps = { - city: "Sørumsand", - latitude: 59, - longitude: 11, - altitude: 0, -}; -export default function ViewCity(arg: ViewCityProps){ +export default function ViewCity(arg: ViewCityProp){ - arg = DEFAULT; - const {isLoading, error, result} = useGetWeather(arg.latitude, arg.longitude, arg.altitude); + const data = useGetCityCoordinates(arg.city); + + const {isLoading, error, result} = useGetWeather(data.result[0].latitude, data.result[0]?.longitude); if(isLoading){ return

Laster

; } if(error){ + return

Det skjedde en feil

} const firstTimeStep = result?.properties.timeseries[0]; From ccba7fe354bff02b0b4938275b6f43b5ca8cbf21 Mon Sep 17 00:00:00 2001 From: sivertlv Date: Thu, 17 Sep 2026 18:54:47 +0200 Subject: [PATCH 5/8] Fixed bug where api reply didnt match expected format --- "v\303\246r/src/App.tsx" | 2 +- "v\303\246r/src/components/ViewCity.tsx" | 3 +-- "v\303\246r/src/hooks/useGetCityCoordinates.ts" | 4 ++-- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git "a/v\303\246r/src/App.tsx" "b/v\303\246r/src/App.tsx" index d90955b..4da300d 100644 --- "a/v\303\246r/src/App.tsx" +++ "b/v\303\246r/src/App.tsx" @@ -12,7 +12,7 @@ function App() { return ( <>
- +
diff --git "a/v\303\246r/src/components/ViewCity.tsx" "b/v\303\246r/src/components/ViewCity.tsx" index 07d55e6..7a2c13a 100644 --- "a/v\303\246r/src/components/ViewCity.tsx" +++ "b/v\303\246r/src/components/ViewCity.tsx" @@ -5,12 +5,11 @@ 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); + const {isLoading, error, result} = useGetWeather(data.result[0]?.latitude, data.result[0]?.longitude); if(isLoading){ return

Laster

; diff --git "a/v\303\246r/src/hooks/useGetCityCoordinates.ts" "b/v\303\246r/src/hooks/useGetCityCoordinates.ts" index f5a9003..7397f5f 100644 --- "a/v\303\246r/src/hooks/useGetCityCoordinates.ts" +++ "b/v\303\246r/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) }) - const result = data?.result ?? [] + const result = data?.results ?? [] return { isLoading, error, result } } From f4d2a1676eda1ea533bfb4cfa4815302b84c179c Mon Sep 17 00:00:00 2001 From: sivertlv Date: Thu, 17 Sep 2026 22:21:30 +0200 Subject: [PATCH 6/8] List now clickable, im seriously you guys --- src/App.tsx | 8 +++- src/components/ViewCity.tsx | 57 +++++++++++++----------- src/components/listItem.tsx | 1 + src/components/location-list.tsx | 10 ++++- "v\303\246r/src/components/ViewCity.tsx" | 32 ------------- 5 files changed, 46 insertions(+), 62 deletions(-) delete mode 100644 "v\303\246r/src/components/ViewCity.tsx" diff --git a/src/App.tsx b/src/App.tsx index a1fc0a6..99c4d16 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,13 +1,17 @@ +import { useState } from "react" import "./App.css" import LocationList from "./components/location-list" import ViewCity from "./components/ViewCity" + function App() { + const [selectedCity, setSelectedCity] = useState("Sørumsand") + return ( <>
- - + +
diff --git a/src/components/ViewCity.tsx b/src/components/ViewCity.tsx index 9941306..78c6331 100644 --- a/src/components/ViewCity.tsx +++ b/src/components/ViewCity.tsx @@ -1,34 +1,39 @@ -import useGetWeather from "../hooks/fetchWeather/useGetWeather" -import useGetCityCoordinates from "../hooks/fetchCities/useGetCityCoordinates" +import useGetWeather from "../hooks/fetchWeather/useGetWeather"; +import useGetCityCoordinates from "../hooks/fetchCities/useGetCityCoordinates"; interface ViewCityProp { - city: string + city: string } -export default function ViewCity(arg: ViewCityProp) { - const cityFilter = { cityName: arg.city } - const data = useGetCityCoordinates(cityFilter) - const { isLoading, error, result } = useGetWeather( - data.result[0]?.latitude, - data.result[0]?.longitude - ) +export default function ViewCity(arg: ViewCityProp){ + + const data = useGetCityCoordinates({cityName: arg.city}); + + const {isLoading, error, result} = useGetWeather(data.result[0]?.latitude, data.result[0]?.longitude); - if (isLoading) { - return

Laster

- } - if (error) { - return

Det skjedde en feil

- } - const firstTimeStep = result?.properties.timeseries[0] - const windSpeed = firstTimeStep?.data.instant.details?.wind_speed - const temperature = firstTimeStep?.data.instant.details?.air_temperature + if(isLoading){ + return

Laster

; + } + if(error){ - return ( -
-
Været i {arg.city}
-

Temperatur: {temperature}

-

Vindhastighet: {windSpeed}

-
- ) + return

Det skjedde en feil

+ } + const firstTimeStep = result?.properties.timeseries[0]; + const windSpeed = firstTimeStep?.data.instant.details?.wind_speed; + const temperature = firstTimeStep?.data.instant.details?.air_temperature; + + return ( +
+
Været i {arg.city}
+

Temperatur: {temperature}

+

Vindhastighet: {windSpeed}

+ +
+ ); } diff --git a/src/components/listItem.tsx b/src/components/listItem.tsx index 352c3c8..640ee22 100644 --- a/src/components/listItem.tsx +++ b/src/components/listItem.tsx @@ -8,6 +8,7 @@ type cityWeather = { const listItem = ({ city: item }: { city: cityWeather }) => { return (
  • { 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) => ( - +
    onCitySelect(item.name || "") }> + +
    ))}
    • diff --git "a/v\303\246r/src/components/ViewCity.tsx" "b/v\303\246r/src/components/ViewCity.tsx" deleted file mode 100644 index 7a2c13a..0000000 --- "a/v\303\246r/src/components/ViewCity.tsx" +++ /dev/null @@ -1,32 +0,0 @@ -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

    Laster

    ; - } - if(error){ - - return

    Det skjedde en feil

    - } - const firstTimeStep = result?.properties.timeseries[0]; - const windSpeed = firstTimeStep?.data.instant.details?.wind_speed; - const temperature = firstTimeStep?.data.instant.details?.air_temperature; - - return ( -
    -
    Været i {arg.city}
    -

    Temperatur: {temperature}

    -

    Vindhastighet: {windSpeed}

    -
    - ); -} \ No newline at end of file From 32e07b15bbd0075029a2d8ac3b540b322a1b037f Mon Sep 17 00:00:00 2001 From: sivertlv Date: Thu, 17 Sep 2026 22:23:00 +0200 Subject: [PATCH 7/8] lint, format --- src/App.tsx | 5 ++- src/components/ViewCity.tsx | 57 +++++++++++++++----------------- src/components/listItem.tsx | 1 - src/components/location-list.tsx | 8 ++--- 4 files changed, 32 insertions(+), 39 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 99c4d16..4fa6799 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,15 +3,14 @@ import "./App.css" import LocationList from "./components/location-list" import ViewCity from "./components/ViewCity" - function App() { const [selectedCity, setSelectedCity] = useState("Sørumsand") return ( <>
    - - + +
    diff --git a/src/components/ViewCity.tsx b/src/components/ViewCity.tsx index 78c6331..71064c9 100644 --- a/src/components/ViewCity.tsx +++ b/src/components/ViewCity.tsx @@ -1,39 +1,34 @@ -import useGetWeather from "../hooks/fetchWeather/useGetWeather"; -import useGetCityCoordinates from "../hooks/fetchCities/useGetCityCoordinates"; +import useGetWeather from "../hooks/fetchWeather/useGetWeather" +import useGetCityCoordinates from "../hooks/fetchCities/useGetCityCoordinates" interface ViewCityProp { - city: string + city: string } +export default function ViewCity(arg: ViewCityProp) { + const data = useGetCityCoordinates({ cityName: arg.city }) -export default function ViewCity(arg: ViewCityProp){ - - const data = useGetCityCoordinates({cityName: arg.city}); - - const {isLoading, error, result} = useGetWeather(data.result[0]?.latitude, data.result[0]?.longitude); + const { isLoading, error, result } = useGetWeather( + data.result[0]?.latitude, + data.result[0]?.longitude + ) - if(isLoading){ - return

    Laster

    ; - } - if(error){ + if (isLoading) { + return

    Laster

    + } + if (error) { + return

    Det skjedde en feil

    + } + const firstTimeStep = result?.properties.timeseries[0] + const windSpeed = firstTimeStep?.data.instant.details?.wind_speed + const temperature = firstTimeStep?.data.instant.details?.air_temperature - return

    Det skjedde en feil

    - } - const firstTimeStep = result?.properties.timeseries[0]; - const windSpeed = firstTimeStep?.data.instant.details?.wind_speed; - const temperature = firstTimeStep?.data.instant.details?.air_temperature; - - return ( -
    -
    Været i {arg.city}
    -

    Temperatur: {temperature}

    -

    Vindhastighet: {windSpeed}

    - -
    - ); + return ( +
    +
    Været i {arg.city}
    +

    Temperatur: {temperature}

    +

    Vindhastighet: {windSpeed}

    + +
    + ) } diff --git a/src/components/listItem.tsx b/src/components/listItem.tsx index 640ee22..352c3c8 100644 --- a/src/components/listItem.tsx +++ b/src/components/listItem.tsx @@ -8,7 +8,6 @@ type cityWeather = { const listItem = ({ city: item }: { city: cityWeather }) => { return (
  • { } interface LocationListProps { - onCitySelect: (cityName: string) => void; + onCitySelect: (cityName: string) => void } -const LocationList = ({onCitySelect}: LocationListProps) => { +const LocationList = ({ onCitySelect }: LocationListProps) => { const { isLoading, results } = useGetWeatherForCities(cities) if (isLoading) { @@ -94,8 +94,8 @@ const LocationList = ({onCitySelect}: LocationListProps) => { }} > {cityWeather.map((item) => ( -
    onCitySelect(item.name || "") }> - +
    onCitySelect(item.name || "")}> +
    ))} From 2806fcc991d79d67aca14223d5505f23f2a0ede5 Mon Sep 17 00:00:00 2001 From: sivertlv Date: Thu, 17 Sep 2026 22:28:25 +0200 Subject: [PATCH 8/8] remove starLocation function call --- src/components/ViewCity.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ViewCity.tsx b/src/components/ViewCity.tsx index 71064c9..8a5cb18 100644 --- a/src/components/ViewCity.tsx +++ b/src/components/ViewCity.tsx @@ -28,7 +28,6 @@ export default function ViewCity(arg: ViewCityProp) {
    Været i {arg.city}

    Temperatur: {temperature}

    Vindhastighet: {windSpeed}

    -
    ) }