From 8f4f9d0328d361412023cf71d93ff04fdd83d54f Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Sun, 12 Jul 2020 11:13:28 -0700
Subject: [PATCH] Lesson 12 - use-email-selection composable

---
 src/App.vue                            |  8 ++++++++
 src/components/MailTable.vue           | 15 ++-------------
 src/composables/use-email-selection.js | 20 ++++++++++++++++++++
 3 files changed, 30 insertions(+), 13 deletions(-)
 create mode 100644 src/composables/use-email-selection.js

diff --git a/src/App.vue b/src/App.vue
index 41be425..17d8f33 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <template>
   <h1>VMail Inbox</h1>
 
+  <h1>{{emailSelection.emails.size}} emails selected</h1>
 
   <Suspense>
     <template #default>
@@ -14,10 +15,17 @@
   
 <script>
 import MailTable from '@/components/MailTable.vue';
+import useEmailSelection from '@/composables/use-email-selection';
+
 export default {
   name: 'App',
   components: {
     MailTable
+  },
+  setup(){
+    return {
+      emailSelection: useEmailSelection()
+    }
   }
 };
 </script>
diff --git a/src/components/MailTable.vue b/src/components/MailTable.vue
index e006f00..1f7dbc8 100644
--- a/src/components/MailTable.vue
+++ b/src/components/MailTable.vue
@@ -32,25 +32,14 @@
   import MailView from '@/components/MailView.vue';
   import ModalView from '@/components/ModalView.vue';
   import { reactive } from 'vue';
+  import useEmailSelection from '@/composables/use-email-selection'
 
   export default {
     async setup(){
       let {data: emails} = await axios.get('http://localhost:3000/emails')
 
-      let selected = reactive(new Set())
-      let emailSelection = {
-        emails: selected,
-        toggle(email) {
-          if(selected.has(email)) {
-            selected.delete(email)
-          } else {
-            selected.add(email)
-          }
-          console.log(selected)
-        }
-      }
       return {
-        emailSelection,
+        emailSelection: useEmailSelection(),
         format,
         emails,
         openedEmail: null
diff --git a/src/composables/use-email-selection.js b/src/composables/use-email-selection.js
new file mode 100644
index 0000000..8991155
--- /dev/null
+++ b/src/composables/use-email-selection.js
@@ -0,0 +1,20 @@
+import { reactive } from 'vue';
+
+let emails = reactive(new Set())
+
+export const useEmailSelection = function(){
+  let toggle = function(email) {
+    if(emails.has(email)) {
+      emails.delete(email)
+    } else {
+      emails.add(email)
+    }
+  }
+
+  return {
+    emails,
+    toggle
+  }
+}
+
+export default useEmailSelection
\ No newline at end of file