From a4d6663cfdd600df4513450699d8ab3b4da58cbf Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Sun, 29 Mar 2020 22:51:32 -0700
Subject: [PATCH] Global non-persisted state with useEmailSelection composition
 function

---
 src/components/BulkActionBar.vue     | 21 +++++++++++++++++++++
 src/components/MailTable.vue         | 21 +++++++--------------
 src/composition/useEmailSelection.js | 19 +++++++++++++++++++
 3 files changed, 47 insertions(+), 14 deletions(-)
 create mode 100644 src/components/BulkActionBar.vue
 create mode 100644 src/composition/useEmailSelection.js

diff --git a/src/components/BulkActionBar.vue b/src/components/BulkActionBar.vue
new file mode 100644
index 0000000..6f2bdce
--- /dev/null
+++ b/src/components/BulkActionBar.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    {{emailSelection.emails.size}}
+  </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/MailTable.vue b/src/components/MailTable.vue
index d8b9626..2ea34ea 100644
--- a/src/components/MailTable.vue
+++ b/src/components/MailTable.vue
@@ -1,6 +1,7 @@
 <template>
   <table class="mail-table">
-    {{emailSelection.emails.size}}
+    <BulkActionBar />
+
     <tbody>
       <tr v-for="email in unarchivedEmails" 
           :key="email.id"
@@ -33,7 +34,8 @@
   import axios from 'axios';
   import MailView from '@/components/MailView.vue';
   import ModalView from '@/components/ModalView.vue';
-  import { reactive } from 'vue';
+  import BulkActionBar from '@/components/BulkActionBar.vue';
+  import { useEmailSelection } from '../composition/useEmailSelection';
 
   export default {
     async setup(){
@@ -41,17 +43,7 @@
       let emails = response.data;
       let openedEmail = null;
 
-
-      let emailSelection = reactive({
-        emails: new Set(),
-        toggle(id) {
-          if(this.emails.has(id)) {
-            this.emails.delete(id)
-          } else {
-            this.emails.add(id);
-          }
-        },
-      })
+      let { emailSelection } = useEmailSelection();
 
       return {
         format,
@@ -62,7 +54,8 @@
     },
     components: {
       MailView,
-      ModalView
+      ModalView,
+      BulkActionBar
     },
     computed: {
       unarchivedEmails(){
diff --git a/src/composition/useEmailSelection.js b/src/composition/useEmailSelection.js
new file mode 100644
index 0000000..de57bba
--- /dev/null
+++ b/src/composition/useEmailSelection.js
@@ -0,0 +1,19 @@
+import { reactive } from 'vue';
+
+let emails = new Set() 
+export const useEmailSelection = function(){
+  let emailSelection = reactive({
+    emails: emails,
+    toggle(id) {
+      if(this.emails.has(id)) {
+        this.emails.delete(id)
+      } else {
+        this.emails.add(id);
+      }
+    },
+  })
+
+  return { emailSelection }
+}
+
+export default useEmailSelection;
\ No newline at end of file