Change upgrade process to a notification

src/components/app/about-tab/index.jsx

@@ -1,16 +1,10 @@
 import React, { useEffect } from 'react';
 import propTypes from 'prop-types';
-import { applyUpdate } from 'offline-plugin/runtime';
 import patronImage from '@images/patron.png';
 import Credits from './credits';
 import './about.scss';
 
-const handleUpdateClick = e => {
-  e.preventDefault();
-  applyUpdate();
-};
-
-const AboutTabComponent = ({ version, isUpdateAvailable, isOnline }) => {
+const AboutTabComponent = ({ version }) => {
   useEffect(() => {
     if (window.twttr) {
       window.twttr.ready(twttr => {
@@ -20,14 +14,6 @@ const AboutTabComponent = ({ version, isUpdateAvailable, isOnline }) => {
   }, [window.twttr]);
   return (
     <div className="about-tab centered-tab">
-      {isUpdateAvailable && isOnline && (
-        <p className="update-alert">
-          <a href="/" onClick={handleUpdateClick}>
-            <span className="update-alert__dot" />
-            New Version Available
-          </a>
-        </p>
-      )}
       <p>
         This site is a collection of generative music pieces which can be
         listened to. The term &quot;generative music&quot; describes music which

src/components/app/title-nav/index.jsx

@@ -2,11 +2,18 @@ import React from 'react';
 import propTypes from 'prop-types';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { NavLink } from 'react-router-dom';
+import { applyUpdate } from 'offline-plugin/runtime';
 import IconButton from '@components/shared/icon-button';
 import TextButton from '@components/shared/text-button';
+import noop from '@utils/noop';
 //import AirPlay from './air-play';
 import './title-nav.scss';
 
+const handleUpdateClick = e => {
+  e.preventDefault();
+  applyUpdate();
+};
+
 const TitleNavLink = ({
   text,
   linkTo,
@@ -48,6 +55,7 @@ const TitleNavComponent = ({
   isInstallable,
   dismissNotification,
   promptInstallation,
+  isOnline,
 }) => {
   let notification;
   if (notifications.length > 0) {
@@ -55,6 +63,8 @@ const TitleNavComponent = ({
     notification = notifications[0];
   }
 
+  const canInstallUpdate = isUpdateAvailable && isOnline;
+
   return (
     <nav className="title-nav">
       <div className="title-nav__header">
@@ -114,26 +124,28 @@ const TitleNavComponent = ({
             text="ABOUT"
             parentClass="title-nav__header__tab-list"
             linkTo="/about"
-            hasDot={isUpdateAvailable}
           />
         </ul>
       </div>
-      {notification && (
+      {(notification || canInstallUpdate) && (
         <div className="title-nav__notification">
           <a
-            href={notification.link}
+            href={canInstallUpdate ? '/' : notification.link}
             target="_blank"
             rel="noreferrer noopener"
             className="title-nav__notification__msg"
+            onClick={canInstallUpdate ? handleUpdateClick : noop}
           >
-            {notification.message}
+            {canInstallUpdate ? 'Upgrade to new version' : notification.message}
           </a>
-          <IconButton
-            className="title-nav__notification__close"
-            faIcon={faTimes}
-            title="Dismiss"
-            onClick={() => dismissNotification(notification.id)}
-          />
+          {!canInstallUpdate && (
+            <IconButton
+              className="title-nav__notification__close"
+              faIcon={faTimes}
+              title="Dismiss"
+              onClick={() => dismissNotification(notification.id)}
+            />
+          )}
         </div>
       )}
     </nav>

src/containers/about-tab.container.js

@@ -1,10 +1,8 @@
 import { connect } from 'react-redux';
 import AboutTabComponent from '../components/app/about-tab';
 
-const mapStateToProps = ({ version, isUpdateAvailable, isOnline }) => ({
+const mapStateToProps = ({ version }) => ({
   version,
-  isUpdateAvailable,
-  isOnline,
 });
 
 export default connect(mapStateToProps)(AboutTabComponent);

src/containers/title-nav.container.js

@@ -8,15 +8,16 @@ const mapStateToProps = ({
   isUpdateAvailable,
   notifications,
   isInstallable,
+  isOnline,
 }) => ({
   isUpdateAvailable,
   isInstallable,
+  isOnline,
   notifications: notifications.filter(({ isDismissed }) => !isDismissed),
 });
 
 export default withRouter(
-  connect(
-    mapStateToProps,
-    { dismissNotification, promptInstallation }
-  )(TitleNavComponent)
+  connect(mapStateToProps, { dismissNotification, promptInstallation })(
+    TitleNavComponent
+  )
 );