From c6d845148431ed44439798b2ffe5c3ccd8f3cf51 Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Sun, 31 May 2020 23:50:00 -0700
Subject: [PATCH] Lesson 3 - Suspense, async setup, and the MailTable component

---
 src/App.vue                  | 84 +++++------------------------------
 src/components/MailTable.vue | 85 ++++++++++++++++++++++++++++++++++++
 2 files changed, 97 insertions(+), 72 deletions(-)
 create mode 100644 src/components/MailTable.vue

diff --git a/src/App.vue b/src/App.vue
index d5adfb6..41be425 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,83 +1,23 @@
 <template>
   <h1>VMail Inbox</h1>
 
-  <table class="mail-table">
-    <tbody>
-      <tr v-for="email in unarchivedEmails"
-          :key="email.id"
-          :class="['clickable', email.read ? 'read' : '']"
-          @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>
+
+  <Suspense>
+    <template #default>
+      <MailTable />
+    </template>
+    <template #fallback>
+      Loading...
+    </template>
+  </Suspense>
 </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@vuetraining.net",
-          "subject": "Learn by doing - Vue 3 Zero to Intermediate in 8 weeks",
-          "body": "Building projects is one of the most effective ways to learn - and _the_ most effective way _remember_ what you've learned - but it can be frustrating.\n\nThis 8-week course takes the pain out of 'learning by doing'.\n\nEach week we give you\n\n* a project that will grow your skills without overwhelming you\n* links to hand-picked resources, such as Vue Mastery videos, that share the knowledge you'll need for the project (no more useless rabbit holes)\n* answers to any and all questions you have while working\n* feedback on your completed code (so you're only learning good habits)\n\nOur instructors are standing by to answer your questions.\n\nReady to learn?",
-          "sentAt": "2020-05-20T18: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: {
-    sortedEmails() {
-      return this.emails.sort((e1, e2) => {
-        return e1.sentAt < e2.sentAt ? 1 : -1
-      })
-    },
-    unarchivedEmails() {
-      return this.sortedEmails.filter(e => !e.archived)
-    }
+  components: {
+    MailTable
   }
 };
 </script>
diff --git a/src/components/MailTable.vue b/src/components/MailTable.vue
new file mode 100644
index 0000000..950efa9
--- /dev/null
+++ b/src/components/MailTable.vue
@@ -0,0 +1,85 @@
+<template>
+  <table class="mail-table">
+    <tbody>
+      <tr v-for="email in unarchivedEmails"
+          :key="email.id"
+          :class="['clickable', email.read ? 'read' : '']"
+          @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';
+
+  export default {
+    async setup(){
+      await new Promise(resolve => setTimeout(resolve, 3000))
+      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@vuetraining.net",
+            "subject": "Learn by doing - Vue 3 Zero to Intermediate in 8 weeks",
+            "body": "Building projects is one of the most effective ways to learn - and _the_ most effective way _remember_ what you've learned - but it can be frustrating.\n\nThis 8-week course takes the pain out of 'learning by doing'.\n\nEach week we give you\n\n* a project that will grow your skills without overwhelming you\n* links to hand-picked resources, such as Vue Mastery videos, that share the knowledge you'll need for the project (no more useless rabbit holes)\n* answers to any and all questions you have while working\n* feedback on your completed code (so you're only learning good habits)\n\nOur instructors are standing by to answer your questions.\n\nReady to learn?",
+            "sentAt": "2020-05-20T18: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: {
+      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>
\ No newline at end of file