Add reload button and reload each timeline

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

@@ -22,7 +22,8 @@ export default {
       account: state => state.TimelineSpace.account,
       favourites: state => state.TimelineSpace.Contents.Favourites.favourites,
       lazyLoading: state => state.TimelineSpace.Contents.Favourites.lazyLoading,
-      backgroundColor: state => state.App.theme.background_color
+      backgroundColor: state => state.App.theme.background_color,
+      startReload: state => state.TimelineSpace.HeaderMenu.reload
     })
   },
   created () {
@@ -54,6 +55,16 @@ export default {
       document.getElementById('scrollable').scrollTop = 0
     }
   },
+  watch: {
+    startReload: function (newState, oldState) {
+      if (!oldState && newState) {
+        this.reload()
+          .finally(() => {
+            this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
+          })
+      }
+    }
+  },
   methods: {
     updateToot (message) {
       this.$store.commit('TimelineSpace/Contents/Favourites/updateToot', message)

src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue

@@ -19,13 +19,15 @@ import Toot from '../Cards/Toot'
 export default {
   name: 'tag',
   components: { Toot },
+  props: ['tag'],
   computed: {
     ...mapState({
       timeline: state => state.TimelineSpace.Contents.Hashtag.Tag.timeline,
       lazyLoading: state => state.TimelineSpace.Contents.Hashtag.Tag.lazyLoading,
       backgroundColor: state => state.App.theme.background_color,
       heading: state => state.TimelineSpace.Contents.Hashtag.Tag.heading,
-      unread: state => state.TimelineSpace.Contents.Hashtag.Tag.unreadTimeline
+      unread: state => state.TimelineSpace.Contents.Hashtag.Tag.unreadTimeline,
+      startReload: state => state.TimelineSpace.HeaderMenu.reload
     })
   },
   mounted () {
@@ -35,7 +37,7 @@ export default {
       spinner: 'el-icon-loading',
       background: 'rgba(0, 0, 0, 0.7)'
     })
-    this.load(this.$route.params.tag)
+    this.load(this.tag)
       .then(() => {
         loading.close()
       })
@@ -45,21 +47,29 @@ export default {
     document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
   },
   watch: {
-    '$route': function () {
+    tag: function (newTag, oldTag) {
       const loading = this.$loading({
         lock: true,
         text: 'Loading',
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
       })
       this.reset()
-      this.load(this.$route.params.tag)
+      this.load(newTag)
         .then(() => {
           loading.close()
         })
         .catch(() => {
           loading.close()
         })
+    },
+    startReload: function (newState, oldState) {
+      if (!oldState && newState) {
+        this.reload()
+          .finally(() => {
+            this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
+          })
+      }
     }
   },
   beforeDestroy () {
@@ -106,7 +116,7 @@ export default {
     onScroll (event) {
       if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementsByName('tag')[0].clientHeight - 10) && !this.lazyloading) {
         this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/lazyFetchTimeline', {
-          tag: this.$route.params.tag,
+          tag: this.tag,
           last: this.timeline[this.timeline.length - 1]
         })
       }
@@ -119,7 +129,7 @@ export default {
       }
     },
     async reload () {
-      const tag = this.$route.params.tag
+      const tag = this.tag
       const loading = this.$loading({
         lock: true,
         text: 'Loading',

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

@@ -26,7 +26,8 @@ export default {
       lazyLoading: state => state.TimelineSpace.Contents.Home.lazyLoading,
       backgroundColor: state => state.App.theme.background_color,
       heading: state => state.TimelineSpace.Contents.Home.heading,
-      unread: state => state.TimelineSpace.Contents.Home.unreadTimeline
+      unread: state => state.TimelineSpace.Contents.Home.unreadTimeline,
+      startReload: state => state.TimelineSpace.HeaderMenu.reload
     })
   },
   mounted () {
@@ -47,6 +48,16 @@ export default {
       document.getElementById('scrollable').scrollTop = 0
     }
   },
+  watch: {
+    startReload: function (newState, oldState) {
+      if (!oldState && newState) {
+        this.reload()
+          .finally(() => {
+            this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
+          })
+      }
+    }
+  },
   methods: {
     onScroll (event) {
       // for lazyLoading

src/renderer/components/TimelineSpace/Contents/Lists/Show.vue

@@ -26,7 +26,8 @@ export default {
       lazyLoading: state => state.TimelineSpace.Contents.Lists.Show.lazyLoading,
       backgroundColor: state => state.App.theme.background_color,
       heading: state => state.TimelineSpace.Contents.Lists.Show.heading,
-      unread: state => state.TimelineSpace.Contents.Lists.Show.unreadTimeline
+      unread: state => state.TimelineSpace.Contents.Lists.Show.unreadTimeline,
+      startReload: state => state.TimelineSpace.HeaderMenu.reload
     })
   },
   created () {
@@ -54,6 +55,14 @@ export default {
         .then(() => {
           loading.close()
         })
+    },
+    startReload: function (newState, oldState) {
+      if (!oldState && newState) {
+        this.reload()
+          .finally(() => {
+            this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
+          })
+      }
     }
   },
   beforeDestroy () {

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

@@ -26,7 +26,8 @@ export default {
       lazyLoading: state => state.TimelineSpace.Contents.Local.lazyLoading,
       backgroundColor: state => state.App.theme.background_color,
       heading: state => state.TimelineSpace.Contents.Local.heading,
-      unread: state => state.TimelineSpace.Contents.Local.unreadTimeline
+      unread: state => state.TimelineSpace.Contents.Local.unreadTimeline,
+      startReload: state => state.TimelineSpace.HeaderMenu.reload
     })
   },
   mounted () {
@@ -47,6 +48,16 @@ export default {
       document.getElementById('scrollable').scrollTop = 0
     }
   },
+  watch: {
+    startReload: function (newState, oldState) {
+      if (!oldState && newState) {
+        this.reload()
+          .finally(() => {
+            this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
+          })
+      }
+    }
+  },
   methods: {
     updateToot (message) {
       this.$store.commit('TimelineSpace/Contents/Local/updateToot', message)

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

@@ -26,7 +26,8 @@ export default {
       lazyLoading: state => state.TimelineSpace.Contents.Notifications.lazyLoading,
       backgroundColor: state => state.App.theme.background_color,
       heading: state => state.TimelineSpace.Contents.Notifications.heading,
-      unread: state => state.TimelineSpace.Contents.Notifications.unreadNotifications
+      unread: state => state.TimelineSpace.Contents.Notifications.unreadNotifications,
+      startReload: state => state.TimelineSpace.HeaderMenu.reload
     })
   },
   mounted () {
@@ -48,6 +49,16 @@ export default {
       document.getElementById('scrollable').scrollTop = 0
     }
   },
+  watch: {
+    startReload: function (newState, oldState) {
+      if (!oldState && newState) {
+        this.reload()
+          .finally(() => {
+            this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
+          })
+      }
+    }
+  },
   methods: {
     onScroll (event) {
       if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('notifications').clientHeight - 10) && !this.lazyloading) {

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

@@ -26,7 +26,8 @@ export default {
       lazyLoading: state => state.TimelineSpace.Contents.Public.lazyLoading,
       backgroundColor: state => state.App.theme.background_color,
       heading: state => state.TimelineSpace.Contents.Public.heading,
-      unread: state => state.TimelineSpace.Contents.Public.unreadTimeline
+      unread: state => state.TimelineSpace.Contents.Public.unreadTimeline,
+      startReload: state => state.TimelineSpace.HeaderMenu.reload
     })
   },
   created () {
@@ -58,6 +59,16 @@ export default {
       document.getElementById('scrollable').scrollTop = 0
     }
   },
+  watch: {
+    startReload: function (newState, oldState) {
+      if (!oldState && newState) {
+        this.reload()
+          .finally(() => {
+            this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
+          })
+      }
+    }
+  },
   methods: {
     async initialize () {
       try {

src/renderer/components/TimelineSpace/HeaderMenu.vue

@@ -2,9 +2,12 @@
 <div id="header_menu">
   <div class="channel">{{ title }}</div>
   <div class="tools">
-    <el-button type="text" class="toot" @click="openNewTootModal">
+    <el-button type="text" class="action" @click="openNewTootModal">
       <icon name="regular/edit"></icon>
     </el-button>
+    <el-button type="text" class="action" @click="reload">
+      <icon name="sync-alt"></icon>
+    </el-button>
   </div>
 </div>
 </template>
@@ -71,6 +74,22 @@ export default {
     },
     openNewTootModal () {
       this.$store.dispatch('TimelineSpace/Modals/NewToot/openModal')
+    },
+    reload () {
+      switch (this.title) {
+        case 'Home':
+        case 'Notification':
+        case 'Favourite':
+        case 'Local timeline':
+        case 'Public timeline':
+        case 'Hashtag':
+        case `#${this.$route.params.tag}`:
+        case 'Lists':
+          this.$store.commit('TimelineSpace/HeaderMenu/changeReload', true)
+          break
+        default:
+          console.log('Not impletemented')
+      }
     }
   }
 }
@@ -94,7 +113,7 @@ export default {
   .tools {
     font-size: 18px;
 
-    .toot {
+    .action {
       color: var(--theme-secondary-color);
       padding: 0;
 

src/renderer/store/TimelineSpace/HeaderMenu.js

@@ -3,11 +3,15 @@ import Mastodon from 'megalodon'
 const HeaderMenu = {
   namespaced: true,
   state: {
-    title: 'Home'
+    title: 'Home',
+    reload: false
   },
   mutations: {
     updateTitle (state, title) {
       state.title = title
+    },
+    changeReload (state, value) {
+      state.reload = value
     }
   },
   actions: {