Video 5 - MailView

src/components/MailTable.vue

@@ -4,7 +4,7 @@
       <tr v-for="email in unarchivedEmails"
           :key="email.id"
           :class="['clickable', email.read ? 'read' : '']"
-          @click="readEmail(email)">
+          @click="openEmail(email)">
         <td>
           <input type="checkbox" />
         </td>
@@ -17,20 +17,26 @@
       </tr>
     </tbody>
   </table>
+  <MailView v-if="openedEmail" :email="openedEmail" />
 </template>
 
 <script>
   import { format } from 'date-fns';
   import axios from 'axios';
+  import MailView from '@/components/MailView.vue';
 
   export default {
     async setup(){
       let {data: emails} = await axios.get('http://localhost:3000/emails')
       return {
         format,
-        emails
+        emails,
+        openedEmail: null
       }
     },
+    components: {
+      MailView
+    },
     computed: {
       sortedEmails() {
         return this.emails.sort((e1, e2) => {
@@ -42,9 +48,10 @@
       }
     },
     methods: {
-      readEmail(email) {
+      openEmail(email) {
         email.read = true
         this.updateEmail(email)
+        this.openedEmail = email
       },
       archiveEmail(email) {
         email.archived = true

src/components/MailView.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="email-display">
+    <h2 class="mb-0">Subject: <strong>{{email.subject}}</strong></h2>
+    <div><em>From {{email.from}} on {{format(new Date(email.sentAt), 'MMM do yyyy')}}</em></div>
+    <div v-html="marked(email.body)" />
+  </div>
+</template>
+
+<script>
+  import  { format } from 'date-fns'
+  import marked from 'marked'
+  export default {
+    setup(){
+      return {
+        format,
+        marked
+      }
+    },
+    props: {
+      email: {
+        type: Object,
+        required: true
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>