Merge pull request #394 from kaizumaki/aws-migration

graphqlによりstoreを大幅に改修

Author: kaizumaki

src/components/EditLessonScreen.vue

@@ -231,27 +231,26 @@ export default Vue.extend({
         this.changeLesson()
       }
     },
-    changeLesson() {
-      const lessonData: classData.Lesson = this.buildLessonData()
-      vxm.classData
-        .changeLesson({ editData: lessonData, id: this.lessonData.lessonId })
-        .then(() => {
-          this.$emit('collapse')
-        })
-        .catch(() => {
-          this.error = true
+    async changeLesson() {
+      try {
+        const lessonData: classData.Lesson = await this.buildLessonData()
+        await vxm.classData.changeLesson({
+          editData: lessonData,
+          id: this.lessonData.lessonId,
         })
+        await this.$emit('collapse')
+      } catch {
+        this.error = true
+      }
     },
-    registerLesson() {
-      const lessonData: classData.Lesson = this.buildLessonData()
-      vxm.classData
-        .registerLesson(lessonData)
-        .then(() => {
-          this.$emit('collapse')
-        })
-        .catch(() => {
-          this.error = true
-        })
+    async registerLesson() {
+      try {
+        const lessonData: classData.Lesson = await this.buildLessonData()
+        await vxm.classData.registerLesson(lessonData)
+        await this.$emit('collapse')
+      } catch {
+        this.error = true
+      }
     },
     buildLessonData(): classData.Lesson {
       const startTimeStr: string =

src/components/PeriodSection.vue

@@ -45,7 +45,7 @@ export default Vue.extend({
     },
     classData: {
       type: Array as () => classData.LessonWithId[],
-      default: () => [],
+      default: [],
     },
     editable: {
       type: Boolean,

src/layouts/classes.vue

@@ -138,10 +138,10 @@ export default Vue.extend({
     this.loading = false
   },
   methods: {
-    clickLogout() {
-      vxm.classData.unloadClassData().then(() => {
-        this.$router.push('/')
-      })
+    async clickLogout() {
+      await vxm.user.logout()
+      await vxm.app.resetDate()
+      await this.$router.push('/')
     },
   },
 })

src/layouts/protected.vue

@@ -140,11 +140,6 @@ export default Vue.extend({
     this.loading = false
   },
   methods: {
-    signout() {
-      vxm.user.logout()
-      this.$router.push('/')
-    },
-
     unloadClassData() {
       vxm.classData.unloadClassData()
     },

src/pages/classes/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="MainPage">
-    <div v-if="classData.lessonsOnCurrentDate.length">
+    <div v-if="Object.keys(classData.lessonsGroupByPeriod).length">
       <period-section
-        v-for="(lessons, time, index) in lessonsGroupByPeriod"
+        v-for="(lessons, time, index) in classData.lessonsGroupByPeriod"
         :key="index"
         :period="index"
         :time="time"
@@ -28,23 +28,17 @@ import dayjs from 'dayjs'
 import isToday from 'date-fns/isToday'
 import { vxm } from '@/store'
 import PeriodSection from '@/components/PeriodSection.vue'
-import classData from '@/types/store/classData'
-import LessonWithId = classData.LessonWithId
 
-type LessonsGroupedBy = {
-  [key: string]: LessonWithId[]
-}
 type Data = {
   classData: typeof vxm.classData
 }
 
 type Computed = {
   today: boolean
   dateTitle: string
-  lessonsGroupByPeriod: LessonsGroupedBy
 }
 
-export default Vue.extend<Data, unknown, Computed, unknown>({
+export default Vue.extend({
   components: { PeriodSection },
   layout: 'classes',
   data() {
@@ -53,23 +47,24 @@ export default Vue.extend<Data, unknown, Computed, unknown>({
     }
   },
   computed: {
+    currentDate() {
+      return vxm.app.currentDate
+    },
     today() {
       return isToday(vxm.app.currentDate)
     },
     dateTitle() {
       return dayjs(vxm.app.currentDate).format('M/D')
     },
-    lessonsGroupByPeriod() {
-      const groupBy = (targets: LessonWithId[], key: keyof LessonWithId) =>
-        targets.reduce((acc: LessonsGroupedBy, currentLesson: LessonWithId) => {
-          const valueToGroup = currentLesson[key].toString()
-          acc[valueToGroup] = acc[valueToGroup] || []
-          acc[valueToGroup].push(currentLesson)
-          return acc
-        }, {})
-      return groupBy(this.classData.lessonsOnCurrentDate, 'startTime')
+  },
+  watch: {
+    async currentDate() {
+      await this.classData.getLessonsByCurrentDate()
     },
   },
+  async mounted() {
+    await this.classData.getLessonsByCurrentDate()
+  },
 })
 </script>
 

src/pages/edit/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="MainPage">
-    <div v-if="classData.lessonsOnCurrentDate.length">
+    <div v-if="Object.keys(classData.lessonsGroupByPeriod).length > 0">
       <period-section
-        v-for="(lessons, time, index) in lessonsGroupByPeriod"
+        v-for="(lessons, time, index) in classData.lessonsGroupByPeriod"
         :key="index"
         :period="index"
         :time="time"
@@ -138,11 +138,6 @@ import EditLessonScreenBottomSheet from '@/components/EditLessonScreenBottomShee
 import EditLessonScreen from '@/components/EditLessonScreen.vue'
 import EditingVisibilityDialog from '@/components/EditingVisibilityDialog.vue'
 import classData from '@/types/store/classData'
-import LessonWithId = classData.LessonWithId
-
-type LessonsGroupedBy = {
-  [key: string]: LessonWithId[]
-}
 
 type DataType = {
   classData: typeof vxm.classData
@@ -155,7 +150,6 @@ type DataType = {
 type Computed = {
   today: boolean
   dateTitle: string
-  lessonsGroupByPeriod: LessonsGroupedBy
 }
 
 type editPageValueType = {
@@ -214,23 +208,24 @@ export default Vue.extend({
     }
   },
   computed: {
+    currentDate() {
+      return vxm.app.currentDate
+    },
     today() {
       return isToday(vxm.app.currentDate)
     },
     dateTitle() {
       return dayjs(vxm.app.currentDate).format('M/D')
     },
-    lessonsGroupByPeriod() {
-      const groupBy = (targets: LessonWithId[], key: keyof LessonWithId) =>
-        targets.reduce((acc: LessonsGroupedBy, currentLesson: LessonWithId) => {
-          const valueToGroup = currentLesson[key].toString()
-          acc[valueToGroup] = acc[valueToGroup] || []
-          acc[valueToGroup].push(currentLesson)
-          return acc
-        }, {})
-      return groupBy(vxm.classData.lessonsOnCurrentDate, 'startTime')
+  },
+  watch: {
+    async currentDate() {
+      await this.classData.getLessonsByCurrentDate()
     },
   },
+  async mounted() {
+    await this.classData.getLessonsByCurrentDate()
+  },
   methods: {
     onCollapseEditLessonScreen(): void {
       this.toggleScreen()

src/pages/index.vue

@@ -144,21 +144,17 @@ export default Vue.extend({
   methods: {
     async loginToClass() {
       this.loading = true
-
       try {
+        await vxm.user.setAuthModeIsAPIKEY(true)
         const result = (await API.graphql({
           query: getClass,
           variables: { id: this.classId },
           authMode: GRAPHQL_AUTH_MODE.API_KEY,
         })) as GraphQLResult<GetClassQuery>
-
         const className = result?.data?.getClass?.className as string
-        const lessons = result.data?.getClass?.lessons?.items as any[]
-
         await vxm.classData.setClassData({
           classId: this.classId,
           className,
-          lessons,
         })
         await this.$router.push('/classes')
       } catch {

src/pages/lesson/index.vue

@@ -237,11 +237,14 @@ export default Vue.extend({
         : dayjs(this.lesson.endTime).format('H:mm（M/D）')
     },
   },
-  mounted() {
-    this.$nextTick(function () {
-      const data:
-        | LessonWithId
-        | undefined = vxm.classData.lessonsOnCurrentDate.find(
+  async mounted() {
+    const lessonList = vxm.user.isLoginWithAPIKEY
+      ? await vxm.classData.lessonsOnCurrentDateAuthModeAPIKEY(
+          vxm.app.currentDate
+        )
+      : await vxm.classData.lessonsOnCurrentDate(vxm.app.currentDate)
+    await this.$nextTick(function () {
+      const data: LessonWithId | undefined = lessonList.find(
         (e) => this.$route.query.lessonId === e.id
       ) as LessonWithId | undefined
       this.lesson = data ?? this.dummyLesson

src/pages/user/editUserData.vue

@@ -217,17 +217,16 @@ export default Vue.extend<Data, Methods, Computed, unknown>({
           //   })
         }
       }
-      this.$router.push('/edit')
+      await this.$router.push('/edit')
     },
     async doLogout(): Promise<void> {
-      await Auth.signOut()
-        .then(() => {
-          vxm.user.logout()
-          this.$router.push('/')
-        })
-        .catch(() => {
-          this.error = true
-        })
+      try {
+        await vxm.user.logout()
+        await vxm.app.resetDate()
+        await this.$router.push('/')
+      } catch {
+        this.error = true
+      }
     },
   },
 })

src/pages/user/logout.vue

@@ -15,6 +15,7 @@
 import Vue from 'vue'
 import BaseBottomSheetLayer from '@/components/BaseBottomSheetLayer.vue'
 import { Auth } from 'aws-amplify'
+import { vxm } from '@/store'
 
 export default Vue.extend({
   components: { BaseBottomSheetLayer },
@@ -31,14 +32,14 @@ export default Vue.extend({
   methods: {
     async doLogout(): Promise<void> {
       this.loading = true
-      await Auth.signOut()
-        .then(() => {
-          this.$router.push('/')
-        })
-        .catch(() => {
-          this.loading = false
-          this.error = true
-        })
+      try {
+        await Auth.signOut()
+        await vxm.app.resetDate()
+        await this.$router.push('/')
+      } catch {
+        this.loading = false
+        this.error = true
+      }
     },
   },
 })