From aa8b4c6244b5d080a46fcae38ff1efeaba4f3796 Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Sat, 11 Jul 2020 11:38:29 -0700
Subject: [PATCH] Lesson 9 - Email Navigation Buttons and Keyboard Shortcuts

---
 src/components/MailTable.vue |  1 +
 src/components/MailView.vue  | 31 +++++++++++++++++++++++++++++--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/components/MailTable.vue b/src/components/MailTable.vue
index b05d466..c9d79d9 100644
--- a/src/components/MailTable.vue
+++ b/src/components/MailTable.vue
@@ -55,6 +55,7 @@
       openEmail(email) {
         email.read = true
         this.updateEmail(email)
+
         this.openedEmail = email
       },
       archiveEmail(email) {
diff --git a/src/components/MailView.vue b/src/components/MailView.vue
index 054c1a4..678d88b 100644
--- a/src/components/MailView.vue
+++ b/src/components/MailView.vue
@@ -1,5 +1,11 @@
 <template>
   <div class="email-display">
+    <div>
+      <button @click="toggleArchive">{{email.archived ? 'Move to Inbox (e)' : 'Archive (e)'}}</button>
+      <button @click="toggleRead">{{email.read ? 'Mark Unread (r)' : 'Mark Read (r)'}}</button>
+      <button @click="goNewer">Newer (k)</button>
+      <button @click="goOlder">Older (j)</button>
+    </div>
     <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)" />
@@ -9,11 +15,32 @@
 <script>
   import  { format } from 'date-fns'
   import marked from 'marked'
+  import axios from 'axios'
+  import useKeydown from '../composables/use-keydown'
+
   export default {
-    setup(){
+    setup(props, {emit}){
+      let email = props.email;
+      let toggleRead = () => {
+        email.read = !email.read
+        axios.put(`http://localhost:3000/emails/${email.id}`, email)
+      }
+      let toggleArchive = () => {
+        email.archived = !email.archived
+        axios.put(`http://localhost:3000/emails/${email.id}`, email)
+        // How to close the modal?
+      }
+
+      useKeydown([
+        {key: 'r', fn: toggleRead},
+        {key: 'e', fn: toggleArchive}
+      ])
+
       return {
         format,
-        marked
+        marked,
+        toggleRead,
+        toggleArchive
       }
     },
     props: {