Add feed to channel

TODO.md

@@ -31,4 +31,6 @@
 
 ### Integrated post interface at the top of the timeline
 
+Implemented, but perhaps needs automatic destination chooser.
+
 

src/components/FeedChooser.vue

@@ -3,6 +3,7 @@
     <div class="image is-48x48"><img :src="feed.photo" alt="" class="feed-icon"/></div>
     <div class="feed-name" v-text="feed.name"></div>
     <button :class="buttonClasses" @click="showFeed">Show feed</button>
+    <button :class="buttonClasses" @click="addFeed">Add feed</button>
   </div>
 </template>
 <script>
@@ -19,6 +20,9 @@
     methods: {
       showFeed(feed) {
         this.$emit('showFeed', feed)
+      },
+      addFeed(feed) {
+        this.$emit('addFeed', feed)
       }
     }
 
@@ -26,13 +30,16 @@
 </script>
 <style scoped>
   .result {
+    display:contents;
     margin-top: 6px;
     width: 100%;
-    display: flex;
+    /*display: flex;*/
-    flex-direction: row;
+    /*flex-direction: row;*/
-    justify-content: space-between;
+    /*justify-content: space-between;*/
-    align-items: center;
     border: 1px solid #eee;
     padding: 6px;
   }
+  .result > * {
+    align-self: center;
+  }
 </style>

src/components/FeedFollower.vue

@@ -3,7 +3,7 @@
     <div class="modal-background"></div>
     <div class="modal-card">
       <header class="modal-card-head">
-        <p class="modal-card-title">Add feed to channel</p>
+        <p class="modal-card-title">Add feed to {{ channel.name }}</p>
         <button class="delete" aria-label="close" @click="close"></button>
       </header>
 
@@ -19,7 +19,7 @@
         </div>
 
         <div class="results">
-          <feed-chooser :feed="feed" @showFeed="showFeed(feed)" v-for="(feed, i) in feeds" :key="i"/>
+          <feed-chooser :feed="feed" @showFeed="showFeed(feed)" @addFeed="addFeed(feed)" v-for="(feed, i) in feeds" :key="i"/>
         </div>
 
         <Timeline class="timeline" :timeline="timeline" :channel="channel"></Timeline>
@@ -38,13 +38,12 @@
   export default {
     name: "FeedFollower",
     components: {FeedChooser, Timeline},
-    props: ['isOpen'],
+    props: ['isOpen', 'channel'],
 
     data() {
       return {
         feeds: [],
         timeline: {items: [], paging: {}},
-        channel: {},
         query: '',
         loading: false
       }
@@ -74,7 +73,6 @@
       close() {
         this.feeds = []
         this.timeline = {items: [], paging: {}}
-        this.channel = {}
         this.query = ''
         this.loading = false
 
@@ -91,9 +89,15 @@
         }).then((res) => {
           return res.json()
         }).then((res) => {
+          if (!res.results) {
+            this.loading = false
+            return
+          }
+
           res.results.forEach(item => {
             item.loading = false
           })
+
           this.feeds = res.results
           this.loading = false
         })
@@ -109,10 +113,20 @@
         }).then((res) => {
           return res.json()
         }).then((res) => {
-          this.channel = feed
           this.timeline = res
           feed.loading = false
         })
+      },
+      addFeed(feed) {
+        let url = this.$store.state.microsubEndpoint + '?action=follow&channel='+this.channel.uid+'&url=' + encodeURIComponent(feed.url)
+        return fetch(url, {
+          method: 'POST',
+          headers: {
+            'Authorization': 'Bearer ' + this.$store.state.access_token
+          }
+        }).then(() => {
+          this.$store.dispatch('fetchTimeline', this.channel)
+        })
       }
     }
   }
@@ -121,8 +135,9 @@
 <style scoped>
 
   .results {
-    display: flex;
+    display: grid;
-    flex-direction: column;
+    grid-template-columns: 52px auto auto auto;
+    grid-gap: 6px;
   }
 
 </style>

src/components/Timeline.vue

@@ -17,8 +17,8 @@
 </template>
 
 <script>
-  import TimelineEntry from '@/components/Entry'
+  import TimelineEntry from '../components/Entry'
-  import DebugModal from '@/components/DebugModal'
+  import DebugModal from '../components/DebugModal'
 
   export default {
     name: "Timeline",

src/views/Home.vue

@@ -9,12 +9,12 @@
     <div class="timeline">
       <button class="button" @click="openFeedFollower">Add feed</button>
       <new-post class="mt-20"></new-post>
-      <Timeline style="margin-top:20px" :timeline="this.$store.state.timeline" :channel="this.$store.state.channel"
+      <h1>{{ channel.name }}</h1>
-                @getPage="getPage"></Timeline>
+      <Timeline style="margin-top:20px" :timeline="this.$store.state.timeline" :channel="channel" @getPage="getPage"></Timeline>
     </div>
 
     <channel-creator :is-open="this.$store.state.channelCreatorIsOpen"></channel-creator>
-    <feed-follower :is-open="feedFollowerIsOpen" @close="closeFeedFollower"></feed-follower>
+    <feed-follower :is-open="feedFollowerIsOpen" @close="closeFeedFollower" :channel="channel"></feed-follower>
   </div>
 </template>
 
@@ -39,13 +39,16 @@
 
     data() {
       return {
-        feedFollowerIsOpen: false
+        feedFollowerIsOpen: false,
       }
     },
 
     computed: {
       uid() {
         return this.$route.params.uid || 'home';
+      },
+      channel() {
+        return this.$store.state.channel
       }
     },