<template> <x-notes ref="timeline" :more="existMore ? more : null" @parentFocus="parentFocus"/> </template> <script lang="ts"> import Vue from 'vue'; import XNotes from './deck.notes.vue'; const fetchLimit = 10; export default Vue.extend({ components: { XNotes }, props: { }, data() { return { fetching: true, moreFetching: false, existMore: false, connection: null }; }, mounted() { this.connection = (this as any).os.stream.useSharedConnection('main'); this.connection.on('mention', this.onNote); this.fetch(); }, beforeDestroy() { this.connection.dispose(); }, methods: { fetch() { this.fetching = true; (this.$refs.timeline as any).init(() => new Promise((res, rej) => { (this as any).api('notes/mentions', { limit: fetchLimit + 1, includeMyRenotes: this.$store.state.settings.showMyRenotes, includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes, includeLocalRenotes: this.$store.state.settings.showLocalRenotes, visibility: 'specified' }).then(notes => { if (notes.length == fetchLimit + 1) { notes.pop(); this.existMore = true; } res(notes); this.fetching = false; this.$emit('loaded'); }, rej); })); }, more() { this.moreFetching = true; const promise = (this as any).api('notes/mentions', { limit: fetchLimit + 1, untilId: (this.$refs.timeline as any).tail().id, includeMyRenotes: this.$store.state.settings.showMyRenotes, includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes, includeLocalRenotes: this.$store.state.settings.showLocalRenotes, visibility: 'specified' }); promise.then(notes => { if (notes.length == fetchLimit + 1) { notes.pop(); } else { this.existMore = false; } notes.forEach(n => (this.$refs.timeline as any).append(n)); this.moreFetching = false; }); return promise; }, onNote(note) { // Prepend a note if (note.visibility == 'specified') { (this.$refs.timeline as any).prepend(note); } }, focus() { this.$refs.timeline.focus(); }, parentFocus(direction) { this.$emit('parentFocus', direction); }, } }); </script>