From c464abaa498df44ea6d0366c64eec6be7afa4556 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 22 May 2020 14:28:01 +0100
Subject: [PATCH] Iterate toast count indicator more logically

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/structures/ToastContainer.tsx | 14 +++++++++++---
 src/stores/ToastStore.ts                     | 14 ++++++++++++++
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/ToastContainer.tsx b/src/components/structures/ToastContainer.tsx
index 9440aa3463..c7b8e911d3 100644
--- a/src/components/structures/ToastContainer.tsx
+++ b/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,
diff --git a/src/stores/ToastStore.ts b/src/stores/ToastStore.ts
index 4f6d2963c5..b6b6f19872 100644
--- a/src/stores/ToastStore.ts
+++ b/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;
+    }
 }