Frontend: Refactored pagination

fe_calckey/frontend/client/src/components/MkDateSeparatedList.vue

@@ -30,11 +30,6 @@ export default defineComponent({
             required: false,
             default: false,
         },
-        ad: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
     },
 
     setup(props, { slots, expose }) {

fe_calckey/frontend/client/src/components/MkNotes.vue

@@ -20,7 +20,6 @@
                     :direction="pagination.reversed ? 'up' : 'down'"
                     :reversed="pagination.reversed"
                     :no-gap="noGap"
-                    :ad="true"
                     class="notes"
                 >
                     <XNoteResolvingProxy

fe_calckey/frontend/client/src/components/MkPagination.vue

@@ -19,7 +19,7 @@
 
         <div v-else ref="rootEl" class="list">
             <div
-                v-show="pagination.reversed && more"
+                v-show="pagination.reversed && hasMore"
                 key="_more_"
                 class="cxiknjgy _gap"
             >
@@ -29,7 +29,7 @@
                     :disabled="moreFetching"
                     :style="{ cursor: moreFetching ? 'wait' : 'pointer' }"
                     primary
-                    @click="fetchMoreAhead"
+                    @click="fetchMore"
                 >
                     {{ i18n.ts.loadMore }}
                 </MkButton>
@@ -37,7 +37,7 @@
             </div>
             <slot :items="items"></slot>
             <div
-                v-show="!pagination.reversed && more"
+                v-show="!pagination.reversed && hasMore"
                 key="_more_"
                 class="cxiknjgy _gap"
             >
@@ -134,7 +134,7 @@ const queue = ref<Item[]>([]);
 const offset = ref(0);
 const fetching = ref(true);
 const moreFetching = ref(false);
-const more = ref(false);
+const hasMore = ref(false);
 const backed = ref(false); // 遡り中か否か
 const isBackTop = ref(false);
 const empty = computed(() => items.value.length === 0);
@@ -151,27 +151,14 @@ const init = async (): Promise<void> => {
     await os
         .api(props.pagination.endpoint, {
             ...params,
-            limit: props.pagination.noPaging
+            limit: props.pagination.limit || 10,
-                ? props.pagination.limit || 10
-                : (props.pagination.limit || 10) + 1,
         })
         .then(
             (res) => {
-                if (
-                    !props.pagination.noPaging &&
-                    res.length > (props.pagination.limit || 10)
-                ) {
-                    res.pop();
                 items.value = props.pagination.reversed
                     ? [...res].reverse()
                     : res;
-                    more.value = true;
+                hasMore.value = !props.pagination.noPaging && res.length > 0;
-                } else {
-                    items.value = props.pagination.reversed
-                        ? [...res].reverse()
-                        : res;
-                    more.value = false;
-                }
                 offset.value = res.length;
                 error.value = false;
                 fetching.value = false;
@@ -202,17 +189,14 @@ const refresh = async (): Promise<void> => {
         })
         .then(
             (res) => {
-                let ids = items.value.reduce((a, b) => {
+                let ids = new Set(items.value.map((i) => i.id));
-                    a[b.id] = true;
-                    return a;
-                }, {} as { [id: string]: boolean });
 
                 for (let i = 0; i < res.length; i++) {
                     const item = res[i];
                     if (!updateItem(item.id, (old) => item)) {
                         append(item);
                     }
-                    delete ids[item.id];
+                    ids.delete(item.id);
                 }
 
                 for (const id in ids) {
@@ -228,12 +212,13 @@ const refresh = async (): Promise<void> => {
 
 const fetchMore = async (): Promise<void> => {
     if (
-        !more.value ||
+        !hasMore.value ||
         fetching.value ||
         moreFetching.value ||
         items.value.length === 0
     )
         return;
+
     moreFetching.value = true;
     backed.value = true;
     const params = props.pagination.params
@@ -241,117 +226,34 @@ const fetchMore = async (): Promise<void> => {
             ? props.pagination.params.value
             : props.pagination.params
         : {};
+    const lastItem = items.value.at(props.pagination.reversed ? 0 : -1);
     await os
         .api(props.pagination.endpoint, {
             ...params,
-            limit: SECOND_FETCH_LIMIT + 1,
+            limit: SECOND_FETCH_LIMIT,
             ...(props.pagination.offsetMode
                 ? {
                       offset: offset.value,
                   }
-                : props.pagination.reversed
-                ? {
-                      sinceDate: new Date(
-                          magTransProperty(
-                              items.value[0],
-                              "createdAt",
-                              "created_at"
-                          )
-                      ).getTime(),
-                      sinceId: items.value[0].id,
-                  }
                 : {
-                      untilDate: new Date(
+                      untilDate: lastItem
+                          ? new Date(
                                 magTransProperty(
-                              items.value[items.value.length - 1],
+                                    lastItem,
                                     "createdAt",
                                     "created_at"
                                 )
-                      ).getTime(),
+                            ).getTime()
-                      untilId: items.value[items.value.length - 1].id,
+                          : undefined,
+                      untilId: lastItem?.id ?? undefined,
                   }),
         })
         .then(
             (res) => {
-                if (res.length > SECOND_FETCH_LIMIT) {
-                    res.pop();
                 items.value = props.pagination.reversed
                     ? [...res].reverse().concat(items.value)
                     : items.value.concat(res);
-                    more.value = true;
+                hasMore.value = res.length > 0;
-                } else {
-                    items.value = props.pagination.reversed
-                        ? [...res].reverse().concat(items.value)
-                        : items.value.concat(res);
-                    more.value = false;
-                }
-                offset.value += res.length;
-                moreFetching.value = false;
-            },
-            (err) => {
-                moreFetching.value = false;
-            }
-        );
-};
-
-const fetchMoreAhead = async (): Promise<void> => {
-    if (
-        !more.value ||
-        fetching.value ||
-        moreFetching.value ||
-        items.value.length === 0
-    )
-        return;
-    moreFetching.value = true;
-    const params = props.pagination.params
-        ? isRef(props.pagination.params)
-            ? props.pagination.params.value
-            : props.pagination.params
-        : {};
-    await os
-        .api(props.pagination.endpoint, {
-            ...params,
-            limit: SECOND_FETCH_LIMIT + 1,
-            ...(props.pagination.offsetMode
-                ? {
-                      offset: offset.value,
-                  }
-                : props.pagination.reversed
-                ? {
-                      untilDate: new Date(
-                          magTransProperty(
-                              items.value[0],
-                              "createdAt",
-                              "created_at"
-                          )
-                      ),
-                      untilId: items.value[0].id,
-                  }
-                : {
-                      sinceDate: new Date(
-                          magTransProperty(
-                              items.value[items.value.length - 1],
-                              "createdAt",
-                              "created_at"
-                          )
-                      ),
-                      sinceId: items.value[items.value.length - 1].createdAt,
-                  }),
-        })
-        .then(
-            (res) => {
-                if (res.length > SECOND_FETCH_LIMIT) {
-                    res.pop();
-                    items.value = props.pagination.reversed
-                        ? [...res].reverse().concat(items.value)
-                        : items.value.concat(res);
-                    more.value = true;
-                } else {
-                    items.value = props.pagination.reversed
-                        ? [...res].reverse().concat(items.value)
-                        : items.value.concat(res);
-                    more.value = false;
-                }
                 offset.value += res.length;
                 moreFetching.value = false;
             },
@@ -373,15 +275,8 @@ const prepend = (item: Item): void => {
                 const height = container.scrollHeight;
                 const isBottom = pos + viewHeight > height - 32;
                 if (isBottom) {
-                    // オーバーフローしたら古いアイテムは捨てる
+                    items.value = items.value.slice(-props.displayLimit);
-                    if (items.value.length >= props.displayLimit) {
+                    hasMore.value = true;
-                        // このやり方だとVue 3.2以降アニメーションが動かなくなる
-                        //items.value = items.value.slice(-props.displayLimit);
-                        while (items.value.length >= props.displayLimit) {
-                            items.value.shift();
-                        }
-                        more.value = true;
-                    }
                 }
             }
         }
@@ -402,18 +297,9 @@ const prepend = (item: Item): void => {
         if (isTop) {
             // Prepend the item
             items.value.unshift(item);
-
+            items.value = items.value.slice(0, props.displayLimit);
-            // オーバーフローしたら古いアイテムは捨てる
-            if (items.value.length >= props.displayLimit) {
-                // このやり方だとVue 3.2以降アニメーションが動かなくなる
-                //this.items = items.value.slice(0, props.displayLimit);
-                while (items.value.length >= props.displayLimit) {
-                    items.value.pop();
-                }
-                more.value = true;
-            }
         } else {
-            queue.value.push(item);
+            if (!queue.value.length) {
                 onScrollTop(rootEl.value, () => {
                     for (const queueItem of queue.value) {
                         prepend(queueItem);
@@ -421,6 +307,10 @@ const prepend = (item: Item): void => {
                     queue.value = [];
                 });
             }
+
+            queue.value.push(item);
+            queue.value = queue.value.slice(0, props.displayLimit);
+        }
     }
 };
 

fe_calckey/frontend/client/src/pages/favorites.vue

@@ -20,7 +20,6 @@
                         :items="items"
                         :direction="'down'"
                         :no-gap="false"
-                        :ad="false"
                     >
                         <XNoteResolvingProxy
                             :key="item.id"

fe_calckey/frontend/client/src/pages/note.vue

@@ -114,6 +114,7 @@ const nextPagination = {
         appearNote
             ? {
                   userId: appearNote.user.id,
+                  sinceDate: new Date(appearNote.created_at).getTime(),
                   sinceId: appearNote.id,
               }
             : null