Merge branch 'course-outline-start'

db.json

@@ -11,10 +11,10 @@
     },
     {
       "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",
+      "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
     },

package.json

@@ -12,14 +12,14 @@
     "core-js": "^3.6.4",
     "date-fns": "^2.11.0",
     "marked": "^0.8.1",
-    "vue": "^3.0.0-alpha.10"
+    "vue": "^3.0.0-beta.10"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.2.0",
-    "@vue/cli-service": "^4.2.0",
-    "@vue/compiler-sfc": "^3.0.0-alpha.10",
+    "@vue/cli-plugin-babel": "^4.3.0",
+    "@vue/cli-service": "^4.3.0",
+    "@vue/compiler-sfc": "^3.0.0-beta.10",
     "faker": "^4.1.0",
-    "vue-cli-plugin-vue-next": "^0.0.4",
+    "vue-cli-plugin-vue-next": "^0.1.2",
     "vue-template-compiler": "^2.6.11"
   }
 }

src/App.vue

@@ -1,43 +1,23 @@
 <template>
-  <div id="app">
-    <button @click="selectScreen('MailScreenInbox');"
-            :disabled="screenName == 'MailScreenInbox'">
-      Inbox View
-    </button>
-    <button @click="selectScreen('MailScreenArchived')" 
-            :disabled="screenName == 'MailScreenArchived'">
-      Archived View
-    </button>
-
-    <suspense>
+  <div id="app">      
+    <Suspense>
       <template #default>
-        <MailScreen :screenName="screenName" />
+        <MailScreen />
       </template>
       <template #fallback>
-        <p>Loading...</p>
+        Loading...
       </template>
-    </suspense>
+    </Suspense>
   </div>
 </template>
 
 <script>
 import MailScreen from '@/components/MailScreen.vue';
-import useEmailSelection from './composition/useEmailSelection';
-import { ref } from 'vue'
 
 export default {
   name: 'App',
   components: {
     MailScreen
-  },
-  setup(){  
-    let screenName = ref('MailScreenInbox');
-    let {emailSelection} = useEmailSelection();
-    let selectScreen = function(newScreen){
-      screenName.value = newScreen;
-      emailSelection.clear();
-    }
-    return {screenName, selectScreen}
   }
 };
 </script>
@@ -66,6 +46,13 @@ button:disabled {
   cursor: auto;
 }
 
+button.selected {
+  cursor: auto;
+  color: black;
+  border-color: black;
+  border-width: 2px;
+}
+
 .clickable {
   cursor: pointer;
 }

src/components/BulkActionBar.vue

@@ -1,29 +1,29 @@
 <template>
   <div class="bulk-action-bar">
     <span class="checkbox">
-      <input type="checkbox" :checked="allAreSelected" @click="bulkSelect">
-      <span v-if="!allAreSelected && numberSelected > 0">-</span> <!-- later on this minus sign will be in the checkbox, as it is in gmail -->
+      <input type="checkbox" 
+             :checked="allAreSelected"
+             :class="[partialSelection ? 'partial-check' : '']"
+             @click="bulkSelect">
     </span>
     
     <span class="buttons">
       <button @click="emailSelection.markRead()"
-              :disabled="Array.from(emailSelection.emails).every(e => e.read)"
-              v-if="actions.includes('markRead')">
+              :disabled="Array.from(emailSelection.emails).every(e => e.read)">
         Mark Read
       </button>
       <button @click="emailSelection.markUnread()" 
-              :disabled="Array.from(emailSelection.emails).every(e => !e.read)"
-              v-if="actions.includes('markUnread')">
+              :disabled="Array.from(emailSelection.emails).every(e => !e.read)">
         Mark Unread
       </button>
-      <button @click="emailSelection.archive()" 
-              :disabled="numberSelected == 0"
-              v-if="actions.includes('archive')">
+      <button v-if="selectedScreen == 'inbox'"
+              @click="emailSelection.archive()" 
+              :disabled="numberSelected == 0">
         Archive
       </button>
