display links to the stacked note

src/bus/backlinkEventBus.ts

@@ -0,0 +1,7 @@
+import { createEventBus } from 'retrobus'
+
+interface EventBusParams {
+  fileSha: string
+}
+
+export const backlinkEventBus = createEventBus<EventBusParams>()

src/bus/noteEventBus.ts

@@ -7,4 +7,4 @@ interface EventBusParams {
   currentNoteSHA?: string
 }
 
-export const noteEventBus = createEventBus<EventBusParams>('note')
+export const noteEventBus = createEventBus<EventBusParams>()

src/components/LinkedNotes.vue

@@ -1,19 +1,37 @@
 <template>
-  <div class="linked-notes"></div>
+  <div v-if="(backlink?.links.length ?? 0) > 0" class="linked-notes">
+    <hr />
+    <h4 class="subtitle is-4">🔗 Links to this note</h4>
+    <ul>
+      <li v-for="link in backlink?.links" :key="link.sha">
+        {{ link.title }}
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script lang="ts">
+import { useBacklinks } from '@/hooks/useBacklinks.hook'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'LinkedNotes',
   props: {
     sha: { type: String, required: true }
+  },
+  setup(props) {
+    const { backlink } = useBacklinks(props.sha)
+    return {
+      backlink: backlink.state
+    }
   }
 })
 </script>
 
 <style scoped lang="scss">
 .linked-notes {
+  .subtitle {
+    font-style: italic;
+  }
 }
 </style>

src/hooks/useBacklinks.hook.ts

@@ -0,0 +1,36 @@
+import { backlinkEventBus } from '@/bus/backlinkEventBus'
+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'
+
+export const useBacklinks = (sha: string) => {
+  const backlink = useAsyncState(
+    data.get<DataType.BacklinkNote, BacklinkNote>(
+      data.generateId(DataType.BacklinkNote, sha)
+    ),
+    null,
+    {
+      resetOnExecute: true
+    }
+  )
+
+  const unsubscribe = backlinkEventBus.addEventBusListener(
+    ({ fileSha }) => {
+      if (fileSha !== sha) {
+        return
+      }
+      backlink.execute()
+    },
+    {
+      retro: true
+    }
+  )
+
+  onUnmounted(() => unsubscribe())
+
+  return {
+    backlink
+  }
+}

src/hooks/useComputeBacklinks.hook.ts

@@ -1,3 +1,4 @@
+import { backlinkEventBus } from '@/bus/backlinkEventBus'
 import { data } from '@/data/data'
 import { DataType } from '@/data/DataType.enum'
 import { useFile } from '@/hooks/useFile.hook'
@@ -80,15 +81,7 @@ export const useComputeBacklinks = () => {
       }
 
       await data.add(backlinkNote)
+      backlinkEventBus.emit({ fileSha: sha })
     }
-
-    const backlinksInDb = await data.getAll<
-      DataType.BacklinkNote,
-      BacklinkNote
-    >({
-      prefix: DataType.BacklinkNote
-    })
-
-    console.log(backlinksInDb.filter((b) => b.links.length))
   })
 }

src/utils/noteTitle.ts

@@ -1,2 +1,2 @@
 export const filenameToNoteTitle = (title: string) =>
-  title.replaceAll('/', ' / ')
+  title.replaceAll('/', ' / ').replaceAll('-', ' ')