Refactor lots of non-table functionality from MailTable to MailScreen

Author: Jeffrey Biles

src/App.vue

@@ -1,10 +1,8 @@
 <template>
-  <div id="app">
-    <h1>VMail Inbox</h1>
-    
+  <div id="app">      
     <Suspense>
       <template #default>
-        <MailTable />
+        <MailScreen />
       </template>
       <template #fallback>
         Loading...
@@ -14,12 +12,12 @@
 </template>
 
 <script>
-import MailTable from '@/components/MailTable.vue';
+import MailScreen from '@/components/MailScreen.vue';
 
 export default {
   name: 'App',
   components: {
-    MailTable
+    MailScreen
   }
 };
 </script>

src/components/MailScreen.vue

@@ -0,0 +1,41 @@
+<template>
+  <h1>VMail Inbox</h1>
+
+  <BulkActionBar :emails="unarchivedEmails" />
+
+  <MailTable :emails="unarchivedEmails" />
+</template>
+
+<script>
+  import axios from 'axios';
+
+  import MailTable from '@/components/MailTable.vue';
+  import BulkActionBar from '@/components/BulkActionBar.vue';
+
+  export default {
+    async setup(){
+      let response = await axios.get('http://localhost:3000/emails');
+      let emails = response.data;
+
+      return { emails }
+    },
+    components: {
+      BulkActionBar,
+      MailTable
+    },
+    computed: {
+      sortedEmails(){
+        return this.emails.sort((e1, e2) => {
+          return e1.sentAt < e2.sentAt ? 1 : -1
+        })
+      },
+      unarchivedEmails(){
+        return this.sortedEmails.filter(e => !e.archived)
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/MailTable.vue

@@ -1,8 +1,7 @@
 <template>
-  <BulkActionBar :emails="unarchivedEmails" />
   <table class="mail-table">
     <tbody>
-      <tr v-for="email in unarchivedEmails" 
+      <tr v-for="email in emails" 
           :key="email.id"
           :class="[email.read ? 'read': '', 'clickable']"
           @click="openEmail(email)">
@@ -30,41 +29,24 @@
 
 <script>
   import { format } from 'date-fns';
-  import axios from 'axios';
   import MailView from '@/components/MailView.vue';
   import ModalView from '@/components/ModalView.vue';
-  import BulkActionBar from '@/components/BulkActionBar.vue';
   import { useEmailSelection } from '../composition/useEmailSelection';
 
   export default {
     async setup(){
-      let response = await axios.get('http://localhost:3000/emails');
-      let emails = response.data;
       let openedEmail = null;
-
       let { emailSelection } = useEmailSelection();
 
       return {
         format,
-        emails,
         openedEmail,
         emailSelection
       }
     },
     components: {
       MailView,
       ModalView,
-      BulkActionBar
-    },
-    computed: {
-      unarchivedEmails(){
-        return this.sortedEmails.filter(e => !e.archived)
-      },
-      sortedEmails(){
-        return this.emails.sort((e1, e2) => {
-          return e1.sentAt < e2.sentAt ? 1 : -1
-        })
-      }
     },
     methods: {
       openEmail(email){
@@ -86,11 +68,16 @@
         if(closeModal) { this.openedEmail = null; return null; }
 
         if(indexChange) {
-          let emails = this.unarchivedEmails
-          let index = emails.findIndex(e => e == email);
-          this.openEmail(emails[index + indexChange])
+          let index = this.emails.findIndex(e => e == email);
+          this.openEmail(this.emails[index + indexChange])
         }
       }
+    },
+    props: {
+      emails: {
+        type: Array,
+        required: true
+      }
     }
   }
 </script>