refacto

src/components/LinkedNotes.vue

@@ -1,3 +1,23 @@
+<script lang="ts" setup>
+import { useBacklinks } from '@/hooks/useBacklinks.hook'
+import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  sha: string
+}>()
+
+const shaProp = computed((props) => props.sha)
+
+const { backlink } = useBacklinks(shaProp)
+const { addStackedNote } = useQueryStackedNotes()
+const hasBacklinks = computed(() => (backlink.value?.links.length ?? 0) > 0)
+
+const emitNote = (sha: string) => {
+  addStackedNote(props.sha, sha)
+}
+</script>
+
 <template>
   <div v-if="hasBacklinks" class="linked-notes">
     <h5 class="subtitle is-5">🔗</h5>
@@ -11,36 +31,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { useBacklinks } from '@/hooks/useBacklinks.hook'
-import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
-import { computed, defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'LinkedNotes',
-  props: {
-    sha: { type: String, required: true }
-  },
-  setup(props) {
-    const { backlink } = useBacklinks(props.sha)
-    const { addStackedNote } = useQueryStackedNotes()
-    const hasBacklinks = computed(
-      () => (backlink.state.value?.links.length ?? 0) > 0
-    )
-
-    const emitNote = (sha: string) => {
-      addStackedNote(props.sha, sha)
-    }
-
-    return {
-      backlink: backlink.state,
-      hasBacklinks,
-      emitNote
-    }
-  }
-})
-</script>
-
 <style scoped lang="scss">
 .linked-notes {
   padding: 1rem;

src/hooks/useBacklinks.hook.ts

@@ -3,10 +3,12 @@ import { data } from '@/data/data'
 import { DataType } from '@/data/DataType.enum'
 import { BacklinkNote } from '@/modules/note/models/BacklinkNote'
 import { useAsyncState } from '@vueuse/core'
-import { onUnmounted } from 'vue'
+import { ComputedRef, onUnmounted, toValue } from 'vue'
 
-export const useBacklinks = (sha: string) => {
+export const useBacklinks = (sha: string | ComputedRef<string>) => {
-  const backlink = useAsyncState(
+  sha = toValue(sha)
+
+  const { state: backlink, execute } = useAsyncState(
     data.get<DataType.BacklinkNote, BacklinkNote>(
       data.generateId(DataType.BacklinkNote, sha)
     ),
@@ -21,7 +23,7 @@ export const useBacklinks = (sha: string) => {
       if (fileSha !== sha) {
         return
       }
-      backlink.execute()
+      execute()
     },
     {
       retro: true