From 212a057bc8062710175667d186d3dd4a559e7db4 Mon Sep 17 00:00:00 2001
From: Aidan Timson <aidan@timmo.dev>
Date: Mon, 2 Sep 2024 23:20:27 +0100
Subject: [PATCH] Setup placeholders with queries

---
 src/app/_components/forecast-hourly.tsx | 22 +++++++++++++++++-----
 src/app/_components/forecast-now.tsx    | 15 ++++++++++++++-
 src/app/_components/location-form.tsx   |  2 +-
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/app/_components/forecast-hourly.tsx b/src/app/_components/forecast-hourly.tsx
index 222199c..28c06ae 100644
--- a/src/app/_components/forecast-hourly.tsx
+++ b/src/app/_components/forecast-hourly.tsx
@@ -4,19 +4,31 @@ import { CloudSun } from "lucide-react";
 
 import { getLocationFromLocalStorage } from "~/lib/localStorage";
 
-const forecast12Hour = [
-  22.1, 21.9, 21.6, 21.4, 21.2, 21.1, 21.0, 20.9, 20.8, 20.7, 20.6, 20.5,
-];
-
 export function ForecastHourly() {
   const location = useQuery({
     queryKey: ["location"],
     queryFn: getLocationFromLocalStorage,
   });
 
+  const forecast = useQuery({
+    queryKey: ["forecast", location.data],
+    queryFn: async () => {
+      return [
+        22.1, 21.9, 21.6, 21.4, 21.2, 21.1, 21.0, 20.9, 20.8, 20.7, 20.6, 20.5,
+      ];
+    },
+  });
+
+  if (location.isLoading) return <span>Loading location...</span>;
+  if (location.isError) return <span>Error loading location...</span>;
+  if (forecast.isLoading) return <span>Loading forecast...</span>;
+  if (forecast.isError) return <span>Error loading forecast...</span>;
+  if (!forecast.data || !Array.isArray(forecast.data))
+    return <span>No forecast data.</span>;
+
   return (
     <div className="flex max-w-screen-md select-none flex-row gap-4 overflow-y-auto">
-      {forecast12Hour.map((temp, index) => (
+      {forecast.data.map((temp, index) => (
         <div key={index} className="flex flex-col items-stretch gap-1">
           <div className="flex flex-row items-center gap-1">
             <CloudSun className="h-16 w-16" />
diff --git a/src/app/_components/forecast-now.tsx b/src/app/_components/forecast-now.tsx
index b192784..c0b1793 100644
--- a/src/app/_components/forecast-now.tsx
+++ b/src/app/_components/forecast-now.tsx
@@ -9,13 +9,26 @@ export function ForecastNow() {
     queryFn: getLocationFromLocalStorage,
   });
 
+  const forecast = useQuery({
+    queryKey: ["forecast", location.data],
+    queryFn: async () => {
+      return { temp: 22.2 };
+    },
+  });
+
+  if (location.isLoading) return <span>Loading location...</span>;
+  if (location.isError) return <span>Error loading location...</span>;
+  if (forecast.isLoading) return <span>Loading forecast...</span>;
+  if (forecast.isError) return <span>Error loading forecast...</span>;
+  if (!forecast.data) return <span>No forecast data.</span>;
+
   return (
     <div className="flex select-none flex-row items-stretch gap-6">
       <div className="flex flex-row items-center gap-1">
         <CloudSun className="h-24 w-24" />
       </div>
       <div className="flex flex-row items-center gap-1">
-        <span className="text-4xl font-bold">22.2</span>
+        <span className="text-4xl font-bold">{forecast.data.temp}</span>
         <span className="text-2xl font-semibold">°C</span>
       </div>
     </div>
diff --git a/src/app/_components/location-form.tsx b/src/app/_components/location-form.tsx
index ff05a57..3bae08d 100644
--- a/src/app/_components/location-form.tsx
+++ b/src/app/_components/location-form.tsx
@@ -54,7 +54,7 @@ export function LocationForm() {
   }
 
   if (form.formState.isLoading) {
-    return <span>Loading...</span>;
+    return <span>Loading location...</span>;
   }
 
   return (