From 48505b6002541eeeb5aa1759885ad6d6bb2eb2ce Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Tue, 17 Mar 2020 22:44:50 -0700
Subject: [PATCH] Two refactors: one to make it reactive, the other to make it
 work

The one that made it work was storing `ids` outside of the useEmailSelection function.  That makes it shared between the multiple uses of the useEmailSelection function.
---
 src/components/InboxScreen.vue       |  8 ++++----
 src/components/MailTable.vue         | 10 ++++++----
 src/composition/useEmailSelection.js | 22 ++++++++++++----------
 3 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/components/InboxScreen.vue b/src/components/InboxScreen.vue
index 7579db3..2316f9d 100644
--- a/src/components/InboxScreen.vue
+++ b/src/components/InboxScreen.vue
@@ -1,7 +1,7 @@
 <template>
   <h1>VMail Inbox</h1>
-
-  Number selected: {{selectedEmailIds.size}}
+  
+  <p>Number selected: {{emailSelection.ids.size}}</p>
 
   <MailTable :emails="emails" />
 </template>
@@ -15,9 +15,9 @@
       let response = await fetch('/api/emails');
       let {emails} = await response.json();
 
-      let {selectedEmailIds} = useEmailSelection();
+      let {emailSelection} = useEmailSelection();
 
-      return {emails, selectedEmailIds}
+      return {emails, emailSelection}
     },
     components: {
       MailTable
diff --git a/src/components/MailTable.vue b/src/components/MailTable.vue
index 55bc196..fe068b0 100644
--- a/src/components/MailTable.vue
+++ b/src/components/MailTable.vue
@@ -1,11 +1,13 @@
 <template>
+  <p>Number selected: {{emailSelection.ids.size}}</p>
+
   <table>
     <tbody>
       <tr v-for="email in emails" :key="email.id" :class="[email.read ? 'read' : '']">
         <td>
           <input type="checkbox" 
-                  :checked="selectedEmailIds.has(email.id)"
-                  @click="toggleEmailSelection(email.id)" />
+                  :checked="emailSelection.ids.has(email.id)"
+                  @click="emailSelection.toggle(email.id)" />
         </td>
         <td>{{email.from}}</td>
         <td>
@@ -23,8 +25,8 @@
 
   export default {
     setup(){
-      let {selectedEmailIds, toggleEmailSelection} = useEmailSelection();
-      return {format, selectedEmailIds, toggleEmailSelection}
+      let {emailSelection} = useEmailSelection();
+      return {format, emailSelection,}
     },
     props: {
       emails: {
diff --git a/src/composition/useEmailSelection.js b/src/composition/useEmailSelection.js
index f5f46ee..0689e08 100644
--- a/src/composition/useEmailSelection.js
+++ b/src/composition/useEmailSelection.js
@@ -1,19 +1,21 @@
-import { ref } from 'vue';
+import { ref, reactive } from 'vue';
 
+let ids = new Set(['1', '5']);
 export const useEmailSelection = function(){
-  let selectedEmailIds = ref(new Set(['1', '5']))
 
-  let toggleEmailSelection = (id) => {
-    if(selectedEmailIds.value.has(id)) {
-      selectedEmailIds.value.delete(id)
-    } else {
-      selectedEmailIds.value.add(id);
+  let emailSelection = reactive({
+    ids: ids,
+    toggle: function(id) {
+      if(this.ids.has(id)) {
+        this.ids.delete(id)
+      } else {
+        this.ids.add(id);
+      }
     }
-  }
+  })
 
   return {
-    selectedEmailIds,
-    toggleEmailSelection
+    emailSelection,
   }
 }