From 874481cbde999d7e5398189247b59176b4193fa9 Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Wed, 18 Mar 2020 13:10:11 -0700
Subject: [PATCH] Abstract away Modal

---
 src/components/MailTable.vue                  | 10 +++++++---
 src/components/MailView.vue                   | 20 +++++++++++++++++++
 .../{MailViewModal.vue => ModalView.vue}      | 11 +++++-----
 3 files changed, 32 insertions(+), 9 deletions(-)
 create mode 100644 src/components/MailView.vue
 rename src/components/{MailViewModal.vue => ModalView.vue} (78%)

diff --git a/src/components/MailTable.vue b/src/components/MailTable.vue
index ac54d88..0417fbe 100644
--- a/src/components/MailTable.vue
+++ b/src/components/MailTable.vue
@@ -20,13 +20,16 @@
     </tbody>
   </table>
 
-  <MailViewModal :email="openedEmail" :closeModal="() => {openedEmail = null;}"/>
+  <ModalView :isOpened="!!openedEmail" :closeModal="() => {openedEmail = null;}">
+    <MailView :email="openedEmail" />
+  </ModalView>
 </template>
 
 <script>
   import { format } from 'date-fns'
   import useEmailSelection from '../composition/useEmailSelection';
-  import MailViewModal from '@/components/MailViewModal.vue';
+  import MailView from '@/components/MailView.vue';
+  import ModalView from '@/components/ModalView.vue';
   import { ref } from 'vue';
 
   export default {
@@ -48,7 +51,8 @@
       }
     },
     components: {
-      MailViewModal
+      MailView,
+      ModalView
     }
   }
 </script>
diff --git a/src/components/MailView.vue b/src/components/MailView.vue
new file mode 100644
index 0000000..9f75e24
--- /dev/null
+++ b/src/components/MailView.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    From: {{email.from}}<br>
+    Subject: <strong>{{email.subject}}</strong>
+    <p>{{email.body}}</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      email: {
+        type: Object
+      },
+    }
+  }
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/components/MailViewModal.vue b/src/components/ModalView.vue
similarity index 78%
rename from src/components/MailViewModal.vue
rename to src/components/ModalView.vue
index c0756c9..cf61608 100644
--- a/src/components/MailViewModal.vue
+++ b/src/components/ModalView.vue
@@ -1,10 +1,8 @@
 <template>
-  <div class="modal" v-if="email">
+  <div class="modal" v-if="isOpened">
     <div class="overlay" @click="closeModal()"></div>
     <div class="modal-card">
-      From: {{email.from}}<br>
-      Subject: <strong>{{email.subject}}</strong>
-      <p>{{email.body}}</p>
+      <slot :closeModal="closeModal" />
     </div>
   </div>
 </template>
@@ -12,8 +10,9 @@
 <script>
   export default {
     props: {
-      email: {
-        type: Object
+      isOpened: {
+        type: Boolean,
+        required: true
       },
       closeModal: {
         type: Function,