move notification logic to channel context

Author: DanC5

src/components/Channel/Channel.tsx

@@ -5,6 +5,7 @@ import React, {
   useLayoutEffect,
   useReducer,
   useRef,
+  useState,
 } from 'react';
 // @ts-expect-error
 import DefaultEmoji from 'emoji-mart/dist/components/emoji/nimble-emoji.js';
@@ -56,6 +57,7 @@ import { MessageSimple, MessageUIComponentProps } from '../Message';
 
 import {
   ChannelContextValue,
+  ChannelNotifications,
   ChannelProvider,
   MessageAttachments,
   MessageToSend,
@@ -245,6 +247,9 @@ const ChannelInner = <
   const { client, mutes, theme } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { t } = useTranslationContext();
 
+  const [notifications, setNotifications] = useState<ChannelNotifications>([]);
+  const notificationTimeouts: Array<NodeJS.Timeout> = [];
+
   const [state, dispatch] = useReducer<
     ChannelStateReducer<At, Ch, Co, Ev, Me, Re, Us>
   >(channelReducer, initialState);
@@ -383,6 +388,7 @@ const ChannelInner = <
       if (channel) channel.off(handleEvent);
       client.off('connection.changed', handleEvent);
       client.off('connection.recovered', handleEvent);
+      notificationTimeouts.forEach(clearTimeout);
     };
   }, [channel, client, handleEvent, markRead]);
 
@@ -399,6 +405,30 @@ const ChannelInner = <
 
   /** MESSAGE */
 
