From 8f46bd4740b5c489f414ea19ba1a9d3caf32a260 Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Sun, 8 Aug 2021 12:36:37 +0200
Subject: [PATCH] :sparkles: (title) use title notes for HTML title

---
 src/components/StackedNote.vue  |  2 ++
 src/hooks/useNote.hook.ts       | 11 ++---------
 src/hooks/useTitleNotes.hook.ts | 23 +++++++++++++++++++++++
 src/utils/noteTitle.ts          | 12 ++++++++++++
 4 files changed, 39 insertions(+), 9 deletions(-)
 create mode 100644 src/hooks/useTitleNotes.hook.ts

diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index 6909a1e..d6f0e5c 100644
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -34,6 +34,7 @@ import { useImages } from '@/hooks/useImages.hook'
 import LinkedNotes from '@/components/LinkedNotes.vue'
 import { filenameToNoteTitle } from '@/utils/noteTitle'
 import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
+import { useTitleNotes } from '@/hooks/useTitleNotes.hook'
 
 export default defineComponent({
   name: 'StackedNote',
@@ -53,6 +54,7 @@ export default defineComponent({
     const { listenToClick } = useLinks('stacked-note', props.sha)
     const className = computed(() => `stacked-note-${props.index}`)
     const titleClassName = computed(() => `title-${className.value}`)
+    useTitleNotes(props.repo)
 
     const { displayNoteOverlay } = useNoteOverlay(className.value, props.index)
     const displayedTitle = computed(() => filenameToNoteTitle(props.title))
diff --git a/src/hooks/useNote.hook.ts b/src/hooks/useNote.hook.ts
index 96c72fa..d29e3a3 100644
--- a/src/hooks/useNote.hook.ts
+++ b/src/hooks/useNote.hook.ts
@@ -6,6 +6,7 @@ import { useOverlay } from '@/hooks/useOverlay.hook'
 import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
 import { resolvePath } from '@/modules/repo/services/resolvePath'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
+import { pathToNoteTitle } from '@/utils/noteTitle'
 
 export const useNote = (containerClass: string) => {
   const store = useUserRepoStore()
@@ -19,15 +20,7 @@ export const useNote = (containerClass: string) => {
       }
       const filePath = store.files.find((file) => file.sha === note)?.path ?? ''
 
-      const fileNames = filePath.split('.')
-
-      fileNames.pop()
-      obj[note] = fileNames
-        .join('.')
-        .split('/')
-        .filter((path) => !path.includes('README'))
-        .join('/')
-        .replaceAll('-', ' ')
+      obj[note] = pathToNoteTitle(filePath)
 
       return obj
     }, {})
diff --git a/src/hooks/useTitleNotes.hook.ts b/src/hooks/useTitleNotes.hook.ts
new file mode 100644
index 0000000..877f003
--- /dev/null
+++ b/src/hooks/useTitleNotes.hook.ts
@@ -0,0 +1,23 @@
+import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
+import { useNotes } from '@/modules/note/hooks/useNotes'
+import { pathToNoteTitle } from '@/utils/noteTitle'
+import { useTitle } from '@vueuse/core'
+import { computed, watch } from 'vue'
+
+export const generateTitle = (titles: string[]) => titles.join(' | ')
+
+export const useTitleNotes = (prefix: string) => {
+  const { stackedNotes } = useQueryStackedNotes()
+  const { notes } = useNotes()
+  const titleNotes = computed(() =>
+    notes.value
+      .filter((note) => stackedNotes.value.includes(note.sha ?? ''))
+      .map((note) => pathToNoteTitle(note.path ?? ''))
+  )
+
+  const title = useTitle(generateTitle([prefix, ...titleNotes.value]))
+
+  watch(titleNotes, () => {
+    title.value = generateTitle([prefix, ...titleNotes.value])
+  })
+}
diff --git a/src/utils/noteTitle.ts b/src/utils/noteTitle.ts
index e27b9c3..da0bd10 100644
--- a/src/utils/noteTitle.ts
+++ b/src/utils/noteTitle.ts
@@ -1,2 +1,14 @@
 export const filenameToNoteTitle = (title: string) =>
   title.replaceAll('/', ' / ').replaceAll('-', ' ')
+
+export const pathToNoteTitle = (path: string) => {
+  const fileNames = path.split('.')
+
+  fileNames.pop()
+  return fileNames
+    .join('.')
+    .split('/')
+    .filter((path) => !path.includes('README'))
+    .join('/')
+    .replaceAll('-', ' ')
+}