From 9dc0d3ce16541b71e5d447dc7a13d9446cd60483 Mon Sep 17 00:00:00 2001
From: lesion <lesion@autistici.org>
Date: Thu, 12 Jan 2023 11:14:34 +0100
Subject: [PATCH] keep-alive index page

---
 layouts/default.vue |  2 +-
 pages/index.vue     | 73 +++++++++++++++++++++++----------------------
 store/index.js      |  5 ++--
 3 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index a8d5dad1..06b7747c 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -4,7 +4,7 @@
     <v-main>
       <Snackbar/>
       <Confirm/>
-        <nuxt :keep-alive='$route.name === "index"'/>
+      <nuxt keep-alive :keep-alive-props="{include: ['Index']}"/>
     </v-main>
     <Footer/>
 
diff --git a/pages/index.vue b/pages/index.vue
index 58c44fca..57c9c519 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -21,27 +21,35 @@ export default {
   name: 'Index',
   components: { Event, Announcement },
   middleware: 'setup',
-  async fetch () {
-    return this.getEvents()
+  fetch () {
+    return this.getEvents({
+      start: this.start,
+      end: this.end
+    })
   },
   activated() {
-    if (this.$fetchState.timestamp <= Date.now() - 60000) {
-      this.$fetch();
+    if (!this.isCurrentMonth) {
+      this.start = dayjs().startOf('month').unix()
+      this.end = null
+      this.$fetch()
+      this.isCurrentMonth = true
+      return
     }
-  },  
-  data ({ $store }) {
+    if (this.$fetchState.timestamp <= (Date.now() - 60000)) {
+      this.$fetch()
+    }
+  },
+  data () {
     return {
       mdiMagnify, mdiCloseCircle,
       isCurrentMonth: true,
       now: dayjs().unix(),
-      date: dayjs.tz().format('YYYY-MM-DD'),
+      // date: dayjs.tz().format('YYYY-MM-DD'),
       start: dayjs().startOf('month').unix(),
       end: null,
-      searching: false,
       tmpEvents: [],
       selectedDay: null,
       storeUnsubscribe: null
-
     }
   },
   head () {
@@ -80,7 +88,7 @@ export default {
       }
     }
   },
-  mounted () {
+  created () {
     this.$root.$on('dayclick', this.dayChange)
     this.$root.$on('monthchange', this.monthChange)
     this.storeUnsubscribe = this.$store.subscribeAction( { after: (action, state) => {
@@ -88,7 +96,8 @@ export default {
         if (this.filter.query && this.filter.query.length > 2) {
           this.search()
         } else {
-          this.updateEvents()
+          this.tmpEvents = []
+          this.$fetch()
         }
       }
     }})
@@ -109,34 +118,28 @@ export default {
         show_multidate: this.filter.show_multidate,
         query: this.filter.query
       })
-    }, 100),
-    updateEvents () {
-      return this.getEvents({
-        start: this.start,
-        end: this.end
-      })
-    },
+    }, 200),
     async monthChange ({ year, month }) {
       this.$nuxt.$loading.start()
-      this.$nextTick( async () => {
+      let isCurrentMonth
 
-        // unselect current selected day
-        this.selectedDay = null
+      // unselect current selected day
+      this.selectedDay = null
 
-        // check if current month is selected
-        if (month - 1 === dayjs.tz().month() && year === dayjs.tz().year()) {
-          this.isCurrentMonth = true
-          this.start = dayjs().startOf('month').unix()
-          this.date = dayjs.tz().format('YYYY-MM-DD')
-        } else {
-          this.isCurrentMonth = false
-          this.date = ''
-          this.start = dayjs().year(year).month(month - 1).startOf('month').unix() // .startOf('week').unix()
-        }
-        this.end = dayjs().year(year).month(month).endOf('month').unix() // .endOf('week').unix()
-        await this.updateEvents()
-        this.$nuxt.$loading.finish()
-      })
+      // check if current month is selected
+      if (month - 1 === dayjs.tz().month() && year === dayjs.tz().year()) {
+        isCurrentMonth = true
+        this.start = dayjs().startOf('month').unix()
+        // this.date = dayjs.tz().format('YYYY-MM-DD')
+      } else {
+        isCurrentMonth = false
+        // this.date = ''
+        this.start = dayjs().year(year).month(month - 1).startOf('month').unix() // .startOf('week').unix()
+      }
+      this.end = dayjs().year(year).month(month).endOf('month').unix() // .endOf('week').unix()
+      await this.$fetch()
+      this.$nuxt.$loading.finish()
+      this.$nextTick( () => this.isCurrentMonth = isCurrentMonth)
 
     },
     dayChange (day) {
diff --git a/store/index.js b/store/index.js
index b9586bb1..cd0262bb 100644
--- a/store/index.js
+++ b/store/index.js
@@ -26,7 +26,7 @@ export const state = () => ({
   filter: {
     query: '',
     show_recurrent: null,
-    show_multidate: null
+    show_multidate: null,
   },
   announcements: [],
   events: []
@@ -43,7 +43,7 @@ export const mutations = {
     state.announcements = announcements
   },
   setEvents (state, events) {
-    state.events = events
+    state.events = Object.freeze(events)
   },
   setFilter (state, { type, value }) {
     state.filter[type] = value
@@ -84,6 +84,5 @@ export const actions = {
       show_multidate: state.filter.show_multidate
     })
     commit('setEvents', events)
-    return events
   }
 }