fixbug layout not updated

Author: rockstarr-programmerr

src/App.vue

@@ -26,7 +26,6 @@ import { unexpectedExc } from './utils'
 })
 export default class App extends Vue {
   user!: User
-  isAuthenticatedUser = false
   loading = false
   initDone = false
 
@@ -37,9 +36,6 @@ export default class App extends Vue {
   setUserInfo (): void {
     this.loading = true
     this.$store.dispatch('account/getInfo')
-      .then(() => {
-        this.isAuthenticatedUser = true
-      })
       .catch(unexpectedExc)
       .finally(() => {
         this.loading = false
@@ -51,7 +47,7 @@ export default class App extends Vue {
     const meta = this.$route.meta
 
     if (meta !== undefined) {
-      if (this.isAuthenticatedUser) {
+      if (this.user !== undefined) {
         if (
           this.user.user_type === 'teacher' &&
           meta.teacherLayout !== undefined

src/plugins/axios.js

@@ -91,7 +91,11 @@ function handleResponseError (error) {
   if (isUnauthorized(error)) {
     /* eslint-disable brace-style */
 
-    if (noToken()) {
+    if (isLoginRoute()) {
+      return Promise.reject(error)
+    }
+
+    else if (noToken()) {
       goToLogin()
       return Promise.reject() // Will not display unexpected error message to user
     }
@@ -114,10 +118,6 @@ function handleResponseError (error) {
       return Promise.reject(error)
     }
 
-    else if (isLoginRoute()) {
-      return Promise.reject(error)
-    }
-
     else {
       const response = tryAgainAfterRefreshingToken(error)
       return Promise.resolve(response)

src/views/auth/Login.vue

@@ -60,16 +60,24 @@ import { Vue, Component, Emit } from 'vue-property-decorator'
 import { LoginReq } from '@/interfaces/api/account'
 import { unexpectedExc } from '@/utils'
 import { assertErrCode, status } from '@/utils/status-codes'
+import { mapState } from 'vuex'
 
-@Component
+@Component({
+  computed: {
+    ...mapState('account', [
+      'isTeacher'
+    ])
+  }
+})
 export default class Login extends Vue {
   email = ''
   password = ''
   showPassword = false
   loading = false
   errorMsg = ''
+  isTeacher!: boolean
 
-  login (): void {
+  async login (): Promise<void> {
     this.errorMsg = ''
     if (this.loading) return
     this.loading = true
@@ -79,21 +87,47 @@ export default class Login extends Vue {
       password: this.password
     }
 
-    this.$store.dispatch('account/login', payload)
-      .then(() => {
-        // TODO: implement ?next
+    try {
+      await this.$store.dispatch('account/login', payload)
+      await this.$store.dispatch('account/getInfo')
+      // TODO: implement ?next
+      if (this.isTeacher) {
         this.$router.push({ name: 'Home' })
-      })
-      .catch(error => {
-        if (assertErrCode(error, status.HTTP_401_UNAUTHORIZED)) {
-          this.errorMsg = error.response.data.detail
-        } else {
-          unexpectedExc(error)
-        }
-      })
-      .finally(() => {
-        this.loading = false
-      })
+      } else {
+        this.$router.push({ name: 'ClassroomList' })
+      }
+    } catch (error) {
+      if (assertErrCode(error, status.HTTP_401_UNAUTHORIZED)) {
+        this.errorMsg = error.response.data.detail
+      } else {
+        unexpectedExc(error)
+      }
+    } finally {
+      this.loading = false
+    }
+
+    // this.$store.dispatch('account/login', payload)
+    //   .then(() => {
+    //     this.$store.dispatch('account/getInfo')
+    //       .then(() => {
+    //         // TODO: implement ?next
+    //         if (this.isTeacher) {
+    //           this.$router.push({ name: 'Home' })
+    //         } else {
+    //           this.$router.push({ name: 'ClassroomList' })
+    //         }
+    //       })
+    //   })
+    //   .catch(error => {
+    //     if (assertErrCode(error, status.HTTP_401_UNAUTHORIZED)) {
+    //       this.errorMsg = error.response.data.detail
+    //     } else {
+    //       unexpectedExc(error)
+    //     }
+    //   })
+    //   .finally(() => {
+    //     this.loading = false
+    //   })
   }
 
   @Emit('change-page')

src/views/classroom/ClassroomExercisesReadingStudent.vue

@@ -48,6 +48,7 @@ export default class ClassroomExercisesReadingStudent extends Vue {
   classroom!: Classroom
 
   get exercises (): ClassroomReadingExercise[] {
+    if (this.classroom === undefined) return []
     return this.classroom.reading_exercises
   }
 }

src/views/classroom/ClassroomList.vue

@@ -41,12 +41,7 @@
             v-for="classroom of classrooms"
             :key="classroom.pk"
             link
-            :to="{
-              name: 'ClassroomOverview',
-              params: {
-                pk: classroom.pk
-              }
-            }"
+            :to="getClassroomLink(classroom)"
           >
             <v-list-item-content v-text="classroom.name" />
           </v-list-item>
@@ -60,6 +55,7 @@
 import { Classroom } from '@/interfaces/classroom'
 import { unexpectedExc } from '@/utils'
 import { Vue, Component } from 'vue-property-decorator'
+import { Location } from 'vue-router'
 import { mapGetters, mapState } from 'vuex'
 
 @Component({
@@ -95,6 +91,24 @@ export default class ClassroomList extends Vue {
     this.listClassroom()
   }
 
+  getClassroomLink (classroom: Classroom): Location {
+    if (this.isTeacher) {
+      return {
+        name: 'ClassroomOverview',
+        params: {
+          pk: classroom.pk.toString()
+        }
+      }
+    } else {
+      return {
+        name: 'ClassroomExercisesReading',
+        params: {
+          pk: classroom.pk.toString()
+        }
+      }
+    }
+  }
+
   /**
    * List
    */