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 = (
+
+ );
+ } else if (notification.actionLabel) {
notification.action = (
{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',