Merge branch 'grouped-notifications' into 'develop'

Grouped notifications

See merge request soapbox-pub/soapbox-fe!1449

app/soapbox/features/notifications/components/__tests__/notification.test.tsx

@@ -28,6 +28,31 @@ describe('<Notification />', () => {
 
     expect(screen.getByTestId('notification')).toBeInTheDocument();
     expect(screen.getByTestId('account')).toContainHTML('neko@rdrama.cc');
+    expect(screen.getByTestId('message')).toHaveTextContent('Nekobit followed you');
+  });
+
+  describe('grouped notifications', () => {
+    it('renders a grouped follow notification for more than 2', async() => {
+      const { notification, state } = normalize(require('soapbox/__fixtures__/notification-follow.json'));
+      const groupedNotification = { ...notification.toJS(), total_count: 5 };
+
+      render(<Notification notification={groupedNotification} />, undefined, state);
+
+      expect(screen.getByTestId('notification')).toBeInTheDocument();
+      expect(screen.getByTestId('account')).toContainHTML('neko@rdrama.cc');
+      expect(screen.getByTestId('message')).toHaveTextContent('Nekobit + 4 others followed you');
+    });
+
+    it('renders a grouped follow notification for 1', async() => {
+      const { notification, state } = normalize(require('soapbox/__fixtures__/notification-follow.json'));
+      const groupedNotification = { ...notification.toJS(), total_count: 2 };
+
+      render(<Notification notification={groupedNotification} />, undefined, state);
+
+      expect(screen.getByTestId('notification')).toBeInTheDocument();
+      expect(screen.getByTestId('account')).toContainHTML('neko@rdrama.cc');
+      expect(screen.getByTestId('message')).toHaveTextContent('Nekobit + 1 other followed you');
+    });
   });
 
   it('renders a favourite notification', async() => {

app/soapbox/features/notifications/components/notification.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { HotKeys } from 'react-hotkeys';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, IntlShape, MessageDescriptor } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import { useAppSelector } from 'soapbox/hooks';
@@ -24,11 +25,6 @@ const notificationForScreenReader = (intl: ReturnType<typeof useIntl>, message:
   return output.join(', ');
 };
 
-// Workaround for dynamic messages (https://github.com/formatjs/babel-plugin-react-intl/issues/119#issuecomment-326202499)
-function FormattedMessageFixed(props: any) {
-  return <FormattedMessage {...props} />;
-}
-
 const buildLink = (account: Account): JSX.Element => (
   <bdi>
     <Permalink
@@ -55,7 +51,7 @@ const icons: Record<NotificationType, string> = {
   user_approved: require('@tabler/icons/icons/user-plus.svg'),
 };
 
-const messages: Record<NotificationType, { id: string, defaultMessage: string }> = {
+const messages: Record<string | number | symbol, MessageDescriptor> = defineMessages({
   follow: {
     id: 'notification.follow',
     defaultMessage: '{name} followed you',
@@ -100,18 +96,36 @@ const messages: Record<NotificationType, { id: string, defaultMessage: string }>
     id: 'notification.user_approved',
     defaultMessage: 'Welcome to {instance}!',
   },
-};
+});
 
-const buildMessage = (type: NotificationType, account: Account, targetName: string, instanceTitle: string): JSX.Element => {
+const buildMessage = (
+  intl: IntlShape,
+  type: NotificationType,
+  account: Account,
+  totalCount: number | null,
+  targetName: string,
+  instanceTitle: string,
+): React.ReactNode => {
   const link = buildLink(account);
+  const name = intl.formatMessage({
+    id: 'notification.name',
+    defaultMessage: '{link}{others}',
+  }, {
+    link,
+    others: totalCount && totalCount > 0 ? (
+      <FormattedMessage
+        id='notification.others'
+        defaultMessage=' + {count} {count, plural, one {other} other {others}}'
+        values={{ count: totalCount - 1 }}
+      />
+    ) : '',
+  });
 
-  return (
+  return intl.formatMessage(messages[type], {
-    <FormattedMessageFixed
+    name,
-      id={messages[type].id}
+    targetName,
-      defaultMessage={messages[type].defaultMessage}
+    instance: instanceTitle,
-      values={{ name: link, targetName, instance: instanceTitle }}
+  });
-    />
-  );
 };
 
 interface INotificaton {
@@ -268,7 +282,7 @@ const Notification: React.FC<INotificaton> = (props) => {
 
   const targetName = notification.target && typeof notification.target === 'object' ? notification.target.acct : '';
 
-  const message: React.ReactNode = type && account && typeof account === 'object' ? buildMessage(type, account, targetName, instance.title) : null;
+  const message: React.ReactNode = type && account && typeof account === 'object' ? buildMessage(intl, type, account, notification.total_count, targetName, instance.title) : null;
 
   return (
     <HotKeys handlers={getHandlers()} data-testid='notification'>
@@ -300,6 +314,7 @@ const Notification: React.FC<INotificaton> = (props) => {
                   theme='muted'
                   size='sm'
                   truncate
+                  data-testid='message'
                 >
                   {message}
                 </Text>

app/soapbox/normalizers/notification.ts

@@ -34,6 +34,7 @@ export const NotificationRecord = ImmutableRecord({
   status: null as EmbeddedEntity<Status>,
   target: null as EmbeddedEntity<Account>, // move
   type: '' as NotificationType | '',
+  total_count: null as number | null, // grouped notifications
 });
 
 export const normalizeNotification = (notification: Record<string, any>) => {

app/soapbox/reducers/__tests__/notifications-test.js

@@ -274,6 +274,7 @@ describe('notifications reducer', () => {
             status: '9vvNxoo5EFbbnfdXQu',
             emoji: '😢',
             chat_message: null,
+            total_count: null,
           })],
           ['10743', ImmutableMap({
             id: '10743',
@@ -284,6 +285,7 @@ describe('notifications reducer', () => {
             status: '9vvNxoo5EFbbnfdXQu',
             emoji: null,
             chat_message: null,
+            total_count: null,
           })],
           ['10741', ImmutableMap({
             id: '10741',
@@ -294,6 +296,7 @@ describe('notifications reducer', () => {
             status: '9vvNxoo5EFbbnfdXQu',
             emoji: null,
             chat_message: null,
+            total_count: null,
           })],
           ['10734', ImmutableMap({
             id: '10734',
@@ -339,6 +342,7 @@ describe('notifications reducer', () => {
             status: '9vvNxoo5EFbbnfdXQu',
             emoji: '😢',
             chat_message: null,
+            total_count: null,
           })],
           ['10743', ImmutableMap({
             id: '10743',
@@ -349,6 +353,7 @@ describe('notifications reducer', () => {
             status: '9vvNxoo5EFbbnfdXQu',
             emoji: null,
             chat_message: null,
+            total_count: null,
           })],
           ['10741', ImmutableMap({
             id: '10741',
@@ -359,6 +364,7 @@ describe('notifications reducer', () => {
             status: '9vvNxoo5EFbbnfdXQu',
             emoji: null,
             chat_message: null,
+            total_count: null,
           })],
         ]),
         unread: 1,