fetch weather data, close #20 (#82)

Co-authored-by: plocket <plocket@users.noreply.github.com>
Co-authored-by: Thad Kerosky <thadk@users.noreply.github.com>
Co-authored-by: Leopardfoot <Leopardfoot@users.noreply.github.com>

heat-stack/app/WeatherExample.d.ts

@@ -0,0 +1,8 @@
+export type DailyWeather = {
+    time: string[],
+    temperature_2m_max: number[]
+}
+
+export type Weather = {
+	daily: DailyWeather
+}

heat-stack/app/components/WeatherExample.tsx

@@ -1,56 +1,22 @@
+import { loader } from "#app/root.tsx";
 import test from "@playwright/test";
 import { json } from "@remix-run/node"; // or cloudflare/deno
 import { useLoaderData } from "@remix-run/react";
 
-export async function loader() {
- const href = 'https://archive-api.open-meteo.com/v1/archive?latitude=52.52&longitude=13.41&daily=temperature_2m_max&timezone=America%2FNew_York&start_date=2022-01-01&end_date=2023-08-30&temperature_unit=fahrenheit';
-  const res = await fetch(href);
-  return json(await res.json());
-}
+// weather `loader` is in root.tsx
 
 export function WeatherExample() {
 
-  const gists = useLoaderData<typeof loader>();
+  const one_loader = useLoaderData<typeof loader>();
+  if (!one_loader.weather) {
+    return <div>Loading weather...</div>;
+  }
+  const time: string = one_loader.weather.daily?.time[0]
+  const temp: number = one_loader.weather.daily?.temperature_2m_max[0]
+
   return (
-    <ul>
-      {'5'}
-    </ul>
+    <div>
+      <span>time/temp first item: {time}/{temp}</span>
+    </div>
   );
 }
-
-// import { useFetcher } from "@remix-run/react";
-// import { useEffect } from "react";
-
-// export function WeatherExample() {
-
-//     // 2 separate routes - including one that doesn't load
-//     // the python to avoid the long restart times.
-
-//     /* 
-//         Historical archival records API: https://archive-api.open-meteo.com/v1/archive?latitude=52.52&longitude=13.41&daily=temperature_2m_max&timezone=America%2FNew_York&start_date=2022-01-01&end_date=2023-08-30&temperature_unit=fahrenheit
-//         Current week forecast API: https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.41&daily=temperature_2m_max&timezone=America%2FNew_York&past_days=5&forecast_days=1&temperature_unit=fahrenheit
-//     */
-//     const fetcher = useFetcher();
-//     const href = 'https://archive-api.open-meteo.com/v1/archive?latitude=52.52&longitude=13.41&daily=temperature_2m_max&timezone=America%2FNew_York&start_date=2022-01-01&end_date=2023-08-30&temperature_unit=fahrenheit';
-
-//     // trigger the fetch with these
-//     //   <fetcher.Form method="GET" action="https://archive-api.open-meteo.com/v1/archive?latitude=52.52&longitude=13.41&daily=temperature_2m_max&timezone=America%2FNew_York&start_date=2022-01-01&end_date=2023-08-30&temperature_unit=fahrenheit" />;
-
-//     // fetcher.load(href)
-
-//     useEffect(() => {
-//     // fetcher.submit(data, options);
-//     fetcher.load(href);
-//     }, []);
-
-//     // // build UI with these
-//     // fetcher.state;
-//     // fetcher.formMethod;
-//     // fetcher.formAction;
-//     // fetcher.formData;
-//     // fetcher.formEncType;
-//     // fetcher.data;
-//     return (
-//         <div>{ fetcher.data }</div>
-//     )
-// }

heat-stack/app/root.tsx

@@ -25,7 +25,7 @@ import {
 } from '@remix-run/react'
 import { withSentry } from '@sentry/remix'
 import { Suspense, lazy, useEffect, useRef, useState } from 'react'
-import { z } from 'zod'
+import { object, z } from 'zod'
 import { Confetti } from './components/confetti.tsx'
 import { GeneralErrorBoundary } from './components/error-boundary.tsx'
 import { ErrorList } from './components/forms.tsx'
@@ -60,7 +60,8 @@ import { makeTimings, time } from './utils/timing.server.ts'
 import { getToast } from './utils/toast.server.ts'
 import { useOptionalUser, useUser } from './utils/user.ts'
 
-// import { WeatherExample } from './components/WeatherExample.tsx'
+import { WeatherExample } from './components/WeatherExample.tsx'
+import type { Weather } from './WeatherExample.d.ts';
 
 import * as pyodideModule from 'pyodide'
 import engine from '../../rules-engine/src/rules_engine/engine.py';
@@ -74,7 +75,7 @@ const getPyodide = async () => {
 
 const runPythonScript = async () => {
 	const pyodide: any = await getPyodide();
-	console.log(engine);
+	// console.log(engine);
 	await pyodide.loadPackage("numpy")
 	await pyodide.runPythonAsync(engine);
 	return pyodide;
@@ -116,6 +117,7 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	]
 }
 
+// We can only have one `loader()`. More requires special gymnastics.
 export async function loader({ request }: DataFunctionArgs) {
 	const timings = makeTimings('root loader')
 	const userId = await time(() => getUserId(request), {
@@ -156,8 +158,14 @@ export async function loader({ request }: DataFunctionArgs) {
 	const { toast, headers: toastHeaders } = await getToast(request)
 	const { confettiId, headers: confettiHeaders } = getConfetti(request)
 
+	// Weather station data
+	const w_href: string = 'https://archive-api.open-meteo.com/v1/archive?latitude=52.52&longitude=13.41&daily=temperature_2m_max&timezone=America%2FNew_York&start_date=2022-01-01&end_date=2023-08-30&temperature_unit=fahrenheit';
+	const w_res: Response = await fetch(w_href);
+	const weather: Weather = (await w_res.json()) as Weather
+
 	return json(
 		{
+			weather: weather,
 			user,
 			requestInfo: {
 				hints: getHints(request),
@@ -232,7 +240,7 @@ function Document({
 	useEffect(() => {
 		const run = async () => {
 		  const pyodide: any = await runPythonScript();
-		  console.log(pyodide);
+		//   console.log(pyodide);
 		  const result = await pyodide.runPythonAsync("hdd(57, 60)");
 		  setOutput(result);
 		};
@@ -252,17 +260,17 @@ function Document({
           <div>Output:</div>
           {output}
         </div>
-		{/* <WeatherExample /> */}
-				{children}
-				<script
-					nonce={nonce}
-					dangerouslySetInnerHTML={{
-						__html: `window.ENV = ${JSON.stringify(env)}`,
-					}}
-				/>
-				<ScrollRestoration nonce={nonce} />
-				<Scripts nonce={nonce} />
-				<LiveReload nonce={nonce} />
+		<WeatherExample />
+		{children}
+		<script
+			nonce={nonce}
+			dangerouslySetInnerHTML={{
+				__html: `window.ENV = ${JSON.stringify(env)}`,
+			}}
+		/>
+		<ScrollRestoration nonce={nonce} />
+		<Scripts nonce={nonce} />
+		<LiveReload nonce={nonce} />
 			</body>
 		</html>
 	)