Iterate toast count indicator more logically

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

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: 0,
         };
 
         // 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/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: number = 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;
+    }
 }