Save email when toggling read/unread and inbox/archived

Author: Jeffrey Biles

db.json

@@ -25,15 +25,15 @@
       "body": "First of all, lets congratulate Kia King Ishii on joining the Vue.js core team! 🎉 He has been doing an incredible job building vuex-orm and will now focus on working on the next versions of Vuex.\n\nSpeaking of which – Vuex v4.0.0-alpha.1 has just been released! This is the version of Vuex that will work with Vue 3.0 but keep the familiar API you know from the current version.",
       "sentAt": "2020-03-18T18:25:43.511Z",
       "archived": false,
-      "read": false
+      "read": true
     },
     {
       "id": 4,
       "from": "[email protected]",
       "subject": "'Vue 3 Release Roadmap' + 6 more must-read articles from this week",
       "body": "Newsletter Issue #161",
       "sentAt": "2020-03-24T18:25:43.511Z",
-      "archived": false,
+      "archived": true,
       "read": true
     }
   ]

src/components/MailTable.vue

@@ -4,7 +4,7 @@
       <tr v-for="email in emails" 
           :key="email.id"
           :class="[email.read ? 'read' : '']"
-          @click="openEmail(email)"
+          @click="openEmail(email, true)"
           class="clickable">
         <td>
           <input type="checkbox" 
@@ -20,7 +20,9 @@
     </tbody>
 
     <ModalView v-if="!!openedEmail" :closeModal="() => {openedEmail = null;}">
-      <MailView :email="openedEmail" @changeEmail="(args) => changeEmail(emails, args)" />
+      <MailView :email="openedEmail" 
+                @changeEmail="(args) => changeEmail(emails, args)"
+                @openEmail="openEmail" />
     </ModalView>
   </table>
 </template>
@@ -47,13 +49,21 @@
         }
       }
 
-      function changeEmail(emails, {amount, toggleArchive, closeModal}){
+      function changeEmail(emails, {amount, toggleArchive, closeModal, toggleRead}){
         let index = emails.findIndex(e => e == openedEmail.value);
 
         if(toggleArchive) { emails[index].archived = !emails[index].archived }
+        if(toggleRead) { emails[index].read = !emails[index].read }
+
+        if(toggleArchive || toggleRead) {
+          axios.put(`http://localhost:3000/emails/${emails[index].id}`, emails[index])
+        }
+
         if(closeModal) { openedEmail.value = null; return null; }
 
-        openEmail(emails[index + amount])
+        if(amount) {
+          openEmail(emails[index + amount])
+        }
       }
 
       return {format, emailSelection, openedEmail, openEmail, changeEmail}

src/components/MailView.vue

@@ -4,7 +4,7 @@
       <button @click="toggleArchive">{{email.archived ? 'Move to Inbox' : 'Archive'}}</button>
       <button @click="goNewer">Newer</button>
       <button @click="goOlder">Older</button>
-      <button @click="toggleRead(email)">Mark {{email.read ? 'Unread' : 'Read'}}</button>
+      <button @click="toggleRead()">Mark {{email.read ? 'Unread' : 'Read'}}</button>
     </div>
 
     <h2 class="mb-0">Subject: <strong>{{email.subject}}</strong></h2>
@@ -25,7 +25,7 @@
       let goNewerAndArchive = () => emit('changeEmail', {amount: -1, toggleArchive: true})
       let goOlderAndArchive = () => emit('changeEmail', {amount: 1, toggleArchive: true})
       let toggleArchive = () => emit('changeEmail', {toggleArchive: true, closeModal: true})
-      let toggleRead = (email) => { email.read = !email.read }
+      let toggleRead = () => { emit('changeEmail', {toggleRead: true}) }
 
       useKeydown([
         {key: 'k', fn: goNewer},