Move post interface to NewPost, add Feed Preview

src/components/FeedChooser.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="result">
+    <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>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'feed-chooser',
+    props: ['feed'],
+
+    computed: {
+      buttonClasses() {
+        return {'button': true, 'is-loading': this.feed.loading}
+      }
+    },
+
+    methods: {
+      showFeed(feed) {
+        this.$emit('showFeed', feed)
+      }
+    }
+
+  }
+</script>
+<style scoped>
+  .result {
+    margin-top: 6px;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid #eee;
+    padding: 6px;
+  }
+</style>

src/components/FeedFollower.vue

@@ -0,0 +1,128 @@
+<template>
+  <div :class="modalClasses">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">Add feed to channel</p>
+        <button class="delete" aria-label="close" @click="close"></button>
+      </header>
+
+      <div class="modal-card-body">
+        <div class="field has-addons">
+          <div class="control is-expanded">
+            <input type="text" class="input is-expanded" id="query" placeholder="Search for feed" v-model="query"
+                   ref="query" @keypress.enter="search"/>
+          </div>
+          <div class="control">
+            <button :class="searchClasses" @click="search">Search</button>
+          </div>
+        </div>
+
+        <div class="results">
+          <feed-chooser :feed="feed" @showFeed="showFeed(feed)" v-for="(feed, i) in feeds" :key="i"/>
+        </div>
+
+        <Timeline class="timeline" :timeline="timeline" :channel="channel"></Timeline>
+      </div>
+
+      <footer class="modal-card-foot">
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Timeline from '../components/Timeline';
+  import FeedChooser from "./FeedChooser";
+
+  export default {
+    name: "FeedFollower",
+    components: {FeedChooser, Timeline},
+    props: ['isOpen'],
+
+    data() {
+      return {
+        feeds: [],
+        timeline: {items: [], paging: {}},
+        channel: {},
+        query: '',
+        loading: false
+      }
+    },
+
+    computed: {
+      modalClasses() {
+        return {'modal': true, 'is-active': this.isOpen}
+      },
+      searchClasses() {
+        return {'button': true, 'is-primary': true, 'is-loading': this.loading}
+      }
+    },
+
+    watch: {
+      // eslint-disable-next-line no-unused-vars
+      isOpen(newVal, oldVal) {
+        if (newVal) {
+          this.$nextTick(function () {
+            this.$refs.query.focus()
+          })
+        }
+      }
+    },
+
+    methods: {
+      close() {
+        this.feeds = []
+        this.timeline = {items: [], paging: {}}
+        this.channel = {}
+        this.query = ''
+        this.loading = false
+
+        this.$emit('close')
+      },
+      search() {
+        let url = this.$store.state.microsubEndpoint + '?action=search&query=' + encodeURIComponent(this.query)
+        this.loading = true
+        return fetch(url, {
+          method: 'POST',
+          headers: {
+            'Authorization': 'Bearer ' + this.$store.state.access_token
+          }
+        }).then((res) => {
+          return res.json()
+        }).then((res) => {
+          res.results.forEach(item => {
+            item.loading = false
+          })
+          this.feeds = res.results
+          this.loading = false
+        })
+      },
+      showFeed(feed) {
+        feed.loading = true
+        let url = this.$store.state.microsubEndpoint + '?action=preview&url=' + encodeURIComponent(feed.url)
+        return fetch(url, {
+          method: 'GET',
+          headers: {
+            'Authorization': 'Bearer ' + this.$store.state.access_token
+          }
+        }).then((res) => {
+          return res.json()
+        }).then((res) => {
+          this.channel = feed
+          this.timeline = res
+          feed.loading = false
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+  .results {
+    display: flex;
+    flex-direction: column;
+  }
+
+</style>

src/components/NewPost.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="card">
+    <div class="card-header">
+      <div class="card-header-title">What are you thinking about?</div>
+    </div>
+    <div class="card-content">
+      <div class="media">
+        <div class="media-content">
+          <div class="field">
+            <div class="control">
+              <textarea class="textarea" v-model="newPost"></textarea>
+            </div>
+          </div>
+          <div class="field">
+            <div class="control">
+              <button class="button is-primary" @click="post">Post</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "NewPost",
+    data() {
+      return {
+        newPost: ''
+      }
+    },
+    methods: {
+      post() {
+        this.$store.dispatch('micropubPost', {
+          'type': ['h-entry'],
+          'properties': {
+            'content': [this.newPost]
+          },
+        }).then(() => {
+          this.newPost = '';
+        })
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/Timeline.vue

@@ -1,31 +1,8 @@
 <template>
   <div :class="this.className">
-    <div class="mb-20">
-      <div class="card">
-        <div class="card-header">
-          <div class="card-header-title">What are you thinking about?</div>
-        </div>
-        <div class="card-content">
-          <div class="media">
-            <div class="media-content">
-              <div class="field">
-               <div class="control">
-                 <textarea class="textarea" v-model="newPost"></textarea>
-               </div>
-              </div>
-              <div class="field">
-                <div class="control">
-                  <button class="button is-primary" @click="post">Post</button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
     <div class="timeline--item" v-for="item in items" :key="item.id">
-      <TimelineEntry :item="item" @debug="debug" @markRead="markRead(channel.uid, ...arguments)" :is-main-entry="true"/>
+      <TimelineEntry :item="item" @debug="debug" @markRead="markRead(channel.uid, ...arguments)"
+                     :is-main-entry="true"/>
     </div>
     <div class="level">
       <div class="level-item">
@@ -52,7 +29,6 @@
       return {
         showDebug: false,
         debugItem: null,
-        newPost: '',
         state: 'new'
       }
     },
@@ -66,16 +42,6 @@
     },
 
     methods: {
-      post() {
-        this.$store.dispatch('micropubPost', {
-          'type': ['h-entry'],
-          'properties': {
-            'content': [this.newPost]
-          },
-        }).then(() => {
-          this.newPost = '';
-        })
-      },
       debug(item) {
         this.debugItem = item
         this.showDebug = true
@@ -136,6 +102,7 @@
   .timeline--item {
     margin-bottom: 16px;
   }
+
   .has-buttons {
     justify-content: end;
     padding: 12px;

src/styles.scss

@@ -2,3 +2,6 @@
 .mb-20 {
   margin-bottom: 20px;
 }
+.mt-20 {
+  margin-top: 20px;
+}

src/views/Home.vue

@@ -6,27 +6,41 @@
       </div>
     </Channels>
 
-    <Timeline class="timeline" :timeline="this.$store.state.timeline" :channel="this.$store.state.channel"
+    <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"
                 @getPage="getPage"></Timeline>
+    </div>
 
     <channel-creator :is-open="this.$store.state.channelCreatorIsOpen"></channel-creator>
+    <feed-follower :is-open="feedFollowerIsOpen" @close="closeFeedFollower"></feed-follower>
   </div>
 </template>
 
 <script>
-  // @ is an alias to /src
-  import Timeline from '@/components/Timeline.vue'
-  import Channels from '@/components/Channels.vue'
-  import Channel from '@/components/Channel.vue'
-  import ChannelCreator from '@/components/ChannelCreator.vue'
+  import Timeline from '../components/Timeline.vue'
+  import Channels from '../components/Channels.vue'
+  import Channel from '../components/Channel.vue'
+  import ChannelCreator from '../components/ChannelCreator.vue'
+  import FeedFollower from "../components/FeedFollower"
+  import NewPost from "../components/NewPost"
 
   export default {
     name: 'home',
     components: {
+      FeedFollower,
       Timeline,
       Channels,
       Channel,
-      ChannelCreator
+      ChannelCreator,
+      NewPost
+    },
+
+    data() {
+      return {
+        feedFollowerIsOpen: false
+      }
     },
 
     computed: {
@@ -36,6 +50,12 @@
     },
 
     methods: {
+      openFeedFollower() {
+        this.feedFollowerIsOpen = true
+      },
+      closeFeedFollower() {
+        this.feedFollowerIsOpen = false
+      },
       selectChannel(channel) {
         this.$store.dispatch('switchChannel', channel).then(() => {
           this.$store.dispatch('fetchTimeline', channel).then(() => {