Add status bar

src/App.css

@@ -1,5 +1,5 @@
 .App {
-  margin: 0.6em;
+  margin: 1em 0.6em;
 }
 
 .weather-container {
@@ -82,3 +82,17 @@
     display: none;
   }
 }
+
+.status-message {
+  position: absolute;
+  top: 0;
+  background-color: hsla(60, 100%, 50%, 0.8);
+  left: 0;
+  right: 0;
+  text-align: center;
+  padding: 0.1em;
+}
+
+.button {
+  padding: 0.5em;
+}

src/App.js

@@ -5,10 +5,10 @@ import { LOCATION_UPDATE_INTERVAL } from "./config";
 
 function App() {
   const [location, setLocation] = useState(undefined);
-  const [locating, setLocating] = useState(false);
+  const [isLocating, setIsLocating] = useState(false);
 
   function gotLocation(loc) {
-    setLocating(false);
+    setIsLocating(false);
     const newLocation = {
       lat: loc.coords.latitude.toFixed(2),
       lng: loc.coords.longitude.toFixed(2)
@@ -22,14 +22,14 @@ function App() {
   }
 
   function noLocation(err) {
-    setLocating(false);
+    setIsLocating(false);
     console.log(err);
   }
 
   function askLocation() {
     console.log("Asking for location");
     if (navigator.geolocation) {
-      setLocating(true);
+      setIsLocating(true);
       navigator.geolocation.getCurrentPosition(gotLocation, noLocation, {
         maximumAge: 30 * 60 * 1000
       });
@@ -69,8 +69,11 @@ function App() {
 
   return (
     <div className="App">
-      {locating && "Paikannetaan..."}
-      <DataLayer location={location} onLocateClick={askLocation} />
+      <DataLayer
+        isLocating={isLocating}
+        location={location}
+        onLocateClick={askLocation}
+      />
     </div>
   );
 }

src/components/DataLayer.js

@@ -2,8 +2,9 @@ import React, { useState, useEffect } from "react";
 import { fetchForecast } from "../api";
 import { FORECAST_REFRESH_INTERVAL, OLD_DATA_CHECK_INTERVAL } from "../config";
 import { Weather } from "./Weather";
+import { StatusMessage } from "./StatusMessage";
 
-export function DataLayer({ location, onLocateClick }) {
+export function DataLayer({ isLocating, location, onLocateClick }) {
   const [forecastData, setForecastData] = useState(undefined);
   const [lastForecastDataAttempt, setLastForecastDataAttempt] = useState(
     undefined
@@ -20,17 +21,21 @@ export function DataLayer({ location, onLocateClick }) {
   }, [mark]);
 
   const [isError, setIsError] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     const fetchData = async () => {
       setIsError(false);
+      setIsLoading(true);
       try {
         const result = await fetchForecast({ location });
         setForecastData(result);
         setLastForecastDataAttempt(Date.now());
+        setIsLoading(false);
       } catch (error) {
         console.error(error);
         setIsError(true);
+        setIsLoading(false);
       }
     };
     if (
@@ -52,7 +57,12 @@ export function DataLayer({ location, onLocateClick }) {
 
   return (
     <>
-      {isError && "Virhe haettaessa viimeisimpiä ennusteita."}
+      <StatusMessage
+        isLocating={isLocating}
+        location={location}
+        isLoading={isLoading}
+        isError={isError}
+      />
       <Weather
         location={location}
         forecastData={forecastData}

src/components/StatusMessage.js

@@ -0,0 +1,23 @@
+import React from "react";
+
+function getMessage({ isLocating, location, isLoading, isError }) {
+  if (isLocating) {
+    return "Paikannetaan...";
+  } else if (!location) {
+    return "Sijaintitieto tarvitaan ennusteen hakemiseen.";
+  } else if (isLoading) {
+    return "Tietoja haetaan...";
+  } else if (isError) {
+    return "Virhe tietojen haussa.";
+  }
+  return undefined;
+}
+
+export function StatusMessage({ isLocating, location, isLoading, isError }) {
+  const message = getMessage({ isLocating, location, isLoading, isError });
+  if (message) {
+    return <div className="status-message">{message}</div>;
+  } else {
+    return null;
+  }
+}

src/components/Weather.js

@@ -9,12 +9,14 @@ export function Weather({ location, forecastData, onLocateClick }) {
 
       {!location && (
         <>
-          ei sijaintia <button onClick={onLocateClick}>Paikanna</button>
+          <button className="button" onClick={onLocateClick}>
+            Hae sijainti
+          </button>
         </>
       )}
 
       <Forecast data={forecastData && forecastData["items"]} />
-      <LastUpdated ts={forecastData && forecastData["fetchTs"]} />
+      {forecastData && <LastUpdated ts={forecastData["fetchTs"]} />}
     </>
   );
 }