refactor to use new api

HubSpot · Jul 12, 2024 · b7cf42e · b7cf42e
1 parent a786855
commit b7cf42e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 20 deletions.
diff --git a/...tarted/getting-started-project/getting-started-app/components/islands/WeatherForecast.tsx b/...tarted/getting-started-project/getting-started-app/components/islands/WeatherForecast.tsx
@@ -16,24 +16,38 @@ export default function WeatherForecast({
   defaultCity,
 }: WeatherForecastProps) {
   const [city, setCity] = useState('');
-  const [isLoading, setIsLoading] = useState(true);
   const [weatherData, setWeatherData] = useState<WeatherForecastType>();
 
   useEffect(() => {
     getWeatherForecast(defaultCity).then((data) => {
       setWeatherData(data);
-      setIsLoading(false);
     });
   }, []);
 
   const handleFetchWeather = () => {
-    setIsLoading(true);
     getWeatherForecast(city).then((data) => {
       setWeatherData(data);
-      setIsLoading(false);
     });
   };
 
+  const isFetching = !weatherData;
+  const hasError = !isFetching && weatherData?.error;
+  const hasWeatherData = !isFetching && !hasError && weatherData?.forecast;
+  const missingData = !isFetching && !hasWeatherData && !hasError;
+
+  function WeatherForecast({ weatherData }) {
+    return (
+      <>
+        <div>
+          <CurrentWeatherCard weatherData={weatherData} />
+        </div>
+        <div className={weatherStyles.cardContainer}>
+          <UpcomingWeatherCard weatherData={weatherData} />
+        </div>
+      </>
+    );
+  }
+
   return (
     <div className={weatherStyles.wrapper}>
       <h1>{headline}</h1>
@@ -46,20 +60,10 @@ export default function WeatherForecast({
         <button onClick={handleFetchWeather}>Update Forecast</button>
       </div>
       <div className={weatherStyles.currentWeather}>
-        {!isLoading && weatherData?.forecast ? (
-          <>
-            <div>
-              <CurrentWeatherCard weatherData={weatherData} />
-            </div>
-            <div className={weatherStyles.cardContainer}>
-              <UpcomingWeatherCard weatherData={weatherData} />
-            </div>
-          </>
-        ) : isLoading ? (
-          <h2>Loading...</h2>
-        ) : (
-          <h2>No data found, please search another location</h2>
-        )}
+        {isFetching && <h2>Loading...</h2>}
+        {hasError && <h2>Error occurred when fetching weather forecast</h2>}
+        {hasWeatherData && <WeatherForecast weatherData={weatherData} />}
+        {missingData && <h2>No data found, please search another location</h2>}
       </div>
     </div>
   );

diff --git a/examples/getting-started/getting-started-project/getting-started-app/utils.ts b/examples/getting-started/getting-started-project/getting-started-app/utils.ts
@@ -1,6 +1,6 @@
 import { ICON_MAP } from './constants.ts';
 
-const FORECAST_BASE_URL = 'https://api.open-meteo.com/v1/forecast';
+const FORECAST_BASE_URL = 'https://api.open-meteo.com/v1/forecast'; // https://open-meteo.com/en/docs
 const LAT_LNG_BASE_URL = 'https://geocoding-api.open-meteo.com/v1/search';
 
 interface Forecast {
@@ -31,6 +31,7 @@ interface ForecastResponse {
 export interface WeatherForecast {
   city: string;
   forecast: ForecastData[];
+  error?: string;
 }
 
 interface DailyUnits {
@@ -123,11 +124,11 @@ export async function getWeatherForecast(
     );
 
     const forecast: ForecastResponse = await forecastResponse.json();
-
     const transformedForecast = transformResponseData(forecast.daily);
 
     return { city, forecast: transformedForecast };
   } catch (error) {
     console.error(error);
+    return { city: undefined, forecast: undefined, error };
   }
 }