Browse Source

Add feed to channel

master
Peter Stuifzand 3 years ago
parent
commit
9e86dd3137
  1. 2
      TODO.md
  2. 15
      src/components/FeedChooser.vue
  3. 31
      src/components/FeedFollower.vue
  4. 4
      src/components/Timeline.vue
  5. 11
      src/views/Home.vue

2
TODO.md

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

15
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;
flex-direction: row;
justify-content: space-between;
align-items: center;
/*display: flex;*/
/*flex-direction: row;*/
/*justify-content: space-between;*/
border: 1px solid #eee;
padding: 6px;
}
.result > * {
align-self: center;
}
</style>

31
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;
flex-direction: column;
display: grid;
grid-template-columns: 52px auto auto auto;
grid-gap: 6px;
}
</style>

4
src/components/Timeline.vue

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

11
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"
@getPage="getPage"></Timeline>
<h1>{{ channel.name }}</h1>
<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
}
},

Loading…
Cancel
Save