refactor & shorten the 'copied' message display logic

src/views/AccountViewView.vue

@@ -91,16 +91,13 @@
         <code class="truncate">{{ activeDid }}</code>
         <button
           @click="
-            copyText($event, activeDid, 'did');
-            did = !did;
-            st(function () {
-              did = !did;
-            });
+            doCopyTwoSecRedo(activeDid, () => (showDidCopy = !showDidCopy))
           "
           class="ml-2"
         >
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
+        <span v-show="showDidCopy">Copied!</span>
         <span class="whitespace-nowrap ml-4">
           <button
             class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md"
@@ -113,7 +110,6 @@
             <fa icon="qrcode" class="fa-fw"></fa>
           </button>
         </span>
-        <span v-show="did">Copied!</span>
       </div>
 
       <div class="text-slate-500 text-sm font-bold">Public Key (base 64)</div>
@@ -121,14 +117,13 @@
         <code class="truncate">{{ publicBase64 }}</code>
         <button
           @click="
-            copyText($event, publicBase64, 'base64');
-            base64 = !base64;
+            doCopyTwoSecRedo(publicBase64, () => (showB64Copy = !showB64Copy))
           "
           class="ml-2"
         >
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
-        <span v-show="base64">Copied!</span>
+        <span v-show="showB64Copy">Copied!</span>
       </div>
 
       <div class="text-slate-500 text-sm font-bold">Public Key (hex)</div>
@@ -136,14 +131,13 @@
         <code class="truncate">{{ publicHex }}</code>
         <button
           @click="
-            copyText($event, publicHex, 'pubhex');
-            pubhex = !pubhex;
+            doCopyTwoSecRedo(publicHex, () => (showPubCopy = !showPubCopy))
           "
           class="ml-2"
         >
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
-        <span v-show="pubhex">Copied!</span>
+        <span v-show="showPubCopy">Copied!</span>
       </div>
 
       <div class="text-slate-500 text-sm font-bold">Derivation Path</div>
@@ -151,18 +145,13 @@
         <code class="truncate">{{ derivationPath }}</code>
         <button
           @click="
-            derpath = true;
-            copy(derivationPath).then(() => {
-              st(function () {
-                derpath = !derpath;
-              });
-            });
+            doCopyTwoSecRedo(derivationPath, () => (showDerCopy = !showDerCopy))
           "
           class="ml-2"
         >
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
-        <span v-show="derpath">Copied!</span>
+        <span v-show="showDerCopy">Copied!</span>
       </div>
     </div>
 
@@ -323,37 +312,19 @@ export default class AccountViewView extends Vue {
   limits: RateLimits | null = null;
   showContactGives = false;
 
-  did = false;
-  derpath = false;
-  base64 = false;
-  pubhex = false;
-
-  copy = useClipboard().copy;
-  text = useClipboard().text;
-
-  showCopyMessage() {
-    this.did = true;
-  }
-
-  st(f) {
-    setTimeout(f, 2000);
+  showDidCopy = false;
+  showDerCopy = false;
+  showB64Copy = false;
+  showPubCopy = false;
+
+  // call fn, copy text to the clipboard, then redo fn after 2 seconds
+  doCopyTwoSecRedo(text, fn) {
+    fn();
+    useClipboard()
+      .copy(text)
+      .then(() => setTimeout(fn, 2000));
   }
 
-  copyText = (e: MouseEvent, inputText: string, loc: string) => {
-    console.log(this);
-    console.log(e, inputText);
-    this.copy(inputText).then(() => {
-      if (loc == "did") {
-        this.showCopyMessage();
-        console.log(this);
-      } else if (loc == "base64") {
-        this.base64 = true;
-      } else if (loc == "pubhex") {
-        this.pubhex = true;
-      }
-    });
-  };
-
   handleChange() {
     this.showContactGives = !this.showContactGives;
     this.updateShowContactAmounts();