+  // Adds a temporary notification to message list, will be removed after 5 seconds
+  const addNotification = (text: string, type: 'success' | 'error') => {
+    if (typeof text !== 'string' || (type !== 'success' && type !== 'error')) {
+      return;
+    }
+
+    const id = uuidv4();
+
+    setNotifications((prevNotifications) => [
+      ...prevNotifications,
+      { id, text, type },
+    ]);
+
+    const timeout = setTimeout(
+      () =>
+        setNotifications((prevNotifications) =>
+          prevNotifications.filter((notification) => notification.id !== id),
+        ),
+      5000,
+    );
+
+    notificationTimeouts.push(timeout);
+  };
+
   const loadMoreFinished = useCallback(
     debounce(
       (
@@ -718,6 +748,7 @@ const ChannelInner = <
   const channelContextValue: ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us> = {
     ...state,
     acceptedFiles,
+    addNotification,
     Attachment,
     channel,
     client, // from chatContext, for legacy reasons
@@ -731,6 +762,7 @@ const ChannelInner = <
     Message,
     multipleUploads,
     mutes,
+    notifications,
     onMentionsClick: onMentionsHoverOrClick,
     onMentionsHover: onMentionsHoverOrClick,
     openThread,

src/components/MessageList/MessageList.tsx

@@ -1,5 +1,4 @@
 import React, { PureComponent, RefObject } from 'react';
-import { v4 as uuidv4 } from 'uuid';
 
 import { Center } from './Center';
 import { ConnectionStatus } from './ConnectionStatus';
@@ -71,11 +70,6 @@ class MessageListWithContext<
   MessageListWithContextProps<At, Ch, Co, Ev, Me, Re, Us>,
   {
     newMessagesNotification: boolean;
-    notifications: Array<{
-      id: string;
-      text: string;
-      type: 'success' | 'error';
-    }>;
     messageListRect?: DOMRect;
   }
 > {
@@ -87,7 +81,6 @@ class MessageListWithContext<
 
   bottomRef: RefObject<HTMLDivElement>;
   messageList: RefObject<HTMLDivElement>;
-  notificationTimeouts: Array<NodeJS.Timeout>;
   closeToTop: boolean | undefined;
   scrollOffset: number | undefined;
 
@@ -96,12 +89,10 @@ class MessageListWithContext<
 
     this.state = {
       newMessagesNotification: false,
-      notifications: [],
     };
 
     this.bottomRef = React.createRef();
     this.messageList = React.createRef();
-    this.notificationTimeouts = [];
   }
 
   componentDidMount() {
@@ -114,10 +105,6 @@ class MessageListWithContext<
     });
   }
 
-  componentWillUnmount() {
-    this.notificationTimeouts.forEach(clearTimeout);
-  }
-
   getSnapshotBeforeUpdate(
     prevProps: MessageListWithContextProps<At, Ch, Co, Ev, Me, Re, Us>,
   ) {
@@ -270,35 +257,6 @@ class MessageListWithContext<
     }
   };
 
-  /**
-   * Adds a temporary notification to message list.
-   * Notification will be removed after 5 seconds.
-   *
-   * @param notificationText  Text of notification to be added
-   * @param type              Type of notification. success | error
-   */
-  addNotification = (notificationText: string, type: 'success' | 'error') => {
-    if (typeof notificationText !== 'string') return;
-    if (type !== 'success' && type !== 'error') return;
-
-    const id = uuidv4();
-
-    this.setState(({ notifications }) => ({
-      notifications: [...notifications, { id, text: notificationText, type }],
-    }));
-
-    // remove the notification after 5000 ms
-    const ct = setTimeout(
-      () =>
-        this.setState(({ notifications }) => ({
-          notifications: notifications.filter((n) => n.id !== id),
-        })),
-      5000,
-    );
-
-    this.notificationTimeouts.push(ct);
-  };
-
   onMessageLoadCaptured = () => {
     // A load event (emitted by e.g. an <img>) was captured on a message.
     // In some cases, the loaded asset is larger than the placeholder, which means we have to scroll down.
@@ -319,6 +277,7 @@ class MessageListWithContext<
 
   render() {
     const {
+      addNotification,
       Attachment = DefaultAttachment,
       Avatar = DefaultAvatar,
       DateSeparator = DefaultDateSeparator,
@@ -329,6 +288,7 @@ class MessageListWithContext<
       messageActions = Object.keys(MESSAGE_ACTIONS),
       messages = [],
       MessageSystem = EventComponent,
+      notifications,
       noGroupByUser = false,
       pinPermissions = defaultPinPermissions,
       t,
@@ -370,7 +330,7 @@ class MessageListWithContext<
             internalMessageProps={{
               additionalMessageInputProps: this.props
                 .additionalMessageInputProps,
-              addNotification: this.addNotification,
+              addNotification,
               Attachment,
               Avatar,
               channel: this.props.channel,
@@ -411,7 +371,7 @@ class MessageListWithContext<
           />
         </div>
         <div className='str-chat__list-notifications'>
-          {this.state.notifications.map((notification) => (
+          {notifications.map((notification) => (
             <CustomNotification
               active={true}
               key={notification.id}

src/context/ChannelContext.tsx

@@ -33,6 +33,12 @@ import type {
   UnknownType,
 } from '../../types/types';
 
+export type ChannelNotifications = Array<{
+  id: string;
+  text: string;
+  type: 'success' | 'error';
+}>;
+
 export type CommonEmoji = {
   custom: boolean;
   emoticons: [];
@@ -144,8 +150,10 @@ export type ChannelContextValue<
   Re extends DefaultReactionType = DefaultReactionType,
   Us extends DefaultUserType<Us> = DefaultUserType
 > = ChannelState<At, Ch, Co, Ev, Me, Re, Us> & {
+  addNotification: (text: string, type: 'success' | 'error') => void;
   channel: Channel<At, Ch, Co, Ev, Me, Re, Us>;
   client: StreamChat<At, Ch, Co, Ev, Me, Re, Us>;
+  notifications: ChannelNotifications;
   acceptedFiles?: string[];
   Attachment?: React.ComponentType<AttachmentProps<At>>;
   closeThread?: (event: React.SyntheticEvent) => void;