From 0dd271b2e979e12f4755c2bb36e961e3ca5dc54b Mon Sep 17 00:00:00 2001
From: Ryzon3 <ryanmcole20@gmail.com>
Date: Tue, 9 Aug 2022 13:54:38 -0400
Subject: [PATCH] FIxed multi year bugs

---
 frontend/src/App.vue                          | 14 +------
 frontend/src/components/Bookmark.vue          |  1 -
 frontend/src/components/CourseTable.vue       | 20 +++++++++-
 frontend/src/components/CourseTableCourse.vue | 22 +++++-----
 .../src/components/DarkLightModeButton.vue    | 11 +++--
 frontend/src/components/Header.vue            |  8 ++--
 frontend/src/components/MyPathway.vue         | 26 +++++++-----
 frontend/src/components/PathwayCategory.vue   | 10 +++--
 frontend/src/components/YearSelection.vue     |  3 +-
 frontend/src/data/data.js                     |  8 ----
 .../src/pages/AdminPortal/AdminCoursePage.vue | 17 +++++---
 .../pages/AdminPortal/AdminPathwayPage.vue    | 21 ++++++----
 .../src/pages/FromClasses/FromClassesPage.vue | 40 ++++++++++++++-----
 .../pages/FromClasses/FromClassesPathways.vue | 12 ++++--
 frontend/src/pages/Pathway/PathwayPage.vue    | 36 ++++++++++++++---
 frontend/src/router/index.js                  | 10 ++---
 16 files changed, 164 insertions(+), 95 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a3d73766..2ab9338e 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,6 +1,6 @@
 <template>
     <v-app id="app">
-        <Header />
+        <Header @updateYear="updateYear()" />
 
         <v-main class="main-content">
             <router-view />
@@ -33,17 +33,7 @@ export default {
         // Note: localStorage saves as a string
         let darkMode = localStorage.getItem(DARK_MODE);
         this.$vuetify.theme.dark = darkMode === null ? DEFAULT_DARK_MODE : darkMode === 'true';
-    },
-    methods: {
-        handleInput() {
-            this.$root.$emit('changedFilter', this.searchInput)
-        },
-        clearProgress() {
-            this.$root.$emit('resetProgress')
-            this.$store.editingCourses = false
-            location.reload()
-        },
-    },
+    }
 }
 </script>
 
diff --git a/frontend/src/components/Bookmark.vue b/frontend/src/components/Bookmark.vue
index 00af5975..33f95702 100644
--- a/frontend/src/components/Bookmark.vue
+++ b/frontend/src/components/Bookmark.vue
@@ -61,7 +61,6 @@
             <span>Add pathway to "My Pathways"</span>  
         </v-tooltip>
     </span>
-
 </template>
 
 <script>
