From 174496c71d14bb77486de37c64e35c5eb1b8fa8d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 31 May 2022 20:46:40 -0500
Subject: [PATCH 1/9] ServiceWorker: skipWaiting and reload tabs when new
 ServiceWorker is ready

---
 app/soapbox/main.tsx  | 10 +++++++++-
 webpack/production.js |  1 +
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/main.tsx b/app/soapbox/main.tsx
index 9505ae07a..9347d796c 100644
--- a/app/soapbox/main.tsx
+++ b/app/soapbox/main.tsx
@@ -31,7 +31,15 @@ function main() {
 
     if (BuildConfig.NODE_ENV === 'production') {
       // avoid offline in dev mode because it's harder to debug
-      OfflinePluginRuntime.install();
+      // https://github.com/NekR/offline-plugin/pull/201#issuecomment-285133572
+      OfflinePluginRuntime.install({
+        onUpdateReady: function() {
+          OfflinePluginRuntime.applyUpdate();
+        },
+        onUpdated: function() {
+          window.location.reload();
+        },
+      });
     }
     perf.stop('main()');
   });
diff --git a/webpack/production.js b/webpack/production.js
index 18666a109..c90decd4e 100644
--- a/webpack/production.js
+++ b/webpack/production.js
@@ -85,6 +85,7 @@ module.exports = merge(sharedConfig, {
       ServiceWorker: {
         cacheName: 'soapbox',
         entry: join(__dirname, '../app/soapbox/service_worker/entry.ts'),
+        events: true,
         minify: true,
       },
       cacheMaps: [{

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 2/9] 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',

From 38c920e9e5b33470e9da1c232db865f509c379dc Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 23 Jun 2022 15:25:33 -0500
Subject: [PATCH 3/9] Snackbar: use 'ghost' theme button

---
 app/soapbox/features/ui/containers/notifications_container.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/features/ui/containers/notifications_container.js b/app/soapbox/features/ui/containers/notifications_container.js
index 50343fd10..a735a3fdf 100644
--- a/app/soapbox/features/ui/containers/notifications_container.js
+++ b/app/soapbox/features/ui/containers/notifications_container.js
@@ -38,7 +38,7 @@ const mapStateToProps = (state, { intl }) => {
     if (notification.action) {
       const { action } = notification;
       notification.action = (
-        <Button onClick={action} text={notification.actionLabel} />
+        <Button theme='ghost' onClick={action} text={notification.actionLabel} />
       );
     } else if (notification.actionLabel) {
       notification.action = (

From 8a13984be13bf45c39515229a748004b84bbe9f3 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 23 Jun 2022 16:05:11 -0500
Subject: [PATCH 4/9] Alerts: convert to TSX

---
 app/soapbox/actions/alerts.ts                 |  3 +-
 ...ntainer.js => notifications_container.tsx} | 48 +++++++++----------
 app/soapbox/reducers/alerts.ts                |  6 +--
 3 files changed, 29 insertions(+), 28 deletions(-)
 rename app/soapbox/features/ui/containers/{notifications_container.js => notifications_container.tsx} (50%)

diff --git a/app/soapbox/actions/alerts.ts b/app/soapbox/actions/alerts.ts
index bbb492e42..8f200563a 100644
--- a/app/soapbox/actions/alerts.ts
+++ b/app/soapbox/actions/alerts.ts
@@ -5,6 +5,7 @@ import { httpErrorMessages } from 'soapbox/utils/errors';
 import type { SnackbarActionSeverity } from './snackbar';
 import type { AnyAction } from '@reduxjs/toolkit';
 import type { AxiosError } from 'axios';
+import type { NotificationObject } from 'react-notification';
 
 const messages = defineMessages({
   unexpectedTitle: { id: 'alert.unexpected.title', defaultMessage: 'Oops!' },
@@ -17,7 +18,7 @@ export const ALERT_CLEAR = 'ALERT_CLEAR';
 
 const noOp = () => { };
 
-function dismissAlert(alert: any) {
+function dismissAlert(alert: NotificationObject) {
   return {
     type: ALERT_DISMISS,
     alert,
diff --git a/app/soapbox/features/ui/containers/notifications_container.js b/app/soapbox/features/ui/containers/notifications_container.tsx
similarity index 50%
rename from app/soapbox/features/ui/containers/notifications_container.js
rename to app/soapbox/features/ui/containers/notifications_container.tsx
index a735a3fdf..851cfdb3b 100644
--- a/app/soapbox/features/ui/containers/notifications_container.js
+++ b/app/soapbox/features/ui/containers/notifications_container.tsx
@@ -1,21 +1,15 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
-import { NotificationStack } from 'react-notification';
-import { connect } from 'react-redux';
+import { useIntl } from 'react-intl';
+import { NotificationStack, NotificationObject, StyleFactoryFn } from 'react-notification';
 import { Link } from 'react-router-dom';
 
 import { Button } from 'soapbox/components/ui';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 
 import { dismissAlert } from '../../../actions/alerts';
 import { getAlerts } from '../../../selectors';
 
-const CustomNotificationStack = (props) => (
-  <div role='assertive' data-testid='toast' className='z-1000 fixed inset-0 flex items-end px-4 py-6 pointer-events-none pt-16 lg:pt-20 sm:items-start'>
-    <NotificationStack {...props} />
-  </div>
-);
-
-const defaultBarStyleFactory = (index, style, notification) => {
+const defaultBarStyleFactory: StyleFactoryFn = (index, style, _notification) => {
   return Object.assign(
     {},
     style,
@@ -23,14 +17,19 @@ const defaultBarStyleFactory = (index, style, notification) => {
   );
 };
 
-const mapStateToProps = (state, { intl }) => {
-  const notifications = getAlerts(state);
+const SnackbarContainer: React.FC = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const notifications = useAppSelector(getAlerts);
 
   notifications.forEach(notification => {
     ['title', 'message', 'actionLabel'].forEach(key => {
+      // @ts-ignore
       const value = notification[key];
 
       if (typeof value === 'object') {
+        // @ts-ignore
         notification[key] = intl.formatMessage(value);
       }
     });
@@ -49,20 +48,21 @@ const mapStateToProps = (state, { intl }) => {
     }
   });
 
-  return { notifications, linkComponent: Link };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  const onDismiss = alert => {
+  const onDismiss = (alert: NotificationObject) => {
     dispatch(dismissAlert(alert));
   };
 
-  return {
-    onDismiss,
-    onClick: onDismiss,
-    barStyleFactory: defaultBarStyleFactory,
-    activeBarStyleFactory: defaultBarStyleFactory,
-  };
+  return (
+    <div role='assertive' data-testid='toast' className='z-1000 fixed inset-0 flex items-end px-4 py-6 pointer-events-none pt-16 lg:pt-20 sm:items-start'>
+      <NotificationStack
+        onDismiss={onDismiss}
+        onClick={onDismiss}
+        barStyleFactory={defaultBarStyleFactory}
+        activeBarStyleFactory={defaultBarStyleFactory}
+        notifications={notifications}
+      />
+    </div>
+  );
 };
 
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(CustomNotificationStack));
+export default SnackbarContainer;
diff --git a/app/soapbox/reducers/alerts.ts b/app/soapbox/reducers/alerts.ts
index 6d495bb7f..57ac4904c 100644
--- a/app/soapbox/reducers/alerts.ts
+++ b/app/soapbox/reducers/alerts.ts
@@ -22,20 +22,20 @@ type PlainAlert = Record<string, any>;
 type Alert = ReturnType<typeof AlertRecord>;
 type State = ImmutableList<Alert>;
 
-// Get next key based on last alert
+/** Get next key based on last alert. */
 const getNextKey = (state: State): number => {
   const last = state.last();
   return last ? last.key + 1 : 0;
 };
 
-// Import the alert
+/** Import the alert. */
 const importAlert = (state: State, alert: PlainAlert): State => {
   const key = getNextKey(state);
   const record = AlertRecord({ ...alert, key });
   return state.push(record);
 };
 
-// Delete an alert by its key
+/** Delete an alert by its key. */
 const deleteAlert = (state: State, alert: PlainAlert): State => {
   return state.filterNot(item => item.key === alert.key);
 };

From 421561f7316f7c7fefbfa9bc0d987282ba0a1abe Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 23 Jun 2022 16:24:10 -0500
Subject: [PATCH 5/9] Alerts: use sm button

---
 app/soapbox/features/ui/containers/notifications_container.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/features/ui/containers/notifications_container.tsx b/app/soapbox/features/ui/containers/notifications_container.tsx
index 851cfdb3b..9cbcc6e98 100644
--- a/app/soapbox/features/ui/containers/notifications_container.tsx
+++ b/app/soapbox/features/ui/containers/notifications_container.tsx
@@ -37,7 +37,7 @@ const SnackbarContainer: React.FC = () => {
     if (notification.action) {
       const { action } = notification;
       notification.action = (
-        <Button theme='ghost' onClick={action} text={notification.actionLabel} />
+        <Button theme='ghost' size='sm' onClick={action} text={notification.actionLabel} />
       );
     } else if (notification.actionLabel) {
       notification.action = (

From 9fff48a49f89423ea67c89bdd3c16021971ee61a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 23 Jun 2022 17:29:10 -0500
Subject: [PATCH 6/9] Alerts: refactor notifications_container

---
 .../ui/containers/notifications_container.tsx | 86 +++++++++++--------
 app/soapbox/reducers/alerts.ts                |  4 +
 app/soapbox/selectors/index.ts                | 25 ------
 3 files changed, 55 insertions(+), 60 deletions(-)

diff --git a/app/soapbox/features/ui/containers/notifications_container.tsx b/app/soapbox/features/ui/containers/notifications_container.tsx
index 9cbcc6e98..566acffbb 100644
--- a/app/soapbox/features/ui/containers/notifications_container.tsx
+++ b/app/soapbox/features/ui/containers/notifications_container.tsx
@@ -1,57 +1,73 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { NotificationStack, NotificationObject, StyleFactoryFn } from 'react-notification';
-import { Link } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 
+import { dismissAlert } from 'soapbox/actions/alerts';
 import { Button } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 
-import { dismissAlert } from '../../../actions/alerts';
-import { getAlerts } from '../../../selectors';
-
-const defaultBarStyleFactory: StyleFactoryFn = (index, style, _notification) => {
-  return Object.assign(
-    {},
-    style,
-    { bottom: `${14 + index * 12 + index * 42}px` },
-  );
-};
+import type { Alert } from 'soapbox/reducers/alerts';
 
+/** Portal for snackbar alerts. */
 const SnackbarContainer: React.FC = () => {
   const intl = useIntl();
+  const history = useHistory();
   const dispatch = useAppDispatch();
 
-  const notifications = useAppSelector(getAlerts);
+  const alerts = useAppSelector(state => state.alerts);
 
-  notifications.forEach(notification => {
-    ['title', 'message', 'actionLabel'].forEach(key => {
-      // @ts-ignore
-      const value = notification[key];
-
-      if (typeof value === 'object') {
-        // @ts-ignore
-        notification[key] = intl.formatMessage(value);
-      }
-    });
-
-    if (notification.action) {
-      const { action } = notification;
-      notification.action = (
-        <Button theme='ghost' size='sm' onClick={action} text={notification.actionLabel} />
-      );
-    } else if (notification.actionLabel) {
-      notification.action = (
-        <Link to={notification.actionLink}>
-          {notification.actionLabel}
-        </Link>
-      );
+  /** Apply i18n to the message if it's an object. */
+  const maybeFormatMessage = (message: any): string => {
+    switch (typeof message) {
+      case 'string': return message;
+      case 'object': return intl.formatMessage(message);
+      default: return '';
     }
-  });
+  };
+
+  /** Convert a reducer Alert into a react-notification object. */
+  const buildAlert = (item: Alert): NotificationObject => {
+    // Backwards-compatibility
+    if (item.actionLink) {
+      item = item.set('action', () => history.push(item.actionLink));
+    }
+
+    const alert: NotificationObject = {
+      message: maybeFormatMessage(item.message),
+      title: maybeFormatMessage(item.title),
+      key: item.key,
+      className: `notification-bar-${item.severity}`,
+      activeClassName: 'snackbar--active',
+      dismissAfter: 6000,
+      style: false,
+    };
+
+    if (item.action && item.actionLabel) {
+      // HACK: it's a JSX.Element instead of a string!
+      // react-notification displays it just fine.
+      alert.action = (
+        <Button theme='ghost' size='sm' onClick={item.action} text={maybeFormatMessage(item.actionLabel)} />
+      ) as any;
+    }
+
+    return alert;
+  };
 
   const onDismiss = (alert: NotificationObject) => {
     dispatch(dismissAlert(alert));
   };
 
+  const defaultBarStyleFactory: StyleFactoryFn = (index, style, _notification) => {
+    return Object.assign(
+      {},
+      style,
+      { bottom: `${14 + index * 12 + index * 42}px` },
+    );
+  };
+
+  const notifications = alerts.toArray().map(buildAlert);
+
   return (
     <div role='assertive' data-testid='toast' className='z-1000 fixed inset-0 flex items-end px-4 py-6 pointer-events-none pt-16 lg:pt-20 sm:items-start'>
       <NotificationStack
diff --git a/app/soapbox/reducers/alerts.ts b/app/soapbox/reducers/alerts.ts
index 57ac4904c..ac290e0fa 100644
--- a/app/soapbox/reducers/alerts.ts
+++ b/app/soapbox/reducers/alerts.ts
@@ -52,3 +52,7 @@ export default function alerts(state: State = ImmutableList<Alert>(), action: An
       return state;
   }
 }
+
+export {
+  Alert,
+};
diff --git a/app/soapbox/selectors/index.ts b/app/soapbox/selectors/index.ts
index e5cae976f..3dd824316 100644
--- a/app/soapbox/selectors/index.ts
+++ b/app/soapbox/selectors/index.ts
@@ -178,31 +178,6 @@ export const makeGetStatus = () => {
   );
 };
 
-const getAlertsBase = (state: RootState) => state.alerts;
-
-const buildAlert = (item: any) => {
-  return {
-    message: item.message,
-    title: item.title,
-    actionLabel: item.actionLabel,
-    actionLink: item.actionLink,
-    action: item.action,
-    key: item.key,
-    className: `notification-bar-${item.severity}`,
-    activeClassName: 'snackbar--active',
-    dismissAfter: 6000,
-    style: false,
-  };
-};
-
-type Alert = ReturnType<typeof buildAlert>;
-
-export const getAlerts = createSelector([getAlertsBase], (base): Alert[] => {
-  const arr: Alert[] = [];
-  base.forEach(item => arr.push(buildAlert(item)));
-  return arr;
-});
-
 export const makeGetNotification = () => {
   return createSelector([
     (_state: RootState, notification: Notification) => notification,

From 82122ffe4526044410a89683ad879035ba41a87f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 23 Jun 2022 17:53:04 -0500
Subject: [PATCH 7/9] Snackbar: refactor to use opts object

---
 app/soapbox/actions/snackbar.ts | 20 +++++++++++---------
 app/soapbox/main.tsx            | 13 +++++++++++--
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/app/soapbox/actions/snackbar.ts b/app/soapbox/actions/snackbar.ts
index 485537ea8..071c61c4f 100644
--- a/app/soapbox/actions/snackbar.ts
+++ b/app/soapbox/actions/snackbar.ts
@@ -15,29 +15,31 @@ export type SnackbarAction = {
   severity: SnackbarActionSeverity,
 };
 
-export const show = (
-  severity: SnackbarActionSeverity,
-  message: SnackbarMessage,
+type SnackbarOpts = {
   actionLabel?: SnackbarMessage,
   actionLink?: string,
   action?: () => void,
+};
+
+export const show = (
+  severity: SnackbarActionSeverity,
+  message: SnackbarMessage,
+  opts?: SnackbarOpts,
 ): SnackbarAction => ({
   type: ALERT_SHOW,
   message,
-  actionLabel,
-  actionLink,
   severity,
-  action,
+  ...opts,
 });
 
 export const info = (message: SnackbarMessage, actionLabel?: SnackbarMessage, actionLink?: string) =>
-  show('info', message, actionLabel, actionLink);
+  show('info', message, { actionLabel, actionLink });
 
 export const success = (message: SnackbarMessage, actionLabel?: SnackbarMessage, actionLink?: string) =>
-  show('success', message, actionLabel, actionLink);
+  show('success', message, { actionLabel, actionLink });
 
 export const error = (message: SnackbarMessage, actionLabel?: SnackbarMessage, actionLink?: string) =>
-  show('error', message, actionLabel, actionLink);
+  show('error', message, { actionLabel, actionLink });
 
 export default {
   info,
diff --git a/app/soapbox/main.tsx b/app/soapbox/main.tsx
index 862bf771f..2ae1212f0 100644
--- a/app/soapbox/main.tsx
+++ b/app/soapbox/main.tsx
@@ -4,6 +4,7 @@ import './precheck';
 import * as OfflinePluginRuntime from '@lcdp/offline-plugin/runtime';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { defineMessages } from 'react-intl';
 
 import snackbar from 'soapbox/actions/snackbar';
 import * as BuildConfig from 'soapbox/build_config';
@@ -15,6 +16,11 @@ import * as monitoring from './monitoring';
 import * as perf from './performance';
 import ready from './ready';
 
+const messages = defineMessages({
+  update: { id: 'sw.update', defaultMessage: 'Update' },
+  updateText: { id: 'sw.update_text', defaultMessage: 'An update is available.' },
+});
+
 function main() {
   perf.start('main()');
 
@@ -36,8 +42,11 @@ function main() {
       // https://github.com/NekR/offline-plugin/pull/201#issuecomment-285133572
       OfflinePluginRuntime.install({
         onUpdateReady: function() {
-          store.dispatch(snackbar.show('info', 'An update is available.', 'Update', undefined, () => {
-            OfflinePluginRuntime.applyUpdate();
+          store.dispatch(snackbar.show('info', messages.updateText, {
+            actionLabel: messages.update,
+            action: () => {
+              OfflinePluginRuntime.applyUpdate();
+            },
           }));
         },
         onUpdated: function() {

From 23c37229b8ed11fd396a30a05964f74b44050036 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 23 Jun 2022 18:03:35 -0500
Subject: [PATCH 8/9] Don't dismiss ServiceWorker snackbar

---
 app/soapbox/actions/snackbar.ts                             | 1 +
 .../features/ui/containers/notifications_container.tsx      | 6 +++---
 app/soapbox/main.tsx                                        | 1 +
 app/soapbox/reducers/alerts.ts                              | 1 +
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/actions/snackbar.ts b/app/soapbox/actions/snackbar.ts
index 071c61c4f..57d23b64b 100644
--- a/app/soapbox/actions/snackbar.ts
+++ b/app/soapbox/actions/snackbar.ts
@@ -19,6 +19,7 @@ type SnackbarOpts = {
   actionLabel?: SnackbarMessage,
   actionLink?: string,
   action?: () => void,
+  dismissAfter?: number | false,
 };
 
 export const show = (
diff --git a/app/soapbox/features/ui/containers/notifications_container.tsx b/app/soapbox/features/ui/containers/notifications_container.tsx
index 566acffbb..eafd8efe4 100644
--- a/app/soapbox/features/ui/containers/notifications_container.tsx
+++ b/app/soapbox/features/ui/containers/notifications_container.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
+import { useIntl, MessageDescriptor } from 'react-intl';
 import { NotificationStack, NotificationObject, StyleFactoryFn } from 'react-notification';
 import { useHistory } from 'react-router-dom';
 
@@ -18,7 +18,7 @@ const SnackbarContainer: React.FC = () => {
   const alerts = useAppSelector(state => state.alerts);
 
   /** Apply i18n to the message if it's an object. */
-  const maybeFormatMessage = (message: any): string => {
+  const maybeFormatMessage = (message: MessageDescriptor | string): string => {
     switch (typeof message) {
       case 'string': return message;
       case 'object': return intl.formatMessage(message);
@@ -39,7 +39,7 @@ const SnackbarContainer: React.FC = () => {
       key: item.key,
       className: `notification-bar-${item.severity}`,
       activeClassName: 'snackbar--active',
-      dismissAfter: 6000,
+      dismissAfter: item.dismissAfter,
       style: false,
     };
 
diff --git a/app/soapbox/main.tsx b/app/soapbox/main.tsx
index 2ae1212f0..9456d9aa3 100644
--- a/app/soapbox/main.tsx
+++ b/app/soapbox/main.tsx
@@ -47,6 +47,7 @@ function main() {
             action: () => {
               OfflinePluginRuntime.applyUpdate();
             },
+            dismissAfter: false,
           }));
         },
         onUpdated: function() {
diff --git a/app/soapbox/reducers/alerts.ts b/app/soapbox/reducers/alerts.ts
index ac290e0fa..b81c01b7f 100644
--- a/app/soapbox/reducers/alerts.ts
+++ b/app/soapbox/reducers/alerts.ts
@@ -14,6 +14,7 @@ const AlertRecord = ImmutableRecord({
   actionLabel: '',
   actionLink: '',
   action: () => {},
+  dismissAfter: 6000 as number | false,
 });
 
 import type { AnyAction } from 'redux';

From d5ffce844d80df33601aa79afb68478089d4f8c1 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 24 Jun 2022 11:52:57 -0500
Subject: [PATCH 9/9] ServiceWorker: display loading screen while updating

---
 app/soapbox/actions/sw.ts                   | 15 +++++++++++++++
 app/soapbox/containers/soapbox.tsx          |  2 ++
 app/soapbox/main.tsx                        |  2 ++
 app/soapbox/reducers/__tests__/meta.test.ts | 10 ++++++++++
 app/soapbox/reducers/meta.ts                |  6 ++++++
 5 files changed, 35 insertions(+)
 create mode 100644 app/soapbox/actions/sw.ts

diff --git a/app/soapbox/actions/sw.ts b/app/soapbox/actions/sw.ts
new file mode 100644
index 000000000..c12dc83e8
--- /dev/null
+++ b/app/soapbox/actions/sw.ts
@@ -0,0 +1,15 @@
+import type { AnyAction } from 'redux';
+
+/** Sets the ServiceWorker updating state. */
+const SW_UPDATING = 'SW_UPDATING';
+
+/** Dispatch when the ServiceWorker is being updated to display a loading screen. */
+const setSwUpdating = (isUpdating: boolean): AnyAction => ({
+  type: SW_UPDATING,
+  isUpdating,
+});
+
+export {
+  SW_UPDATING,
+  setSwUpdating,
+};
diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index 22c832233..e87d858d1 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -78,6 +78,7 @@ const SoapboxMount = () => {
   const settings = useSettings();
   const soapboxConfig = useSoapboxConfig();
   const features = useFeatures();
+  const swUpdating = useAppSelector(state => state.meta.swUpdating);
 
   const locale = validLocale(settings.get('locale')) ? settings.get('locale') : 'en';
 
@@ -120,6 +121,7 @@ const SoapboxMount = () => {
     me && !account,
     !isLoaded,
     localeLoading,
+    swUpdating,
   ].some(Boolean);
 
   const bodyClass = classNames('bg-white dark:bg-slate-900 text-base h-full', {
diff --git a/app/soapbox/main.tsx b/app/soapbox/main.tsx
index 9456d9aa3..84ea3739a 100644
--- a/app/soapbox/main.tsx
+++ b/app/soapbox/main.tsx
@@ -7,6 +7,7 @@ import ReactDOM from 'react-dom';
 import { defineMessages } from 'react-intl';
 
 import snackbar from 'soapbox/actions/snackbar';
+import { setSwUpdating } from 'soapbox/actions/sw';
 import * as BuildConfig from 'soapbox/build_config';
 import { store } from 'soapbox/store';
 import { printConsoleWarning } from 'soapbox/utils/console';
@@ -45,6 +46,7 @@ function main() {
           store.dispatch(snackbar.show('info', messages.updateText, {
             actionLabel: messages.update,
             action: () => {
+              store.dispatch(setSwUpdating(true));
               OfflinePluginRuntime.applyUpdate();
             },
             dismissAfter: false,
diff --git a/app/soapbox/reducers/__tests__/meta.test.ts b/app/soapbox/reducers/__tests__/meta.test.ts
index 92ee4e6ff..d318b4a30 100644
--- a/app/soapbox/reducers/__tests__/meta.test.ts
+++ b/app/soapbox/reducers/__tests__/meta.test.ts
@@ -1,5 +1,7 @@
 import { Record as ImmutableRecord } from 'immutable';
 
+import { SW_UPDATING, setSwUpdating } from 'soapbox/actions/sw';
+
 import reducer from '../meta';
 
 describe('meta reducer', () => {
@@ -7,5 +9,13 @@ describe('meta reducer', () => {
     const result = reducer(undefined, {});
     expect(ImmutableRecord.isRecord(result)).toBe(true);
     expect(result.instance_fetch_failed).toBe(false);
+    expect(result.swUpdating).toBe(false);
+  });
+
+  describe(SW_UPDATING, () => {
+    it('sets swUpdating to the provided value', () => {
+      const result = reducer(undefined, setSwUpdating(true));
+      expect(result.swUpdating).toBe(true);
+    });
   });
 });
diff --git a/app/soapbox/reducers/meta.ts b/app/soapbox/reducers/meta.ts
index f793372c8..fdce05e3e 100644
--- a/app/soapbox/reducers/meta.ts
+++ b/app/soapbox/reducers/meta.ts
@@ -3,11 +3,15 @@
 import { Record as ImmutableRecord } from 'immutable';
 
 import { fetchInstance } from 'soapbox/actions/instance';
+import { SW_UPDATING } from 'soapbox/actions/sw';
 
 import type { AnyAction } from 'redux';
 
 const ReducerRecord = ImmutableRecord({
+  /** Whether /api/v1/instance 404'd (and we should display the external auth form). */
   instance_fetch_failed: false,
+  /** Whether the ServiceWorker is currently updating (and we should display a loading screen). */
+  swUpdating: false,
 });
 
 export default function meta(state = ReducerRecord(), action: AnyAction) {
@@ -17,6 +21,8 @@ export default function meta(state = ReducerRecord(), action: AnyAction) {
         return state.set('instance_fetch_failed', true);
       }
       return state;
+    case SW_UPDATING:
+      return state.set('swUpdating', action.isUpdating);
     default:
       return state;
   }