Cleanup Vue components

.eslintrc.js

@@ -56,6 +56,8 @@ module.exports = {
       },
     ],
     'max-classes-per-file': ['off'],
+    // TypeScript will handle it. It also doesn't work with typescript global types.
+    'no-undef': ['off'],
     'no-unused-vars': ['off'],
     'no-use-before-define': ['off'],
     'vue/no-mutating-props': ['warn'],

src/components/AddCourseButton.vue

@@ -24,9 +24,9 @@ import Vue from 'vue';
 
 export default Vue.extend({
   props: {
-    compact: Boolean,
-    shouldClearPadding: Boolean,
-    shouldShowWalkthrough: Boolean,
+    compact: { type: Boolean, required: true },
+    shouldClearPadding: { type: Boolean, default: false },
+    shouldShowWalkthrough: { type: Boolean, default: false },
   },
   computed: {
     addCourseText() {

src/components/BottomBar/BottomBar.vue

@@ -2,7 +2,7 @@
   <div class="bottombar">
     <div class="bottombar-tabviewTitleWrapper">
       <div class="bottombar-tabview" v-bind:class="{ expandedTabView: isExpanded }">
-        <bottombartabview
+        <bottom-bar-tab-view
           :bottomCourses="bottomCourses"
           :seeMoreCourses="seeMoreCourses"
           :bottomCourseFocus="bottomCourseFocus"
@@ -13,15 +13,15 @@
         />
       </div>
       <div class="bottombar-title" @click="toggle()">
-        <bottombartitle
+        <bottom-bar-title
           :color="bottomCourses[bottomCourseFocus].color"
           :name="bottomCourses[bottomCourseFocus].name"
           :isExpanded="isExpanded"
         />
       </div>
     </div>
     <div v-if="isExpanded" class="bottombar-course">
-      <bottombarcourse :courseObj="bottomCourses[bottomCourseFocus]" />
+      <bottom-bar-course :courseObj="bottomCourses[bottomCourseFocus]" />
     </div>
   </div>
 </template>
@@ -31,13 +31,9 @@ import Vue, { PropType } from 'vue';
 import BottomBarCourse from '@/components/BottomBar/BottomBarCourse.vue';
 import BottomBarTabView from '@/components/BottomBar/BottomBarTabView.vue';
 import BottomBarTitle from '@/components/BottomBar/BottomBarTitle.vue';
-import { AppBottomBarCourse } from '@/user-data';
-
-Vue.component('bottombarcourse', BottomBarCourse);
-Vue.component('bottombartabview', BottomBarTabView);
-Vue.component('bottombartitle', BottomBarTitle);
 
 export default Vue.extend({
+  components: { BottomBarCourse, BottomBarTabView, BottomBarTitle },
   props: {
     bottomCourses: Array as PropType<AppBottomBarCourse[]>,
     seeMoreCourses: Array as PropType<AppBottomBarCourse[]>,

src/components/BottomBar/BottomBarCourse.vue

@@ -284,7 +284,6 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue';
 import { reviewColors } from '@/assets/constants/colors';
-import { AppBottomBarCourse } from '@/user-data';
 
 export default Vue.extend({
   data() {
@@ -293,8 +292,7 @@ export default Vue.extend({
     };
   },
   props: {
-    courseObj: Object as PropType<AppBottomBarCourse>,
-    id: Number,
+    courseObj: { type: Object as PropType<AppBottomBarCourse>, required: true },
   },
   created() {
     window.addEventListener('resize', this.isSmallerWidthEventHandler);

src/components/BottomBar/BottomBarTab.vue

@@ -19,18 +19,16 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue';
-import { AppBottomBarCourse } from '@/user-data';
 
 export default Vue.extend({
   props: {
-    subject: String,
-    number: String,
-    color: String,
-    id: Number,
-    courseObj: Object as PropType<AppBottomBarCourse>,
-    tabIndex: Number,
-    bottomCourseFocus: Number,
-    isExpanded: Boolean,
+    subject: { type: String, required: true },
+    number: { type: String, required: true },
+    color: { type: String, required: true },
+    courseObj: { type: Object as PropType<AppBottomBarCourse>, required: true },
+    tabIndex: { type: Number, required: true },
+    bottomCourseFocus: { type: Number, required: true },
+    isExpanded: { type: Boolean, required: true },
   },
 
   methods: {

src/components/BottomBar/BottomBarTabView.vue

@@ -6,8 +6,7 @@
         :key="index"
         class="bottombartabview-courseWrapper"
       >
-        <bottombartab
-          v-bind="bottomCourse"
+        <bottom-bar-tab
           :subject="bottomCourse.subject"
           :number="bottomCourse.number"
           :color="bottomCourse.color"
@@ -64,22 +63,20 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue';
 import BottomBarTab from '@/components/BottomBar/BottomBarTab.vue';
-import { AppBottomBarCourse } from '@/user-data';
-
-Vue.component('bottombartab', BottomBarTab);
 
 export default Vue.extend({
+  components: { BottomBarTab },
   data() {
     return {
       seeMoreOpen: false,
     };
   },
   props: {
-    bottomCourses: Array as PropType<AppBottomBarCourse[]>,
-    seeMoreCourses: Array as PropType<AppBottomBarCourse[]>,
-    bottomCourseFocus: Number,
-    isExpanded: Boolean,
-    maxBottomBarTabs: Number,
+    bottomCourses: { type: Array as PropType<AppBottomBarCourse[]>, required: true },
+    seeMoreCourses: { type: Array as PropType<AppBottomBarCourse[]>, required: true },
+    bottomCourseFocus: { type: Number, required: true },
+    isExpanded: { type: Boolean, required: true },
+    maxBottomBarTabs: { type: Number, required: true },
   },
 
   computed: {

src/components/BottomBar/BottomBarTitle.vue

@@ -25,9 +25,9 @@ import Vue from 'vue';
 
 export default Vue.extend({
   props: {
-    color: String,
-    name: String,
-    isExpanded: Boolean,
+    color: { type: String, required: true },
+    name: { type: String, required: true },
+    isExpanded: { type: Boolean, required: true },
   },
 });
 </script>

src/components/Confirmation.vue

@@ -12,7 +12,7 @@ import Vue from 'vue';
 
 export default Vue.extend({
   props: {
-    text: String,
+    text: { type: String, required: true },
   },
 });
 </script>

src/components/Course.vue

@@ -27,7 +27,7 @@
         </div>
       </div>
     </div>
-    <coursemenu
+    <course-menu
       v-if="menuOpen"
       :semesterIndex="semesterIndex"
       :isCompact="compact"
@@ -46,12 +46,9 @@ import Vue, { PropType } from 'vue';
 import CourseMenu from '@/components/Modals/CourseMenu.vue';
 import CourseCaution from '@/components/CourseCaution.vue';
 import { clickOutside } from '@/utilities';
-import { FirestoreSemesterCourse } from '@/user-data';
-
-Vue.component('coursemenu', CourseMenu);
-Vue.component('course-caution', CourseCaution);
 
 export default Vue.extend({
+  components: { CourseCaution, CourseMenu },
   props: {
     courseObj: { type: Object as PropType<FirestoreSemesterCourse>, required: true },
     duplicatedCourseCodeList: { type: Array, required: false },

src/components/CourseCaution.vue

@@ -16,11 +16,8 @@ import Vue from 'vue';
 
 export default Vue.extend({
   props: {
-    compact: Boolean,
-    cautionString: {
-      type: String,
-      required: true,
-    },
+    compact: { type: Boolean, required: true },
+    cautionString: { type: String, required: true },
   },
 });
 </script>

src/components/DropDownArrow.vue

@@ -15,9 +15,9 @@ import Vue from 'vue';
 
 export default Vue.extend({
   props: {
-    fillColor: String,
-    isFlipped: Boolean,
-    isPointingLeft: Boolean,
+    fillColor: { type: String, required: true },
+    isFlipped: { type: Boolean, default: false },
+    isPointingLeft: { type: Boolean, default: false },
   },
 });
 </script>

src/components/Modals/EditSemester.vue

@@ -2,15 +2,15 @@
   <div class="editSemesterModal">
     <div class="editSemesterModal-content">
       <div class="editSemesterModal-top">
-        <span class="editSemesterModal-title">{{ title }}</span>
+        <span class="editSemesterModal-title">Edit Semester</span>
         <img
           class="editSemesterModal-exit"
           src="@/assets/images/x.png"
           @click="closeCurrentModal"
         />
       </div>
       <div class="editSemesterModal-body">
-        <newSemester
+        <new-semester
           class="modal-body"
           :currentSemesters="semesters"
           :isEdit="true"
@@ -19,11 +19,10 @@
           @duplicateSemester="disableButton"
           @updateSemProps="updateSemProps"
           ref="modalBodyComponent"
-        >
-        </newSemester>
+        />
       </div>
       <div class="editSemesterModal-buttonWrapper">
-        <button class="editSemesterModal-button" @click="closeCurrentModal">{{ cancel }}</button>
+        <button class="editSemesterModal-button" @click="closeCurrentModal">Cancel</button>
         <div
           class="editSemesterModal-button editSemesterModal-button--delete"
           :class="{ 'editSemesterModal-button--disabled': isDisabled }"
@@ -41,15 +40,13 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue';
 import NewSemester from '@/components/Modals/NewSemester.vue';
-import { FirestoreSemester } from '@/user-data';
-
-Vue.component('newSemester', NewSemester);
 
 export default Vue.extend({
+  components: { NewSemester },
   props: {
     semesters: Array as PropType<readonly FirestoreSemester[]>,
-    deleteSemType: String,
-    deleteSemYear: Number,
+    deleteSemType: { type: String as PropType<FirestoreSemesterType>, required: true },
+    deleteSemYear: { type: Number, required: true },
   },
   data() {
     return {
@@ -58,17 +55,6 @@ export default Vue.extend({
       year: '',
     };
   },
-  computed: {
-    text() {
-      return 'Are you sure you want to edit this semester?';
-    },
-    cancel() {
-      return 'Cancel';
-    },
-    title() {
-      return 'Edit Semester';
-    },
-  },
   methods: {
     closeCurrentModal() {
       this.$emit('close-edit-modal');

src/components/Modals/NewCourse/CourseSelector.vue

@@ -71,7 +71,11 @@ const getMatchingCourses = (
 };
 
 export default Vue.extend({
-  props: { searchBoxClassName: String, placeholder: String, autoFocus: Boolean },
+  props: {
+    searchBoxClassName: { type: String, required: true },
+    placeholder: { type: String, required: true },
+    autoFocus: { type: Boolean, required: true },
+  },
   data() {
     return {
       searchText: '',

src/components/Modals/NewCourse/NewCourseModal.vue

@@ -1,7 +1,7 @@
 <template>
   <flexible-modal
     title="Add Course"
-    contentClass="content-course"
+    content-class="content-course"
     :leftButtonText="leftButtonText"
     :rightButtonText="rightButtonText"
     :rightButtonIsDisabled="selectedCourse == null"
@@ -21,12 +21,12 @@
     <div v-if="isCourseModelSelectingSemester && selectedCourse == null">
       <div class="newCourse-title">Add this class to the following semester</div>
       <div class="newCourse-semester-edit">
-        <newSemester
+        <new-semester
           :type="season"
           :year="year"
           :isCourseModelSelectingSemester="isCourseModelSelectingSemester"
           @updateSemProps="updateSemProps"
-        ></newSemester>
+        />
       </div>
     </div>
     <div v-if="selectedCourse != null">
@@ -60,8 +60,9 @@ import Vue, { PropType } from 'vue';
 import SelectedRequirementEditor, {
   RequirementWithID,
 } from '@/components/Modals/NewCourse/SelectedRequirementEditor.vue';
-import { FirestoreSemesterType, CornellCourseRosterCourse } from '@/user-data';
 import { SingleMenuRequirement } from '@/requirements/types';
+import FlexibleModal from '@/components/Modals/FlexibleModal.vue';
+import NewSemester from '@/components/Modals/NewSemester.vue';
 import CourseSelector, {
   MatchingCourseSearchResult,
 } from '@/components/Modals/NewCourse/CourseSelector.vue';
@@ -72,7 +73,7 @@ import winter from '@/assets/images/winterEmoji.svg';
 import summer from '@/assets/images/summerEmoji.svg';
 
 export default Vue.extend({
-  components: { CourseSelector, SelectedRequirementEditor },
+  components: { CourseSelector, FlexibleModal, NewSemester, SelectedRequirementEditor },
   data() {
     return {
       selectedCourse: null as MatchingCourseSearchResult | null,

src/components/Modals/NewSemester.vue

@@ -92,7 +92,6 @@ import spring from '@/assets/images/springEmoji.svg';
 import winter from '@/assets/images/winterEmoji.svg';
 import summer from '@/assets/images/summerEmoji.svg';
 import { inactiveGray, yuxuanBlue, darkPlaceholderGray } from '@/assets/scss/_variables.scss';
-import { FirestoreSemesterType, FirestoreSemester } from '@/user-data';
 
 type DisplayOption = {
   shown: boolean;
@@ -115,12 +114,14 @@ type Data = {
 
 export default Vue.extend({
   props: {
-    currentSemesters: Array as PropType<readonly FirestoreSemester[] | null>,
-    id: Number,
-    isEdit: Boolean,
-    year: Number,
-    type: String as PropType<FirestoreSemesterType>,
-    isCourseModelSelectingSemester: Boolean,
+    currentSemesters: {
+      type: Array as PropType<readonly FirestoreSemester[] | null>,
+      default: null,
+    },
+    isEdit: { type: Boolean, default: false },
+    year: { type: Number, default: 0 },
+    type: { type: String as PropType<FirestoreSemesterType>, default: '' },
+    isCourseModelSelectingSemester: { type: Boolean, default: false },
   },
   data(): Data {
     // years