Sharkey/src/web/app/mobile/views/components/timeline.vue

90 lines
2.1 KiB
Vue
Raw Normal View History

2018-02-14 05:24:49 +02:00
<template>
<div class="mk-timeline">
2018-02-14 06:35:51 +02:00
<mk-friends-maker v-if="alone"/>
2018-02-14 05:24:49 +02:00
<mk-posts ref="timeline" :posts="posts">
<div class="init" v-if="fetching">
%fa:spinner .pulse%%i18n:common.loading%
</div>
<div class="empty" v-if="!fetching && posts.length == 0">
%fa:R comments%
%i18n:mobile.tags.mk-home-timeline.empty-timeline%
</div>
2018-02-22 00:06:47 +02:00
<button @click="more" :disabled="fetching" slot="tail">
2018-02-14 05:24:49 +02:00
<span v-if="!fetching">%i18n:mobile.tags.mk-timeline.load-more%</span>
<span v-if="fetching">%i18n:common.loading%<mk-ellipsis/></span>
</button>
</mk-posts>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
date: {
type: Date,
required: false
}
},
data() {
return {
fetching: true,
moreFetching: false,
posts: [],
connection: null,
connectionId: null
};
},
computed: {
alone(): boolean {
2018-02-18 05:35:18 +02:00
return (this as any).os.i.following_count == 0;
2018-02-14 05:24:49 +02:00
}
},
mounted() {
2018-02-18 05:35:18 +02:00
this.connection = (this as any).os.stream.getConnection();
this.connectionId = (this as any).os.stream.use();
2018-02-14 05:24:49 +02:00
this.connection.on('post', this.onPost);
this.connection.on('follow', this.onChangeFollowing);
this.connection.on('unfollow', this.onChangeFollowing);
this.fetch();
},
beforeDestroy() {
this.connection.off('post', this.onPost);
this.connection.off('follow', this.onChangeFollowing);
this.connection.off('unfollow', this.onChangeFollowing);
2018-02-18 05:35:18 +02:00
(this as any).os.stream.dispose(this.connectionId);
2018-02-14 05:24:49 +02:00
},
methods: {
fetch(cb?) {
this.fetching = true;
2018-02-18 05:35:18 +02:00
(this as any).api('posts/timeline', {
2018-02-14 05:24:49 +02:00
until_date: this.date ? (this.date as any).getTime() : undefined
}).then(posts => {
this.posts = posts;
2018-02-19 16:37:09 +02:00
this.fetching = false;
2018-02-14 05:24:49 +02:00
if (cb) cb();
});
},
more() {
if (this.moreFetching || this.fetching || this.posts.length == 0) return;
this.moreFetching = true;
2018-02-18 05:35:18 +02:00
(this as any).api('posts/timeline', {
2018-02-14 05:24:49 +02:00
until_id: this.posts[this.posts.length - 1].id
}).then(posts => {
this.moreFetching = false;
this.posts.unshift(posts);
});
},
onPost(post) {
this.posts.unshift(post);
},
onChangeFollowing() {
this.fetch();
}
}
});
</script>