🐛 (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,

src/views/Home.vue

@@ -1,9 +1,9 @@
 <template>
-  <div v-if="!user || !repo">
+  <div v-if="!user || !repo" :key="routeKey">
     Bonjour
 
     <form @submit.prevent>
-      <div class="columns is-centered is-vcentered">
+      <div class="columns is-mobile is-centered is-vcentered">
         <div class="column">
           <div class="field">
             <label class="label">user</label>
@@ -37,7 +37,10 @@
     <div class="columns">
       <div class="column">
         <h1 class="title is-1">
-          <router-link :to="{ name: 'Home' }">
+          <router-link
+            :to="{ name: 'Home', params: { user, repo } }"
+            :key="routeKey"
+          >
             {{ repo }}
           </router-link>
         </h1>
@@ -56,7 +59,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue'
+import { defineComponent, defineAsyncComponent, computed, toRefs } from 'vue'
 import { useNote } from '@/hooks/useNote.hook'
 import { useForm } from '@/hooks/useForm.hook'
 
@@ -70,11 +73,16 @@ export default defineComponent({
     StackedNote
   },
   props: {
-    user: { type: String, required: false },
-    repo: { type: String, required: false }
+    user: { type: String, required: false, default: '' },
+    repo: { type: String, required: false, default: '' }
   },
   setup(props) {
-    return { ...useNote(props.user, props.repo), ...useForm() }
+    const refProps = toRefs(props)
+    return {
+      ...useNote(refProps.user, refProps.repo),
+      ...useForm(),
+      routeKey: computed(() => `${props.user}-${props.repo}`)
+    }
   }
 })
 </script>