natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip: migrate paging components to composition api

This commit is contained in:
syuilo 2022-01-09 22:57:27 +09:00
parent 586c11251a
commit d3315bda11
2 changed files with 131 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

207
packages/client/src/components/timeline.vue
View File

@ -1,129 +1,97 @@
<template> <template>
<XNotes ref="tl" :no-gap="!$store.state.showGapBetweenNotesInTimeline" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)" @queue="$emit('queue', $event)"/> <XNotes ref="tlComponent" :no-gap="!$store.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)"/>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, markRaw } from 'vue'; import { ref, computed, provide, onUnmounted } from 'vue';
import XNotes from './notes.vue'; import XNotes from './notes.vue';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream'; import { stream } from '@/stream';
import * as sound from '@/scripts/sound'; import * as sound from '@/scripts/sound';
import { $i } from '@/account';
export default defineComponent({ const props = defineProps<{
components: { src: string;
XNotes list?: string;
}, antenna?: string;
channel?: string;
sound?: boolean;
}>();
provide() { const emit = defineEmits<{
return { (e: 'note'): void;
inChannel: this.src === 'channel' (e: 'queue', count: number): void;
}; }>();
},
props: { provide('inChannel', computed(() => props.src === 'channel'));
src: {
type: String,
required: true
},
list: {
type: String,
required: false
},
antenna: {
type: String,
required: false
},
channel: {
type: String,
required: false
},
sound: {
type: Boolean,
required: false,
default: false,
}
},
emits: ['note', 'queue', 'before', 'after'], const tlComponent = ref<InstanceType<typeof XNotes>>();
data() {
return {
connection: null,
connection2: null,
pagination: null,
baseQuery: {
includeMyRenotes: this.$store.state.showMyRenotes,
includeRenotedMyNotes: this.$store.state.showRenotedMyNotes,
includeLocalRenotes: this.$store.state.showLocalRenotes
},
query: {},
date: null
};
},
created() {
const prepend = note => { const prepend = note => {
(this.$refs.tl as any).prepend(note); tlComponent.value.prepend(note);
this.$emit('note'); emit('note');
if (this.sound) { if (props.sound) {
sound.play(note.userId === this.$i.id ? 'noteMy' : 'note'); sound.play($i && (note.userId === $i.id) ? 'noteMy' : 'note');
} }
}; };
const onUserAdded = () => { const onUserAdded = () => {
(this.$refs.tl as any).reload(); tlComponent.value.reload();
}; };
const onUserRemoved = () => { const onUserRemoved = () => {
(this.$refs.tl as any).reload(); tlComponent.value.reload();
}; };
const onChangeFollowing = () => { const onChangeFollowing = () => {
if (!this.$refs.tl.backed) { if (!tlComponent.value.backed) {
this.$refs.tl.reload(); tlComponent.value.reload();
} }
}; };
let endpoint; let endpoint;
let query;
let connection;
let connection2;
if (this.src == 'antenna') { if (props.src === 'antenna') {
endpoint = 'antennas/notes'; endpoint = 'antennas/notes';
this.query = { query = {
antennaId: this.antenna antennaId: props.antenna
}; };
this.connection = markRaw(stream.useChannel('antenna', { connection = stream.useChannel('antenna', {
antennaId: this.antenna antennaId: props.antenna
})); });
this.connection.on('note', prepend); connection.on('note', prepend);
} else if (this.src == 'home') { } else if (props.src === 'home') {
endpoint = 'notes/timeline'; endpoint = 'notes/timeline';
this.connection = markRaw(stream.useChannel('homeTimeline')); connection = stream.useChannel('homeTimeline');
this.connection.on('note', prepend); connection.on('note', prepend);
this.connection2 = markRaw(stream.useChannel('main')); connection2 = stream.useChannel('main');
this.connection2.on('follow', onChangeFollowing); connection2.on('follow', onChangeFollowing);
this.connection2.on('unfollow', onChangeFollowing); connection2.on('unfollow', onChangeFollowing);
} else if (this.src == 'local') { } else if (props.src === 'local') {
endpoint = 'notes/local-timeline'; endpoint = 'notes/local-timeline';
this.connection = markRaw(stream.useChannel('localTimeline')); connection = stream.useChannel('localTimeline');
this.connection.on('note', prepend); connection.on('note', prepend);
} else if (this.src == 'social') { } else if (props.src === 'social') {
endpoint = 'notes/hybrid-timeline'; endpoint = 'notes/hybrid-timeline';
this.connection = markRaw(stream.useChannel('hybridTimeline')); connection = stream.useChannel('hybridTimeline');
this.connection.on('note', prepend); connection.on('note', prepend);
} else if (this.src == 'global') { } else if (props.src === 'global') {
endpoint = 'notes/global-timeline'; endpoint = 'notes/global-timeline';
this.connection = markRaw(stream.useChannel('globalTimeline')); connection = stream.useChannel('globalTimeline');
this.connection.on('note', prepend); connection.on('note', prepend);
} else if (this.src == 'mentions') { } else if (props.src === 'mentions') {
endpoint = 'notes/mentions'; endpoint = 'notes/mentions';
this.connection = markRaw(stream.useChannel('main')); connection = stream.useChannel('main');
this.connection.on('mention', prepend); connection.on('mention', prepend);
} else if (this.src == 'directs') { } else if (props.src === 'directs') {
endpoint = 'notes/mentions'; endpoint = 'notes/mentions';
this.query = { query = {
visibility: 'specified' visibility: 'specified'
}; };
const onNote = note => { const onNote = note => {
@ -131,54 +99,45 @@ export default defineComponent({
prepend(note); prepend(note);
} }
}; };
this.connection = markRaw(stream.useChannel('main')); connection = stream.useChannel('main');
this.connection.on('mention', onNote); connection.on('mention', onNote);
} else if (this.src == 'list') { } else if (props.src === 'list') {
endpoint = 'notes/user-list-timeline'; endpoint = 'notes/user-list-timeline';
this.query = { query = {
listId: this.list listId: props.list
}; };
this.connection = markRaw(stream.useChannel('userList', { connection = stream.useChannel('userList', {
listId: this.list listId: props.list
})); });
this.connection.on('note', prepend); connection.on('note', prepend);
this.connection.on('userAdded', onUserAdded); connection.on('userAdded', onUserAdded);
this.connection.on('userRemoved', onUserRemoved); connection.on('userRemoved', onUserRemoved);
} else if (this.src == 'channel') { } else if (props.src === 'channel') {
endpoint = 'channels/timeline'; endpoint = 'channels/timeline';
this.query = { query = {
channelId: this.channel channelId: props.channel
}; };
this.connection = markRaw(stream.useChannel('channel', { connection = stream.useChannel('channel', {
channelId: this.channel channelId: props.channel
})); });
this.connection.on('note', prepend); connection.on('note', prepend);
} }
this.pagination = { const pagination = {
endpoint: endpoint, endpoint: endpoint,
limit: 10, limit: 10,
params: init => ({ params: query,
untilDate: this.date?.getTime(),
...this.baseQuery, ...this.query
})
}; };
},
beforeUnmount() { onUnmounted(() => {
this.connection.dispose(); connection.dispose();
if (this.connection2) this.connection2.dispose(); if (connection2) connection2.dispose();
}, });
methods: { /* TODO
focus() { const timetravel = (date?: Date) => {
this.$refs.tl.focus();
},
timetravel(date?: Date) {
this.date = date; this.date = date;
this.$refs.tl.reload(); this.$refs.tl.reload();
} };
} */
});
</script> </script>

6
packages/client/src/components/ui/pagination.vue
View File

@ -59,6 +59,10 @@ const props = withDefaults(defineProps<{
displayLimit: 30, displayLimit: 30,
}); });
const emit = defineEmits<{
(e: 'queue', count: number): void;
}>();
const rootEl = ref<HTMLElement>(); const rootEl = ref<HTMLElement>();
const items = ref([]); const items = ref([]);
const queue = ref([]); const queue = ref([]);
@ -235,7 +239,7 @@ const append = (item) => {
watch(props.pagination.params, init, { deep: true }); watch(props.pagination.params, init, { deep: true });
watch(queue, (a, b) => { watch(queue, (a, b) => {
if (a.length === 0 && b.length === 0) return; if (a.length === 0 && b.length === 0) return;
this.$emit('queue', queue.value.length); emit('queue', queue.value.length);
}, { deep: true }); }, { deep: true });
init(); init();