Files
remanso/src/modules/repo/hooks/useRepoList.hook.ts
Julien Calixte 006cd63388 feat: paginate repo list with infinite scroll
Load 30 repos at a time instead of 100 at once, showing data sooner.
Adds v-infinite-scroll to RepoList.vue to fetch subsequent pages on scroll.
2026-04-05 11:56:36 +02:00

46 lines
1.1 KiB
TypeScript

import { computed } from "vue"
import { useRepos } from "@/hooks/useRepos.hook"
import { useFavoriteRepos } from "@/modules/repo/hooks/useFavoriteRepos.hook"
import { RepoBase } from "@/modules/repo/interfaces/RepoBase"
export const useRepoList = () => {
const { savedFavoriteRepos, addFavorite, removeFavorite } = useFavoriteRepos()
const { repos, canLoadMore, loadMore } = useRepos()
const favoriteRepos = computed(() => {
return repos.value.filter((repo) =>
savedFavoriteRepos.value.find(
(fav) => fav._id?.includes(repo.id) ?? false
)
)
})
const otherRepos = computed(() => {
return repos.value.filter(
(repo) => !favoriteRepos.value.find((favorite) => favorite.id === repo.id)
)
})
const favoriteCheckboxes = computed(() =>
favoriteRepos.value.map((favorite) => favorite.id)
)
const toggleCheckbox = async (repo: RepoBase) => {
if (favoriteCheckboxes.value.includes(repo.id)) {
await removeFavorite(repo)
} else {
await addFavorite(repo)
}
}
return {
favoriteRepos,
otherRepos,
favoriteCheckboxes,
toggleCheckbox,
canLoadMore,
loadMore
}
}