From 90e9480b92411373f4efba9884208a924a4d9fe8 Mon Sep 17 00:00:00 2001
From: dakkar <dakkar@thenautilus.net>
Date: Fri, 16 Aug 2024 14:41:04 +0100
Subject: [PATCH] fix `offestMode` in `MkPagination` - fixes #622
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

3f73251df5967ad47f61f1a6541f9d5ff6563f72 reworked the way `offsetMode`
is handled, to allow reactive `ComputedRef<boolean>` in addition to a
simple `boolean`, so that custom emoji search could easily switch
between the faster `sinceId`/`untilId` pagination and the slower
`offset` as needed.

Or it would have, if I had written the correct expression! I wrote
`props.offsetMode` instead of `props.pagination.offsetMode`, so it was
always `false`

I have *no idea* how I didn't notice, I swear I tested it ☹

Anyway, factoring out the nested ternaries makes the whole thing
clearer and less prone to mistakes. And I have tested it, this time.
---
 .../frontend/src/components/MkPagination.vue   | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index 9a324849e2..4f2a4d2703 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -43,7 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, isRef, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onDeactivated, ref, shallowRef, watch } from 'vue';
+import { computed, ComputedRef, isRef, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onDeactivated, ref, shallowRef, watch, type Ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
@@ -199,11 +199,17 @@ watch(error, (n, o) => {
 	emit('status', n);
 });
 
+function getActualValue<T>(input: T|Ref<T>|undefined, defaultValue: T) : T {
+		if (!input) return defaultValue;
+		if (isRef(input)) return input.value;
+		return input;
+}
+
 async function init(): Promise<void> {
 	items.value = new Map();
 	queue.value = new Map();
 	fetching.value = true;
-	const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
+	const params = getActualValue<Paging['params']>(props.pagination.params, {});
 	await misskeyApi<MisskeyEntity[]>(props.pagination.endpoint, {
 		...params,
 		limit: props.pagination.limit ?? 10,
@@ -239,8 +245,8 @@ const reload = (): Promise<void> => {
 const fetchMore = async (): Promise<void> => {
 	if (!more.value || fetching.value || moreFetching.value || items.value.size === 0) return;
 	moreFetching.value = true;
-	const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
-	const offsetMode = props.offsetMode ? isRef(props.offsetMode) ? props.offsetMode.value : props.offsetMode : false;
+	const params = getActualValue<Paging['params']>(props.pagination.params, {});
+	const offsetMode = getActualValue(props.pagination.offsetMode, false);
 	await misskeyApi<MisskeyEntity[]>(props.pagination.endpoint, {
 		...params,
 		limit: SECOND_FETCH_LIMIT,
@@ -304,8 +310,8 @@ const fetchMore = async (): Promise<void> => {
 const fetchMoreAhead = async (): Promise<void> => {
 	if (!more.value || fetching.value || moreFetching.value || items.value.size === 0) return;
 	moreFetching.value = true;
-	const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
-	const offsetMode = props.offsetMode ? isRef(props.offsetMode) ? props.offsetMode.value : props.offsetMode : false;
+	const params = getActualValue<Paging['params']>(props.pagination.params, {});
+	const offsetMode = getActualValue(props.pagination.offsetMode, false);
 	await misskeyApi<MisskeyEntity[]>(props.pagination.endpoint, {
 		...params,
 		limit: SECOND_FETCH_LIMIT,