Alerts: refactor notifications_container

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 type { Alert } from 'soapbox/reducers/alerts';
-import { getAlerts } from '../../../selectors';
-
-const defaultBarStyleFactory: StyleFactoryFn = (index, style, _notification) => {
-  return Object.assign(
-    {},
-    style,
-    { bottom: `${14 + index * 12 + index * 42}px` },
-  );
-};
 
+/** 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 => {
+  /** Apply i18n to the message if it's an object. */
-    ['title', 'message', 'actionLabel'].forEach(key => {
+  const maybeFormatMessage = (message: any): string => {
-      // @ts-ignore
+    switch (typeof message) {
-      const value = notification[key];
+      case 'string': return message;
-
+      case 'object': return intl.formatMessage(message);
-      if (typeof value === 'object') {
+      default: return '';
-        // @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>
-      );
     }
-  });
+  };
+
+  /** 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

app/soapbox/reducers/alerts.ts

@@ -52,3 +52,7 @@ export default function alerts(state: State = ImmutableList<Alert>(), action: An
       return state;
   }
 }
+
+export {
+  Alert,
+};

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,