From 3e205a9610811ca9ec1dd3f374432148bca2d3e7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 23 Jun 2022 15:20:41 -0500
Subject: [PATCH] ServiceWorker: click toast to install update (dirty)

---
 app/soapbox/actions/snackbar.ts               | 26 ++++++++++++-------
 .../ui/containers/notifications_container.js  |  9 ++++++-
 app/soapbox/main.tsx                          |  6 ++++-
 app/soapbox/reducers/alerts.ts                |  1 +
 app/soapbox/selectors/index.ts                |  1 +
 5 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/app/soapbox/actions/snackbar.ts b/app/soapbox/actions/snackbar.ts
index c2fd5f32d..485537ea8 100644
--- a/app/soapbox/actions/snackbar.ts
+++ b/app/soapbox/actions/snackbar.ts
@@ -2,24 +2,32 @@ import { ALERT_SHOW } from './alerts';
 
 import type { MessageDescriptor } from 'react-intl';
 
-export type SnackbarActionSeverity = 'info' | 'success' | 'error'
+export type SnackbarActionSeverity = 'info' | 'success' | 'error';
 
-type SnackbarMessage = string | MessageDescriptor
+type SnackbarMessage = string | MessageDescriptor;
 
 export type SnackbarAction = {
-  type: typeof ALERT_SHOW
-  message: SnackbarMessage
-  actionLabel?: SnackbarMessage
-  actionLink?: string
-  severity: SnackbarActionSeverity
-}
+  type: typeof ALERT_SHOW,
+  message: SnackbarMessage,
+  actionLabel?: SnackbarMessage,
+  actionLink?: string,
+  action?: () => void,
+  severity: SnackbarActionSeverity,
+};
 
-export const show = (severity: SnackbarActionSeverity, message: SnackbarMessage, actionLabel?: SnackbarMessage, actionLink?: string): SnackbarAction => ({
+export const show = (
+  severity: SnackbarActionSeverity,
+  message: SnackbarMessage,
+  actionLabel?: SnackbarMessage,
+  actionLink?: string,
+  action?: () => void,
+): SnackbarAction => ({
   type: ALERT_SHOW,
   message,
   actionLabel,
   actionLink,
   severity,
+  action,
 });
 
 export const info = (message: SnackbarMessage, actionLabel?: SnackbarMessage, actionLink?: string) =>
diff --git a/app/soapbox/features/ui/containers/notifications_container.js b/app/soapbox/features/ui/containers/notifications_container.js
index b7d10c9e4..50343fd10 100644
--- a/app/soapbox/features/ui/containers/notifications_container.js
+++ b/app/soapbox/features/ui/containers/notifications_container.js
@@ -4,6 +4,8 @@ import { NotificationStack } from 'react-notification';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
+import { Button } from 'soapbox/components/ui';
+
 import { dismissAlert } from '../../../actions/alerts';
 import { getAlerts } from '../../../selectors';
 
@@ -33,7 +35,12 @@ const mapStateToProps = (state, { intl }) => {
       }
     });
 
-    if (notification.actionLabel) {
+    if (notification.action) {
+      const { action } = notification;
+      notification.action = (
+        <Button onClick={action} text={notification.actionLabel} />
+      );
+    } else if (notification.actionLabel) {
       notification.action = (
         <Link to={notification.actionLink}>
           {notification.actionLabel}
diff --git a/app/soapbox/main.tsx b/app/soapbox/main.tsx
index 9347d796c..862bf771f 100644
--- a/app/soapbox/main.tsx
+++ b/app/soapbox/main.tsx
@@ -5,7 +5,9 @@ import * as OfflinePluginRuntime from '@lcdp/offline-plugin/runtime';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import snackbar from 'soapbox/actions/snackbar';
 import * as BuildConfig from 'soapbox/build_config';
+import { store } from 'soapbox/store';
 import { printConsoleWarning } from 'soapbox/utils/console';
 
 import { default as Soapbox } from './containers/soapbox';
@@ -34,7 +36,9 @@ function main() {
       // https://github.com/NekR/offline-plugin/pull/201#issuecomment-285133572
       OfflinePluginRuntime.install({
         onUpdateReady: function() {
-          OfflinePluginRuntime.applyUpdate();
+          store.dispatch(snackbar.show('info', 'An update is available.', 'Update', undefined, () => {
+            OfflinePluginRuntime.applyUpdate();
+          }));
         },
         onUpdated: function() {
           window.location.reload();
diff --git a/app/soapbox/reducers/alerts.ts b/app/soapbox/reducers/alerts.ts
index 9221cd0db..6d495bb7f 100644
--- a/app/soapbox/reducers/alerts.ts
+++ b/app/soapbox/reducers/alerts.ts
@@ -13,6 +13,7 @@ const AlertRecord = ImmutableRecord({
   severity: 'info',
   actionLabel: '',
   actionLink: '',
+  action: () => {},
 });
 
 import type { AnyAction } from 'redux';
diff --git a/app/soapbox/selectors/index.ts b/app/soapbox/selectors/index.ts
index c1160acd3..e5cae976f 100644
--- a/app/soapbox/selectors/index.ts
+++ b/app/soapbox/selectors/index.ts
@@ -186,6 +186,7 @@ const buildAlert = (item: any) => {
     title: item.title,
     actionLabel: item.actionLabel,
     actionLink: item.actionLink,
+    action: item.action,
     key: item.key,
     className: `notification-bar-${item.severity}`,
     activeClassName: 'snackbar--active',