diff --git a/src/components/AuthorizeUser.vue b/src/components/AuthorizeUser.vue index 2aed7f0..b39aa0e 100644 --- a/src/components/AuthorizeUser.vue +++ b/src/components/AuthorizeUser.vue @@ -19,8 +19,7 @@ onBeforeMount(async () => { if ("error" in token) { hasError.value = true } else { - token.access_token - saveCredentials(token) + await saveCredentials(token) } router.replace({ name: "Home" }) diff --git a/src/hooks/useRepos.hook.ts b/src/hooks/useRepos.hook.ts index 5cc51b1..79bcb39 100644 --- a/src/hooks/useRepos.hook.ts +++ b/src/hooks/useRepos.hook.ts @@ -1,4 +1,4 @@ -import { computed, ref } from "vue" +import { computed, ref, watch } from "vue" import { useGitHubLogin } from "@/hooks/useGitHubLogin.hook" import { RepoBase } from "@/modules/repo/interfaces/RepoBase" @@ -15,51 +15,70 @@ const currentPage = ref(0) const totalCount = ref(0) let lastFetchedAt = 0 -export const useRepos = () => { - const { username, accessToken } = useGitHubLogin() +const { username, accessToken } = useGitHubLogin() - const loadMore = async () => { - if (!accessToken.value || !username.value) { - isReady.value = true - return - } - if (isLoading.value) return - isLoading.value = true - try { - const octokit = await getOctokit() - const nextPage = currentPage.value + 1 - const repoList = await octokit.request("GET /search/repositories", { - q: `user:${username.value}`, - per_page: PER_PAGE, - page: nextPage - }) - 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 - ) - } catch (err: unknown) { - if ( - typeof err === "object" && - err !== null && - "status" in err && - (err as { status: number }).status === 401 - ) { - hasCredentialError.value = true - } else { - throw err - } - } finally { - isReady.value = true - isLoading.value = false - } +const resetState = () => { + repos.value = [] + currentPage.value = 0 + totalCount.value = 0 + isReady.value = false + isLoading.value = false + hasCredentialError.value = false + lastFetchedAt = 0 +} + +const loadMore = async () => { + if (!accessToken.value || !username.value) { + isReady.value = true + return } + if (isLoading.value) return + isLoading.value = true + try { + const octokit = await getOctokit() + const nextPage = currentPage.value + 1 + const repoList = await octokit.request("GET /search/repositories", { + q: `user:${username.value}`, + per_page: PER_PAGE, + page: nextPage + }) + 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 + ) + } catch (err: unknown) { + if ( + typeof err === "object" && + err !== null && + "status" in err && + (err as { status: number }).status === 401 + ) { + hasCredentialError.value = true + } else { + throw err + } + } finally { + isReady.value = true + isLoading.value = false + } +} +watch(accessToken, (next, prev) => { + if (next === prev) return + resetState() + if (next && username.value) { + lastFetchedAt = Date.now() + loadMore() + } +}) + +export const useRepos = () => { const canLoadMore = computed( () => !isLoading.value && repos.value.length < totalCount.value ) @@ -67,12 +86,7 @@ export const useRepos = () => { const isStale = Date.now() - lastFetchedAt > STALE_TIME_MS if (!isReady.value || isStale) { if (isStale && isReady.value) { - repos.value = [] - currentPage.value = 0 - totalCount.value = 0 - isReady.value = false - isLoading.value = false - hasCredentialError.value = false + resetState() } lastFetchedAt = Date.now() loadMore()