extract latest weather as a component

frontend/src/App.tsx

@@ -1,30 +1,31 @@
-import { useQuery } from '@tanstack/react-query'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
 import './App.css'
-import { Button } from "@/components/ui/button"
+import LatestTemperature from "@/components/latest-temperature"
+// import { Button } from "@/components/ui/button"
 
-interface LatestTemperature {
+
+// {"id":1001,"city":"Salem","temp":66.7,"feels_like":67.17,"humidity":87,"conditions":"scattered clouds","fetched_at":"2026-02-18T22:16:38.067097Z"}
+interface WeatherHistory {
+    id: number;
+    city: string;
     temp: number;
+    feels_like: number;
+    humidity: number;
+    conditions: string;
+    fetched_at: Date;
+
 }
 
-async function fetchLatestTemperature(): Promise<LatestTemperature>{
-    const res = await fetch("/api/latest-temperature");
-    if (!res.ok) throw new Error("Failed to fetch latest temperature");
+async function fetchWeatherHistory(): Promise<WeatherHistory>{
+    const res = await fetch("/api/weather/history");
+    if(!res.ok) throw new Error("Failed to fetch weather history");
     return res.json();
 }
 
-function App() {
-    const {data, isLoading, error} = useQuery({
-        queryKey: ["latest-temperature"],
-        queryFn: fetchLatestTemperature,
 
-    });
-  if (isLoading) return <p>Loading...</p>
-  if (error) return <p>Error: {error.message}</p>
+function App() {
     return (
         <>
-    <p>{data.temp}</p>
+            <LatestTemperature />
         </>
     )    
 }

frontend/src/components/latest-temperature.tsx

@@ -0,0 +1,30 @@
+
+import { useQuery } from '@tanstack/react-query'
+
+interface LatestTemperature {
+    temp: number;
+}
+
+async function fetchLatestTemperature(): Promise<LatestTemperature>{
+    const res = await fetch("/api/latest-temperature");
+    if (!res.ok) throw new Error("Failed to fetch latest temperature");
+    return res.json();
+}
+
+function LatestTemperature(){
+    const {data, isLoading, error} = useQuery({
+        queryKey: ["latest-temperature"],
+        queryFn: fetchLatestTemperature,
+
+    });
+  if (isLoading) return <p>Loading...</p>
+  if (error) return <p>Error: {error.message}</p>
+  return (
+    <>
+        <p>{data?.temp ?? 'N/A'}</p>
+    </>
+  )
+
+}
+
+export default LatestTemperature