From d1ea3cd2a1ed801be1a8bc0f8c1c5f0acd2d3559 Mon Sep 17 00:00:00 2001
From: Waleed Khan <me@waleedkhan.name>
Date: Sun, 3 May 2020 18:05:32 -0700
Subject: [PATCH] style: show first snackbar of a certain message for longer

Part of #16.

The rationale is that repeated notifications of the same type (like "Practice set recorded.") don't need to be visible for that long. But the first one should be visible for longer.
---
 src/App.vue            | 14 +++++++++++++-
 src/views/Training.vue |  2 +-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a3d4db70..c4e70b7a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -71,7 +71,7 @@
       </v-container>
     </v-content>
 
-    <v-snackbar v-model="snackbarEnabled" :timeout="1000">
+    <v-snackbar v-model="snackbarEnabled" :timeout="timeout">
       {{ snackbarText }}
       <v-btn color="blue" text @click="snackbarEnabled = false">
         Close
@@ -98,11 +98,16 @@ import {
   readSnackbarText,
 } from "./store";
 
+const SMALL_TIMEOUT = 1250;
+const LARGE_TIMEOUT = 3000;
+
 @Component({ name: "App" })
 export default class extends Vue {
   private snackbarEnabled: boolean = false;
   private snackbarText: string = "";
   private drawer: boolean = false;
+  private seenSnackbarTexts: { [x in string]: boolean } = {};
+  private timeout: number = SMALL_TIMEOUT;
 
   public created() {
     this.$watch(() => this.snackbarEnabled, function(snackbarEnabled) {
@@ -114,6 +119,13 @@ export default class extends Vue {
       if (snackbarText !== null) {
         this.snackbarEnabled = true;
         this.snackbarText = snackbarText;
+
+        if (this.seenSnackbarTexts[snackbarText]) {
+          this.timeout = SMALL_TIMEOUT;
+        } else {
+          this.timeout = LARGE_TIMEOUT;
+        }
+        this.seenSnackbarTexts[snackbarText] = true;
       } else {
         this.snackbarEnabled = false;
         this.snackbarText = "";
diff --git a/src/views/Training.vue b/src/views/Training.vue
index c1d73653..89646b50 100644
--- a/src/views/Training.vue
+++ b/src/views/Training.vue
@@ -235,7 +235,7 @@ export default class extends Vue {
         practiceSet,
       });
       await dispatchSaveState(this.$store);
-      commitSnackbarText(this.$store, "Practice set recorded");
+      commitSnackbarText(this.$store, "Practice set recorded.");
     }
   }