🐛 (home) watch props to retrieve repo on change

src/hooks/useNote.hook.ts

@@ -1,8 +1,8 @@
+import { Ref, ref } from '@vue/reactivity'
 import { nextTick, onUnmounted, watch } from '@vue/runtime-core'
 import { useRoute, useRouter } from 'vue-router'
 
 import { noteEventBus } from '@/bus/noteBusEvent'
-import { ref } from '@vue/reactivity'
 import { useLinks } from '@/hooks/useLinks.hook'
 import { useRepo } from '@/hooks/useRepo.hook'
 
@@ -13,7 +13,7 @@ const sanitizePath = (path: string) => {
   return decodeURIComponent(path)
 }
 
-export const useNote = (user?: string, repo?: string) => {
+export const useNote = (user: Ref<string>, repo: Ref<string>) => {
   const { push } = useRouter()
   const { query } = useRoute()
   const stackedNotes = ref(
@@ -24,14 +24,6 @@ export const useNote = (user?: string, repo?: string) => {
       : []
   )
 
-  if (!user || !repo) {
-    return {
-      readme: ref(null),
-      notFound: ref(true),
-      stackedNotes
-    }
-  }
-
   const { readme, notFound, tree } = useRepo(user, repo)
   const { listenToClick } = useLinks('note-display')
 
@@ -78,8 +70,8 @@ export const useNote = (user?: string, repo?: string) => {
       push({
         name: 'Home',
         params: {
-          user,
-          repo
+          user: user.value,
+          repo: repo.value
         },
         query: {
           stackedNotes: newStackedNotes
@@ -90,12 +82,10 @@ export const useNote = (user?: string, repo?: string) => {
     }
   )
 
-  watch(readme, () => {
-    if (readme.value) {
-      nextTick(() => {
-        listenToClick()
-      })
-    }
+  watch([readme, user, repo], () => {
+    nextTick(() => {
+      listenToClick()
+    })
   })
 
   onUnmounted(() => {

src/hooks/useRepo.hook.ts

@@ -1,4 +1,4 @@
-import { onMounted, ref } from '@vue/runtime-core'
+import { Ref, onMounted, ref, watch } from '@vue/runtime-core'
 
 import { request } from '@octokit/request'
 import { useMarkdown } from '@/hooks/useMarkdown.hook'
@@ -12,17 +12,21 @@ interface Tree {
   url?: string
 }
 
-export const useRepo = (owner: string, repo: string) => {
+export const useRepo = (owner: Ref<string>, repo: Ref<string>) => {
   const { render } = useMarkdown()
   const readme = ref<string | null>(null)
   const notFound = ref(false)
   const tree = ref<Tree[]>([])
 
-  onMounted(async () => {
+  const retrieveRepo = async () => {
+    if (!owner.value || !repo.value) {
+      return
+    }
+
     try {
       const README = await request('GET /repos/{owner}/{repo}/readme', {
-        repo,
-        owner
+        repo: repo.value,
+        owner: owner.value
       })
 
       if (README) {
@@ -30,8 +34,8 @@ export const useRepo = (owner: string, repo: string) => {
       }
 
       const commits = await request('GET /repos/{owner}/{repo}/commits', {
-        owner,
-        repo
+        repo: repo.value,
+        owner: owner.value
       })
 
       const lastCommit = commits.data.shift()
@@ -43,8 +47,8 @@ export const useRepo = (owner: string, repo: string) => {
       const treeResponse = await request(
         'GET /repos/{owner}/{repo}/git/trees/{tree_sha}',
         {
-          owner,
-          repo,
+          repo: repo.value,
+          owner: owner.value,
           tree_sha: lastCommit.commit.tree.sha,
           recursive: 'true'
         }
@@ -57,7 +61,11 @@ export const useRepo = (owner: string, repo: string) => {
     } catch (error) {
       notFound.value = true
     }
-  })
+  }
+
+  onMounted(() => retrieveRepo())
+
+  watch([owner, repo], () => retrieveRepo())
 
   return {
     readme,