refs #167 Load list timeline

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

@@ -1,12 +1,53 @@
 <template>
 <div id="lists">
-  list
+  <div class="list-timeline" v-for="message in timeline" v-bind:key="message.id">
+    <toot :message="message"></toot>
+  </div>
 </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+import Toot from './Cards/Toot'
+
 export default {
-  name: 'lists'
+  name: 'lists',
+  props: ['list_id'],
+  components: { Toot },
+  computed: {
+    ...mapState({
+      timeline: state => state.TimelineSpace.Contents.Lists.timeline
+    })
+  },
+  created () {
+    this.load()
+  },
+  watch: {
+    list_id: function () {
+      this.load()
+    }
+  },
+  methods: {
+    load () {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$store.dispatch('TimelineSpace/Contents/Lists/fetchTimeline', this.list_id)
+        .then(() => {
+          loading.close()
+        })
+        .catch(() => {
+          loading.close()
+          this.$message({
+            message: 'Failed to get timeline',
+            type: 'error'
+          })
+        })
+    }
+  }
 }
 </script>
 

src/renderer/components/TimelineSpace/Modals/NewToot.vue

@@ -10,7 +10,7 @@
       </div>
     </el-form>
     <div class="preview">
-      <div class="image-wrapper" v-for="media in attachedMedias" v-on:key="media.id">
+      <div class="image-wrapper" v-for="media in attachedMedias" v-bind:key="media.id">
         <img :src="media.preview_url" class="preview-image" />
         <el-button size="small" type="text" @click="removeAttachment(media)" class="remove-image"><icon name="times-circle"></icon></el-button>
       </div>

src/renderer/components/TimelineSpace/SideMenu.vue

@@ -42,7 +42,7 @@
         <span>Lists</span>
       </li>
       <template v-for="list in lists">
-        <el-menu-item :index="`/${id()}/lists/${list.id}`" class="sub-menu" v-on:key="list.id">
+        <el-menu-item :index="`/${id()}/lists/${list.id}`" class="sub-menu" v-bind:key="list.id">
           <span>#{{ list.title }}</span>
         </el-menu-item>
       </template>

src/renderer/router/index.js

@@ -70,7 +70,8 @@ export default new Router({
             {
               path: 'lists/:list_id',
               name: 'lists',
-              component: require('@/components/TimelineSpace/Contents/Lists').default
+              component: require('@/components/TimelineSpace/Contents/Lists').default,
+              props: true
             }
           ]
         }

src/renderer/store/TimelineSpace/Contents.js

@@ -4,6 +4,7 @@ import Notifications from './Contents/Notifications'
 import Favourites from './Contents/Favourites'
 import Local from './Contents/Local'
 import Public from './Contents/Public'
+import Lists from './Contents/Lists'
 import Cards from './Contents/Cards'
 
 const Contents = {
@@ -15,6 +16,7 @@ const Contents = {
     Favourites,
     Local,
     Public,
+    Lists,
     Cards
   }
 }

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

@@ -0,0 +1,31 @@
+import Mastodon from 'mastodon-api'
+
+const Lists = {
+  namespaced: true,
+  state: {
+    timeline: []
+  },
+  mutations: {
+    updateTimeline (state, timeline) {
+      state.timeline = timeline
+    }
+  },
+  actions: {
+    fetchTimeline ({ 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(`/timelines/list/${listID}`, { limit: 40 }, (err, data, res) => {
+          if (err) return reject(err)
+          commit('updateTimeline', data)
+          resolve(res)
+        })
+      })
+    }
+  }
+}
+
+export default Lists