slibra-module-web/src/composables/useInfinite.js

import { ref, unref, onMounted, computed } from "vue";
import { chatApi } from '@/api/chat';

export const useInfinite = (path, props) => {
  const pageParams = ref({ page: 1, pageSize: 20 });

  const recordList = ref([]);
  const isFetching = ref(false);
  const counter = ref(0);
  const noMore = ref(false);

  const isMore = computed(() => pageParams.value.page * pageParams.value.pageSize < counter.value);

  const addHistoryRecord = record => {
    recordList.value.unshift(...record);
  }

  const onScrolltolower = async () => {

    if(unref(isFetching) || unref(noMore)) return;

    isFetching.value = true;

    const { rows, total } = await initRecordData();
    
    recordList.value.push(...rows);

    counter.value = total;

    if (unref(isMore)) {
      pageParams.value.page ++;
    } else {
      noMore.value = true;
    }

    isFetching.value = false;
  }

  const onReset = async () => {
    const { rows, total } = await initRecordData();

    recordList.value = rows;
    counter.value = total;
    noMore.value = !unref(isMore);
  }

  const onRestore = async (params) => {
    pageParams.value = { page: 1, pageSize: 20 };
    const { rows, total } = await initRecordData(params);
    recordList.value = rows;
    counter.value = total;
  }

  const initRecordData = async (params = {}) => {
    const reqParams = {
      ...props,
      ...params,
      ...pageParams.value
    }
    return await chatApi.getRecordFetch(path, reqParams);
  }

  onMounted(() => onScrolltolower());

  return {
    recordList,
    isFetching,
    onScrolltolower,
    onReset,
    onRestore,
    addHistoryRecord
  }
}