Merge pull request #4620 from matrix-org/t3chguy/toasts3_1

Iterate toast count indicator more logically

src/components/structures/ToastContainer.tsx

@@ -15,12 +15,12 @@ limitations under the License.
 */
 
 import * as React from "react";
-import { _t } from '../../languageHandler';
 import ToastStore, {IToast} from "../../stores/ToastStore";
 import classNames from "classnames";
 
 interface IState {
     toasts: IToast<any>[];
+    countSeen: number;
 }
 
 export default class ToastContainer extends React.Component<{}, IState> {
@@ -28,6 +28,7 @@ export default class ToastContainer extends React.Component<{}, IState> {
         super(props, context);
         this.state = {
             toasts: ToastStore.sharedInstance().getToasts(),
+            countSeen: ToastStore.sharedInstance().getCountSeen(),
         };
 
         // Start listening here rather than in componentDidMount because
@@ -42,7 +43,10 @@ export default class ToastContainer extends React.Component<{}, IState> {
     }
 
     _onToastStoreUpdate = () => {
-        this.setState({toasts: ToastStore.sharedInstance().getToasts()});
+        this.setState({
+            toasts: ToastStore.sharedInstance().getToasts(),
+            countSeen: ToastStore.sharedInstance().getCountSeen(),
+        });
     };
 
     render() {
@@ -56,7 +60,11 @@ export default class ToastContainer extends React.Component<{}, IState> {
                 "mx_Toast_hasIcon": icon,
                 [`mx_Toast_icon_${icon}`]: icon,
             });
-            const countIndicator = isStacked ? _t(" (1/%(totalCount)s)", {totalCount}) : null;
+
+            let countIndicator;
+            if (isStacked || this.state.countSeen > 0) {
+                countIndicator = ` (${this.state.countSeen + 1}/${this.state.countSeen + totalCount})`;
+            }
 
             const toastProps = Object.assign({}, props, {
                 key,

src/i18n/strings/en_EN.json

@@ -2083,7 +2083,6 @@
     "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.": "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.",
     "Tried to load a specific point in this room's timeline, but was unable to find it.": "Tried to load a specific point in this room's timeline, but was unable to find it.",
     "Failed to load timeline position": "Failed to load timeline position",
-    " (1/%(totalCount)s)": " (1/%(totalCount)s)",
     "Guest": "Guest",
     "Your profile": "Your profile",
     "Uploading %(filename)s and %(count)s others|other": "Uploading %(filename)s and %(count)s others",

src/stores/ToastStore.ts

@@ -32,6 +32,9 @@ export interface IToast<C extends keyof JSX.IntrinsicElements | JSXElementConstr
  */
 export default class ToastStore extends EventEmitter {
     private toasts: IToast<any>[] = [];
+    // The count of toasts which have been seen & dealt with in this stack
+    // where the count resets when the stack of toasts clears.
+    private countSeen = 0;
 
     static sharedInstance() {
         if (!window.mx_ToastStore) window.mx_ToastStore = new ToastStore();
@@ -40,6 +43,7 @@ export default class ToastStore extends EventEmitter {
 
     reset() {
         this.toasts = [];
+        this.countSeen = 0;
     }
 
     /**
@@ -67,6 +71,12 @@ export default class ToastStore extends EventEmitter {
         const length = this.toasts.length;
         this.toasts = this.toasts.filter(t => t.key !== key);
         if (length !== this.toasts.length) {
+            if (this.toasts.length === 0) {
+                this.countSeen = 0;
+            } else {
+                this.countSeen++;
+            }
+
             this.emit('update');
         }
     }
@@ -74,4 +84,8 @@ export default class ToastStore extends EventEmitter {
     getToasts() {
         return this.toasts;
     }
+
+    getCountSeen() {
+        return this.countSeen;
+    }
 }