Fixed orderin of toasts with Maps

js/background.js

@@ -802,7 +802,7 @@
       appView.openConversation(groupId, {});
     };
 
-    window.toasts = {};
+    window.toasts = new Map();
     window.pushToast = options => {
       // Setting toasts with the same ID can be used to prevent identical
       // toasts from appearing at once (stacking).
@@ -810,45 +810,38 @@
 
       const params = {
         title: options.title,
-        description: options.description ? options.description : '',
-        type: options.type ? options.type : '',
-        id: options.id ? options.id : '',
+        id:
+          options.id ||
+          Math.random()
+            .toString(36)
+            .substring(3),
+        description: options.description || '',
+        type: options.type || '',
       };
 
       // Give all toasts an ID. User may define.
-      const toastID = options.id
-        ? options.id
-        : Math.random()
-            .toString(36)
-            .substring(3);
-
-      let toastExists = false;
-      // eslint-disable-next-line no-restricted-syntax
-      for (const key in window.toasts) {
-        if (!!options.id && key === options.id) {
-          toastExists = true;
-          window.toasts[key].update(params);
-          break;
-        }
-      }
-
-      if (!toastExists) {
+      const toastID = params.id;
+      const toast = !!toastID && window.toasts.get(toastID);
+      if (toast) {
+        window.toasts.get(toastID).update(params);
+      } else {
         // Make new Toast
-        window.toasts[toastID] = new Whisper.SessionToastView({
-          el: window.$('#session-toast-container'),
-        });
+        window.toasts.set(
+          toastID,
+          new Whisper.SessionToastView({
+            el: $('#session-toast-container'),
+          })
+        );
 
-        window.toasts[toastID].render();
-        window.toasts[toastID].update(params);
+        window.toasts.get(toastID).render();
+        window.toasts.get(toastID).update(params);
       }
 
       // Remove some toasts if too many exist
       const maxToasts = 6;
-      const numToasts = window.toasts.length;
-
-      if (numToasts > maxToasts) {
-        const finalToastID = window.toasts.keys[window.toasts.length];
-        window.toasts[finalToastID].fadeToast();
+      while (window.toasts.size > maxToasts) {
+        const finalToastID = window.toasts.keys().next().value;
+        window.toasts.get(finalToastID).fadeToast();
       }
 
       return toastID;

js/models/conversations.js

@@ -2648,8 +2648,11 @@
 
     copyPublicKey() {
       clipboard.writeText(this.id);
-      window.Whisper.events.trigger('showToast', {
-        message: i18n('copiedPublicKey'),
+
+      window.pushToast({
+        title: i18n('copiedPublicKey'),
+        type: 'success',
+        id: 'copiedPublicKey',
       });
     },
 

js/models/messages.js

@@ -1021,8 +1021,11 @@
       } else {
         clipboard.writeText(this.OUR_NUMBER);
       }
-      window.Whisper.events.trigger('showToast', {
-        message: i18n('copiedPublicKey'),
+
+      window.pushToast({
+        title: i18n('copiedPublicKey'),
+        type: 'success',
+        id: 'copiedPublicKey',
       });
     },
 
@@ -1037,12 +1040,16 @@
           const success = await channelAPI.banUser(source);
 
           if (success) {
-            window.Whisper.events.trigger('showToast', {
-              message: i18n('userBanned'),
+            window.pushToast({
+              title: i18n('userBanned'),
+              type: 'success',
+              id: 'userBanned',
             });
           } else {
-            window.Whisper.events.trigger('showToast', {
-              message: i18n('userBanFailed'),
+            window.pushToast({
+              title: i18n('userBanFailed'),
+              type: 'error',
+              id: 'userBanFailed',
             });
           }
         },
@@ -1074,8 +1081,11 @@
 
     copyText() {
       clipboard.writeText(this.get('body'));
-      window.Whisper.events.trigger('showToast', {
-        message: i18n('copiedMessage'),
+
+      window.pushToast({
+        title: i18n('copiedMessage'),
+        type: 'success',
+        id: 'copiedMessage',
       });
     },
 

js/views/add_server_dialog_view.js

@@ -53,8 +53,10 @@
           this.showError(result.errorCode);
           return;
         }
-        window.Whisper.events.trigger('showToast', {
-          message: i18n('connectToServerSuccess'),
+        window.pushToast({
+          title: i18n('connectToServerSuccess'),
+          type: 'success',
+          id: 'connectToServerSuccess',
         });
         this.close();
       });

js/views/session_toast_view.js

@@ -1,4 +1,4 @@
-/* global Whisper, $ */
+/* global Whisper */
 
 // eslint-disable-next-line func-names
 (function() {
@@ -9,8 +9,8 @@
   Whisper.SessionToastView = Whisper.View.extend({
     initialize(options) {
       this.props = {
-        el: $('#session-toast-container'),
         title: options.title,
+        id: options.id,
         description: options.description,
         fadeToast: this.fadeToast.bind(this),
         closeToast: this.closeToast.bind(this),
@@ -29,13 +29,14 @@
 
     update(options) {
       this.props.title = options.title;
-      this.props.description = options.description ? options.description : '';
-      this.props.type = options.type ? options.type : '';
-      this.props.id = options.id ? options.id : '';
+      this.props.id = options.id;
+      this.props.description = options.description || '';
+      this.props.type = options.type || '';
 
       this.toastView.update(this.props);
 
       this.showToast();
+
       clearTimeout(this.timer);
       this.timer = setTimeout(this.fadeToast.bind(this), 4000);
     },
@@ -45,22 +46,22 @@
     },
 
     fadeToast() {
+      this.removeToast();
       this.toastView.$el.fadeOut(500, () => {
-        this.removeToast();
+        this.toastView.remove();
       });
     },
 
     closeToast() {
+      this.removeToast();
       this.toastView.$el.fadeOut(125, () => {
-        this.removeToast();
+        this.toastView.remove();
       });
     },
 
     removeToast() {
-      this.toastView.remove();
-
       if (this.props.id) {
-        delete window.toasts[this.props.id];
+        window.toasts.delete(this.props.id);
       }
     },
   });

stylesheets/_session.scss

@@ -307,51 +307,50 @@ $session_message-container-border-radius: 5px;
   padding-top: 5px;
 }
 
-.odule-message__container {
+.module-message__container {
   border-radius: $session_message-container-border-radius;
+}
+label {
+  user-select: none;
+}
 
-  label {
-    user-select: none;
-  }
+.module-message__attachment-container,
+.module-image--curved-bottom-right,
+.module-image--curved-bottom-left {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+  border-bottom-left-radius: $session_message-container-border-radius;
+  border-bottom-right-radius: $session_message-container-border-radius;
+}
 
-  .module-message__attachment-container,
-  .module-image--curved-bottom-right,
-  .module-image--curved-bottom-left {
-    border-top-left-radius: 0px;
-    border-top-right-radius: 0px;
-    border-bottom-left-radius: $session_message-container-border-radius;
-    border-bottom-right-radius: $session_message-container-border-radius;
-  }
+.conversation-header .session-icon-button {
+  @include standard-icon-button();
+}
 
-  .conversation-header .session-icon-button {
-    @include standard-icon-button();
-  }
+.module-conversation-header,
+.message-selection-overlay {
+  height: $session-conversation-header-height;
+}
 
-  .module-conversation-header,
-  .message-selection-overlay {
-    height: $session-conversation-header-height;
-  }
+.message-selection-overlay {
+  position: absolute;
+  left: 15px;
+  right: 15px;
+  display: none;
 
-  .message-selection-overlay {
-    position: absolute;
-    left: 15px;
-    right: 15px;
-    display: none;
-
-    .close-button {
-      float: left;
-      margin-top: 17px;
-      margin-left: 7px;
-    }
-  }
-  .message-selection-overlay div[role='button'] {
-    display: inline-block;
+  .close-button {
+    float: left;
+    margin-top: 17px;
+    margin-left: 7px;
   }
+}
+.message-selection-overlay div[role='button'] {
+  display: inline-block;
+}
 
-  .message-selection-overlay .button-group {
-    float: right;
-    margin-top: 13.5px;
-  }
+.message-selection-overlay .button-group {
+  float: right;
+  margin-top: 13.5px;
 }
 
 .hidden {
@@ -427,10 +426,6 @@ $session_message-container-border-radius: 5px;
   flex-direction: row;
   justify-content: flex-start;
 
-  &:nth-child(n + 6) {
-    display: none;
-  }
-
   .toast-icon,
   .toast-info {
     display: flex;

ts/components/conversation/ConversationHeader.tsx

@@ -317,12 +317,6 @@ export class ConversationHeader extends React.Component<Props> {
         </div>
 
         <div className="button-group">
-          <SessionButton
-            buttonType={SessionButtonType.Default}
-            buttonColor={SessionButtonColor.Primary}
-            text={i18n('forwardMessage')}
-          />
-
           <SessionButton
             buttonType={SessionButtonType.Default}
             buttonColor={SessionButtonColor.Danger}

ts/components/session/SessionToast.tsx

@@ -17,18 +17,14 @@ export enum SessionToastType {
 
 interface Props {
   title: string;
-  description?: string;
-  type?: SessionToastType;
   id?: string;
+  type?: SessionToastType;
+  description?: string;
   fadeToast: any;
   closeToast: any;
 }
 
 export class SessionToast extends React.PureComponent<Props> {
-  public static defaultProps = {
-    id: '',
-  };
-
   constructor(props: any) {
     super(props);
   }
@@ -38,7 +34,9 @@ export class SessionToast extends React.PureComponent<Props> {
 
     const toastType = type ? type : SessionToastType.Info;
     const toastDesc = description ? description : '';
-    const toastIconSize = toastDesc ? SessionIconSize.Large : SessionIconSize.Medium;
+    const toastIconSize = toastDesc
+      ? SessionIconSize.Large
+      : SessionIconSize.Medium;
 
     let toastIcon;
     switch (type) {
@@ -58,14 +56,10 @@ export class SessionToast extends React.PureComponent<Props> {
         toastIcon = SessionIconType.Info;
     }
 
-    
     return (
       <div className={classNames('session-toast', toastType)}>
         <div className="toast-icon">
-          <SessionIcon
-            iconType={toastIcon}
-            iconSize={toastIconSize}
-          />
+          <SessionIcon iconType={toastIcon} iconSize={toastIconSize} />
         </div>
         <div className="toast-info">
           <div className="toast-info-container">