refs #167 Update header menu in user's list timeline

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

@@ -0,0 +1,14 @@
+<template>
+<div id="lists">
+  list
+</div>
+</template>
+
+<script>
+export default {
+  name: 'lists'
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/renderer/components/TimelineSpace/HeaderMenu.vue

@@ -1,27 +1,51 @@
 <template>
 <div id="header_menu">
-  <div class="channel">#{{ channelName() }}</div>
+  <div class="channel">{{ title }}</div>
 </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: 'header-menu',
+  computed: {
+    ...mapState({
+      title: state => state.TimelineSpace.HeaderMenu.title
+    })
+  },
+  created () {
+    this.channelName()
+  },
+  watch: {
+    '$route': function () {
+      this.channelName()
+    }
+  },
   methods: {
     channelName () {
       switch (this.$route.name) {
         case 'home':
-          return 'Home'
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Home')
+          break
         case 'notifications':
-          return 'Notification'
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Notification')
+          break
         case 'favourites':
-          return 'Favourite'
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Favourite')
+          break
         case 'local':
-          return 'LocalTimeline'
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'LocalTimeline')
+          break
         case 'public':
-          return 'PublicTimeline'
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'PublicTimeline')
+          break
+        case 'lists':
+          this.$store.dispatch('TimelineSpace/HeaderMenu/fetchList', this.$route.params.list_id)
+          break
         default:
-          return 'Home'
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Home')
+          break
       }
     }
   }

src/renderer/components/TimelineSpace/SideMenu.vue

@@ -41,9 +41,11 @@
         <icon name="list-ul"></icon>
         <span>Lists</span>
       </li>
-      <el-menu-item index="3" class="sub-menu">
-        <span>#List1</span>
-      </el-menu-item>
+      <template v-for="list in lists">
+        <el-menu-item :index="`/${id()}/lists/${list.id}`" class="sub-menu" v-on:key="list.id">
+          <span>#{{ list.title }}</span>
+        </el-menu-item>
+      </template>
     </el-menu>
   </div>
 </template>
@@ -57,7 +59,8 @@ export default {
     ...mapState({
       account: state => state.TimelineSpace.account,
       unreadHomeTimeline: state => state.TimelineSpace.SideMenu.unreadHomeTimeline,
-      unreadNotifications: state => state.TimelineSpace.SideMenu.unreadNotifications
+      unreadNotifications: state => state.TimelineSpace.SideMenu.unreadNotifications,
+      lists: state => state.TimelineSpace.SideMenu.lists
     })
   },
   methods: {

src/renderer/router/index.js

@@ -66,6 +66,11 @@ export default new Router({
               path: 'public',
               name: 'public',
               component: require('@/components/TimelineSpace/Contents/Public').default
+            },
+            {
+              path: 'lists/:list_id',
+              name: 'lists',
+              component: require('@/components/TimelineSpace/Contents/Lists').default
             }
           ]
         }

src/renderer/store/TimelineSpace.js

@@ -1,6 +1,7 @@
 import { ipcRenderer } from 'electron'
 import Mastodon from 'mastodon-api'
 import SideMenu from './TimelineSpace/SideMenu'
+import HeaderMenu from './TimelineSpace/HeaderMenu'
 import Modals from './TimelineSpace/Modals'
 import Contents from './TimelineSpace/Contents'
 import router from '../router'
@@ -9,6 +10,7 @@ const TimelineSpace = {
   namespaced: true,
   modules: {
     SideMenu,
+    HeaderMenu,
     Modals,
     Contents
   },

src/renderer/store/TimelineSpace/HeaderMenu.js

@@ -0,0 +1,32 @@
+import Mastodon from 'mastodon-api'
+
+const HeaderMenu = {
+  namespaced: true,
+  state: {
+    title: 'Home'
+  },
+  mutations: {
+    updateTitle (state, title) {
+      state.title = title
+    }
+  },
+  actions: {
+    fetchList ({ state, commit, rootState }, listID) {
+      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(`/lists/${listID}`, {}, (err, data, res) => {
+          if (err) return reject(err)
+          commit('updateTitle', `#${data.title}`)
+          resolve(res)
+        })
+      })
+    }
+  }
+}
+
+export default HeaderMenu