1 files changed, 35 insertions, 39 deletions

diff --git a/src/client/scripts/paging.ts b/src/client/scripts/paging.ts
index 538615afa1..3d9668f108 100644
--- a/src/client/scripts/paging.ts
+++ b/src/client/scripts/paging.ts
@@ -1,8 +1,12 @@
+import { markRaw } from 'vue';
+import * as os from '@/os';
 import { onScrollTop, isTopVisible } from './scroll';
 
 const SECOND_FETCH_LIMIT = 30;
 
 export default (opts) => ({
+	emits: ['queue'],
+
 	data() {
 		return {
 			items: [],
@@ -14,13 +18,6 @@ export default (opts) => ({
 			more: false,
 			backed: false, // 遡り中か否か
 			isBackTop: false,
-			ilObserver: new IntersectionObserver(
-				(entries) => entries.some((entry) => entry.isIntersecting)
-					&& !this.moreFetching
-					&& !this.fetching
-					&& this.fetchMore()
-				),
-			loadMoreElement: null as Element,
 		};
 	},
 
@@ -35,41 +32,33 @@ export default (opts) => ({
 	},
 
 	watch: {
-		pagination() {
-			this.init();
+		pagination: {
+			handler() {
+				this.init();
+			},
+			deep: true
 		},
 
-		queue() {
-			this.$emit('queue', this.queue.length);
+		queue: {
+			handler(a, b) {
+				if (a.length === 0 && b.length === 0) return;
+				this.$emit('queue', this.queue.length);
+			},
+			deep: true
 		}
 	},
 
 	created() {
 		opts.displayLimit = opts.displayLimit || 30;
 		this.init();
-
-		this.$on('hook:activated', () => {
-			this.isBackTop = false;
-		});
-
-		this.$on('hook:deactivated', () => {
-			this.isBackTop = window.scrollY === 0;
-		});
 	},
 
-	mounted() {
-		this.$nextTick(() => {
-			if (this.$refs.loadMore) {
-				this.loadMoreElement = this.$refs.loadMore instanceof Element ? this.$refs.loadMore : this.$refs.loadMore.$el;
-				if (this.$store.state.device.enableInfiniteScroll) this.ilObserver.observe(this.loadMoreElement);
-				this.loadMoreElement.addEventListener('click', this.fetchMore);
-			}
-		});
+	activated() {
+		this.isBackTop = false;
 	},
 
-	beforeDestroy() {
-		this.ilObserver.disconnect();
-		if (this.$refs.loadMore) this.loadMoreElement.removeEventListener('click', this.fetchMore);
+	deactivated() {
+		this.isBackTop = window.scrollY === 0;
 	},
 
 	methods: {
@@ -78,19 +67,30 @@ export default (opts) => ({
 			this.init();
 		},
 
+		replaceItem(finder, data) {
+			const i = this.items.findIndex(finder);
+			this.items[i] = data;
+		},
+
+		removeItem(finder) {
+			const i = this.items.findIndex(finder);
+			this.items.splice(i, 1);
+		},
+
 		async init() {
 			this.queue = [];
 			this.fetching = true;
 			if (opts.before) opts.before(this);
 			let params = typeof this.pagination.params === 'function' ? this.pagination.params(true) : this.pagination.params;
 			if (params && params.then) params = await params;
+			if (params === null) return;
 			const endpoint = typeof this.pagination.endpoint === 'function' ? this.pagination.endpoint() : this.pagination.endpoint;
-			await this.$root.api(endpoint, {
+			await os.api(endpoint, {
 				...params,
 				limit: this.pagination.noPaging ? (this.pagination.limit || 10) : (this.pagination.limit || 10) + 1,
 			}).then(items => {
 				for (const item of items) {
-					Object.freeze(item);
+					markRaw(item);
 				}
 				if (!this.pagination.noPaging && (items.length > (this.pagination.limit || 10))) {
 					items.pop();
@@ -111,13 +111,13 @@ export default (opts) => ({
 		},
 
 		async fetchMore() {
-			if (!this.more || this.moreFetching || this.items.length === 0) return;
+			if (!this.more || this.fetching || this.moreFetching || this.items.length === 0) return;
 			this.moreFetching = true;
 			this.backed = true;
 			let params = typeof this.pagination.params === 'function' ? this.pagination.params(false) : this.pagination.params;
 			if (params && params.then) params = await params;
 			const endpoint = typeof this.pagination.endpoint === 'function' ? this.pagination.endpoint() : this.pagination.endpoint;
-			await this.$root.api(endpoint, {
+			await os.api(endpoint, {
 				...params,
 				limit: SECOND_FETCH_LIMIT + 1,
 				...(this.pagination.offsetMode ? {
@@ -129,7 +129,7 @@ export default (opts) => ({
 				}),
 			}).then(items => {
 				for (const item of items) {
-					Object.freeze(item);
+					markRaw(item);
 				}
 				if (items.length > SECOND_FETCH_LIMIT) {
 					items.pop();
@@ -172,9 +172,5 @@ export default (opts) => ({
 		append(item) {
 			this.items.push(item);
 		},
-
-		remove(find) {
-			this.items = this.items.filter(x => !find(x));
-		},
 	}
 });