Refactor client (#4307)
* wip * wip * wip * wip * wip * wip * wip * Fix bug * 🎨 * 🎨 * 🎨
This commit is contained in:
syuilo
GitHub
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="mk-notes">
|
||||
<slot name="head"></slot>
|
||||
<div class="ivaojijs">
|
||||
<slot name="empty" v-if="notes.length == 0 && !fetching && inited"></slot>
|
||||
|
||||
<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
|
||||
<mk-error v-if="!fetching && !inited" @retry="init()"/>
|
||||
|
||||
<div class="placeholder" v-if="fetching">
|
||||
<template v-for="i in 10">
|
||||
@ -10,8 +10,6 @@
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<mk-error v-if="!fetching && requestInitPromise != null" @retry="resolveInitPromise"/>
|
||||
|
||||
<!-- トランジションを有効にするとなぜかメモリリークする -->
|
||||
<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="transition" tag="div">
|
||||
<template v-for="(note, i) in _notes">
|
||||
@ -23,8 +21,8 @@
|
||||
</template>
|
||||
</component>
|
||||
|
||||
<footer v-if="more">
|
||||
<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
|
||||
<footer v-if="cursor != null">
|
||||
<button @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
|
||||
<template v-if="!moreFetching">{{ $t('@.load-more') }}</template>
|
||||
<template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template>
|
||||
</button>
|
||||
@ -41,20 +39,21 @@ const displayLimit = 30;
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n(),
|
||||
|
||||
props: {
|
||||
more: {
|
||||
type: Function,
|
||||
required: false
|
||||
makePromise: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
requestInitPromise: null as () => Promise<any[]>,
|
||||
notes: [],
|
||||
queue: [],
|
||||
fetching: true,
|
||||
moreFetching: false
|
||||
moreFetching: false,
|
||||
inited: false,
|
||||
cursor: null
|
||||
};
|
||||
},
|
||||
|
||||
@ -80,6 +79,10 @@ export default Vue.extend({
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
window.addEventListener('scroll', this.onScroll, { passive: true });
|
||||
},
|
||||
@ -97,27 +100,41 @@ export default Vue.extend({
|
||||
Vue.set((this as any).notes, i, note);
|
||||
},
|
||||
|
||||
init(promiseGenerator: () => Promise<any[]>) {
|
||||
this.requestInitPromise = promiseGenerator;
|
||||
this.resolveInitPromise();
|
||||
},
|
||||
|
||||
resolveInitPromise() {
|
||||
reload() {
|
||||
this.queue = [];
|
||||
this.notes = [];
|
||||
this.init();
|
||||
},
|
||||
|
||||
init() {
|
||||
this.fetching = true;
|
||||
|
||||
const promise = this.requestInitPromise();
|
||||
|
||||
promise.then(notes => {
|
||||
this.notes = notes;
|
||||
this.requestInitPromise = null;
|
||||
this.makePromise().then(x => {
|
||||
if (Array.isArray(x)) {
|
||||
this.notes = x;
|
||||
} else {
|
||||
this.notes = x.notes;
|
||||
this.cursor = x.cursor;
|
||||
}
|
||||
this.inited = true;
|
||||
this.fetching = false;
|
||||
this.$emit('inited');
|
||||
}, e => {
|
||||
this.fetching = false;
|
||||
});
|
||||
},
|
||||
|
||||
more() {
|
||||
if (this.cursor == null || this.moreFetching) return;
|
||||
this.moreFetching = true;
|
||||
this.makePromise(this.cursor).then(x => {
|
||||
this.notes = this.notes.concat(x.notes);
|
||||
this.cursor = x.cursor;
|
||||
this.moreFetching = false;
|
||||
}, e => {
|
||||
this.moreFetching = false;
|
||||
});
|
||||
},
|
||||
|
||||
prepend(note, silent = false) {
|
||||
// 弾く
|
||||
if (shouldMuteNote(this.$store.state.i, this.$store.state.settings, note)) return;
|
||||
@ -144,10 +161,6 @@ export default Vue.extend({
|
||||
this.notes.push(note);
|
||||
},
|
||||
|
||||
tail() {
|
||||
return this.notes[this.notes.length - 1];
|
||||
},
|
||||
|
||||
releaseQueue() {
|
||||
for (const n of this.queue) {
|
||||
this.prepend(n, true);
|
||||
@ -155,15 +168,6 @@ export default Vue.extend({
|
||||
this.queue = [];
|
||||
},
|
||||
|
||||
async loadMore() {
|
||||
if (this.more == null) return;
|
||||
if (this.moreFetching) return;
|
||||
|
||||
this.moreFetching = true;
|
||||
await this.more();
|
||||
this.moreFetching = false;
|
||||
},
|
||||
|
||||
onScroll() {
|
||||
if (this.isScrollTop()) {
|
||||
this.releaseQueue();
|
||||
@ -176,7 +180,7 @@ export default Vue.extend({
|
||||
if (this.$el.offsetHeight == 0) return;
|
||||
|
||||
const current = window.scrollY + window.innerHeight;
|
||||
if (current > document.body.offsetHeight - 8) this.loadMore();
|
||||
if (current > document.body.offsetHeight - 8) this.more();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -184,7 +188,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-notes
|
||||
.ivaojijs
|
||||
overflow hidden
|
||||
background var(--face)
|
||||
border-radius 8px
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<mk-notes ref="timeline" :more="existMore ? more : null"/>
|
||||
<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -14,19 +14,31 @@ export default Vue.extend({
|
||||
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
moreFetching: false,
|
||||
existMore: false,
|
||||
connection: null
|
||||
connection: null,
|
||||
makePromise: cursor => this.$root.api('notes/user-list-timeline', {
|
||||
listId: this.list.id,
|
||||
limit: fetchLimit + 1,
|
||||
untilId: cursor ? cursor : undefined,
|
||||
includeMyRenotes: this.$store.state.settings.showMyRenotes,
|
||||
includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
|
||||
includeLocalRenotes: this.$store.state.settings.showLocalRenotes
|
||||
}).then(notes => {
|
||||
if (notes.length == fetchLimit + 1) {
|
||||
notes.pop();
|
||||
return {
|
||||
notes: notes,
|
||||
cursor: notes[notes.length - 1].id
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
notes: notes,
|
||||
cursor: null
|
||||
};
|
||||
}
|
||||
})
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
canFetchMore(): boolean {
|
||||
return !this.moreFetching && !this.fetching && this.existMore;
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
$route: 'init'
|
||||
},
|
||||
@ -48,59 +60,6 @@ export default Vue.extend({
|
||||
this.connection.on('note', this.onNote);
|
||||
this.connection.on('userAdded', this.onUserAdded);
|
||||
this.connection.on('userRemoved', this.onUserRemoved);
|
||||
|
||||
this.fetch();
|
||||
},
|
||||
|
||||
fetch() {
|
||||
this.fetching = true;
|
||||
|
||||
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
|
||||
this.$root.api('notes/user-list-timeline', {
|
||||
listId: this.list.id,
|
||||
limit: fetchLimit + 1,
|
||||
includeMyRenotes: this.$store.state.settings.showMyRenotes,
|
||||
includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
|
||||
includeLocalRenotes: this.$store.state.settings.showLocalRenotes
|
||||
}).then(notes => {
|
||||
if (notes.length == fetchLimit + 1) {
|
||||
notes.pop();
|
||||
this.existMore = true;
|
||||
}
|
||||
res(notes);
|
||||
this.fetching = false;
|
||||
this.$emit('loaded');
|
||||
}, rej);
|
||||
}));
|
||||
},
|
||||
|
||||
more() {
|
||||
if (!this.canFetchMore) return;
|
||||
|
||||
this.moreFetching = true;
|
||||
|
||||
const promise = this.$root.api('notes/user-list-timeline', {
|
||||
listId: this.list.id,
|
||||
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
|
||||
});
|
||||
|
||||
promise.then(notes => {
|
||||
if (notes.length == fetchLimit + 1) {
|
||||
notes.pop();
|
||||
} else {
|
||||
this.existMore = false;
|
||||
}
|
||||
for (const n of notes) {
|
||||
(this.$refs.timeline as any).append(n);
|
||||
}
|
||||
this.moreFetching = false;
|
||||
});
|
||||
|
||||
return promise;
|
||||
},
|
||||
|
||||
onNote(note) {
|
||||
@ -109,11 +68,11 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
onUserAdded() {
|
||||
this.fetch();
|
||||
(this.$refs.timeline as any).reload();
|
||||
},
|
||||
|
||||
onUserRemoved() {
|
||||
this.fetch();
|
||||
(this.$refs.timeline as any).reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="mk-user-timeline">
|
||||
<mk-notes ref="timeline" :more="existMore ? more : null">
|
||||
<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')">
|
||||
<div slot="empty">
|
||||
<fa :icon="['far', 'comments']"/>
|
||||
{{ withMedia ? this.$t('no-notes-with-media') : this.$t('no-notes') }}
|
||||
@ -17,73 +17,31 @@ const fetchLimit = 10;
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n('mobile/views/components/user-timeline.vue'),
|
||||
|
||||
props: ['user', 'withMedia'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
existMore: false,
|
||||
moreFetching: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
canFetchMore(): boolean {
|
||||
return !this.moreFetching && !this.fetching && this.existMore;
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.fetch();
|
||||
},
|
||||
|
||||
methods: {
|
||||
fetch() {
|
||||
this.fetching = true;
|
||||
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
|
||||
this.$root.api('users/notes', {
|
||||
userId: this.user.id,
|
||||
withFiles: this.withMedia,
|
||||
limit: fetchLimit + 1,
|
||||
untilDate: new Date().getTime() + 1000 * 86400 * 365
|
||||
}).then(notes => {
|
||||
if (notes.length == fetchLimit + 1) {
|
||||
notes.pop();
|
||||
this.existMore = true;
|
||||
}
|
||||
res(notes);
|
||||
this.fetching = false;
|
||||
this.$emit('loaded');
|
||||
}, rej);
|
||||
}));
|
||||
},
|
||||
|
||||
more() {
|
||||
if (!this.canFetchMore) return;
|
||||
|
||||
this.moreFetching = true;
|
||||
|
||||
const promise = this.$root.api('users/notes', {
|
||||
makePromise: cursor => this.$root.api('users/notes', {
|
||||
userId: this.user.id,
|
||||
withFiles: this.withMedia,
|
||||
limit: fetchLimit + 1,
|
||||
untilDate: new Date((this.$refs.timeline as any).tail().createdAt).getTime()
|
||||
});
|
||||
|
||||
promise.then(notes => {
|
||||
withFiles: this.withMedia,
|
||||
untilId: cursor ? cursor : undefined
|
||||
}).then(notes => {
|
||||
if (notes.length == fetchLimit + 1) {
|
||||
notes.pop();
|
||||
return {
|
||||
notes: notes,
|
||||
cursor: notes[notes.length - 1].id
|
||||
};
|
||||
} else {
|
||||
this.existMore = false;
|
||||
return {
|
||||
notes: notes,
|
||||
cursor: null
|
||||
};
|
||||
}
|
||||
for (const n of notes) {
|
||||
(this.$refs.timeline as any).append(n);
|
||||
}
|
||||
this.moreFetching = false;
|
||||
});
|
||||
|
||||
return promise;
|
||||
}
|
||||
})
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user