From 03c6923013f58c5c4d083d48cf6a0992bce5309f Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Sun, 29 Mar 2020 09:58:17 -0700
Subject: [PATCH] Pull code into MailTable component

---
 src/App.vue                  | 75 ++-----------------------------
 src/components/MailTable.vue | 86 ++++++++++++++++++++++++++++++++++++
 2 files changed, 90 insertions(+), 71 deletions(-)
 create mode 100644 src/components/MailTable.vue

diff --git a/src/App.vue b/src/App.vue
index 9cd2f27..9929468 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,84 +3,17 @@
 
     <h1>VMail Inbox</h1>
     
-    <table class="mail-table">
-      <tbody>
-        <tr v-for="email in sortedEmails" 
-            :key="email.id"
-            :class="[email.read ? 'read': '', 'clickable']"
-            @click="email.read = true">
-          <td>
-            <input type="checkbox" />
-          </td>
-          <td>{{email.from}}</td>
-          <td>
-            <p><strong>{{email.subject}}</strong> - {{email.body}}</p>
-          </td>
-          <td class="date">{{format(new Date(email.sentAt), 'MMM do yyyy')}}</td>
-          <td><button @click="email.archived = true">Archive</button></td>
-        </tr>
-      </tbody>
-    </table>
+    <MailTable />
   </div>
 </template>
 
 <script>
-import { format } from 'date-fns';
+import MailTable from '@/components/MailTable.vue';
 
 export default {
   name: 'App',
-  data(){
-    return {
-      format,
-      emails: [
-        {
-          "id": 1,
-          "from": "team@vuemastery.com",
-          "subject": "What's up with Vue 3.0? Here's how to find out from Evan You",
-          "body": "The opening keynote of VueConf US this year was Evan You (the creator of Vue), giving his State of the Vuenion address. He walked us through the journey of getting Vue 3 from a prototype to a reality the past year. He also dove into Vue's overall growth in the community.",
-          "sentAt": "2020-03-27T18:25:43.511Z",
-          "archived": false,
-          "read": true
-        },
-        {
-          "id": 2,
-          "from": "jeffrey@vuescreencasts.com",
-          "subject": "Five new VueJS videos this week + new podcast episode",
-          "body": "I hope you've been enjoying the Vue 3 course I've been releasing with Vue Mastery!\n\nThis week on VueScreencasts.com we have a follow-up video that digs further into what we covered in this week's Vue Mastery lesson, I answer a question that five of you asked about last week's most popular video, and we start a new series with a very awesome library author.\n\nFinally, for your ears only: a new episode of Exploring the Vueniverse.",
-          "sentAt": "2020-05-03T18:25:43.511Z",
-          "archived": false,
-          "read": false
-        },
-        {
-          "id": 3,
-          "from": "damian@dulisz.com",
-          "subject": "#177: Updated Vue.js Roadmap; Vuex v4.0.0-alpha.1 has been released; Kia King Ishii join the core team; Nuxt v2.12 released; Videos from Vue.js Amsterdam 2020 are here!",
-          "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
-        },
-        {
-          "id": 4,
-          "from": "anthony@vuejsdevelopers.com",
-          "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": true,
-          "read": false
-        }
-      ]
-    }
-  },
-  computed: {
-    unarchivedEmails(){
-      return this.emails.filter(e => !e.archived)
-    },
-    sortedEmails(){
-      return this.unarchivedEmails.sort((e1, e2) => {
-        return e1.sentAt < e2.sentAt ? 1 : -1
-      })
-    }
+  components: {
+    MailTable
   }
 };
 </script>
diff --git a/src/components/MailTable.vue b/src/components/MailTable.vue
new file mode 100644
index 0000000..6a30735
--- /dev/null
+++ b/src/components/MailTable.vue
@@ -0,0 +1,86 @@
+<template>
+  <table class="mail-table">
+    <tbody>
+      <tr v-for="email in unarchivedEmails" 
+          :key="email.id"
+          :class="[email.read ? 'read': '', 'clickable']"
+          @click="email.read = true">
+        <td>
+          <input type="checkbox" />
+        </td>
+        <td>{{email.from}}</td>
+        <td>
+          <p><strong>{{email.subject}}</strong> - {{email.body}}</p>
+        </td>
+        <td class="date">{{format(new Date(email.sentAt), 'MMM do yyyy')}}</td>
+        <td><button @click="email.archived = true">Archive</button></td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+  import { format } from 'date-fns';
+  import axios from 'axios';
+
+  export default {
+    setup(){
+      let emails = [
+        {
+          "id": 1,
+          "from": "team@vuemastery.com",
+          "subject": "What's up with Vue 3.0? Here's how to find out from Evan You",
+          "body": "The opening keynote of VueConf US this year was Evan You (the creator of Vue), giving his State of the Vuenion address. He walked us through the journey of getting Vue 3 from a prototype to a reality the past year. He also dove into Vue's overall growth in the community.",
+          "sentAt": "2020-03-27T18:25:43.511Z",
+          "archived": false,
+          "read": true
+        },
+        {
+          "id": 2,
+          "from": "jeffrey@vuescreencasts.com",
+          "subject": "Five new VueJS videos this week + new podcast episode",
+          "body": "I hope you've been enjoying the Vue 3 course I've been releasing with Vue Mastery!\n\nThis week on VueScreencasts.com we have a follow-up video that digs further into what we covered in this week's Vue Mastery lesson, I answer a question that five of you asked about last week's most popular video, and we start a new series with a very awesome library author.\n\nFinally, for your ears only: a new episode of Exploring the Vueniverse.",
+          "sentAt": "2020-05-03T18:25:43.511Z",
+          "archived": false,
+          "read": false
+        },
+        {
+          "id": 3,
+          "from": "damian@dulisz.com",
+          "subject": "#177: Updated Vue.js Roadmap; Vuex v4.0.0-alpha.1 has been released; Kia King Ishii join the core team; Nuxt v2.12 released; Videos from Vue.js Amsterdam 2020 are here!",
+          "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
+        },
+        {
+          "id": 4,
+          "from": "anthony@vuejsdevelopers.com",
+          "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": true,
+          "read": false
+        }
+      ]
+      return {
+        format,
+        emails
+      }
+    },
+    computed: {
+      unarchivedEmails(){
+        return this.sortedEmails.filter(e => !e.archived)
+      },
+      sortedEmails(){
+        return this.emails.sort((e1, e2) => {
+          return e1.sentAt < e2.sentAt ? 1 : -1
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file