Investigate method for looking up weather station data

[jkwan2011]

We need to look up weather station data for the calculation of heat degree days. There are APIs online (e.g. https://www.degreedays.net) that might be able to help.

• Obtained from an API (either degree days or visual crossing or some other), and likely called from Javascript
• How do we get location information? Is it provided by the user?
• Consider how does this interact with a client-side offline-first app? Instructions to cache data on the device?
• Consider licensing and pricing model

[spghtti]

Starting a google sheet to compare API options https://docs.google.com/spreadsheets/d/1U8RnKo2cHlmG7Q6yCjSw3Qgd1t-uNCvvIvvm74XLk7s/edit?usp=sharing

[thadk]

Use Archive to retrieve archival weather (do not use for last 6-7 days of weather)

• Geocode address
  • use to lookup county from design_temp_by_county.csv and handle edge cases where counties may not match somehow.
• Get timezone
• 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

[plocket]

I know we rejected useFetcher, but it might be a better solution than useLoader (because of the complications in getting useLoader to have multiple loaders) if we can use it right. GPT 3.5 has this to say about using useFetcher that may be worth trying (though it says this isn't directly from Remix, so YOMMV):

To use useFetcher to fetch data from an API without using it for a form, you can define a custom fetcher function and pass it to useFetcher. Here's an example:

import { useFetcher } from "@remix-run/react";

const fetchData = async () => {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  return data;
};

export function MyComponent() {
  const fetcher = useFetcher(fetchData);
  const { isLoading, error, data } = fetcher;

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      {/* Render the fetched data */}
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Please note that the sources provided are not directly related to Remix, but they offer insights on using similar hooks and concepts in React applications.

[plocket]

We're using useLoader for now.