fix `offestMode` in `MkPagination` - fixes #622

3f73251df5 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.
This commit is contained in:
dakkar 2024-08-16 14:41:04 +01:00
parent 994b6ef7d1
commit 90e9480b92
1 changed files with 12 additions and 6 deletions

View File

@ -43,7 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script lang="ts"> <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 Misskey from 'misskey-js';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js'; import { misskeyApi } from '@/scripts/misskey-api.js';
@ -199,11 +199,17 @@ watch(error, (n, o) => {
emit('status', n); 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> { async function init(): Promise<void> {
items.value = new Map(); items.value = new Map();
queue.value = new Map(); queue.value = new Map();
fetching.value = true; 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, { await misskeyApi<MisskeyEntity[]>(props.pagination.endpoint, {
...params, ...params,
limit: props.pagination.limit ?? 10, limit: props.pagination.limit ?? 10,
@ -239,8 +245,8 @@ const reload = (): Promise<void> => {
const fetchMore = async (): Promise<void> => { const fetchMore = async (): Promise<void> => {
if (!more.value || fetching.value || moreFetching.value || items.value.size === 0) return; if (!more.value || fetching.value || moreFetching.value || items.value.size === 0) return;
moreFetching.value = true; moreFetching.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, {});
const offsetMode = props.offsetMode ? isRef(props.offsetMode) ? props.offsetMode.value : props.offsetMode : false; const offsetMode = getActualValue(props.pagination.offsetMode, false);
await misskeyApi<MisskeyEntity[]>(props.pagination.endpoint, { await misskeyApi<MisskeyEntity[]>(props.pagination.endpoint, {
...params, ...params,
limit: SECOND_FETCH_LIMIT, limit: SECOND_FETCH_LIMIT,
@ -304,8 +310,8 @@ const fetchMore = async (): Promise<void> => {
const fetchMoreAhead = async (): Promise<void> => { const fetchMoreAhead = async (): Promise<void> => {
if (!more.value || fetching.value || moreFetching.value || items.value.size === 0) return; if (!more.value || fetching.value || moreFetching.value || items.value.size === 0) return;
moreFetching.value = true; moreFetching.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, {});
const offsetMode = props.offsetMode ? isRef(props.offsetMode) ? props.offsetMode.value : props.offsetMode : false; const offsetMode = getActualValue(props.pagination.offsetMode, false);
await misskeyApi<MisskeyEntity[]>(props.pagination.endpoint, { await misskeyApi<MisskeyEntity[]>(props.pagination.endpoint, {
...params, ...params,
limit: SECOND_FETCH_LIMIT, limit: SECOND_FETCH_LIMIT,