Alerts: convert to TSX

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,

app/soapbox/features/ui/containers/notifications_container.tsx

@@ -1,21 +1,15 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
-import { NotificationStack } from 'react-notification';
+import { NotificationStack, NotificationObject, StyleFactoryFn } from 'react-notification';
-import { connect } from 'react-redux';
 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) => (
+const defaultBarStyleFactory: StyleFactoryFn = (index, style, _notification) => {
-  <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) => {
   return Object.assign(
     {},
     style,
@@ -23,14 +17,19 @@ const defaultBarStyleFactory = (index, style, notification) => {
   );
 };
 
-const mapStateToProps = (state, { intl }) => {
+const SnackbarContainer: React.FC = () => {
-  const notifications = getAlerts(state);
+  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 onDismiss = (alert: NotificationObject) => {
-};
-
-const mapDispatchToProps = (dispatch) => {
-  const onDismiss = alert => {
     dispatch(dismissAlert(alert));
   };
 
-  return {
+  return (
-    onDismiss,
+    <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'>
-    onClick: onDismiss,
+      <NotificationStack
-    barStyleFactory: defaultBarStyleFactory,
+        onDismiss={onDismiss}
-    activeBarStyleFactory: defaultBarStyleFactory,
+        onClick={onDismiss}
-  };
+        barStyleFactory={defaultBarStyleFactory}
+        activeBarStyleFactory={defaultBarStyleFactory}
+        notifications={notifications}
+      />
+    </div>
+  );
 };
 
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(CustomNotificationStack));
+export default SnackbarContainer;

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);
 };