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.

src/hooks/useRepos.hook.ts

@@ -1,34 +1,47 @@
-import { useAsyncState } from "@vueuse/core"
+import { computed, ref } from "vue"
 
 import { useGitHubLogin } from "@/hooks/useGitHubLogin.hook"
 import { RepoBase } from "@/modules/repo/interfaces/RepoBase"
 import { getOctokit } from "@/modules/repo/services/octo"
 
+const PER_PAGE = 30
+
 export const useRepos = () => {
   const { username, accessToken } = useGitHubLogin()
-  const repos = useAsyncState<RepoBase[]>(async () => {
+
+  const repos = ref<RepoBase[]>([])
+  const isReady = ref(false)
+  const currentPage = ref(0)
+  const totalCount = ref(0)
+
+  const loadMore = async () => {
     if (!accessToken.value || !username.value) {
-      return []
+      isReady.value = true
+      return
     }
-
     const octokit = await getOctokit()
-
+    const nextPage = currentPage.value + 1
     const repoList = await octokit.request("GET /search/repositories", {
       q: `user:${username.value}`,
-      per_page: 100
+      per_page: PER_PAGE,
+      page: nextPage
     })
-
-    return repoList.data.items
-      .map((item) => ({
-        id: `${item.id}`,
-        name: item.name,
-        isPrivate: item.private
-      }))
-      .sort((a, b) => (a.name < b.name ? -1 : 1))
-  }, [])
-
-  return {
-    repos: repos.state,
-    isReady: repos.isReady
+    currentPage.value = nextPage
+    totalCount.value = repoList.data.total_count
+    const newItems = repoList.data.items.map((item) => ({
+      id: `${item.id}`,
+      name: item.name,
+      isPrivate: item.private
+    }))
+    repos.value = [...repos.value, ...newItems].sort((a, b) =>
+      a.name < b.name ? -1 : 1
+    )
+    isReady.value = true
   }
+
+  const canLoadMore = computed(() => repos.value.length < totalCount.value)
+
+  loadMore()
+
+  return { repos, isReady, canLoadMore, loadMore }
 }