refactor: split out to useRepos composable

Author: danielroe

app/app.vue

@@ -3,6 +3,8 @@ useSeoMeta({
   title: 'unsight.dev',
   description: 'Detect duplicate GitHub issues, areas of concern and more across related repositories',
 })
+
+const { data: repos } = useRepos()
 </script>
 
 <template>
@@ -37,6 +39,8 @@ useSeoMeta({
       >
         @danielroe.dev
       </a>
+      &middot;
+      {{ repos.length }} repos
     </footer>
   </div>
 </template>

app/composables/repos.ts

@@ -0,0 +1,5 @@
+export const useRepos = () => useFetch('/api/repos', {
+  baseURL: useRuntimeConfig().public.remote,
+  getCachedData: (key, nuxtApp) => nuxtApp.payload.data[key] || nuxtApp.static.data[key],
+  default: () => [],
+})

app/pages/[owner]/[repo]/index.vue

@@ -2,10 +2,7 @@
 import hexRgb from 'hex-rgb'
 import rgbToHSL from 'rgb-to-hsl'
 
-const { data: allowedRepos } = useFetch('/api/repos', {
-  baseURL: useRuntimeConfig().public.remote,
-  default: () => [],
-})
+const { data: allowedRepos } = useRepos()
 
 const route = useRoute('owner-repo')
 const selectedRepo = computed(() => route.params.owner && route.params.repo ? `${route.params.owner}/${route.params.repo}` : 'nuxt/nuxt')
@@ -27,7 +24,7 @@ onMounted(async () => {
 })
 
 function navigateToRepo(event: Event) {
-  const [owner, repo] = (event.target as HTMLSelectElement).value.split('/')
+  const [owner, repo] = (event.target as HTMLSelectElement).value.split('/') as [string, string]
   return navigateTo({
     name: 'owner-repo',
     params: { owner, repo },

app/pages/index.vue

@@ -1,10 +1,7 @@
 <script setup lang="ts">
 const config = useRuntimeConfig()
 
-const { data: allowedRepos, refresh } = useFetch('/api/repos', {
-  baseURL: config.public.remote,
-  default: () => [],
-})
+const { data: allowedRepos, refresh } = useRepos()
 
 const installationURL = `https://github.com/apps/${config.public.github.appSlug}/installations/new`