Notifications: Various fixes for toasts

src/api/types/misc.ts

@@ -67,3 +67,27 @@ export type ApiNotifyException = {
   isSilent?: boolean;
   shouldShowPreviews?: boolean;
 };
+
+export type ApiNotification = {
+  localId: string;
+  message: string;
+};
+
+export type ApiError = {
+  message: string;
+  hasErrorKey?: boolean;
+  isSlowMode?: boolean;
+  textParams?: Record<string, string>;
+};
+
+export type ApiFieldError = {
+  field: string;
+  message: string;
+};
+
+export type ApiInviteInfo = {
+  title: string;
+  hash: string;
+  isChannel?: boolean;
+  participantsCount?: number;
+};

src/api/types/updates.ts

@@ -9,7 +9,9 @@ import {
   ApiFormattedText, ApiMessage, ApiPhoto, ApiPoll, ApiStickerSet, ApiThreadInfo,
 } from './messages';
 import { ApiUser, ApiUserFullInfo, ApiUserStatus } from './users';
-import { ApiNotifyException, ApiSessionData } from './misc';
+import {
+  ApiError, ApiInviteInfo, ApiNotifyException, ApiSessionData,
+} from './misc';
 
 export type ApiUpdateReady = {
   '@type': 'updateApiReady';
@@ -307,29 +309,6 @@ export type ApiUpdateMessageImage = {
   dataUri: string;
 };
 
-export type ApiNotification = {
-  message: string;
-};
-
-export type ApiError = {
-  message: string;
-  hasErrorKey?: boolean;
-  isSlowMode?: boolean;
-  textParams?: Record<string, string>;
-};
-
-export type ApiFieldError = {
-  field: string;
-  message: string;
-};
-
-export type ApiInviteInfo = {
-  title: string;
-  hash: string;
-  isChannel?: boolean;
-  participantsCount?: number;
-};
-
 export type ApiUpdateError = {
   '@type': 'error';
   error: ApiError;

src/components/main/Notifications.tsx

@@ -5,9 +5,9 @@ import { GlobalActions } from '../../global/types';
 import { ApiNotification } from '../../api/types';
 
 import { pick } from '../../util/iteratees';
+import renderText from '../common/helpers/renderText';
 
 import Notification from '../ui/Notification';
-import renderText from '../common/helpers/renderText';
 
 type StateProps = {
   notifications: ApiNotification[];
@@ -22,10 +22,10 @@ const Notifications: FC<StateProps & DispatchProps> = ({ notifications, dismissN
 
   return (
     <div id="Notifications">
-      {notifications.map(({ message }) => (
+      {notifications.map(({ message, localId }) => (
         <Notification
           message={renderText(message, ['emoji', 'br', 'links', 'simple_markdown'])}
-          onDismiss={dismissNotification}
+          onDismiss={() => dismissNotification({ localId })}
         />
       ))}
     </div>

src/components/ui/Notification.tsx

@@ -1,6 +1,5 @@
 import React, {
   FC,
-  memo,
   useCallback,
   useEffect,
   useRef,
@@ -81,4 +80,4 @@ const Notification: FC<OwnProps> = ({
   );
 };
 
-export default memo(Notification);
+export default Notification;

src/modules/actions/ui/misc.ts

@@ -1,11 +1,12 @@
 import { addReducer } from '../../../lib/teact/teactn';
 
 import { GlobalState } from '../../../global/types';
+import { ApiError } from '../../../api/types';
 
 import { IS_SINGLE_COLUMN_LAYOUT, IS_TABLET_COLUMN_LAYOUT } from '../../../util/environment';
 import getReadableErrorText from '../../../util/getReadableErrorText';
 import { selectCurrentMessageList } from '../../selectors';
-import { ApiError } from '../../../api/types';
+import generateIdFor from '../../../util/generateIdFor';
 
 const MAX_STORED_EMOJIS = 18; // Represents two rows of recent emojis
 
@@ -131,6 +132,7 @@ addReducer('addRecentSticker', (global, action, payload) => {
 
 addReducer('showNotification', (global, actions, payload) => {
   const notification = payload!;
+  notification.localId = generateIdFor({});
 
   const newNotifications = [...global.notifications];
   const existingNotificationIndex = newNotifications.findIndex((n) => n.message === notification.message);
@@ -146,10 +148,8 @@ addReducer('showNotification', (global, actions, payload) => {
   };
 });
 
-addReducer('dismissNotification', (global) => {
-  const newNotifications = [...global.notifications];
-
-  newNotifications.pop();
+addReducer('dismissNotification', (global, actions, payload) => {
+  const newNotifications = global.notifications.filter(({ localId }) => localId !== payload.localId);
 
   return {
     ...global,