Merge branch 'development' into feature/issue-124-add-register-page

Author: NEKOYASAN

src/components/PeriodCard.vue

@@ -13,7 +13,7 @@
     </div>
     <v-row>
       <v-col
-        v-for="(item, i) in classData.getLessonsByDisplayDate"
+        v-for="(item, i) in classData.lessonsOnCurrentDate"
         :key="i"
         cols="12"
         md="6"

src/components/PeriodCardEditable.vue

@@ -13,7 +13,7 @@
     </div>
     <v-row>
       <v-col
-        v-for="(item, i) in classData.getLessonsByDisplayDate"
+        v-for="(item, i) in classData.lessonsOnCurrentDate"
         :key="i"
         cols="12"
         md="6"

src/layouts/classes.vue

@@ -50,7 +50,7 @@ export default Vue.extend({
   },
   watch: {
     date(value) {
-      vxm.classData.setDate(value)
+      vxm.app.setDate(value)
     }
   },
   mounted(): void {

src/pages/classes/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="MainPage">
-    <div v-if="classData.getLessonsByDisplayDate.length">
+    <div v-if="classData.lessonsOnCurrentDate.length">
       <period-card :class-data="classData" />
     </div>
     <div v-else-if="today" class="Classes-Outer">
@@ -46,10 +46,10 @@ export default Vue.extend<Data, Methods, Computed, unknown>({
   },
   computed: {
     today() {
-      return isToday(this.classData.displayDate)
+      return isToday(vxm.app.currentDate)
     },
     dateTitle() {
-      return dayjs(this.classData.displayDate).format('M/D')
+      return dayjs(vxm.app.currentDate).format('M/D')
     }
   },
   methods: {

src/pages/edit/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="MainPage">
-    <div v-if="classData.getLessonsByDisplayDate.length">
+    <div v-if="classData.lessonsOnCurrentDate.length">
       <period-card-editable :class-data="classData" />
     </div>
     <div v-else class="Classes-Outer">

src/store/index.ts

@@ -3,15 +3,17 @@ import Vuex, { ActionContext } from 'vuex'
 import { Context } from '@nuxt/types/app'
 import { createProxy, extractVuexModule } from 'vuex-class-component'
 import jwtDecode from 'jwt-decode'
-import { UserStore } from '@/store/modules/user'
+import { AppStore } from '@/store/modules/app'
 import { ClassDataStore } from '@/store/modules/classData'
+import { UserStore } from '@/store/modules/user'
 
 Vue.use(Vuex)
 
 export const store = new Vuex.Store({
   modules: {
-    ...extractVuexModule(UserStore),
-    ...extractVuexModule(ClassDataStore)
+    ...extractVuexModule(AppStore),
+    ...extractVuexModule(ClassDataStore),
+    ...extractVuexModule(UserStore)
   }
 })
 
@@ -29,6 +31,7 @@ export const actions = {
 }
 
 export const vxm = {
-  user: createProxy(store, UserStore),
-  classData: createProxy(store, ClassDataStore)
+  app: createProxy(store, AppStore),
+  classData: createProxy(store, ClassDataStore),
+  user: createProxy(store, UserStore)
 }

src/store/modules/app.ts

@@ -0,0 +1,37 @@
+import { createModule, mutation } from 'vuex-class-component'
+import dayjs from 'dayjs'
+
+const VuexModule = createModule({
+  namespaced: 'app',
+  strict: false,
+  target: 'nuxt'
+})
+
+type CurrentDate = Date
+
+interface App {
+  currentDate: CurrentDate
+}
+
+export class AppStore extends VuexModule implements App {
+  currentDate: CurrentDate = new Date()
+
+  @mutation
+  public goNextDate() {
+    this.currentDate = dayjs(this.currentDate)
+      .add(1, 'd')
+      .toDate()
+  }
+
+  @mutation
+  public goPreviousDate() {
+    this.currentDate = dayjs(this.currentDate)
+      .subtract(1, 'd')
+      .toDate()
+  }
+
+  @mutation
+  public setDate(date: Date) {
+    this.currentDate = date
+  }
+}

src/store/modules/classData.ts

@@ -1,6 +1,11 @@
-import { createModule, mutation, action } from 'vuex-class-component'
-import dayjs from 'dayjs'
+import {
+  createModule,
+  mutation,
+  action,
+  createProxy
+} from 'vuex-class-component'
 import firebase from '@/plugins/firebase'
+import { AppStore } from '@/store/modules/app'
 import Timestamp = firebase.firestore.Timestamp
 
 const VuexModule = createModule({
@@ -12,7 +17,6 @@ const VuexModule = createModule({
 type ClassId = string
 type ClassName = string
 type Lessons = Lesson[]
-type DisplayDate = Date
 
 interface Lesson {
   subject: string
@@ -37,39 +41,31 @@ interface ClassData {
   classId: ClassId
   className: ClassName
   lessons: Lessons
-  displayDate: DisplayDate
 }
 
 export class ClassDataStore extends VuexModule implements ClassData {
   classId: ClassId = ''
   className: ClassName = ''
   lessons: Lessons = []
-  displayDate: DisplayDate = new Date()
-
-  public get getLessonsByDisplayDate(): Lessons {
-    const dateStart = new Date(
-      this.displayDate.getFullYear(),
-      this.displayDate.getMonth(),
-      this.displayDate.getDate(),
-      0,
-      0,
-      0
-    )
-    const dateEnd = new Date(
-      this.displayDate.getFullYear(),
-      this.displayDate.getMonth(),
-      this.displayDate.getDate(),
-      23,
-      59,
-      59
-    )
-    const lessonsByDate: Lessons = []
-    this.lessons.forEach(value => {
-      const sec = value.startTime.getTime()
-      if (dateStart.getTime() <= sec && dateEnd.getTime() >= sec)
-        lessonsByDate.push(value)
+
+  public get lessonsOnCurrentDate(): Lessons {
+    const appStore = createProxy(this.$store, AppStore)
+
+    // 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)
+      newDate.setHours(hours)
+      newDate.setMinutes(minutes)
+      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 = lesson.startTime.getTime()
+      return start <= startOfLesson && end >= startOfLesson
     })
-    return lessonsByDate
   }
 
   public get isLoaded(): boolean {
@@ -87,25 +83,6 @@ export class ClassDataStore extends VuexModule implements ClassData {
     this.lessons = lessons
   }
 
-  @mutation
-  public nextDate() {
-    this.displayDate = dayjs(this.displayDate)
-      .add(1, 'd')
-      .toDate()
-  }
-
-  @mutation
-  public prevDate() {
-    this.displayDate = dayjs(this.displayDate)
-      .subtract(1, 'd')
-      .toDate()
-  }
-
-  @mutation
-  public setDate(date: Date) {
-    this.displayDate = date
-  }
-
   @action
   public async loadClassData(classId: ClassId) {
     let className = ''
@@ -117,8 +94,8 @@ export class ClassDataStore extends VuexModule implements ClassData {
       .collection('Lessons')
       .orderBy('startTime')
       .get()
-      .then(QuerySnapshot => {
-        QuerySnapshot.forEach(function(doc) {
+      .then(querySnapshot => {
+        querySnapshot.forEach(function(doc) {
           const data = doc.data() as RawLesson
           const reformatData = {
             subject: data.subject,