Moving to vuex

src/web/src/App.vue

@@ -5,44 +5,17 @@
 </template>
 
 <script>
-import { TOGGLE_DARK_MODE, SET_COURSE_LIST } from "@/store";
-import { getCourses } from "@/services/YacsService";
-import { getDefaultSemester } from "@/services/AdminService";
+import { LOAD_DEPARTMENTS, TOGGLE_DARK_MODE } from "@/store";
 
 export default {
   name: "App",
   components: {},
   async created() {
-    const querySemester = this.$route.query.semester;
-    this.selectedSemester =
-      querySemester && querySemester != "null"
-        ? querySemester
-        : await getDefaultSemester();
-    const courses = await getCourses(this.selectedSemester);
-    this.$store.commit(SET_COURSE_LIST, courses);
-
     if (this.$cookies.get("darkMode") == "true") {
-      this.$store.commit(TOGGLE_DARK_MODE);
+      this.$store.commit(TOGGLE_DARK_MODE, true);
     }
-  },
-  computed: {
-    darkMode() {
-      return this.$store.state.darkMode;
-    },
-  },
-  watch: {
-    darkMode(newState, oldState) {
-      if (newState === oldState) {
-        return;
-      }
 
-      const bodyClassList = document.getElementsByTagName("body")[0].classList;
-      if (newState) {
-        bodyClassList.add("dark");
-      } else {
-        bodyClassList.remove("dark");
-      }
-    },
+    this.$store.dispatch(LOAD_DEPARTMENTS);
   },
   metaInfo() {
     return {

src/web/src/components/CourseList.vue

@@ -90,7 +90,7 @@
 
 <script>
 import "@/typedef";
-
+import { mapState } from "vuex";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 
 import { DAY_SHORTNAMES } from "@/utils";
@@ -108,20 +108,16 @@ export default {
     DynamicScroller,
     DynamicScrollerItem,
   },
-  props: {
-    courses: Array,
-    subsemesters: Array,
-    selectedSemester: null,
-  },
   data() {
     return {
       faInfoCircle,
       DAY_SHORTNAMES,
       textSearch: "",
       selectedSubsemester: null,
       selectedDepartment: null,
-      departmentOptions: [{ text: "All", value: null }],
-      courseList: this.courses,
+      // departmentOptions: [{ text: "All", value: null }],
+      // courseList: this.courses,
+      courseList: null,
       debounceTime: 300,
     };
   },
@@ -150,6 +146,14 @@ export default {
     },
   },
   computed: {
+    ...mapState(["selectedSemester", "subsemesters", "departments"]),
+
+    departmentOptions() {
+      return [{ text: "All", value: null }].concat(
+        ...this.departments.map(({ department }) => department)
+      );
+    },
+
     subsemesterOptions() {
       let options = [{ text: "All", value: null }];
       options.push(
@@ -166,8 +170,13 @@ export default {
     // returns exact match if possible.
     // if no exact match exists, returns similar options.
     filterCourses() {
+      const courses =
+        this.courseList !== null
+          ? this.courseList
+          : this.$store.getters.courses;
+
       // filter by selected department
-      const filtered = this.courseList.filter(
+      const filtered = courses.filter(
         (course) =>
           (!this.selectedDepartment ||
             course.department === this.selectedDepartment) &&
@@ -190,12 +199,6 @@ export default {
       if (find) return [find];
       else return filtered;
     },
-    // return a list of the titles of each course.
-    mapCourseNames() {
-      return this.filterCourses.map((course) => {
-        return course.full_title || course.title;
-      });
-    },
   },
 };
 </script>

src/web/src/components/DepartmentList.vue

@@ -38,7 +38,6 @@ export default {
   props: {
     majors: Set,
     deptClassDict: Object,
-    selectedSemester: String,
     id: Number,
   },
 

src/web/src/components/Footer.vue

@@ -10,7 +10,7 @@
               :key="option.text"
               class="link"
               :disabled="option.text === selectedSemester"
-              @click="updateSelectedSemester(option.text)"
+              @click="selectSemester(option.value)"
             >
               {{ option.value }}
             </a>
@@ -75,37 +75,27 @@
 </template>
 
 <script>
-import { getSemesters } from "@/services/YacsService";
+import { SELECT_SEMESTER } from "@/store";
+import { mapState, mapActions } from "vuex";
 
 export default {
   name: "Footer",
-  props: {
-    selectedSemester: String,
-  },
-  data() {
-    return {
-      semesterOptions: [],
-    };
-  },
-  methods: {
-    updateSelectedSemester(newSemester) {
-      this.$emit("changeSelectedSemester", newSemester);
-    },
-  },
   computed: {
+    ...mapState(["semesters", "selectedSemester"]),
     otherSemesters() {
       return this.semesterOptions.filter(
-        (semester) => semester.text != this.semester
+        (semester) => semester.value !== this.selectedSemester
       );
     },
-  },
-  created() {
-    getSemesters().then((data) => {
-      this.semesterOptions = data.map((s) => ({
-        text: s.semester,
-        value: s.semester,
+    semesterOptions() {
+      return this.semesters.map(({ semester }) => ({
+        text: semester,
+        value: semester,
       }));
-    });
+    },
+  },
+  methods: {
+    ...mapActions([SELECT_SEMESTER]),
   },
 };
 </script>

src/web/src/components/Header.vue

@@ -103,18 +103,11 @@ import { userTypes } from "../store/modules/user";
 
 export default {
   name: "Header",
-  props: {
-    selectedSemester: String,
-  },
   components: {
     SignUpForm: SignUpComponent,
     LoginForm: LoginComponent,
   },
-  data() {
-    return {
-      semesterOptions: [],
-    };
-  },
+
   methods: {
     toggle_style() {
       this.$store.commit(TOGGLE_DARK_MODE);
@@ -145,6 +138,7 @@ export default {
       isLoggedIn: userTypes.getters.IS_LOGGED_IN,
       user: userTypes.getters.CURRENT_USER_INFO,
     }),
+    ...mapState(["selectedSemester"]),
     ...mapState({ sessionId: userTypes.state.SESSION_ID }),
   },
 };

src/web/src/components/Schedule.vue

@@ -75,7 +75,9 @@ export default {
     ScheduleEvent: ScheduleEventComponent,
   },
   props: {
-    schedule: Schedule,
+    schedule: {
+      default: () => new Schedule(),
+    },
   },
   data() {
     return {

src/web/src/pages/CourseExplorer.vue

@@ -1,7 +1,7 @@
 <template>
   <b-container fluid>
     <b-breadcrumb :items="breadcrumbNav"></b-breadcrumb>
-    <div v-if="$store.state.courseList.length != 0" class="mx-auto w-75">
+    <div v-if="!isLoadingCourses && courses.length > 0" class="mx-auto w-75">
       <b-row>
         <!--
         - Left side of the column
@@ -24,7 +24,6 @@
                 <DepartmentList
                   :majors="deptObj.departments"
                   :deptClassDict="deptClassDict"
-                  :selectedSemester="selectedSemester"
                   v-on:showCourseInfo="showCourseInfo($event)"
                 ></DepartmentList>
               </b-row>
@@ -49,7 +48,6 @@
                 <DepartmentList
                   :majors="deptObj.departments"
                   :deptClassDict="deptClassDict"
-                  :selectedSemester="selectedSemester"
                   v-on:showCourseInfo="showCourseInfo($event)"
                 ></DepartmentList>
               </b-row>
@@ -69,6 +67,8 @@
 </template>
 
 <script>
+import { mapGetters, mapState } from "vuex";
+import { COURSES } from "@/store";
 import DepartmentListComponenet from "@/components/DepartmentList";
 import { generateRequirementsText } from "@/utils";
 import CenterSpinnerComponent from "../components/CenterSpinner";
@@ -79,9 +79,6 @@ export default {
     DepartmentList: DepartmentListComponenet,
     CenterSpinner: CenterSpinnerComponent,
   },
-  props: {
-    selectedSemester: String,
-  },
   data() {
     return {
       breadcrumbNav: [
@@ -99,6 +96,8 @@ export default {
     generateRequirementsText,
   },
   computed: {
+    ...mapState(["isLoadingCourses"]),
+    ...mapGetters([COURSES]),
     schoolDepartmentObjects() {
       let keyArr = Object.entries(this.schoolsMajorDict)
         .map((schoolDepartmentMapping) => ({
@@ -119,7 +118,7 @@ export default {
     },
     schoolsMajorDict() {
       let schoolsMajorDict = {};
-      for (const c of this.$store.state.courseList) {
+      for (const c of this.courses) {
         if (!schoolsMajorDict[c.school]) {
           schoolsMajorDict[c.school] = new Set();
         }
@@ -129,7 +128,7 @@ export default {
     },
     deptClassDict() {
       let deptClassDict = {};
-      for (const c of this.$store.state.courseList) {
+      for (const c of this.courses) {
         if (deptClassDict[c.department]) {
           deptClassDict[c.department].push(c);
         } else {

src/web/src/pages/CoursePage.vue

@@ -1,7 +1,7 @@
 <template>
   <b-container fluid>
     <b-breadcrumb :items="breadcrumbNav"></b-breadcrumb>
-    <div v-if="$store.state.courseList.length != 0" class="w-90 ml-4 mb-4">
+    <div v-if="!isLoadingCourses && courseObj" class="w-90 ml-4 mb-4">
       <b-row>
         <b-col>
           <h1 class="mt-4">{{ courseObj.title }}</h1>
@@ -31,16 +31,26 @@
       <b-button :to="'/explore/' + courseObj.department">Back</b-button>
     </div>
     <CenterSpinner
-      v-else
+      v-else-if="isLoadingCourses"
       :height="80"
       :fontSize="1.4"
       loadingMessage="Course"
       :topSpacing="30"
     />
+    <!-- If !courseObj -->
+    <div v-else class="w-90 ml-4 mb-4">
+      <b-row>
+        <b-col>
+          <h1 class="mt-4">Course not found</h1>
+        </b-col>
+      </b-row>
+    </div>
   </b-container>
 </template>
 
 <script>
+import { mapGetters, mapState } from "vuex";
+import { COURSES } from "@/store";
 import { generateRequirementsText } from "@/utils";
 import CenterSpinnerComponent from "../components/CenterSpinner.vue";
 import CourseSectionsOpenBadge from "../components/CourseSectionsOpenBadge.vue";
@@ -77,6 +87,8 @@ export default {
     generateRequirementsText,
   },
   computed: {
+    ...mapState(["isLoadingCourses"]),
+    ...mapGetters([COURSES]),
     transformed() {
       let precoreqtext = this.courseObj.raw_precoreqs;
       if (precoreqtext === null) {
@@ -105,9 +117,7 @@ export default {
       return precoreqtext;
     },
     courseObj() {
-      return this.$store.state.courseList.find(
-        (course) => course.name === this.courseName
-      );
+      return this.courses.find((course) => course.name === this.courseName);
     },
     getCredits() {
       var credits;