From aa1479f51a581a17d80aedb355138d17f41191e8 Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Tue, 18 Aug 2020 00:05:08 -0700
Subject: [PATCH] Start of lesson 14 (rebase into next commit)

---
 src/App.vue                            |  2 --
 src/components/BulkActionBar.vue       | 20 ++++++++++++++------
 src/composables/use-email-selection.js | 10 +++++++++-
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 17d8f33..d577efd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,6 @@
 <template>
   <h1>VMail Inbox</h1>
 
-  <h1>{{emailSelection.emails.size}} emails selected</h1>
-
   <Suspense>
     <template #default>
       <MailTable />
diff --git a/src/components/BulkActionBar.vue b/src/components/BulkActionBar.vue
index c431246..cafbf40 100644
--- a/src/components/BulkActionBar.vue
+++ b/src/components/BulkActionBar.vue
@@ -1,9 +1,16 @@
 <template>
-  <div>
-    <input type="checkbox"
-           :checked="allEmailsSelected"
-           :class="[someEmailsSelected ? 'partial-check' : '']"
-           @click="bulkSelect" />
+  <div class="bulk-action-bar">
+    <span class="checkbox">
+      <input type="checkbox"
+            :checked="allEmailsSelected"
+            :class="[someEmailsSelected ? 'partial-check' : '']"
+            @click="bulkSelect" />
+    </span>
+    <span class="buttons">
+      <button @click="emailSelection.markRead">Mark Read</button>
+      <button @click="emailSelection.markUnread()">Mark Unread</button>
+      <button @click="emailSelection.archive()">Archive</button>
+    </span>
   </div>
 </template>
 
@@ -29,7 +36,8 @@
       return {
         allEmailsSelected,
         someEmailsSelected,
-        bulkSelect
+        bulkSelect,
+        emailSelection
       }
     },
     props: {
diff --git a/src/composables/use-email-selection.js b/src/composables/use-email-selection.js
index c9bde45..aa021ea 100644
--- a/src/composables/use-email-selection.js
+++ b/src/composables/use-email-selection.js
@@ -1,4 +1,5 @@
 import { reactive } from 'vue';
+import axios from 'axios';
 
 let emails = reactive(new Set())
 
@@ -18,12 +19,19 @@ export const useEmailSelection = function(){
       emails.add(email)
     })
   }
+  let markRead = () => {
+    emails.forEach((email) => {
+      email.read = true;
+      axios.put(`http://localhost:3000/emails/${email.id}`, email)
+    })
+  }
 
   return {
     emails,
     toggle,
     clear,
-    addMultiple
+    addMultiple,
+    markRead
   }
 }