From d078933844fe816002c36a3f52ce8bce3db302ac Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Tue, 17 Mar 2020 23:29:00 -0700
Subject: [PATCH] BulkActionBar

---
 src/components/BulkActionBar.vue | 26 ++++++++++++++++++++++++++
 src/components/InboxScreen.vue   | 13 +++++--------
 2 files changed, 31 insertions(+), 8 deletions(-)
 create mode 100644 src/components/BulkActionBar.vue

diff --git a/src/components/BulkActionBar.vue b/src/components/BulkActionBar.vue
new file mode 100644
index 0000000..865282c
--- /dev/null
+++ b/src/components/BulkActionBar.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="bulk-action-bar">  
+    <button @click="emailSelection.markRead()">
+      Mark Read
+    </button>
+    <button @click="emailSelection.markUnread()">
+      Mark Unread
+    </button>
+  </div>
+</template>
+
+<script>
+  import useEmailSelection from '../composition/useEmailSelection';
+
+  export default {
+    setup(){
+      let {emailSelection} = useEmailSelection();
+      return { emailSelection }
+    }
+
+  }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/InboxScreen.vue b/src/components/InboxScreen.vue
index 418e4f0..0fc689a 100644
--- a/src/components/InboxScreen.vue
+++ b/src/components/InboxScreen.vue
@@ -1,28 +1,25 @@
 <template>
   <h1>VMail Inbox</h1>
   
-  <p>Number selected: {{emailSelection.emails.size}}</p>
-  <button @click="emailSelection.markRead()">Mark Selected Read</button>
-  <button @click="emailSelection.markUnread()">Mark Selected Unread</button>
+  <BulkActionBar />
 
   <MailTable :emails="emails" />
 </template>
 
 <script>
   import MailTable from '@/components/MailTable.vue';
-  import useEmailSelection from '../composition/useEmailSelection';
+  import BulkActionBar from '@/components/BulkActionBar.vue';
 
   export default {
     async setup(props, {attrs, slots}){
       let response = await fetch('/api/emails');
       let {emails} = await response.json();
 
-      let {emailSelection} = useEmailSelection();
-
-      return {emails, emailSelection}
+      return {emails}
     },
     components: {
-      MailTable
+      MailTable,
+      BulkActionBar
     }
   }
 </script>