diff --git a/frontend/src/components/CourseTable.vue b/frontend/src/components/CourseTable.vue
index 0d176932..fedd970b 100644
--- a/frontend/src/components/CourseTable.vue
+++ b/frontend/src/components/CourseTable.vue
@@ -75,6 +75,10 @@ export default {
         graph: {
             type: Boolean,
             required: false,
+        },
+        hasData: {
+            type: Boolean,
+            required: true
         }
     },
     data() {
@@ -89,6 +93,20 @@ export default {
         filteredCourses() {
             let tempCourses = JSON.parse(JSON.stringify(this.courses));
 
+            //Weird hack that is needed
+            //Basically since this is a computed method it will auto run
+            //whenever the "data" is changed but since this.courses
+            //doesn't change since it is a reference to the courses from
+            //the parent component we need to change a data piece that
+            //is used in this function. I created the hasData prop to do 
+            //this. We need to then use the hasData to do "something"
+            //in order for it to be rerendered, I used an arbitrary if
+            //statement that will have no effect in order to compile with 
+            // no warnings.
+            if(this.hasData) {
+                tempCourses = JSON.parse(JSON.stringify(tempCourses));
+            }
+
             if(this.search && this.search != ''){
                 tempCourses = Object.fromEntries(Object.entries(tempCourses)
                     .filter(([key]) => key
@@ -97,7 +115,7 @@ export default {
             }
             for(const course in tempCourses) {
                 if(tempCourses[course] == null) {
-                    tempCourses[course]= {};
+                    tempCourses[course] = {};
                     tempCourses[course]["name"] = course;
                     tempCourses[course]["hasData"] = false;
                 }
diff --git a/frontend/src/components/CourseTableCourse.vue b/frontend/src/components/CourseTableCourse.vue
index 51e875d2..5e11f940 100644
--- a/frontend/src/components/CourseTableCourse.vue
+++ b/frontend/src/components/CourseTableCourse.vue
@@ -7,8 +7,8 @@
             @click="toggleCheckbox()"
         >
             This course has pre-requisite(s): 
-            <span v-for='(prereq, index) in course.prerequisites' :key="prereq">
-                {{prereq}} <span v-if="index < course.prerequisites.length-1">,&nbsp;</span>
+            <span v-for="(prereq, index) in course.prerequisites" :key="prereq">
+                {{ prereq }} <span v-if="index < course.prerequisites.length-1">,&nbsp;</span>
             </span>
         </v-alert>
         <v-tooltip v-show="hover" bottom>
@@ -40,7 +40,7 @@
                                 <h1 class="text-h5 class-card__title">
                                     {{ course.name }}
                                 </h1>
-                                <small v-if="course.hasData" class="class-card__subtitle">
+                                <small v-if="course.ID != null" class="class-card__subtitle">
                                     {{ course.subj }}-{{ course.ID }}
                                     <CourseTableModifiers
                                         class="mt-4 class-card__subtitle__modifiers"
@@ -52,13 +52,13 @@
                         </v-list-item-content>
                     </v-list-item>
                     <v-card-text
-                        v-if="course.hasData && desc"
+                        v-if="course.ID != null && desc"
                         class="class-card__desc"
                     >
                         {{ course.description }}
                     </v-card-text>
                     <v-card-text
-                        v-if="!course.hasData"
+                        v-if="course.ID == null"
                         class="class-card__desc"
                     >
                         Data not found within RPI catalog, see SIS for more info.
@@ -92,7 +92,7 @@
                         <h1 class="text-h5 class-card__title">
                             {{ course.name }}
                         </h1>
-                        <small v-if="course.hasData" class="class-card__subtitle">
+                        <small v-if="course.ID != null" class="class-card__subtitle">
                             {{ course.subj }}-{{ course.ID }}
                             <CourseTableModifiers
                                 class="mt-4 class-card__subtitle__modifiers"
@@ -104,13 +104,13 @@
                 </v-list-item-content>
             </v-list-item>
             <v-card-text
-                v-if="course.hasData && desc"
+                v-if="course.ID != null && desc"
                 class="class-card__desc"
             >
                 {{ course.description }}
             </v-card-text>
             <v-card-text
-                v-if="!course.hasData"
+                v-if="course.ID == null"
                 class="class-card__desc"
             >
                 Data not found within RPI catalog, see SIS for more info.
@@ -122,7 +122,7 @@
 <script>
 import CourseTableModifiers from './CourseTableModifiers'
 
-const requiredProps = ['hasData', 'name'];
+const requiredProps = ['name'];
 
 export default {
     name: 'CourseTableCourse',
@@ -183,7 +183,7 @@ export default {
                     this.$store.commit('addCourse', c);
                     this.$emit('checkbox-clicked', { name: this.course.name, selected: true });
                     // now check to see if there are pre-requisites present
-                    if ( this.course.prerequisites.length != 0) {
+                    if (this.course.prerequisites && this.course.prerequisites.length != 0) {
                         // console.log("pre-requisite")
                         this.alert = true;
                         // this.$emit("showAlert", this.course.prerequisites );
@@ -192,7 +192,7 @@ export default {
                     this.$store.commit('delCourse', c);
                     this.$emit('checkbox-clicked', { name: this.course.name, selected: false });
                     this.alert = false;
-                    if ( this.course.prerequisites.length != 0) {
+                    if (this.course.prerequisites && this.course.prerequisites.length != 0) {
                         // console.log("pre-requisite")
                         this.alert = false;
                         // this.$emit("hideAlert", this.course.prerequisites );
diff --git a/frontend/src/components/DarkLightModeButton.vue b/frontend/src/components/DarkLightModeButton.vue
index 001a3682..b215dd4f 100644
--- a/frontend/src/components/DarkLightModeButton.vue
+++ b/frontend/src/components/DarkLightModeButton.vue
@@ -2,17 +2,16 @@
     <v-tooltip bottom>
         <template #activator="{off}">
             <v-switch
-                inset
-                small fab elevation="0"
-                v-on="off"
                 v-model="isLight"
-                @click="darkMode"
+                inset small fab
+                elevation="0"
                 size="small"
                 color="yellow darken-2"
                 :prepend-icon="correctIcon"
                 style="padding-top:21px;"
-            >
-            </v-switch>
+                v-on="off"
+                @click="darkMode"
+            />
         </template>
         <span>Switch to Light Mode</span>
     </v-tooltip>
diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
index b98904e8..8f7e1eba 100644
--- a/frontend/src/components/Header.vue
+++ b/frontend/src/components/Header.vue
@@ -25,9 +25,11 @@ import YearSelection from '../components/YearSelection.vue'
 
 export default {
     name: 'Header',
-    components: { DarkLightModeButton, 
-    HeaderNav,
-    YearSelection }
+    components: {
+        DarkLightModeButton, 
+        HeaderNav,
+        YearSelection
+    }
 }
 </script>
 
diff --git a/frontend/src/components/MyPathway.vue b/frontend/src/components/MyPathway.vue
index 397ce486..5c4574e9 100644
--- a/frontend/src/components/MyPathway.vue
+++ b/frontend/src/components/MyPathway.vue
@@ -45,7 +45,7 @@
                     <v-col>
                         <div class="bookmark">
                             <Bookmark
-                                :myPathway=true
+                                :my-pathway="true"
                                 :pathway-id="title"
                                 :courses="courses"
                                 @update="$emit('update')"
@@ -73,9 +73,9 @@
                                     mdi-alert
                                 </v-icon>
                             </template>
-                            <span><div>There are pre-requisite(s) for this course:<br/>
-                                <span v-for='(prereq, index) in course.prerequisites' :key="prereq">
-                                    {{prereq}} <span v-if="index < course.prerequisites.length-1">,&nbsp;</span>
+                            <span><div>There are pre-requisite(s) for this course:<br>
+                                <span v-for="(prereq, index) in course.prerequisites" :key="prereq">
+                                    {{ prereq }} <span v-if="index < course.prerequisites.length-1">,&nbsp;</span>
                                 </span>
                             </div></span>
                         </v-tooltip>
@@ -95,7 +95,7 @@
 
 <script>
 import getColorFromCategry from '../helpers/category-colors.js';
-import { pathwayCategories, courses as allCourses } from '../data/data.js'
+import { pathwayCategories } from '../data/data.js'
 import Bookmark from './Bookmark'
 
 
@@ -121,19 +121,27 @@ export default {
             type: Boolean
         }
     },
-    mounted() {
+    data() {
+        return {
+            coursesData: {}
+        }
+    },
+    created() {
+        const year = this.$store.state.year;
+        import('../data/json/' + year + '/courses.json').then((val) => this.coursesData = Object.freeze(val));
     },
     methods: {
         hasPreReq( courseName ) {
-            return allCourses[courseName].prerequisites.length != 0;
+            if(!this.coursesData[courseName]) return false;
+            return this.coursesData[courseName].prerequisites.length != 0;
         },
         formatCourseCategory(classes) {
             if (!classes || !classes.length)
                 return []; // Shouldn't happen!
             let out = [];
             for(const clazz in classes) {
-                if(allCourses[classes[clazz]]) {
-                    let myClass = allCourses[classes[clazz]];
+                if(this.coursesData[classes[clazz]]) {
+                    let myClass = this.coursesData[classes[clazz]];
                     myClass.hasData = true;
                     out.push(myClass);
                 }
diff --git a/frontend/src/components/PathwayCategory.vue b/frontend/src/components/PathwayCategory.vue
index 8505ddb4..eba6d9c9 100644
--- a/frontend/src/components/PathwayCategory.vue
+++ b/frontend/src/components/PathwayCategory.vue
@@ -32,14 +32,13 @@
                         </a>
                     </li>
                 </template>
-                <span>{{ pathwaysData[pathway].description }}</span>
+                <span v-if="pathwaysData[pathway]">{{ pathwaysData[pathway].description }}</span>
             </v-tooltip>
         </ul>
     </v-card>
 </template>
 
 <script>
-import { pathways as pathwaysData } from '../data/data.js'
 
 export default {
     name: 'PathwayCategory',
@@ -59,10 +58,13 @@ export default {
         pathways: {
             type: Array, // Array of pathway ids
             default: () => [],
-            validator: val => val.every(x => Object.keys(pathwaysData).includes(x))
         }
     },
-    data() { return { pathwaysData }; }
+    data() { return { pathwaysData: {} }; },
+    created() {
+        const year = this.$store.state.year;
+        import('../data/json/' + year + '/pathways.json').then((val) => this.pathwaysData = Object.freeze(val));
+    }
 }
 </script>
 
diff --git a/frontend/src/components/YearSelection.vue b/frontend/src/components/YearSelection.vue
index 52c25035..1f35ee1c 100644
--- a/frontend/src/components/YearSelection.vue
+++ b/frontend/src/components/YearSelection.vue
@@ -29,7 +29,8 @@ export default {
     },
     methods: {
         updateYear() {
-            this.$store.commit('changeYear',this.selection)
+            this.$store.commit('changeYear', this.selection);
+            location.reload();
         }
     }
 }
diff --git a/frontend/src/data/data.js b/frontend/src/data/data.js
index a3bbcb30..21b3f2bc 100644
--- a/frontend/src/data/data.js
+++ b/frontend/src/data/data.js
@@ -1,21 +1,13 @@
 import pathwayCategoriesJSON from './json/pathway_categories.json'
 import yearsJSON from './json/years.json'
-import store from '../store/store.js'
-
-import coursesJSON from './json/2021-2022/courses.json'
-import pathwaysJSON from './json/2021-2022/pathways.json'
 
 // Neatify JSON data:
 // Sort pathways in pathway categories
 pathwayCategoriesJSON.forEach(category => category.pathways.sort());
 
 // Prevent accidental modification
-Object.freeze(coursesJSON);
-Object.freeze(pathwaysJSON);
 Object.freeze(yearsJSON);
 Object.freeze(pathwayCategoriesJSON);
 
-export const pathways = pathwaysJSON;
 export const pathwayCategories = pathwayCategoriesJSON;
 export const years = yearsJSON;
-export const courses = coursesJSON;
diff --git a/frontend/src/pages/AdminPortal/AdminCoursePage.vue b/frontend/src/pages/AdminPortal/AdminCoursePage.vue
index f2d6ead3..0b2f1cc3 100644
--- a/frontend/src/pages/AdminPortal/AdminCoursePage.vue
+++ b/frontend/src/pages/AdminPortal/AdminCoursePage.vue
@@ -122,7 +122,6 @@
 import Breadcrumbs from '../../components/Breadcrumbs'
 import breadcrumbs from '../../data/breadcrumbs.js'
 import axios from 'axios'
-import { courses, pathways } from '../../data/data.js'
 
 export default {
     components: {
@@ -147,6 +146,8 @@ export default {
             minors: [],
             myPathways: [],
             pathways: [],
+            pathwaysData: {},
+            coursesData: {},
 
             rules: {
                 courseCode: value => ('' + value).length === 4
@@ -172,6 +173,10 @@ export default {
         }
     },
     created() {
+        const year = this.$store.state.year;
+        import('../../data/json/' + year + '/pathways.json').then((val) => this.pathwaysData = Object.freeze(val));
+        import('../../data/json/' + year + '/courses.json').then((val) => this.coursesData = Object.freeze(val));
+
         const course = this.getCourse();
         if(course) {
             this.name = course.name;
@@ -189,8 +194,8 @@ export default {
             this.odd = course.offered.odd;
         }
         let myPathways = new Set();
-        for(const key in pathways) {
-            const singlePathway = pathways[key];
+        for(const key in this.pathwaysData) {
+            const singlePathway = this.pathwaysData[key];
             if(course) {
                 for(const prio in singlePathway) {
                     if(singlePathway[prio] instanceof Object && !(singlePathway[prio] instanceof Array)) {
@@ -211,8 +216,10 @@ export default {
             if(!this.$route.query.class) {
                 return null;
             }
-            
-            return courses[this.$route.query.class];
+            if(!this.coursesData[this.$route.query.class]) {
+                return null;
+            }
+            return this.coursesData[this.$route.query.class];
         },
         submit() {
             let newCourse = this.getCourse();
diff --git a/frontend/src/pages/AdminPortal/AdminPathwayPage.vue b/frontend/src/pages/AdminPortal/AdminPathwayPage.vue
index 8f38634a..f3a95035 100644
--- a/frontend/src/pages/AdminPortal/AdminPathwayPage.vue
+++ b/frontend/src/pages/AdminPortal/AdminPathwayPage.vue
@@ -101,7 +101,6 @@
 <script>
 import Breadcrumbs from '../../components/Breadcrumbs'
 import breadcrumbs from '../../data/breadcrumbs.js'
-import { courses, pathways } from '../../data/data.js'
 
 export default {
     components: {
@@ -127,13 +126,19 @@ export default {
                 { text: 'Hass Inquiry', value: 'HI', align: 'center'},
                 { text: 'Delete From Pathway', value: 'delete', align: 'center'},
             ],
-            filteredCourses: []
+            filteredCourses: [],
+            coursesData: {},
+            pathwaysData: {}
         }
     },
     created() {
+        const year = this.$store.state.year;
+        import('../../data/json/' + year + '/pathways.json').then((val) => this.pathwaysData = Object.freeze(val));
+        import('../../data/json/' + year + '/courses.json').then((val) => this.coursesData = Object.freeze(val));
+
         this.pathways = [];
-        for(const key in pathways) {
-            this.pathways.push(pathways[key].name);
+        for(const key in this.pathwaysData) {
+            this.pathways.push(this.pathwaysData[key].name);
         }
     },
     methods: {  
@@ -148,14 +153,14 @@ export default {
                 return [];
             }
             let pathwayID = this.selectedPathway;
-            let pathway = pathways[pathwayID];
+            let pathway = this.pathwaysData[pathwayID];
             if(pathway != null) {
                 let classes = new Set();
                 for(const prio in pathway) {
                     if(pathway[prio] instanceof Object && !(pathway[prio] instanceof Array)) {
                         for(const course in pathway[prio]) {
-                            if(courses[course]) {
-                                let clazz = courses[course];
+                            if(this.coursesData[course]) {
+                                let clazz = this.coursesData[course];
                                 clazz = JSON.parse(JSON.stringify(clazz));
                                 classes.add(clazz);
                             }
@@ -174,7 +179,7 @@ export default {
             for(const clazz in classes) {
                 const key = classes[clazz].name;
                 const curr = JSON.parse(JSON.stringify(classes[clazz]));
-                const course = courses[key];
+                const course = this.coursesData[key];
                 if(JSON.stringify(curr) != JSON.stringify(course)) {
                     console.log(curr);
                 }
diff --git a/frontend/src/pages/FromClasses/FromClassesPage.vue b/frontend/src/pages/FromClasses/FromClassesPage.vue
index f60e09e9..89b10fba 100644
--- a/frontend/src/pages/FromClasses/FromClassesPage.vue
+++ b/frontend/src/pages/FromClasses/FromClassesPage.vue
@@ -136,7 +136,6 @@
 <script>
 import Breadcrumbs from '../../components/Breadcrumbs'
 import breadcrumbs from '../../data/breadcrumbs.js'
-import { courses } from '../../data/data.js'
 
 const TABLE_HEADERS = [
     {
@@ -155,20 +154,39 @@ export default {
         Breadcrumbs
     },
     data() {
-        const courseList = Object.values(courses).map(course => {
-            return {
-                name: course.name,
-                identifier: course.subj + '-' + course.ID + course['cross listed'].map(el => ' / ' + el).join(""),
-            };
-        });
-
         return {
             breadcrumbs: breadcrumbs.from_classes_search,
             searchValue: '',
-            courses: courseList,
             courseHeaders: TABLE_HEADERS,
-            selected: courseList.filter(course => this.$store.state.classes[course.name]),
-            dialog: false
+            dialog: false,
+            selected: [],
+            coursesData: {}
+        }
+    },
+    created() {
+        const year = this.$store.state.year;
+        import('../../data/json/' + year + '/courses.json').then((val) => {
+            this.coursesData = Object.freeze(val);
+            let temp = this.courses.filter(course => course != null);
+            this.selected = temp.filter(course => this.$store.state.classes[course.name]);
+        });
+    },
+    computed: {
+        courses() {
+            return Object.values(this.coursesData).map((course, index) => {
+                if(course.name) {
+                    return {
+                        name: course.name,
+                        identifier: course.subj + '-' + course.ID + course['cross listed'].map(el => ' / ' + el).join(""),
+                    };
+                }
+                else {
+                    return {
+                        name: "Loading Data",
+                        identifier: "Loading Data"
+                    };
+                }
+            });
         }
     },
     methods: {
diff --git a/frontend/src/pages/FromClasses/FromClassesPathways.vue b/frontend/src/pages/FromClasses/FromClassesPathways.vue
index 7be0a671..b302bc14 100644
--- a/frontend/src/pages/FromClasses/FromClassesPathways.vue
+++ b/frontend/src/pages/FromClasses/FromClassesPathways.vue
@@ -41,7 +41,6 @@
 import Breadcrumbs from '../../components/Breadcrumbs'
 import MyPathway from '../../components/MyPathway'
 import breadcrumbs from '../../data/breadcrumbs.js'
-import { pathways } from '../../data/data.js'
 
 export default {
     components: {
@@ -51,15 +50,16 @@ export default {
     data() {
         return {
             breadcrumbs: breadcrumbs.from_classes_pathway,
-            searchValue: ''
+            searchValue: '',
+            pathwaysData: {}
         }
     },
     computed: {
         get_pathways() {
             let myPathways = [];
-            for(const key in pathways) {
+            for(const key in this.pathwaysData) {
                 let thisPathway = {name: "", courses: new Set()};
-                const singlePathway = pathways[key];
+                const singlePathway = this.pathwaysData[key];
                 thisPathway.name = key;
                 for(const prio in singlePathway) {
                     //Checks if it has classes within it
@@ -81,6 +81,10 @@ export default {
             myPathways.sort((a, b) => a.courses.length < b.courses.length)
             return myPathways;
         }
+    },
+    created() {
+        const year = this.$store.state.year;
+        import('../../data/json/' + year + '/pathways.json').then((val) => this.pathwaysData = Object.freeze(val));
     }
 }
 </script>
diff --git a/frontend/src/pages/Pathway/PathwayPage.vue b/frontend/src/pages/Pathway/PathwayPage.vue
index 616aa0ce..e100fbaf 100644
--- a/frontend/src/pages/Pathway/PathwayPage.vue
+++ b/frontend/src/pages/Pathway/PathwayPage.vue
@@ -42,6 +42,7 @@
                                 :pathway-id="pathwayID"
                                 :desc="false"
                                 :search-bar="false"
+                                :has-data="hasData"
                                 :graph="true"
                                 :hover="hover"
                                 :category="item[0]"
@@ -62,6 +63,7 @@
                                         :pathway-id="pathwayID"
                                         :desc="false"
                                         :search-bar="false"
+                                        :has-data="hasData"
                                         :graph="true"
                                         :hover="hover"
                                         :category="item[0]"
@@ -142,6 +144,7 @@
                         :ref="index"
                         :courses="courses[item[1]]"
                         :pathway-id="pathwayID"
+                        :has-data="hasData"
                         :show-desc="true"
                         :category="item[0]"
                         @checkbox-clicked="onCheckboxClicked"
@@ -153,7 +156,7 @@
 </template>
 
 <script>
-import { pathwayCategories, pathways, courses } from '../../data/data.js'
+import { pathwayCategories } from '../../data/data.js'
 import CourseTable from '../../components/CourseTable'
 import Breadcrumbs from '../../components/Breadcrumbs'
 import breadcrumbs from '../../data/breadcrumbs.js'
@@ -169,7 +172,10 @@ export default {
             category: '',
             showGraph: false,
             changeTabOnSelection: false,
-            hover: false
+            hover: false,
+            pathwaysData: {},
+            coursesData: {},
+            hasData: false
         }
     },
     computed: {
@@ -191,7 +197,10 @@ export default {
         },
         // Get actual pathway object
         pathway() {
-            return pathways[this.pathwayID];
+            if(!this.pathwaysData[this.pathwayID]) {
+                return {};
+            }
+            return this.pathwaysData[this.pathwayID];
         },
         // Name of category to display, ie 'Major Restricted'
         categoryName() {
@@ -220,10 +229,16 @@ export default {
             for(const prio in curr) {
                 // Search through each course in the pathway
                 for(const course_name in curr[prio]) {
-                    const course = courses[course_name];
-                    curr[prio][course_name] = course ? course : null;
+                    if(this.coursesData[course_name]) {
+                        const course = this.coursesData[course_name];
+                        curr[prio][course_name] = course ? course : null;
+                    }
+                    else {
+                        curr[prio][course_name] = null;
+                    }
                 }
             }
+
             return curr;
         },
         // Get breadcrumb data
@@ -247,6 +262,7 @@ export default {
             return prios;
         },
         fourThousand() {
+            if(!this.pathway.remaining_header) return false;
             return this.pathway.remaining_header.indexOf("4000") !== -1
         },
         minor() {
@@ -263,6 +279,14 @@ export default {
             return all.substring(0,all.length-4) //get rid of final " or "
         }
     },
+    created() {
+        const year = this.$store.state.year;
+        import('../../data/json/' + year + '/pathways.json').then((val) => this.pathwaysData = Object.freeze(val));
+        import('../../data/json/' + year + '/courses.json').then((val) => {
+            this.coursesData = Object.freeze(val);
+            this.hasData = true;
+        });
+    },
     mounted() {
         this.bookmarkSelected = this.bookmarked;
     },
@@ -270,7 +294,7 @@ export default {
         debug() {
             // console.log(this.multiRatio());
             // this.multiResize( this.multiRatio() );
-            console.log(pathways)
+            console.log(this.pathwaysData)
         },
         onCheckboxClicked(data) {
             // course name of checkbox will be passed through as the data variable
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 8869edba..b0ac2b47 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -13,8 +13,11 @@ import AdminCoursePage from '../pages/AdminPortal/AdminCoursePage.vue'
 import AdminPathwayPage from '../pages/AdminPortal/AdminPathwayPage.vue'
 import AdminSearchCCPage from '../pages/AdminPortal/AdminSearchCCPage.vue'
 import Four0FourPage from '../pages/Four0FourPage.vue'
+import store from '../store/store.js'
 
-import { pathways } from '../data/data.js'
+const year = store.state.year;
+let pathways = {};
+import('../data/json/' + year + '/pathways.json').then((val) => pathways = Object.freeze(val));
 
 Vue.use(Router);
 
@@ -33,10 +36,7 @@ export default new Router({
         {
             path: '/pathway',
             name: 'pathway',
-            component: PathwayPage,
-            beforeEnter: (to, from, next) => {
-                next(!pathways[to.query.pathway] ? '/404' : undefined);
-            }
+            component: PathwayPage
         },
         {
             path: '/my-pathways',