refs #197 Move store state to each pages

src/renderer/components/TimelineSpace.vue

@@ -43,8 +43,8 @@ export default {
   methods: {
     async clear () {
       await this.$store.dispatch('TimelineSpace/clearAccount')
-      await this.$store.dispatch('TimelineSpace/clearTimeline')
-      await this.$store.dispatch('TimelineSpace/clearNotifications')
+      await this.$store.commit('TimelineSpace/Contents/Home/clearTimeline')
+      await this.$store.commit('TimelineSpace/Contents/Notifications/clearNotifications')
       await this.$store.dispatch('TimelineSpace/removeShortcutEvents')
       return 'clear'
     },
@@ -59,7 +59,7 @@ export default {
         })
       })
       try {
-        await this.$store.dispatch('TimelineSpace/fetchHomeTimeline', account)
+        await this.$store.dispatch('TimelineSpace/Contents/Home/fetchTimeline', account)
       } catch (err) {
         this.$message({
           message: 'Could not fetch timeline',
@@ -67,7 +67,7 @@ export default {
         })
       }
       try {
-        await this.$store.dispatch('TimelineSpace/fetchNotifications', account)
+        await this.$store.dispatch('TimelineSpace/Contents/Notifications/fetchNotifications', account)
       } catch (err) {
         this.$message({
           message: 'Could not fetch notification',

src/renderer/components/TimelineSpace/Contents/Home.vue

@@ -18,11 +18,11 @@ export default {
   components: { Toot },
   computed: {
     ...mapState({
-      timeline: state => state.TimelineSpace.homeTimeline,
+      timeline: state => state.TimelineSpace.Contents.Home.timeline,
       lazyLoading: state => state.TimelineSpace.Contents.Home.lazyLoading,
       backgroundColor: state => state.App.theme.background_color,
-      heading: state => state.TimelineSpace.heading,
-      unread: state => state.TimelineSpace.unreadHomeTimeline
+      heading: state => state.TimelineSpace.Contents.Home.heading,
+      unread: state => state.TimelineSpace.Contents.Home.unreadTimeline
     })
   },
   mounted () {
@@ -35,9 +35,9 @@ export default {
     }
   },
   destroyed () {
-    this.$store.commit('TimelineSpace/changeHeading', true)
-    this.$store.commit('TimelineSpace/mergeHomeTimeline')
-    this.$store.commit('TimelineSpace/archiveHomeTimeline')
+    this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
+    this.$store.commit('TimelineSpace/Contents/Home/mergeTimeline')
+    this.$store.commit('TimelineSpace/Contents/Home/archiveTimeline')
     if (document.getElementById('scrollable') !== undefined && document.getElementById('scrollable') !== null) {
       document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
       document.getElementById('scrollable').scrollTop = 0
@@ -57,10 +57,10 @@ export default {
       }
       // for unread control
       if ((event.target.scrollTop > 10) && this.heading) {
-        this.$store.commit('TimelineSpace/changeHeading', false)
+        this.$store.commit('TimelineSpace/Contents/Home/changeHeading', false)
       } else if ((event.target.scrollTop <= 10) && !this.heading) {
-        this.$store.commit('TimelineSpace/changeHeading', true)
-        this.$store.commit('TimelineSpace/mergeHomeTimeline')
+        this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
+        this.$store.commit('TimelineSpace/Contents/Home/mergeTimeline')
       }
     }
   }

src/renderer/components/TimelineSpace/Contents/Notifications.vue

@@ -17,7 +17,7 @@ export default {
   components: { Notification },
   computed: {
     ...mapState({
-      notifications: state => state.TimelineSpace.notifications,
+      notifications: state => state.TimelineSpace.Contents.Notifications.notifications,
       lazyLoading: state => state.TimelineSpace.Contents.Notifications.lazyLoading,
       backgroundColor: state => state.App.theme.background_color
     })
@@ -32,7 +32,7 @@ export default {
     }
   },
   destroyed () {
-    this.$store.commit('TimelineSpace/archiveNotifications')
+    this.$store.commit('TimelineSpace/Contents/Notifications/archiveNotifications')
     if (document.getElementById('scrollable') !== undefined && document.getElementById('scrollable') !== null) {
       document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
     }

src/renderer/store/TimelineSpace.js

@@ -19,87 +19,11 @@ const TimelineSpace = {
       domain: '',
       _id: '',
       username: ''
-    },
-    heading: true,
-    homeTimeline: [],
-    unreadHomeTimeline: [],
-    notifications: []
+    }
   },
   mutations: {
     updateAccount (state, account) {
       state.account = account
-    },
-    changeHeading (state, value) {
-      state.heading = value
-    },
-    appendHomeTimeline (state, update) {
-      if (state.heading) {
-        state.homeTimeline = [update].concat(state.homeTimeline)
-      } else {
-        state.unreadHomeTimeline = [update].concat(state.unreadHomeTimeline)
-      }
-    },
-    mergeHomeTimeline (state) {
-      state.homeTimeline = state.unreadHomeTimeline.concat(state.homeTimeline)
-      state.unreadHomeTimeline = []
-    },
-    appendNotifications (state, notification) {
-      state.notifications = [notification].concat(state.notifications)
-    },
-    updateHomeTimeline (state, messages) {
-      state.homeTimeline = messages
-    },
-    updateNotifications (state, notifications) {
-      state.notifications = notifications
-    },
-    insertHomeTimeline (state, messages) {
-      state.homeTimeline = state.homeTimeline.concat(messages)
-    },
-    insertNotifications (state, notifications) {
-      state.notifications = state.notifications.concat(notifications)
-    },
-    updateToot (state, message) {
-      // Replace target message in homeTimeline and notifications
-      state.homeTimeline = state.homeTimeline.map((toot) => {
-        if (toot.id === message.id) {
-          return message
-        } else if (toot.reblog !== null && toot.reblog.id === message.id) {
-          // When user reblog/favourite a reblogged toot, target message is a original toot.
-          // So, a message which is received now is original toot.
-          const reblog = {
-            reblog: message
-          }
-          return Object.assign(toot, reblog)
-        } else {
-          return toot
-        }
-      })
-
-      state.notifications = state.notifications.map((notification) => {
-        // I want to update toot only mention.
-        // Because Toot component don't use status information when other patterns.
-        if (notification.type === 'mention' && notification.status.id === message.id) {
-          const status = {
-            status: message
-          }
-          return Object.assign(notification, status)
-        } else {
-          return notification
-        }
-      })
-    },
-    clearTimeline (state) {
-      state.homeTimeline = []
-      state.unreadHomeTimeline = []
-    },
-    clearNotifications (state) {
-      state.notifications = []
-    },
-    archiveHomeTimeline (state) {
-      state.homeTimeline = state.homeTimeline.slice(0, 40)
-    },
-    archiveNotifications (state) {
-      state.notifications = state.notifications.slice(0, 40)
     }
   },
   actions: {
@@ -155,10 +79,10 @@ const TimelineSpace = {
     },
     startUserStreaming ({ state, commit }, account) {
       ipcRenderer.on('update-start-user-streaming', (event, update) => {
-        commit('appendHomeTimeline', update)
+        commit('TimelineSpace/Contents/Home/appendTimeline', update, { root: true })
         // Sometimes archive old statuses
         if (state.heading) {
-          commit('archiveHomeTimeline')
+          commit('TimelineSpace/Contents/Home/archiveTimeline', null, { root: true })
         }
         commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', true, { root: true })
       })
@@ -167,7 +91,7 @@ const TimelineSpace = {
         notify.onclick = () => {
           router.push(`/${account._id}/notifications`)
         }
-        commit('appendNotifications', notification)
+        commit('TimelineSpace/Contents/Notifications/appendNotifications', notification, { root: true })
         commit('TimelineSpace/SideMenu/changeUnreadNotifications', true, { root: true })
       })
 
@@ -198,44 +122,6 @@ const TimelineSpace = {
       ipcRenderer.removeAllListeners('CmdOrCtrl+K')
       return 'removeShortcutEvents'
     },
-    fetchHomeTimeline ({ commit }, account) {
-      return new Promise((resolve, reject) => {
-        const client = new Mastodon(
-          {
-            access_token: account.accessToken,
-            api_url: account.baseURL + '/api/v1'
-          }
-        )
-        client.get('/timelines/home', { limit: 40 }, (err, data, res) => {
-          if (err) return reject(err)
-          commit('updateHomeTimeline', data)
-          resolve(res)
-        })
-      })
-    },
-    fetchNotifications ({ commit }, account) {
-      return new Promise((resolve, reject) => {
-        const client = new Mastodon(
-          {
-            access_token: account.accessToken,
-            api_url: account.baseURL + '/api/v1'
-          }
-        )
-        client.get('/notifications', { limit: 30 }, (err, data, res) => {
-          if (err) return reject(err)
-          commit('updateNotifications', data)
-          resolve(res)
-        })
-      })
-    },
-    async clearTimeline ({ commit }) {
-      commit('clearTimeline')
-      return 'clearTimeline'
-    },
-    async clearNotifications ({ commit }) {
-      commit('clearNotifications')
-      return 'clearNotifications'
-    },
     async clearAccount ({ commit }) {
       commit(
         'updateAccount',

src/renderer/store/TimelineSpace/Contents/Home.js

@@ -3,14 +3,76 @@ import Mastodon from 'mastodon-api'
 const Home = {
   namespaced: true,
   state: {
-    lazyLoading: false
+    lazyLoading: false,
+    heading: true,
+    timeline: [],
+    unreadTimeline: []
   },
   mutations: {
     changeLazyLoading (state, value) {
       state.lazyLoading = value
+    },
+    changeHeading (state, value) {
+      state.heading = value
+    },
+    appendTimeline (state, update) {
+      if (state.heading) {
+        state.timeline = [update].concat(state.timeline)
+      } else {
+        state.unreadTimeline = [update].concat(state.unreadTimeline)
+      }
+    },
+    updateTimeline (state, messages) {
+      state.timeline = messages
+    },
+    mergeTimeline (state) {
+      state.timeline = state.unreadTimeline.concat(state.timeline)
+      state.unreadTimeline = []
+    },
+    insertTimeline (state, messages) {
+      state.timeline = state.timeline.concat(messages)
+    },
+    archiveTimeline (state) {
+      state.timeline = state.timeline.slice(0, 40)
+    },
+    clearTimeline (state) {
+      state.timeline = []
+      state.unreadTimeline = []
+    },
+    updateToot (state, message) {
+      // Replace target message in homeTimeline and notifications
+      state.timeline = state.timeline.map((toot) => {
+        if (toot.id === message.id) {
+          return message
+        } else if (toot.reblog !== null && toot.reblog.id === message.id) {
+          // When user reblog/favourite a reblogged toot, target message is a original toot.
+          // So, a message which is received now is original toot.
+          const reblog = {
+            reblog: message
+          }
+          return Object.assign(toot, reblog)
+        } else {
+          return toot
+        }
+      })
     }
   },
   actions: {
+    fetchTimeline ({ state, commit, rootState }, account) {
+      return new Promise((resolve, reject) => {
+        const client = new Mastodon(
+          {
+            access_token: rootState.TimelineSpace.account.accessToken,
+            api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
+          }
+        )
+        client.get('/timelines/home', { limit: 40 }, (err, data, res) => {
+          if (err) return reject(err)
+          commit('updateTimeline', data)
+          resolve(res)
+        })
+      })
+    },
     lazyFetchTimeline ({ state, commit, rootState }, last) {
       if (last === undefined || last === null) {
         return null
@@ -27,7 +89,7 @@ const Home = {
           })
         client.get('/timelines/home', { max_id: last.id, limit: 40 }, (err, data, res) => {
           if (err) return reject(err)
-          commit('TimelineSpace/insertHomeTimeline', data, { root: true })
+          commit('insertTimeline')
           commit('changeLazyLoading', false)
         })
       })

src/renderer/store/TimelineSpace/Contents/Notifications.js

@@ -3,14 +3,59 @@ import Mastodon from 'mastodon-api'
 const Notifications = {
   namespaced: true,
   state: {
-    lazyLoading: false
+    lazyLoading: false,
+    notifications: []
   },
   mutations: {
     changeLazyLoading (state, value) {
       state.lazyLoading = value
+    },
+    appendNotifications (state, notification) {
+      state.notifications = [notification].concat(state.notifications)
+    },
+    updateNotifications (state, notifications) {
+      state.notifications = notifications
+    },
+    insertNotifications (state, notifications) {
+      state.notifications = state.notifications.concat(notifications)
+    },
+    updateToot (state, message) {
+      state.notifications = state.notifications.map((notification) => {
+        // I want to update toot only mention.
+        // Because Toot component don't use status information when other patterns.
+        if (notification.type === 'mention' && notification.status.id === message.id) {
+          const status = {
+            status: message
+          }
+          return Object.assign(notification, status)
+        } else {
+          return notification
+        }
+      })
+    },
+    clearNotifications (state) {
+      state.notifications = []
+    },
+    archiveNotifications (state) {
+      state.notifications = state.notifications.slice(0, 40)
     }
   },
   actions: {
+    fetchNotifications ({ commit }, account) {
+      return new Promise((resolve, reject) => {
+        const client = new Mastodon(
+          {
+            access_token: account.accessToken,
+            api_url: account.baseURL + '/api/v1'
+          }
+        )
+        client.get('/notifications', { limit: 30 }, (err, data, res) => {
+          if (err) return reject(err)
+          commit('updateNotifications', data)
+          resolve(res)
+        })
+      })
+    },
     lazyFetchNotifications ({ state, commit, rootState }, last) {
       if (last === undefined || last === null) {
         return null