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.
46 lines
1.1 KiB
TypeScript
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
|
|
}
|
|
}
|