Make all components use typescript

6 files changed, 135 insertions, 138 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>
diff --git a/src/features/parser.ts b/src/features/parser.ts
index 7839564..f1164d8 100644
--- a/src/features/parser.ts
+++ b/src/features/parser.ts
@@ -2,7 +2,7 @@ import Lab from '@/models/Lab';
 import PeerTeacher from '@/models/PeerTeacher';
 import EventInfo from '../models/EventInfo';
 
-export function parseLabFile(file: File): Promise<Lab[]> {
+export async function parseLabFile(file: File): Promise<Lab[]> {
   const validCourses = [
     '110',
     '111',
@@ -15,115 +15,107 @@ export function parseLabFile(file: File): Promise<Lab[]> {
     // '314',
     '315',
   ];
-
-  return new Promise((resolve, reject) => {
-    const result: Lab[] = [];
-
-    file.text().then((text) => {
-      let jsonData;
-      try {
-        jsonData = JSON.parse(text);
-      } catch (e) {
-        reject(new Error(e));
-      }
-      const labs = jsonData.data;
-
-      labs.forEach((lab: any) => {
-        if (validCourses.includes(lab.courseNumber)) {
-          const newLab = new Lab(lab.courseNumber, lab.sequenceNumber);
-
-          if (lab.instructionalMethod !== 'Web Based') {
-            lab.meetingsFaculty.every((meeting: any) => {
-              const { meetingTime } = meeting;
-
-              if (meetingTime.meetingType === 'LAB') {
-                let days = '';
-                days += meetingTime.monday ? 'M' : '';
-                days += meetingTime.tuesday ? 'T' : '';
-                days += meetingTime.wednesday ? 'W' : '';
-                days += meetingTime.thursday ? 'R' : '';
-                days += meetingTime.friday ? 'F' : '';
-
-                newLab.event.days = days;
-                newLab.event.start = parseInt(meetingTime.beginTime, 10);
-                newLab.event.end = parseInt(meetingTime.endTime, 10);
-
-                return false;
-              }
-
-              return true;
-            });
+  const result: Lab[] = [];
+
+  const text = await file.text();
+  let jsonData;
+  try {
+    jsonData = JSON.parse(text);
+  } catch (e) {
+    throw new Error(e);
+  }
+  const labs = jsonData.data;
+
+  labs.forEach((lab: any) => {
+    if (validCourses.includes(lab.courseNumber)) {
+      const newLab = new Lab(lab.courseNumber, lab.sequenceNumber);
+
+      if (lab.instructionalMethod !== 'Web Based') {
+        lab.meetingsFaculty.every((meeting: any) => {
+          const { meetingTime } = meeting;
+
+          if (meetingTime.meetingType === 'LAB') {
+            let days = '';
+            days += meetingTime.monday ? 'M' : '';
+            days += meetingTime.tuesday ? 'T' : '';
+            days += meetingTime.wednesday ? 'W' : '';
+            days += meetingTime.thursday ? 'R' : '';
+            days += meetingTime.friday ? 'F' : '';
+
+            newLab.event.days = days;
+            newLab.event.start = parseInt(meetingTime.beginTime, 10);
+            newLab.event.end = parseInt(meetingTime.endTime, 10);
+
+            return false;
           }
 
-          result.push(newLab);
-        }
-      });
+          return true;
+        });
+      }
 
-      resolve(result);
-    });
+      result.push(newLab);
+    }
   });
+
+  return result;
 }
 
-export function parsePtSchedule(file: File): Promise<PeerTeacher> {
-  return new Promise((resolve) => {
-    file.text().then((text) => {
-      const peerTeacher = new PeerTeacher();
-      const namePattern = /^(.*)\s(.*)\s(\d{9})/;
-      const eventPattern = /^(M?T?W?R?F?)\s(\d{1,2}:\d{2})\s?-\s?(\d{1,2}:\d{2})/;
-      const lines = text.split('\n').filter((line) => line.trim());
-
-      lines.forEach((line) => {
-        const ptName = line.match(namePattern);
-        if (ptName) {
-          [, peerTeacher.firstname, peerTeacher.lastname] = ptName;
-          peerTeacher.uin = parseInt(ptName[3], 10);
-        }
-
-        const eventMatch = line.match(eventPattern);
-        if (eventMatch) {
-          const newEvent = new EventInfo(eventMatch[1]);
-          newEvent.start = parseInt(eventMatch[2].replace(':', ''), 10);
-          newEvent.end = parseInt(eventMatch[3].replace(':', ''), 10);
-          peerTeacher.events.push(newEvent);
-        }
-      });
-
-      resolve(peerTeacher);
-    });
+export async function parsePtSchedule(file: File): Promise<PeerTeacher> {
+  const text = await file.text();
+  const peerTeacher = new PeerTeacher();
+  // namePatter: <firstname> <lastname> <uin>
+  const namePattern = /^(.*)\s(.*)\s(\d{9})/;
+  // eventPattern (24hr time): MTWRF hh:mm - hh:mm
+  const eventPattern = /^(M?T?W?R?F?)\s(\d{1,2}:\d{2})\s?-\s?(\d{1,2}:\d{2})/;
+  const lines = text.split('\n').filter((line) => line.trim());
+
+  lines.forEach((line) => {
+    const ptName = line.match(namePattern);
+    if (ptName) {
+      [, peerTeacher.firstname, peerTeacher.lastname] = ptName;
+      peerTeacher.uin = parseInt(ptName[3], 10);
+    }
+
+    const eventMatch = line.match(eventPattern);
+    if (eventMatch) {
+      const newEvent = new EventInfo(eventMatch[1]);
+      newEvent.start = parseInt(eventMatch[2].replace(':', ''), 10);
+      newEvent.end = parseInt(eventMatch[3].replace(':', ''), 10);
+      peerTeacher.events.push(newEvent);
+    }
   });
+
+  return peerTeacher;
 }
 
-export function parsePtDatabase(file: File): Promise<{
+export async function parsePtDatabase(file: File): Promise<{
   labs: Map<string, Lab>,
   peerTeachers: Map<number, PeerTeacher>
 }> {
-  return new Promise((resolve) => {
-    file.text().then((text) => {
-      const jsonObj = JSON.parse(text);
-      const result = {
-        labs: new Map(),
-        peerTeachers: new Map(),
-      };
-
-      Object.keys(jsonObj.labs).forEach((key) => {
-        const lab = jsonObj.labs[key];
-        result.labs.set(key, new Lab(lab.course,
-          lab.section, new EventInfo(lab.event.days, lab.event.start, lab.event.end)));
-      });
-
-      Object.keys(jsonObj.peerTeachers).forEach((key) => {
-        const pt = jsonObj.peerTeachers[key];
-        const ptObj = new PeerTeacher(pt.firstname, pt.lastname, pt.uin);
-        ptObj.events = pt.events.map((eventObj: any) => new EventInfo(eventObj.days,
-          eventObj.start, eventObj.end));
-        ptObj.assignedLabs = new Set();
-        pt.assignedLabs.forEach((labId: string) => {
-          ptObj.assignedLabs.add(labId);
-        });
-        result.peerTeachers.set(key, ptObj);
-      });
+  const text = await file.text();
+  const jsonObj = JSON.parse(text);
+  const result = {
+    labs: new Map(),
+    peerTeachers: new Map(),
+  };
+
+  Object.keys(jsonObj.labs).forEach((key) => {
+    const { course, section, event: { days, start, end } } = jsonObj.labs[key];
+    result.labs.set(key, new Lab(course,
+      section, new EventInfo(days, start, end)));
+  });
 
-      resolve(result);
+  Object.keys(jsonObj.peerTeachers).forEach((key) => {
+    const pt = jsonObj.peerTeachers[key];
+    const ptObj = new PeerTeacher(pt.firstname, pt.lastname, pt.uin);
+    ptObj.events = pt.events.map((eventObj: any) => new EventInfo(eventObj.days,
+      eventObj.start, eventObj.end));
+    ptObj.assignedLabs = new Set();
+    pt.assignedLabs.forEach((labId: string) => {
+      ptObj.assignedLabs.add(labId);
     });
+    result.peerTeachers.set(key, ptObj);
   });
+
+  return result;
 }
diff --git a/src/views/Start.vue b/src/views/Start.vue
index 567582d..f32c337 100644
--- a/src/views/Start.vue
+++ b/src/views/Start.vue
@@ -22,12 +22,11 @@ export default defineComponent({
     UIButton,
   },
   methods: {
-    handleDatabaseChange(files: File[]) {
-      parsePtDatabase(files[0]).then((result) => {
-        this.$store.commit('setLabs', result.labs);
-        this.$store.commit('setPeerTeachers', result.peerTeachers);
-        this.$router.push({ name: 'Editor' });
-      });
+    async handleDatabaseChange(files: File[]) {
+      const result = await parsePtDatabase(files[0]);
+      this.$store.commit('setLabs', result.labs);
+      this.$store.commit('setPeerTeachers', result.peerTeachers);
+      this.$router.push({ name: 'Editor' });
     },
   },
 });