lessonsOnCurrentDateをgraphql経由で取得するように修正・lessonsの削除・lessonsGroupByPeriodを追加

Author: kaizumaki

src/store/modules/classData.ts

@@ -5,14 +5,19 @@ import {
   mutation,
 } from 'vuex-class-component'
 import { AppStore } from '@/store/modules/app'
+import { UserStore } from '@/store/modules/user'
 import classData from '@/types/store/classData'
-import { Auth, API, graphqlOperation } from 'aws-amplify'
-import { GraphQLResult } from '@aws-amplify/api'
-import { getClass } from '@/graphql/queries'
+import { API, Auth, graphqlOperation } from 'aws-amplify'
+import { GRAPHQL_AUTH_MODE, GraphQLResult } from '@aws-amplify/api'
+import { getClass, listLessons } from '@/graphql/queries'
 import { createClass, createLesson, updateLesson } from '@/graphql/mutations'
-import { GetClassQuery } from '@/API'
+import { GetClassQuery, ListLessonsQuery } from '@/API'
 import { vxm } from '@/store'
 
+type LessonsGroupedBy = {
+  [key: string]: classData.LessonWithId[]
+}
+
 const VuexModule = createModule({
   namespaced: 'classData',
   strict: false,
@@ -36,11 +41,11 @@ const generateUniqueId = (): string => {
 export class ClassDataStore extends VuexModule implements classData.ClassData {
   classId: classData.ClassId = ''
   className: string = ''
-  lessons: classData.LessonWithId[] = []
-
-  public get lessonsOnCurrentDate(): classData.LessonWithId[] {
-    const appStore = createProxy(this.$store, AppStore)
+  lessonsGroupByPeriod: LessonsGroupedBy = {}
 
+  @action
+  public async lessonsOnCurrentDate(date: Date) {
+    const userStore = createProxy(this.$store, UserStore)
     // Generate a new Date object with a specified date & time
     const d = (date: Date, hours: number, minutes: number, seconds: number) => {
       const newDate = new Date(date)
@@ -49,13 +54,38 @@ export class ClassDataStore extends VuexModule implements classData.ClassData {
       newDate.setSeconds(seconds)
       return newDate
     }
-    const start = d(appStore.currentDate, 0, 0, 0).getTime()
-    const end = d(appStore.currentDate, 23, 59, 59).getTime()
-
-    return this.lessons.filter((lesson) => {
-      const startOfLesson = new Date(lesson.startTime).getTime()
-      return start <= startOfLesson && end >= startOfLesson
-    })
+    const start = d(date, 0, 0, 0)
+    const end = d(date, 23, 59, 59)
+
+    const lessons = (await API.graphql({
+      query: listLessons,
+      variables: {
+        filter: {
+          and: [
+            {
+              classId: {
+                eq: this.classId,
+              },
+            },
+            {
+              startTime: {
+                ge: start,
+              },
+            },
+            {
+              startTime: {
+                le: end,
+              },
+            },
+          ],
+        },
+      },
+      authMode: userStore.isLoginWithAPIKEY
+        ? GRAPHQL_AUTH_MODE.API_KEY
+        : GRAPHQL_AUTH_MODE.AMAZON_COGNITO_USER_POOLS,
+    })) as GraphQLResult<ListLessonsQuery>
+
+    return lessons.data?.listLessons?.items as any[]
   }
 
   public get isLoaded(): boolean {
@@ -74,13 +104,9 @@ export class ClassDataStore extends VuexModule implements classData.ClassData {
     }
 
     const className = classObject.className
-
-    const classLessonsItems = result.data?.getClass?.lessons?.items as any[]
-
     this.setClassData({
       classId,
       className,
-      lessons: classLessonsItems,
     })
   }
 
@@ -129,7 +155,6 @@ export class ClassDataStore extends VuexModule implements classData.ClassData {
     this.setClassData({
       classId,
       className,
-      lessons: [],
     })
   }
 
@@ -149,7 +174,7 @@ export class ClassDataStore extends VuexModule implements classData.ClassData {
     } catch {
       throw new Error('エラーによって処理に失敗しました')
     }
-    await this.loadClassData(this.classId)
+    await this.getLessonsByCurrentDate()
   }
 
   @action
@@ -172,22 +197,46 @@ export class ClassDataStore extends VuexModule implements classData.ClassData {
     } catch {
       throw new Error('エラーによって処理に失敗しました')
     }
-    await this.loadClassData(this.classId)
+    await this.getLessonsByCurrentDate()
   }
 
   @mutation
-  public setClassData({ classId, className, lessons }: classData.ClassData) {
+  public setClassData({ classId, className }: classData.ClassData) {
     this.classId = classId
     this.className = className
-    this.lessons = lessons
+  }
+
+  @mutation
+  public setLessonsGroupByPeriod(lessons: classData.LessonWithId[]) {
+    const groupBy = (
+      targets: classData.LessonWithId[],
+      key: keyof classData.LessonWithId
+    ) =>
+      targets.reduce(
+        (acc: LessonsGroupedBy, currentLesson: classData.LessonWithId) => {
+          const valueToGroup = currentLesson[key].toString()
+          acc[valueToGroup] = acc[valueToGroup] || []
+          acc[valueToGroup].push(currentLesson)
+          return acc
+        },
+        {}
+      )
+    this.lessonsGroupByPeriod = groupBy(lessons, 'startTime')
+  }
+
+  @action
+  public async getLessonsByCurrentDate() {
+    const appStore = createProxy(this.$store, AppStore)
+    const lessons = await this.lessonsOnCurrentDate(appStore.currentDate)
+    await this.setLessonsGroupByPeriod(lessons)
   }
 
   @action
   public async unloadClassData() {
     this.setClassData({
       classId: '',
       className: '',
-      lessons: [],
     })
+    this.lessonsGroupByPeriod = {}
   }
 }