extract latest weather as a component

frontend/src/App.tsx

@@ -1,32 +1,33 @@
-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>
-  return (
-    <>
-    <p>{data.temp}</p>
-    </>
-  )
+function App() {
+    return (
+        <>
+            <LatestTemperature />
+        </>
+    )    
 }
 
 export default App