Practice j

db.json

@@ -15,8 +15,8 @@
       "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
+      "archived": true,
+      "read": true
     },
     {
       "id": 3,

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "start": "vue-cli-service serve & json-server --watch db.json"
   },
   "dependencies": {
     "axios": "^0.19.2",

src/App.vue

@@ -1,24 +1,23 @@
 <template>
-  <div id="app">      
-    <Suspense>
-      <template #default>
-        <MailScreen />
-      </template>
-      <template #fallback>
-        Loading...
-      </template>
-    </Suspense>
-  </div>
+  <h1>VMail Inbox</h1>
+  <Suspense>
+    <MailTable />
+    <template #fallback> Loading... </template>
+  </Suspense>
 </template>
-
+  
 <script>
-import MailScreen from '@/components/MailScreen.vue';
+import MailTable from "@/components/MailTable.vue";
+import useEmailSelection from "@/composables/use-email-selection.js";
 
 export default {
-  name: 'App',
-  components: {
-    MailScreen
-  }
+  name: "App",
+  components: { MailTable },
+  setup() {
+    return {
+      emailSelection: useEmailSelection(),
+    };
+  },
 };
 </script>
 
@@ -57,24 +56,24 @@ button.selected {
   cursor: pointer;
 }
 
-input[type='checkbox'] {
-  -webkit-appearance:none;
+input[type="checkbox"] {
+  -webkit-appearance: none;
   cursor: pointer;
-  width:24px;
-  height:24px;
-  background:white;
+  width: 24px;
+  height: 24px;
+  background: white;
   border-radius: 2px;
   border: 1px solid #555;
   position: relative;
   vertical-align: middle;
   padding: 10px;
 }
 
-input[type='checkbox'].partial-check {
-  background: #ABC;
+input[type="checkbox"].partial-check {
+  background: #abc;
 }
 
-input[type='checkbox']:checked {
+input[type="checkbox"]:checked {
   background: #679;
 }
 
@@ -84,7 +83,8 @@ input[type='checkbox']:checked {
 
 /* Modal */
 
-.modal, .overlay {
+.modal,
+.overlay {
   width: 100%;
   height: 100%;
   position: fixed;
@@ -121,7 +121,7 @@ input[type='checkbox']:checked {
   border-collapse: collapse;
 }
 .mail-table tr.read {
-  background-color: #EEE;
+  background-color: #eee;
 }
 .mail-table tr {
   height: 40px;

src/components/BulkActionBar.vue

@@ -1,82 +1,77 @@
 <template>
   <div class="bulk-action-bar">
     <span class="checkbox">
-      <input type="checkbox" 
-             :checked="allAreSelected"
-             :class="[partialSelection ? 'partial-check' : '']"
-             @click="bulkSelect">
+      <input
+        type="checkbox"
+        :checked="allEmailSelected"
+        :class="[someEmailSelected ? 'partial-check' : '']"
+        @click="bulkSelect"
+      />
     </span>
-
     <span class="buttons">
-      <button @click="emailSelection.markRead()"
-              :disabled="Array.from(emailSelection.emails).every(e => e.read)">
+      <button
+        @click="emailSelection.markRead()"
+        :disabled="[...emailSelection.emails].every((e) => e.read)"
+      >
         Mark Read
       </button>
-      <button @click="emailSelection.markUnread()" 
-              :disabled="Array.from(emailSelection.emails).every(e => !e.read)">
+      <button
+        @click="emailSelection.markUnread()"
+        :disabled="[...emailSelection.emails].every((e) => !e.read)"
+      >
         Mark Unread
       </button>
-      <button v-if="selectedScreen == 'inbox'"
-              @click="emailSelection.archive()" 
-              :disabled="numberSelected == 0">
-        Archive
-      </button>
-      <button v-else
-              @click="emailSelection.moveToInbox()" 
-              :disabled="numberSelected == 0">
-        Move to Inbox
+      <button
+        @click="emailSelection.archive()"
+        :disabled="numberSelected === 0"
+      >
+        Mark Archive
       </button>
     </span>
   </div>
 </template>
 
 <script>
-  import { useEmailSelection } from '../composition/useEmailSelection';
-  import { computed } from 'vue';
+import useEmailSelection from "@/composables/use-email-selection.js";
+import { computed } from "@vue/reactivity";
+export default {
+  setup(props) {
+    const emailSelection = useEmailSelection();
+    let numberSelected = computed(() => emailSelection.emails.size);
+    let numberEmails = computed(() => props.emails.length);
 
-  export default {
-    setup(props){
-      let emailSelection = useEmailSelection();
+    let allEmailSelected = computed(
+      () => numberSelected.value === numberEmails.value
+    );
+    const someEmailSelected = computed(
+      () =>
+        numberSelected.value > 0 && numberSelected.value < numberEmails.value
+    );
 
-      let numberSelected = computed(() => {
-        return emailSelection.emails.size;
-      }) 
-      let allAreSelected = computed(() => {
-        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(props.emails)
-        }
+    const bulkSelect = () => {
+      if (allEmailSelected.value) {
+        emailSelection.clear();
+      } else {
+        emailSelection.addMultiple(props.emails);
       }
+    };
 
-      return { 
-        partialSelection, 
-        allAreSelected,
-        bulkSelect,
-        emailSelection,
-        numberSelected
-      }
+    return {
+      allEmailSelected,
+      someEmailSelected,
+      bulkSelect,
+      emailSelection,
+      numberSelected,
+    };
+  },
+  props: {
+    emails: {
+      type: Array,
+      required: true,
     },
-    props: {
-      emails: {
-        type: Array,
-        required: true
-      }, 
-      selectedScreen: {
-        type: String,
-        required: true
-      }
-    }
-  }
+  },
+};
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
 </style>