-      <button @click="emailSelection.moveToInbox()"
-              :disabled="numberSelected == 0"
-              v-if="actions.includes('moveToInbox')">
+      <button v-else
+              @click="emailSelection.moveToInbox()" 
+              :disabled="numberSelected == 0">
         Move to Inbox
       </button>
     </span>
@@ -31,36 +31,47 @@
 </template>
 
 <script>
-  import useEmailSelection from '../composition/useEmailSelection';
+  import { useEmailSelection } from '../composition/useEmailSelection';
   import { computed } from 'vue';
 
   export default {
-    setup({emails}){
-      let {emailSelection} = useEmailSelection();
+    setup(props){
+      let emailSelection = useEmailSelection();
+
       let numberSelected = computed(() => {
         return emailSelection.emails.size;
       }) 
       let allAreSelected = computed(() => {
-        return emails.length == numberSelected.value;
+        return props.emails.length == numberSelected.value && numberSelected.value !== 0;
+      })
+      let partialSelection = computed(() => {
+        return numberSelected.value > 0 && !allAreSelected.value;
       })
       
       let bulkSelect = function(){
         if(allAreSelected.value) {
           emailSelection.clear();
         } else {
-          emailSelection.addMultiple(emails)
+          emailSelection.addMultiple(props.emails)
         }
       }
-      return { emailSelection, allAreSelected, bulkSelect, numberSelected }
+
+      return { 
+        partialSelection, 
+        allAreSelected,
+        bulkSelect,
+        emailSelection,
+        numberSelected
+      }
     },
     props: {
       emails: {
         type: Array,
-        default: []
-      },
-      actions: {
-        type: Array,
-        default: ['markRead', 'markUnread']
+        required: true
+      }, 
+      selectedScreen: {
+        type: String,
+        required: true
       }
     }
   }

src/components/MailScreen.vue

@@ -1,30 +1,73 @@
 <template>
-  <div>
-    <component :is="screenName" :emails="emails.sort((e1, e2) => e1.sentAt < e2.sentAt ? 1 : -1)" />
-  </div>
+  <button @click="selectScreen('inbox');"
+          :class="[selectedScreen == 'inbox' ? 'selected' : '']">
+    Inbox View
+  </button>
+  <button @click="selectScreen('archive')" 
+          :class="[selectedScreen == 'archive' ? 'selected' : '']">
+    Archived View
+  </button>
+  
+  <h1>VMail {{capitalize(selectedScreen)}}</h1>
+
+  <BulkActionBar :emails="filteredEmails"
+                 :selectedScreen="selectedScreen" />
+
+  <MailTable :emails="filteredEmails" />
 </template>
 
 <script>
-  import MailScreenArchived from '@/components/MailScreenArchived.vue';
-  import MailScreenInbox from '@/components/MailScreenInbox.vue';
-  import { ref } from 'vue';
   import axios from 'axios';
 
+  import MailTable from '@/components/MailTable.vue';
+  import BulkActionBar from '@/components/BulkActionBar.vue';
+  import { useEmailSelection } from '../composition/useEmailSelection';
+
   export default {
     async setup(){
-      let {data} = await axios.get('http://localhost:3000/emails');
-      let emails = ref(data);
+      let response = await axios.get('http://localhost:3000/emails');
+      let emails = response.data;
+      let selectedScreen = 'inbox';
 
-      return {emails};
+      return { 
+        emails,
+        selectedScreen,
+        emailSelection: useEmailSelection()
+      }
     },
     components: {
-      MailScreenArchived,
-      MailScreenInbox
+      BulkActionBar,
+      MailTable
     },
-    props: {
-      screenName: {
-        type: String,
-        required: true
+    methods: {
+      selectScreen(newScreen) {
+        this.selectedScreen = newScreen;
+        this.emailSelection.clear();
+      },
+      capitalize(word) {
+        if(!word || !word.length){ return; }
+
+        return word[0].toUpperCase() + word.slice(1)
+      }
+    },
+    computed: {
+      sortedEmails(){
+        return this.emails.sort((e1, e2) => {
+          return e1.sentAt < e2.sentAt ? 1 : -1
+        })
+      },
+      unarchivedEmails(){
+        return this.sortedEmails.filter(e => !e.archived)
+      },
+      archivedEmails(){
+        return this.sortedEmails.filter(e => e.archived)
+      },
+      filteredEmails(){
+        let filters = {
+          inbox: this.unarchivedEmails,
+          archive: this.archivedEmails
+        }
+        return filters[this.selectedScreen]
       }
     }
   }

src/components/MailScreenArchived.vue

@@ -1,34 +0,0 @@
-<template>
-  <h1>VMail Archives</h1>
-  
-  <BulkActionBar :emails="archivedEmails" :actions="['markRead', 'markUnread', 'moveToInbox']" />
-
-  <MailTable :emails="archivedEmails" />
-</template>
-
-<script>
-  import MailTable from '@/components/MailTable.vue';
-  import BulkActionBar from '@/components/BulkActionBar.vue';
-
-  export default {
-    components: {
-      MailTable,
-      BulkActionBar
-    },
-    computed: {
-      archivedEmails(){
-        return this.emails.filter(e => e.archived)
-      }
-    },
-    props: {
-      emails: {
-        type: Array,
-        required: true
-      }
-    }
-  }
-</script>
-
-<style scoped>
-
-</style>

src/components/MailScreenInbox.vue

@@ -1,34 +0,0 @@
-<template>
-  <h1>VMail Inbox</h1>
-  
-  <BulkActionBar :emails="inboxEmails" :actions="['markRead', 'markUnread', 'archive']" />
-
-  <MailTable :emails="inboxEmails" />
-</template>
-
-<script>
-  import MailTable from '@/components/MailTable.vue';
-  import BulkActionBar from '@/components/BulkActionBar.vue';
-
-  export default {
-    components: {
-      MailTable,
-      BulkActionBar
-    },
-    computed: {
-      inboxEmails(){
-        return this.emails.filter(e => !e.archived)
-      }
-    },
-    props: {
-      emails: {
-        type: Array,
-        required: true
-      }
-    }
-  }
-</script>
-
-<style scoped>
-
-</style>

src/components/MailTable.vue

@@ -3,84 +3,82 @@
     <tbody>
       <tr v-for="email in emails" 
           :key="email.id"
-          :class="[email.read ? 'read' : '']"
-          @click="openEmail(email, true)"
-          class="clickable">
+          :class="[email.read ? 'read': '', 'clickable']"
+          @click="openEmail(email)">
         <td>
-          <input type="checkbox" 
+          <input type="checkbox"
                  :checked="emailSelection.emails.has(email)"
-                 @click="emailSelection.toggle(email)">
+                 @click="emailSelection.toggle(email)" />
         </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="archiveEmail(email)">Archive</button></td>
       </tr>
     </tbody>
-
-    <ModalView v-if="!!openedEmail" :closeModal="() => {openedEmail = null;}">
-      <MailView :email="openedEmail" 
-                @changeEmail="(args) => changeEmail(emails, args)"
-                @openEmail="openEmail" />
-    </ModalView>
   </table>
+
+  <ModalView v-if="openedEmail" :closeModal="() => { openedEmail = null; }">
+    <MailView :email="openedEmail"
+              :changeEmail="(args) => changeEmail(openedEmail, args)" />
+  </ModalView>
 </template>
 
 <script>
-  import { format } from 'date-fns'
-  import useEmailSelection from '../composition/useEmailSelection';
+  import { format } from 'date-fns';
   import MailView from '@/components/MailView.vue';
   import ModalView from '@/components/ModalView.vue';
-  import { ref } from 'vue';
+  import { useEmailSelection } from '../composition/useEmailSelection';
   import axios from 'axios';
 
   export default {
-    setup({emails}){
-      let {emailSelection} = useEmailSelection();
-      let openedEmail = ref();
-
-      let openEmail = function(email) {
-        openedEmail.value = email;
-
-        if(email) {
-          openedEmail.value.read = true;
-          axios.put(`http://localhost:3000/emails/${openedEmail.value.id}`, openedEmail.value)
-        }
-      }
-
-      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; }
-
-        if(amount) {
-          openEmail(emails[index + amount])
-        }
-      }
-
-      return {format, emailSelection, openedEmail, openEmail, changeEmail}
-    },
-    props: {
-      emails: {
-        type: Array,
-        default: []
+    async setup(){
+      return {
+        format,
+        openedEmail: null,
+        emailSelection: useEmailSelection()
       }
     },
     components: {
       MailView,
-      ModalView
+      ModalView,
+    },
+    methods: {
+      openEmail(email){
+        this.openedEmail = email;
+
+        if(email) {
+          email.read = true
+          axios.put(`http://localhost:3000/emails/${email.id}`, email)
+        }
+      },
+      archiveEmail(email){
+        email.archived = true;
+        axios.put(`http://localhost:3000/emails/${email.id}`, email)
+      },
+      changeEmail(email, {indexChange, toggleArchive, toggleRead, save, closeModal}) {
+        if(toggleArchive) { email.archived = !email.archived }
+        if(toggleRead) { email.read = !email.read }
+        if(save) { axios.put(`http://localhost:3000/emails/${email.id}`, email) }
+        if(closeModal) { this.openedEmail = null; return null; }
+
+        if(indexChange) {
+          let index = this.emails.findIndex(e => e == email);
+          this.openEmail(this.emails[index + indexChange])
+        }
+      }
+    },
+    props: {
+      emails: {
+        type: Array,
+        required: true
+      }
     }
   }
 </script>
 
 <style scoped>
-  
+
 </style>

src/components/MailView.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="email-display" v-if="email">
+  <div class="email-display">
     <div class="toolbar">
       <button @click="toggleArchive">{{email.archived ? 'Move to Inbox (e)' : 'Archive (e)'}}</button>
+      <button @click="toggleRead">{{email.read ? 'Mark Unread (r)' : 'Mark Read (r)'}}</button>
       <button @click="goNewer">Newer (k)</button>
       <button @click="goOlder">Older (j)</button>
-      <button @click="toggleRead()">Mark {{email.read ? 'Unread' : 'Read'}}</button>
     </div>
 
     <h2 class="mb-0">Subject: <strong>{{email.subject}}</strong></h2>
@@ -14,40 +14,46 @@
 </template>
 
 <script>
+  import { format } from 'date-fns';
   import marked from 'marked';
   import { useKeydown } from '../composition/useKeydown';
-  import { format } from 'date-fns';
 
   export default {
-    setup({}, {emit}) {
-      let goNewer = () => emit('changeEmail', {amount: -1})
-      let goOlder = () => emit('changeEmail', {amount: 1})
-      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 = () => { emit('changeEmail', {toggleRead: true}) }
+    setup({changeEmail}){
+      let toggleArchive = () => changeEmail({toggleArchive: true, save: true, closeModal: true})
+      let toggleRead = () => changeEmail({toggleRead: true, save: true})
+      let goNewer = () => changeEmail({indexChange: -1})
+      let goOlder = () => changeEmail({indexChange: 1})
+      let goNewerAndArchive = () => changeEmail({indexChange: -1, toggleArchive: true})
+      let goOlderAndArchive = () => changeEmail({indexChange: 1, toggleArchive: true})
 
       useKeydown([
-        {key: 'k', fn: goNewer}, 
+        {key: 'e', fn: toggleArchive},
+        {key: 'r', fn: toggleRead},
+        {key: 'k', fn: goNewer},
         {key: 'j', fn: goOlder},
         {key: '[', fn: goNewerAndArchive},
-        {key: ']', fn: goOlderAndArchive},
-        {key: 'e', fn: toggleArchive}
+        {key: ']', fn: goOlderAndArchive}
       ])
 
       return {
-        toggleArchive,
-        goNewer,
-        goOlder,
-        toggleRead,
         format,
         marked,
+        goOlder,
+        goNewer,
+        toggleRead,
+        toggleArchive
       }
     },
     props: {
       email: {
-        type: Object
+        type: Object,
+        required: true
       },
+      changeEmail: {
+        type: Function,
+        required: true
+      }
     }
   }
 </script>

src/components/ModalView.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="modal">
-    <div class="overlay" @click="closeModal()"></div>
+    <div class="overlay" @click="closeModal"></div>
     <div class="modal-card">
-      <slot :closeModal="closeModal" />
+      <slot />
     </div>
   </div>
 </template>
@@ -11,7 +11,7 @@
   import { useKeydown } from '../composition/useKeydown';
 
   export default {
-    setup({closeModal}, context){
+    setup({closeModal}){
       useKeydown([{key: 'Escape', fn: closeModal}])
     },
     props: {

src/composition/useEmailSelection.js

@@ -1,38 +1,46 @@
-import { ref, reactive } from 'vue';
+import { reactive } from 'vue';
+import axios from 'axios';
+
+let emailSet = new Set()
 
-let emails = new Set();
 export const useEmailSelection = function(){
+  const emails = reactive(emailSet)
 
-  let emailSelection = reactive({
-    emails: emails,
-    toggle(id) {
-      if(this.emails.has(id)) {
-        this.emails.delete(id)
-      } else {
-        this.emails.add(id);
-      }
-    },
-    clear(){
-      this.emails.clear();
-    },
-    addMultiple(emails) {
-      emails.forEach(email => {
-        this.emails.add(email)
-      })
-    },
-    forSelected(fn){
-      this.emails.forEach(email => {
-        fn(email)
-      })
-    },
-    markRead(){ this.forSelected(e => e.read = true )},
-    markUnread(){ this.forSelected(e => e.read = false )},
-    archive(){ this.forSelected(e => e.archived = true); this.clear();},
-    moveToInbox(){ this.forSelected(e => e.archived = false); this.clear();}
-  })
+  const forSelected = (fn) => {
+    emails.forEach(email => {
+      fn(email)
+      axios.put(`http://localhost:3000/emails/${email.id}`, email)
+    })
+  }
+  const clear = () => {
+    emails.clear();
+  }
+  const toggle = (id) => {
+    if(emails.has(id)) {
+      emails.delete(id)
+    } else {
+      emails.add(id);
+    }
+  }
+  const addMultiple = (newEmails) => {
+    newEmails.forEach(email => {
+      emails.add(email)
+    })
+  }
+  const markRead = () => { forSelected(e => e.read = true )}
+  const markUnread = () => { forSelected(e => e.read = false )}
+  const archive = () => { forSelected(e => e.archived = true); clear();}
+  const moveToInbox = () => { forSelected(e => e.archived = false); clear();}
 
   return {
-    emailSelection,
+    emails,
+    clear,
+    toggle,
+    addMultiple,
+    markRead,
+    markUnread,
+    archive,
+    moveToInbox
   }
 }
 

src/composition/useKeydown.js

@@ -1,5 +1,4 @@
-import { onMounted, onBeforeUnmount } from 'vue';
-import { fr } from 'date-fns/locale';
+import { onBeforeUnmount } from 'vue';
 
 export const useKeydown = function(keyCombos) {
   let onkey = function(event) {
@@ -9,9 +8,8 @@ export const useKeydown = function(keyCombos) {
     }
   }
 
-  onMounted(()=> {
-    window.addEventListener('keydown', onkey);
-  })
+  window.addEventListener('keydown', onkey);
+
   onBeforeUnmount(()=> {
     window.removeEventListener('keydown', onkey);
   })