4 files changed, 41 insertions, 35 deletions
diff --git a/src/components/ActionBar.vue b/src/components/ActionBar.vue
index e50c791..bfe3cdb 100644
--- a/src/components/ActionBar.vue
+++ b/src/components/ActionBar.vue
@@ -11,40 +11,33 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import FileUpload from '@/components/FileUpload.vue';
 import { parseLabFile, parsePtSchedule } from '@/features/parser';
 import UIButton from '@/components/UIButton.vue';
+import PeerTeacher from '@/models/PeerTeacher';
 
-export default {
+export default defineComponent({
   name: 'ActionBar',
   components: {
     FileUpload,
     UIButton,
   },
   methods: {
-    handleLabChange(files) {
-      parseLabFile(files[0])
-        .then((data) => {
-          this.$store.commit('importLabs', data);
-        })
-        .catch((error) => {
-          console.error(error);
-        });
+    async handleLabChange(files: File[]) {
+      const data = await parseLabFile(files[0]);
+      this.$store.commit('importLabs', data);
     },
-    handlePtChange(files) {
-      const result = [];
-      const promises = [];
+    async handlePtChange(files: File[]) {
+      const promises: Promise<PeerTeacher>[] = [];
 
       files.forEach((file) => {
-        const p = parsePtSchedule(file).then((data) => result.push(data));
-        promises.push(p);
+        promises.push(parsePtSchedule(file));
       });
 
-      Promise.all(promises)
-        .then(() => {
-          this.$store.commit('addPeerTeachers', result);
-        });
+      const result = await Promise.all(promises);
+      this.$store.commit('addPeerTeachers', result);
     },
     save() {
       const database = {
@@ -64,7 +57,7 @@ export default {
       const url = window.URL.createObjectURL(blob);
       anchor.href = url;
       anchor.download = 'pt-db.json';
-      anchor.style = 'display: none';
+      anchor.style.display = 'none';
 
       document.body.appendChild(anchor);
       anchor.click();
@@ -72,7 +65,7 @@ export default {
       window.URL.revokeObjectURL(url);
     },
   },
-};
+});
 </script>
 
 <style>
diff --git a/src/components/EditorLists.vue b/src/components/EditorLists.vue
index 60c965c..76f8cd1 100644
--- a/src/components/EditorLists.vue
+++ b/src/components/EditorLists.vue
@@ -2,25 +2,28 @@
   <div id="editor-lists">
     <div class="column">
       <h3 class="column-header">Peer Teachers</h3>
-      <List :items="peerTeachers" @selection-changed="handlePtClick" #default="pt">
+      <List
+        :items="peerTeachers"
+        @selection-changed="handlePtClick"
+        #default="{ item: { id, name } }">
         <span class="list-item">
-          {{ pt.item.name }} <button @click.stop="deletePeerTeacher(pt.item.id)">x</button>
+          {{ name }} <button @click.stop="deletePeerTeacher(id)">x</button>
         </span>
       </List>
     </div>
     <div class="column">
       <h3 class="column-header">Labs</h3>
-      <List :items="compatibleLabs" #default="lab">
+      <List :items="compatibleLabs" #default="{ item: { fullInfo, id } }">
         <span class="list-item">
-          {{ lab.item.fullInfo }} <button @click.stop="assignLab(lab.item.id)">+</button>
+          {{ fullInfo }} <button @click.stop="assignLab(id)">+</button>
         </span>
       </List>
     </div>
     <div class="column">
       <h3 class="column-header">{{ this.selectedPeerTeacher.name }}</h3>
-      <List :items="selectedPeerTeacherAssignments" #default="lab">
+      <List :items="selectedPeerTeacherAssignments" #default="{ item: { fullInfo, id } }">
         <span class="list-item">
-          {{ lab.item.fullInfo }} <button @click.stop="unassignLab(lab.item.id)">x</button>
+          {{ fullInfo }} <button @click.stop="unassignLab(id)">x</button>
         </span>
       </List>
     </div>
diff --git a/src/components/FileUpload.vue b/src/components/FileUpload.vue
index fe3ef1e..082fc9d 100644
--- a/src/components/FileUpload.vue
+++ b/src/components/FileUpload.vue
@@ -9,11 +9,16 @@
   </label>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   name: 'FileUpload',
   props: {
-    accept: String,
+    accept: {
+      type: String,
+      required: false,
+    },
     multiple: {
       type: Boolean,
       default: false,
@@ -22,7 +27,7 @@ export default {
   emits: {
     fileChanged: null,
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/src/components/List.vue b/src/components/List.vue
index f1ef690..4732a9e 100644
--- a/src/components/List.vue
+++ b/src/components/List.vue
@@ -9,16 +9,21 @@
   </ul>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   name: 'List',
   props: {
-    items: Array,
+    items: {
+      type: Array,
+      default: [] as any[],
+    },
   },
   emits: {
     selectionChanged: null,
   },
-};
+});
 </script>
 
 <style scoped>