Mandarin Duck
Problem in doing paginations between 2 composables
Hi, so I am making 2 composables
usePaginations.ts
`
So the problem is that the computed variables has logger and it logged with correct variables object but actually the query passed empty object and this is only happens when prevPage is invoked. nextPage works beautifully.
Helps, appreciated. Thank you.
export const usePaginations = () => {
const perPage = ref<number>(8)
const totalItems = ref<number>(0)
const currentPage = ref(0)
const cursorNextPage = ref<string | null>(null)
const cursorPrevPage = ref<string | null>(null)
const cursor = ref<string | null>(null)
const hasNextPage = ref<boolean>(false)
const hasPreviousPage = ref<boolean>(false)
const isForward = ref(true)
const totalCount = ref(0)
const updateFromPaginator = (e: any) => {
e.page > currentPage.value ? nextPage() : prevPage()
}
// Go to the next page using the new cursor
const nextPage = (): void => {
isForward.value = true
if (hasNextPage.value && cursorNextPage.value) {
cursor.value = cursorNextPage.value
currentPage.value++
}
}
// Go to the previous page by removing the last cursor and updating the current one
const prevPage = (): void => {
isForward.value = false
if (hasPreviousPage.value && cursorPrevPage.value) {
nextTick(() => {
cursor.value = cursorPrevPage.value
currentPage.value--
})
}
}
// Reset pagination (clear cursor history)
const resetPagination = (): void => {
cursor.value = null
}
return {
perPage,
totalItems,
cursor,
cursorNextPage,
cursorPrevPage,
hasNextPage,
hasPreviousPage,
resetPagination,
updateFromPaginator,
isForward,
totalCount
}
}
export const usePaginations = () => {
const perPage = ref<number>(8)
const totalItems = ref<number>(0)
const currentPage = ref(0)
const cursorNextPage = ref<string | null>(null)
const cursorPrevPage = ref<string | null>(null)
const cursor = ref<string | null>(null)
const hasNextPage = ref<boolean>(false)
const hasPreviousPage = ref<boolean>(false)
const isForward = ref(true)
const totalCount = ref(0)
const updateFromPaginator = (e: any) => {
e.page > currentPage.value ? nextPage() : prevPage()
}
// Go to the next page using the new cursor
const nextPage = (): void => {
isForward.value = true
if (hasNextPage.value && cursorNextPage.value) {
cursor.value = cursorNextPage.value
currentPage.value++
}
}
// Go to the previous page by removing the last cursor and updating the current one
const prevPage = (): void => {
isForward.value = false
if (hasPreviousPage.value && cursorPrevPage.value) {
nextTick(() => {
cursor.value = cursorPrevPage.value
currentPage.value--
})
}
}
// Reset pagination (clear cursor history)
const resetPagination = (): void => {
cursor.value = null
}
return {
perPage,
totalItems,
cursor,
cursorNextPage,
cursorPrevPage,
hasNextPage,
hasPreviousPage,
resetPagination,
updateFromPaginator,
isForward,
totalCount
}
}
6 replies