Update reactive usage according to guidance from Evan

src/composition/useEmailSelection.js

@@ -1,36 +1,39 @@
 import { reactive } from 'vue';
 import axios from 'axios';
 
-let emails = new Set() 
+let emailSet = new Set() 
 export const useEmailSelection = function(){
-  let emailSelection = reactive({
+  const emails = reactive(emailSet)
+  const forSelected = (fn) => {
+    emails.forEach(email => {
+      fn(email)
+      axios.put(`http://localhost:3000/emails/${email.id}`, email)
+    })
+  }
+  const clear = () => {
+    emails.clear();
+  }
+
+  const emailSelection = {
     emails: emails,
     toggle(id) {
-      if(this.emails.has(id)) {
+      if(emails.has(id)) {
-        this.emails.delete(id)
+        emails.delete(id)
       } else {
-        this.emails.add(id);
+        emails.add(id);
       }
     },
-    clear(){
-      this.emails.clear();
-    },
     addMultiple(emails) {
       emails.forEach(email => {
-        this.emails.add(email)
+        emails.add(email)
       })
     },
-    forSelected(fn){
+    clear: clear,
-      this.emails.forEach(email => {
+    markRead(){ forSelected(e => e.read = true )},
-        fn(email)
+    markUnread(){ forSelected(e => e.read = false )},
-        axios.put(`http://localhost:3000/emails/${email.id}`, email)
+    archive(){ forSelected(e => e.archived = true); clear();},
-      })
+    moveToInbox(){ forSelected(e => e.archived = false); clear();}
-    },
+  }
-    markRead(){ this.forSelected(e => e.read = true )},
-    markUnread(){ this.forSelected(e => e.read = false )},
-    archive(){ this.forSelected(e => e.archived = true); this.clear();},
-    moveToInbox(){ this.forSelected(e => e.archived = false); this.clear();}
-  })
 
   return { emailSelection }
 }