From 505842df54bf30aaa51397f73c344bbeca77d065 Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Wed, 18 Mar 2020 01:46:37 -0700
Subject: [PATCH] ArchivedScreen, ability to switch between

However, there's an issue - changes don't stick between screen switches
---
 src/App.vue                       | 19 ++++++++++++++--
 src/components/ArchivedScreen.vue | 36 +++++++++++++++++++++++++++++++
 src/components/InboxScreen.vue    |  2 +-
 3 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ArchivedScreen.vue

diff --git a/src/App.vue b/src/App.vue
index 6f37da2..49f88fc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,20 @@
 <template>
   <div id="app">
+    <button @click="screenName = 'ArchivedScreen'" 
+            :disabled="screenName == 'ArchivedScreen'">
+      Archived View
+    </button>
+    <button @click="screenName = 'InboxScreen'"
+            :disabled="screenName == 'InboxScreen'">
+      Inbox View
+    </button>
+
     <suspense>
       <template #default>
-        <InboxScreen />
+        <component :is="screenName" />
       </template>
       <template #fallback>
-        Loading...
+        <p>Loading...</p>
       </template>
     </suspense>
   </div>
@@ -13,12 +22,18 @@
 
 <script>
 import InboxScreen from './components/InboxScreen.vue';
+import ArchivedScreen from '@/components/ArchivedScreen.vue';
 
 export default {
   name: 'App',
   components: {
     InboxScreen,
+    ArchivedScreen
   },
+  setup(){
+    let screenName = 'InboxScreen';
+    return {screenName}
+  }
 };
 </script>
 
diff --git a/src/components/ArchivedScreen.vue b/src/components/ArchivedScreen.vue
new file mode 100644
index 0000000..d10f4d9
--- /dev/null
+++ b/src/components/ArchivedScreen.vue
@@ -0,0 +1,36 @@
+<template>
+  <h1>VMail Archives</h1>
+  
+  <BulkActionBar :emails="archivedEmails" />
+
+  <MailTable :emails="archivedEmails" />
+</template>
+
+<script>
+  import MailTable from '@/components/MailTable.vue';
+  import BulkActionBar from '@/components/BulkActionBar.vue';
+
+  import { computed, ref } from 'vue';
+
+  export default {
+    async setup(){
+      let response = await fetch('/api/emails');
+      let {emails} = await response.json();
+
+      emails = ref(emails);
+      let archivedEmails = computed(() => {
+        return emails.value.filter(e => e.archived)
+      })
+
+      return {archivedEmails}
+    },
+    components: {
+      MailTable,
+      BulkActionBar
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/InboxScreen.vue b/src/components/InboxScreen.vue
index 11a41f9..c568ee2 100644
--- a/src/components/InboxScreen.vue
+++ b/src/components/InboxScreen.vue
@@ -13,7 +13,7 @@
   import { computed, ref } from 'vue';
 
   export default {
-    async setup(props, {attrs, slots}){
+    async setup(){
       let response = await fetch('/api/emails');
       let {emails} = await response.json();