From 7c97ea48e530fa51e81f3567ee4f0927526edf89 Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Tue, 18 Aug 2020 01:04:06 -0700
Subject: [PATCH] Lesson 14, pt 1 - Bulk Action Bar Buttons

---
 src/components/BulkActionBar.vue       |  4 ++--
 src/components/MailTable.vue           |  6 +++---
 src/composables/use-email-selection.js | 11 ++++++++---
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/BulkActionBar.vue b/src/components/BulkActionBar.vue
index cafbf40..6da2667 100644
--- a/src/components/BulkActionBar.vue
+++ b/src/components/BulkActionBar.vue
@@ -8,8 +8,8 @@
     </span>
     <span class="buttons">
       <button @click="emailSelection.markRead">Mark Read</button>
-      <button @click="emailSelection.markUnread()">Mark Unread</button>
-      <button @click="emailSelection.archive()">Archive</button>
+      <button @click="emailSelection.markUnread">Mark Unread</button>
+      <button @click="emailSelection.archive">Archive</button>
     </span>
   </div>
 </template>
diff --git a/src/components/MailTable.vue b/src/components/MailTable.vue
index 1a4da1d..c953abc 100644
--- a/src/components/MailTable.vue
+++ b/src/components/MailTable.vue
@@ -32,7 +32,7 @@
   import MailView from '@/components/MailView.vue';
   import ModalView from '@/components/ModalView.vue';
   import BulkActionBar from '@/components/BulkActionBar.vue';
-  import { reactive } from 'vue';
+  import { reactive, ref } from 'vue';
   import useEmailSelection from '@/composables/use-email-selection'
 
   export default {
@@ -42,8 +42,8 @@
       return {
         emailSelection: useEmailSelection(),
         format,
-        emails,
-        openedEmail: null
+        emails: ref(emails),
+        openedEmail: ref(null)
       }
     },
     components: {
diff --git a/src/composables/use-email-selection.js b/src/composables/use-email-selection.js
index aa021ea..2a339e1 100644
--- a/src/composables/use-email-selection.js
+++ b/src/composables/use-email-selection.js
@@ -19,19 +19,24 @@ export const useEmailSelection = function(){
       emails.add(email)
     })
   }
-  let markRead = () => {
+  let forSelected = (fn) => {
     emails.forEach((email) => {
-      email.read = true;
+      fn(email);
       axios.put(`http://localhost:3000/emails/${email.id}`, email)
     })
   }
+  let markRead = () => forSelected(e => e.read = true)
+  let markUnread = () => forSelected(e => e.read = false)
+  let archive = () => { forSelected(e => e.archived = true); clear() }
 
   return {
     emails,
     toggle,
     clear,
     addMultiple,
-    markRead
+    markRead,
+    markUnread,
+    archive
   }
 }