Feat: versioning & refresh banner (#7)

* versioning & refresh banner

* add version.json to network first strategy

* Change update banner style to be flex by default

* update app version

.vscode/settings.json

@@ -1,3 +1,5 @@
 {
-  "editor.tabSize": 2
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "weather-here",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "private": true,
   "dependencies": {
     "react": "^16.8.6",
@@ -47,4 +47,4 @@
     "react-app-rewired": "^2.1.3",
     "workbox-webpack-plugin": "^4.3.1"
   }
-}
+}

public/service-worker.js

@@ -5,6 +5,7 @@ if (workbox) {
   workbox.routing.registerRoute(new RegExp('/images/backgrounds/'), new workbox.strategies.StaleWhileRevalidate());
   workbox.routing.registerRoute(new RegExp('/favicon.png'), new workbox.strategies.StaleWhileRevalidate());
   workbox.routing.registerRoute(/\.(?:js|css|html)$/, new workbox.strategies.StaleWhileRevalidate());
+  workbox.routing.registerRoute('/version.json', new workbox.strategies.NetworkFirst());
 } else {
   console.log(`Boo! Workbox didn't load 😬`);
 }

public/version.json

@@ -0,0 +1 @@
+"1.1.0"

src/App.css

@@ -337,6 +337,39 @@ footer a:active {
   text-shadow: none;
 }
 
+.updateBanner {
+  display: flex;
+  position: fixed;
+  background: rgba(0, 0, 0, 0.85);
+  padding: 10px;
+  left: 0;
+  right: 0;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+  color: hotpink;
+  top: auto;
+  bottom: 0;
+  z-index: 2;
+}
+
+.updateBanner .refresh-btn {
+  padding: 5px 15px;
+  border-radius: 15px;
+  font-size: 1.1em;
+  color: white;
+  background-color: teal;
+  font-weight: bold;
+  border: none;
+  margin-left: 10px;
+  box-sizing: border-box;
+}
+
+.updateBanner .refresh-btn:hover,
+.updateBanner .refresh-btn:focus {
+  background-color: darkgreen;
+}
+
 @media (max-width: 740px) {
   main {
     padding-top: 5em;

src/App.jsx

@@ -8,6 +8,8 @@ import { fromCtoF, fromFtoC } from './helpers/tempHelper';
 import useFetchTemp from './hooks/useFetchTemp';
 import useBgImageURL from './hooks/useBgImageURL';
 import useAQI from './hooks/useAQI';
+import useVersionInfo from './hooks/useVersionInfo';
+import AppUpdateBanner from './Components/AppUpdateBanner';
 
 const { useState, Fragment } = React;
 
@@ -21,6 +23,7 @@ export default function App(props) {
   const [upcomingFilter, setUpcomingFilter] = useState(null);
   const [mainTransform, setTransform] = useState(null);
   const { aqi, cityName } = useAQI(location);
+  const { isUpToDate } = useVersionInfo();
 
   const handleUnitChange = () => {
     if (temp !== '---') {
@@ -48,6 +51,7 @@ export default function App(props) {
         <WeekWeather {...{ temps, unit, comingWeather, upcomingFilter, mainTransform }} />
       </main>
       <Footer {...{ location }} />
+      {!isUpToDate && <AppUpdateBanner />}
     </Fragment>
   );
 }

src/Components/AppUpdateBanner.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { clearCacheAndRefresh } from '../hooks/useVersionInfo';
+
+export default function AppUpdateBanner() {
+  return (
+    <div className="updateBanner">
+      The app is out of date &amp; please click the "Refresh Now" button to have a better experience.
+      <button onClick={clearCacheAndRefresh} className="refresh-btn">
+        Refresh Now
+      </button>
+    </div>
+  );
+}

src/hooks/useAQI.jsx

@@ -6,7 +6,9 @@ export default function useAQI(location) {
   const [data, setData] = useState({ data: { aqi: null, city: { name: null } } });
 
   useEffect(() => {
-    fetchAQI();
+    if (location) {
+      fetchAQI();
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location]);
 

src/hooks/useVersionInfo.jsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+
+export default function useVersionInfo() {
+  const [isUpToDate, setIsUpToDate] = useState(true);
+
+  useEffect(() => {
+    if (wasUpToDate()) {
+      fetch('/version.json')
+        .then((versionJSON) => versionJSON.json())
+        .then((versionString) => {
+          const localVersion = getLocalVersion();
+          if (versionString !== localVersion) {
+            console.log('## The app is out of date & needs update!');
+            setIsUpToDate(false);
+            localStorage.setItem('wasUpToDate', false);
+          } else {
+            localStorage.setItem('wasUpToDate', true);
+            setIsUpToDate(true);
+          }
+
+          localStorage.setItem('version', versionString);
+        })
+        .catch((err) => {
+          console.log('App offline, assuming up to date');
+        });
+    } else {
+      clearCacheAndRefresh();
+    }
+  }, []);
+
+  return { isUpToDate };
+}
+
+function getLocalVersion() {
+  return localStorage.getItem('version') || '';
+}
+
+function wasUpToDate() {
+  return localStorage.getItem('wasUpToDate') === false ? false : true;
+}
+
+export function clearCacheAndRefresh() {
+  const currentVersion = getLocalVersion();
+  localStorage.clear();
+  localStorage.setItem('version', currentVersion);
+  window.location.reload();
+}