Refactor client (#4307)

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Fix bug

* 🎨

* 🎨

* 🎨

src/client/app/desktop/views/components/user-list-timeline.vue

@@ -1,6 +1,10 @@
 <template>
 <div>
-	<mk-notes ref="timeline" :more="existMore ? more : null"/>
+	<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')">
+		<template slot="header">
+			<slot></slot>
+		</template>
+	</mk-notes>
 </div>
 </template>
 
@@ -13,10 +17,28 @@ export default Vue.extend({
 	props: ['list'],
 	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
+					};
+				}
+			})
 		};
 	},
 	watch: {
@@ -37,63 +59,15 @@ 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() {
-			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) {
-			// Prepend a note
 			(this.$refs.timeline as any).prepend(note);
 		},
 		onUserAdded() {
-			this.fetch();
+			(this.$refs.timeline as any).reload();
 		},
 		onUserRemoved() {
-			this.fetch();
+			(this.$refs.timeline as any).reload();
 		}
 	}
 });