Find selected channel and show name

package.json

@@ -16,7 +16,8 @@
     "rel-scraper": "github:grantcodes/rel-scraper",
     "vue": "^2.5.17",
     "vue-router": "^3.0.1",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "lodash": "latest"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.0-rc.10",

src/components/FeedFollower.vue

@@ -118,6 +118,7 @@
         })
       },
       addFeed(feed) {
+        feed.loading = true
         let url = this.$store.state.microsubEndpoint + '?action=follow&channel='+this.channel.uid+'&url=' + encodeURIComponent(feed.url)
         return fetch(url, {
           method: 'POST',
@@ -125,6 +126,7 @@
             'Authorization': 'Bearer ' + this.$store.state.access_token
           }
         }).then(() => {
+          feed.loading = false
           this.$store.dispatch('fetchTimeline', this.channel)
         })
       }

src/store.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import Micropub from 'micropub-helper';
 import EventSource from 'eventsource'
+import _ from "lodash"
 
 Vue.use(Vuex)
 
@@ -35,6 +36,8 @@ export default new Vuex.Store({
       state.channels = channels
     },
     newTimeline(state, {channel, timeline}) {
+      // find the channel matching the selected uid
+      channel = _.find(state.channels, item => item.uid === channel.uid)
       state.channel = channel
       state.timeline = timeline
     },

src/views/Home.vue

@@ -9,7 +9,7 @@
     <div class="timeline column is-three-fifths">
       <button class="button" @click="openFeedFollower">Add feed</button>
       <new-post class="mt-20"></new-post>
-      <h1>{{ channel.name }}</h1>
+      <h1 class="title is-5 mt-20">{{ channel.name }}</h1>
       <Timeline style="margin-top:20px" :timeline="this.$store.state.timeline" :channel="channel"
                 @getPage="getPage"></Timeline>
     </div>