Refactor client (#4307)

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Fix bug

* 🎨

* 🎨

* 🎨

src/client/app/mobile/views/components/user-timeline.vue

@@ -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>