From e7d8d09fbc89bea75533d36e7590471b44f53359 Mon Sep 17 00:00:00 2001
From: Cody Couperus <coup321@gmail.com>
Date: Wed, 18 Feb 2026 16:44:11 -0800
Subject: [PATCH] extract latest weather as a component

---
 frontend/src/App.tsx                          | 41 ++++++++++---------
 .../src/components/latest-temperature.tsx     | 30 ++++++++++++++
 2 files changed, 51 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/components/latest-temperature.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index cbdbf35..2aea9ef 100644
--- a/frontend/src/App.tsx
+++ b/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
diff --git a/frontend/src/components/latest-temperature.tsx b/frontend/src/components/latest-temperature.tsx
new file mode 100644
index 0000000..33bced4
--- /dev/null
+++ b/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