refs #116 refactor: Add contents components

src/renderer/components/TimelineSpace.vue

@@ -5,12 +5,7 @@
     <header class="header" style="-webkit-app-region: drag;">
       <header-menu></header-menu>
     </header>
-    <div class="content">
-      <div :class="openSideBar? 'timeline-wrapper-with-side-bar' : 'timeline-wrapper'">
-        <router-view></router-view>
-      </div>
-      <side-bar></side-bar>
-    </div>
+    <contents></contents>
   </div>
   <new-toot></new-toot>
   <jump-modal></jump-modal>
@@ -19,22 +14,16 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
 import SideMenu from './TimelineSpace/SideMenu'
 import HeaderMenu from './TimelineSpace/HeaderMenu'
 import NewToot from './TimelineSpace/Modals/NewToot'
 import JumpModal from './TimelineSpace/JumpModal'
 import ImageViewer from './TimelineSpace/Modals/ImageViewer'
-import SideBar from './TimelineSpace/SideBar'
+import Contents from './TimelineSpace/Contents'
 
 export default {
   name: 'timeline-space',
-  components: { SideMenu, HeaderMenu, NewToot, JumpModal, ImageViewer, SideBar },
-  computed: {
-    ...mapState({
-      openSideBar: state => state.TimelineSpace.SideBar.openSideBar
-    })
-  },
+  components: { SideMenu, HeaderMenu, NewToot, JumpModal, ImageViewer, Contents },
   created () {
     const loading = this.$loading({
       lock: true,
@@ -122,24 +111,6 @@ export default {
     background-color: #ffffff;
     border-bottom: solid 1px #dcdfe6;
   }
-
-  .content {
-    padding-top: 48px;
-    height: 100%;
-    box-sizing: border-box;
-
-    .timeline-wrapper {
-      height: 100%;
-      width: 100%;
-      overflow: auto;
-    }
-
-    .timeline-wrapper-with-side-bar {
-      height: 100%;
-      width: -webkit-calc(100% - 180px);
-      overflow: auto;
-    }
-  }
 }
 
 </style>

src/renderer/components/TimelineSpace/Contents.vue

@@ -0,0 +1,45 @@
+<template>
+<div id="contents">
+  <div :class="openSideBar ? 'timeline-wrapper-with-side-bar' : 'timeline-wrapper'">
+    <router-view></router-view>
+  </div>
+  <side-bar></side-bar>
+</div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import SideBar from './Contents/SideBar'
+
+export default {
+  name: 'contents',
+  components: {
+    SideBar
+  },
+  computed: {
+    ...mapState({
+      openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#contents {
+  padding-top: 48px;
+  height: 100%;
+  box-sizing: border-box;
+
+  .timeline-wrapper {
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+  }
+
+  .timeline-wrapper-with-side-bar {
+    height: 100%;
+    width: -webkit-calc(100% - 180px);
+    overflow: auto;
+  }
+}
+</style>

src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue

@@ -80,7 +80,7 @@ export default {
     },
     changeReblog (message) {
       if (message.reblogged) {
-        this.$store.dispatch('TimelineSpace/Cards/Toot/unreblog', message)
+        this.$store.dispatch('TimelineSpace/Contents/Cards/Toot/unreblog', message)
           .then((data) => {
             this.$emit('update', data)
           })
@@ -91,7 +91,7 @@ export default {
             })
           })
       } else {
-        this.$store.dispatch('TimelineSpace/Cards/Toot/reblog', message)
+        this.$store.dispatch('TimelineSpace/Contents/Cards/Toot/reblog', message)
           .then((data) => {
             this.$emit('update', data)
           })
@@ -105,7 +105,7 @@ export default {
     },
     changeFavourite (message) {
       if (message.favourited) {
-        this.$store.dispatch('TimelineSpace/Cards/Toot/removeFavourite', message)
+        this.$store.dispatch('TimelineSpace/Contents/Cards/Toot/removeFavourite', message)
           .then((data) => {
             this.$emit('update', data)
           })
@@ -116,7 +116,7 @@ export default {
             })
           })
       } else {
-        this.$store.dispatch('TimelineSpace/Cards/Toot/addFavourite', message)
+        this.$store.dispatch('TimelineSpace/Contents/Cards/Toot/addFavourite', message)
           .then((data) => {
             this.$emit('update', data)
           })

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

@@ -18,8 +18,8 @@ export default {
   computed: {
     ...mapState({
       account: state => state.TimelineSpace.account,
-      favourites: state => state.TimelineSpace.Favourites.favourites,
-      lazyLoading: state => state.TimelineSpace.Favourites.lazyLoading
+      favourites: state => state.TimelineSpace.Contents.Favourites.favourites,
+      lazyLoading: state => state.TimelineSpace.Contents.Favourites.lazyLoading
     })
   },
   created () {
@@ -29,7 +29,7 @@ export default {
       spinner: 'el-icon-loading',
       background: 'rgba(0, 0, 0, 0.7)'
     })
-    this.$store.dispatch('TimelineSpace/Favourites/fetchFavourites', this.account)
+    this.$store.dispatch('TimelineSpace/Contents/Favourites/fetchFavourites', this.account)
       .then(() => {
         loading.close()
       })
@@ -49,11 +49,11 @@ export default {
   },
   methods: {
     updateToot (message) {
-      this.$store.commit('TimelineSpace/Favourites/updateToot', message)
+      this.$store.commit('TimelineSpace/Contents/Favourites/updateToot', message)
     },
     onScroll (event) {
       if (((document.documentElement.clientHeight + event.target.defaultView.scrollY) >= document.getElementById('favourites').clientHeight - 10) && !this.lazyloading) {
-        this.$store.dispatch('TimelineSpace/Favourites/lazyFetchFavourites', this.favourites[this.favourites.length - 1])
+        this.$store.dispatch('TimelineSpace/Contents/Favourites/lazyFetchFavourites', this.favourites[this.favourites.length - 1])
       }
     }
   }

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

@@ -18,7 +18,7 @@ export default {
   computed: {
     ...mapState({
       timeline: state => state.TimelineSpace.homeTimeline,
-      lazyLoading: state => state.TimelineSpace.Home.lazyLoading
+      lazyLoading: state => state.TimelineSpace.Contents.Home.lazyLoading
     })
   },
   mounted () {
@@ -37,7 +37,7 @@ export default {
   methods: {
     onScroll (event) {
       if (((document.documentElement.clientHeight + event.target.defaultView.scrollY) >= document.getElementById('home').clientHeight - 10) && !this.lazyloading) {
-        this.$store.dispatch('TimelineSpace/Home/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
+        this.$store.dispatch('TimelineSpace/Contents/Home/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
       }
     }
   }

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

@@ -17,8 +17,8 @@ export default {
   components: { Toot },
   computed: {
     ...mapState({
-      timeline: state => state.TimelineSpace.Local.timeline,
-      lazyLoading: state => state.TimelineSpace.Local.lazyLoading
+      timeline: state => state.TimelineSpace.Contents.Local.timeline,
+      lazyLoading: state => state.TimelineSpace.Contents.Local.lazyLoading
     })
   },
   created () {
@@ -38,7 +38,7 @@ export default {
     window.addEventListener('scroll', this.onScroll)
   },
   beforeDestroy () {
-    this.$store.dispatch('TimelineSpace/Local/stopLocalStreaming')
+    this.$store.dispatch('TimelineSpace/Contents/Local/stopLocalStreaming')
   },
   destroyed () {
     window.removeEventListener('scroll', this.onScroll)
@@ -46,21 +46,21 @@ export default {
   methods: {
     async initialize () {
       try {
-        await this.$store.dispatch('TimelineSpace/Local/fetchLocalTimeline')
+        await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline')
       } catch (err) {
         this.$message({
           message: 'Could not fetch timeline',
           type: 'error'
         })
       }
-      this.$store.dispatch('TimelineSpace/Local/startLocalStreaming')
+      this.$store.dispatch('TimelineSpace/Contents/Local/startLocalStreaming')
     },
     updateToot (message) {
-      this.$store.commit('TimelineSpace/Local/updateToot', message)
+      this.$store.commit('TimelineSpace/Contents/Local/updateToot', message)
     },
     onScroll (event) {
       if (((document.documentElement.clientHeight + event.target.defaultView.scrollY) >= document.getElementById('local').clientHeight - 10) && !this.lazyloading) {
-        this.$store.dispatch('TimelineSpace/Local/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
+        this.$store.dispatch('TimelineSpace/Contents/Local/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
       }
     }
   }

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

@@ -18,7 +18,7 @@ export default {
   computed: {
     ...mapState({
       notifications: state => state.TimelineSpace.notifications,
-      lazyLoading: state => state.TimelineSpace.Notifications.lazyLoading
+      lazyLoading: state => state.TimelineSpace.Contents.Notifications.lazyLoading
     })
   },
   mounted () {
@@ -37,7 +37,7 @@ export default {
   methods: {
     onScroll (event) {
       if (((document.documentElement.clientHeight + event.target.defaultView.scrollY) >= document.getElementById('notifications').clientHeight - 10) && !this.lazyloading) {
-        this.$store.dispatch('TimelineSpace/Notifications/lazyFetchNotifications', this.notifications[this.notifications.length - 1])
+        this.$store.dispatch('TimelineSpace/Contents/Notifications/lazyFetchNotifications', this.notifications[this.notifications.length - 1])
       }
     }
   }

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

@@ -17,8 +17,8 @@ export default {
   components: { Toot },
   computed: {
     ...mapState({
-      timeline: state => state.TimelineSpace.Public.timeline,
-      lazyLoading: state => state.TimelineSpace.Public.lazyLoading
+      timeline: state => state.TimelineSpace.Contents.Public.timeline,
+      lazyLoading: state => state.TimelineSpace.Contents.Public.lazyLoading
     })
   },
   created () {
@@ -38,7 +38,7 @@ export default {
     window.addEventListener('scroll', this.onScroll)
   },
   beforeDestroy () {
-    this.$store.dispatch('TimelineSpace/Public/stopPublicStreaming')
+    this.$store.dispatch('TimelineSpace/Contents/Public/stopPublicStreaming')
   },
   destroyed () {
     window.removeEventListener('scroll', this.onScroll)
@@ -46,21 +46,21 @@ export default {
   methods: {
     async initialize () {
       try {
-        await this.$store.dispatch('TimelineSpace/Public/fetchPublicTimeline')
+        await this.$store.dispatch('TimelineSpace/Contents/Public/fetchPublicTimeline')
       } catch (err) {
         this.$message({
           message: 'Could not fetch timeline',
           type: 'error'
         })
       }
-      this.$store.dispatch('TimelineSpace/Public/startPublicStreaming')
+      this.$store.dispatch('TimelineSpace/Contents/Public/startPublicStreaming')
     },
     updateToot (message) {
-      this.$store.commit('TimelineSpace/Public/updateToot', message)
+      this.$store.commit('TimelineSpace/Contents/Public/updateToot', message)
     },
     onScroll (event) {
       if (((document.documentElement.clientHeight + event.target.defaultView.scrollY) >= document.getElementById('public').clientHeight - 10) && !this.lazyloading) {
-        this.$store.dispatch('TimelineSpace/Public/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
+        this.$store.dispatch('TimelineSpace/Contents/Public/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
       }
     }
   }

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

@@ -14,12 +14,12 @@ export default {
   name: 'side-bar',
   computed: {
     ...mapState({
-      openSideBar: state => state.TimelineSpace.SideBar.openSideBar
+      openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar
     })
   },
   methods: {
     close () {
-      this.$store.dispatch('TimelineSpace/SideBar/close')
+      this.$store.dispatch('TimelineSpace/Contents/SideBar/close')
     }
   }
 }

src/renderer/router/index.js

@@ -28,27 +28,27 @@ export default new Router({
             {
               path: 'home',
               name: 'home',
-              component: require('@/components/TimelineSpace/Home').default
+              component: require('@/components/TimelineSpace/Contents/Home').default
             },
             {
               path: 'notifications',
               name: 'notifications',
-              component: require('@/components/TimelineSpace/Notifications').default
+              component: require('@/components/TimelineSpace/Contents/Notifications').default
             },
             {
               path: 'favourites',
               name: 'favourites',
-              component: require('@/components/TimelineSpace/Favourites').default
+              component: require('@/components/TimelineSpace/Contents/Favourites').default
             },
             {
               path: 'local',
               name: 'local',
-              component: require('@/components/TimelineSpace/Local').default
+              component: require('@/components/TimelineSpace/Contents/Local').default
             },
             {
               path: 'public',
               name: 'public',
-              component: require('@/components/TimelineSpace/Public').default
+              component: require('@/components/TimelineSpace/Contents/Public').default
             }
           ]
         }

src/renderer/store/TimelineSpace.js

@@ -1,30 +1,18 @@
 import { ipcRenderer } from 'electron'
 import Mastodon from 'mastodon-api'
 import SideMenu from './TimelineSpace/SideMenu'
-import SideBar from './TimelineSpace/SideBar'
-import Home from './TimelineSpace/Home'
-import Notifications from './TimelineSpace/Notifications'
-import Favourites from './TimelineSpace/Favourites'
-import Local from './TimelineSpace/Local'
-import Public from './TimelineSpace/Public'
-import Cards from './TimelineSpace/Cards'
 import JumpModal from './TimelineSpace/JumpModal'
 import Modals from './TimelineSpace/Modals'
+import Contents from './TimelineSpace/Contents'
 import router from '../router'
 
 const TimelineSpace = {
   namespaced: true,
   modules: {
     SideMenu,
-    SideBar,
-    Home,
-    Notifications,
-    Favourites,
-    Local,
-    Public,
-    Cards,
     JumpModal,
-    Modals
+    Modals,
+    Contents
   },
   state: {
     account: {

src/renderer/store/TimelineSpace/Contents.js

@@ -0,0 +1,22 @@
+import SideBar from './Contents/SideBar'
+import Home from './Contents/Home'
+import Notifications from './Contents/Notifications'
+import Favourites from './Contents/Favourites'
+import Local from './Contents/Local'
+import Public from './Contents/Public'
+import Cards from './Contents/Cards'
+
+const Contents = {
+  namespaced: true,
+  modules: {
+    SideBar,
+    Home,
+    Notifications,
+    Favourites,
+    Local,
+    Public,
+    Cards
+  }
+}
+
+export default Contents

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

@@ -82,7 +82,7 @@ const Local = {
           })
         client.get('/timelines/public', { max_id: last.id, limit: 40, local: true }, (err, data, res) => {
           if (err) return reject(err)
-          commit('TimelineSpace/Local/insertTimeline', data, { root: true })
+          commit('insertTimeline', data)
           commit('changeLazyLoading', false)
         })
       })

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

@@ -82,7 +82,7 @@ const Public = {
           })
         client.get('/timelines/public', { max_id: last.id, limit: 40 }, (err, data, res) => {
           if (err) return reject(err)
-          commit('TimelineSpace/Public/insertTimeline', data, { root: true })
+          commit('insertTimeline', data)
           commit('changeLazyLoading', false)
         })
       })