SW update available message implemented

src/App.scss

@@ -204,15 +204,4 @@
             outline: none;
         }
     }
-}
-
-
-.alert-global {
-    position: absolute;
-    right: 7px;
-    top: 7px;
-}
-
-#alert-new-version-available {
-    display: none;
 }

src/App.tsx

@@ -16,8 +16,7 @@ import Container from 'react-bootstrap/Container';
 import Tab from 'react-bootstrap/Tab';
 import Nav from 'react-bootstrap/Nav';
 import Collapse from 'react-bootstrap/Collapse';
-import Alert from 'react-bootstrap/Alert';
-import { List, ExclamationTriangle } from 'react-bootstrap-icons';
+import { List } from 'react-bootstrap-icons';
 
 
 type AppProps = {}
@@ -290,14 +289,6 @@ class App extends React.Component<AppProps, AppState> {
                 </Tab.Container>
             </Container>
 
-            <Alert
-                variant="primary"
-                className="alert-global"
-                id="alert-new-version-available">
-                    <ExclamationTriangle />&nbsp;&nbsp;
-                    A new version of TacoTab is available! <Alert.Link onClick={() => window.location.reload()}>Click to reload.</Alert.Link>
-            </Alert>
-
             <SetupScreen
                 init={this.state.init}
                 initializeTournament={this.initializeTournament} />

src/ServiceWorkerWrapper.tsx

@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from 'react';
+import * as serviceWorker from './serviceWorker';
+import Alert from 'react-bootstrap/Alert';
+import { ExclamationTriangle } from 'react-bootstrap-icons';
+
+
+export const ServiceWorkerWrapper = () => {
+    const [showReload, setShowReload] = useState(false);
+    const [waitingWorker, setWaitingWorker] = useState<ServiceWorker | null>(null);
+
+    const onSWUpdate = (registration: ServiceWorkerRegistration) => {
+        setShowReload(true);
+        setWaitingWorker(registration.waiting);
+    };
+
+    useEffect(() => {
+        serviceWorker.register({ onUpdate: onSWUpdate });
+    }, []);
+
+    const reloadPage = () => {
+        waitingWorker?.postMessage({ type: 'SKIP_WAITING' });
+        setShowReload(false);
+        window.location.reload(true);
+    }
+
+    return (
+        <Alert
+            show={showReload}
+            variant="primary"
+            className="alert-global">
+                <ExclamationTriangle />&nbsp;&nbsp;
+                A new version of TacoTab is available! <Alert.Link onClick={reloadPage}>Click to reload.</Alert.Link>
+        </Alert>
+    );
+}

src/home/Settings.tsx

@@ -265,6 +265,7 @@ class Settings extends React.PureComponent<SettingsProps, SettingsState> {
                         <p>
                             New in version 0.4.3:
                             <ul>
+                                <li>General: from now on, when a new update to TacoTab is available, a message will tell you and let you reload</li>
                                 <li>General: in text fields, pressing 'Enter' now submits your input rather than entering a newline</li>
                                 <li>General: if a form can't be submitted, for example because you left crucial fields empty, the app will now give you feedback</li>
                                 <li>General: many performance improvements, especially around editing text fields</li>

src/index.scss

@@ -451,4 +451,12 @@ form.was-validated {
 .modal-content {
     box-shadow: $heavy;
     border: none;
+}
+
+
+// Alert styling
+.alert-global {
+    position: absolute;
+    right: 7px;
+    top: 7px;
 }

src/index.tsx

@@ -3,23 +3,13 @@ import ReactDOM from 'react-dom';
 import './custom.scss';
 import './index.scss';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
+import { ServiceWorkerWrapper } from './ServiceWorkerWrapper';
+
 
 ReactDOM.render(
     <React.StrictMode>
+        <ServiceWorkerWrapper />
         <App />
     </React.StrictMode>,
     document.getElementById('root')
 );
-
-serviceWorker.register();
-
-// serviceWorker.register({
-//     onUpdate: (registration: ServiceWorkerRegistration) => {
-//         document.getElementById("alert-new-version-available")?.classList.add("show");
-//         if( registration && registration.waiting ) {
-//             registration.waiting.postMessage({type: 'SKIP_WAITING '});
-//         }
-//         window.location.reload(true);
-//     }
-// });