From 3c977a1f281c0a4a3b5705f0368715656d462f43 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Mon, 3 Jul 2023 20:24:23 +0800
Subject: [PATCH] First roll out of an AlertMessage control

---
 src/components/AlertMessage.vue |  6 ++---
 src/views/HomeView.vue          | 45 ++++++---------------------------
 2 files changed, 11 insertions(+), 40 deletions(-)

diff --git a/src/components/AlertMessage.vue b/src/components/AlertMessage.vue
index f425e66..00fee10 100644
--- a/src/components/AlertMessage.vue
+++ b/src/components/AlertMessage.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-facing-decorator";
+import { Component, Prop, Vue } from "vue-facing-decorator";
 
 @Component
 export default class AlertMessage extends Vue {
-  alertTitle = "";
-  alertMessage = "";
+  @Prop alertTitle = "";
+  @Prop alertMessage = "";
 
   public onClickClose() {
     this.alertTitle = "";
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index f9af6e1..4f3ba8e 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -106,18 +106,10 @@
       </ul>
     </div>
   </section>
-
-  <!-- This same popup code is in many files. -->
-  <div v-bind:class="computedAlertClassNames()">
-    <button
-      class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
-      @click="onClickClose()"
-    >
-      <fa icon="xmark"></fa>
-    </button>
-    <h4 class="font-bold pr-5">{{ alertTitle }}</h4>
-    <p>{{ alertMessage }}</p>
-  </div>
+  <AlertMessage
+    :alertTitle="alertTitle"
+    :alertMessage="alertMessage"
+  ></AlertMessage>
 </template>
 
 <script lang="ts">
@@ -131,9 +123,10 @@ import { accessToken } from "@/libs/crypto";
 import { createAndSubmitGive, didInfo } from "@/libs/endorserServer";
 import { Account } from "@/db/tables/accounts";
 import { Contact } from "@/db/tables/contacts";
+import AlertMessage from "@/components/AlertMessage";
 
 @Options({
-  components: { GiftedDialog },
+  components: { GiftedDialog, AlertMessage },
 })
 export default class HomeView extends Vue {
   activeDid = "";
@@ -145,6 +138,8 @@ export default class HomeView extends Vue {
   feedPreviousOldestId = null;
   feedLastViewedId = null;
   isHiddenSpinner = true;
+  alertTitle = "";
+  alertMessage = "";
 
   // 'created' hook runs when the Vue instance is first created
   async created() {
@@ -342,29 +337,5 @@ export default class HomeView extends Vue {
           "There was an error recording the give.";
       });
   }
-
-  // This same popup code is in many files.
-  alertMessage = "";
-  alertTitle = "";
-  public onClickClose() {
-    this.alertTitle = "";
-    this.alertMessage = "";
-  }
-  public computedAlertClassNames() {
-    return {
-      hidden: !this.alertMessage,
-      "dismissable-alert": true,
-      "bg-slate-100": true,
-      "p-5": true,
-      rounded: true,
-      "drop-shadow-lg": true,
-      fixed: true,
-      "top-3": true,
-      "inset-x-3": true,
-      "transition-transform": true,
-      "ease-in": true,
-      "duration-300": true,
-    };
-  }
 }
 </script>