♻️ (app)

src/hooks/useFile.hook.ts

@@ -2,12 +2,12 @@ import { useMarkdown } from '@/hooks/useMarkdown.hook'
 import { prepareNoteCache } from '@/modules/note/cache/prepareNoteCache'
 import { getFileContent } from '@/modules/repo/services/repo'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
-import { ref } from 'vue'
+import { Ref, ref, toValue } from 'vue'
 
-export const useFile = (sha: string, retrieveContent = true) => {
-  const { render } = useMarkdown(sha)
+export const useFile = (sha: Ref<string> | string, retrieveContent = true) => {
+  const { render } = useMarkdown(toValue(sha))
   const store = useUserRepoStore()
-  const { getCachedNote, saveCacheNote } = prepareNoteCache(sha)
+  const { getCachedNote, saveCacheNote } = prepareNoteCache(toValue(sha))
   const fromCache = ref(false)
 
   const content = ref('')
@@ -42,7 +42,11 @@ export const useFile = (sha: string, retrieveContent = true) => {
       return cachedNote.content
     }
 
-    const contentFile = await getFileContent(store.user, store.repo, sha)
+    const contentFile = await getFileContent(
+      store.user,
+      store.repo,
+      toValue(sha)
+    )
 
     if (!contentFile) {
       return null

src/hooks/useLinks.hook.ts

@@ -1,11 +1,11 @@
 import { noteEventBus } from '@/bus/noteEventBus'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { isExternalLink } from '@/utils/link'
-import { ComputedRef, onUnmounted, toValue } from 'vue'
+import { ComputedRef, onUnmounted, Ref, toValue } from 'vue'
 
 export const useLinks = (
   className: ComputedRef<string> | string,
-  sha?: string
+  sha?: Ref<string> | string
 ) => {
   const store = useUserRepoStore()
 
@@ -31,7 +31,7 @@ export const useLinks = (
 
     noteEventBus.emit({
       path: href,
-      currentNoteSHA: sha,
+      currentNoteSHA: toValue(sha),
       user: store.user,
       repo: store.repo
     })

src/hooks/useMarkdown.hook.ts

@@ -8,6 +8,7 @@ import markdownItCheckbox from 'markdown-it-checkbox'
 import markdownItFootnote from 'markdown-it-footnote'
 import markdownItIframe from 'markdown-it-iframe'
 import markdownItLatex from 'markdown-it-latex'
+import { Ref, toValue } from 'vue'
 
 const md = new MarkdownIt({
   typographer: true,
@@ -37,13 +38,13 @@ const md = new MarkdownIt({
     height: 400
   })
 
-export const useMarkdown = (defaultPrefix?: string) => {
+export const useMarkdown = (defaultPrefix?: Ref<string> | string) => {
   return {
     toHTML: (content: string) => (content ? md.render(content) : ''),
     render: (content: string, prefix?: string) =>
       content
         ? md.render(decodeBase64ToUTF8(content), {
-            docId: defaultPrefix ?? prefix ?? ''
+            docId: defaultPrefix ? toValue(defaultPrefix) : prefix ?? ''
           })
         : ''
   }

src/hooks/useNote.hook.ts

@@ -1,12 +1,11 @@
-import { computed, onMounted, onUnmounted, watch } from 'vue'
-
-import { NOTE_WIDTH } from '@/constants/note-width'
 import { noteEventBus } from '@/bus/noteEventBus'
+import { NOTE_WIDTH } from '@/constants/note-width'
 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 { pathToNotePathTitle } from '@/utils/noteTitle'
+import { computed, onMounted, onUnmounted, watch } from 'vue'
 
 export const useNote = (containerClass: string) => {
   const store = useUserRepoStore()

src/hooks/useNoteOverlay.hook.ts

@@ -1,20 +1,22 @@
-import { computed, onMounted, ref } from 'vue'
-
 import { NOTE_WIDTH } from '@/constants/note-width'
 import { useOverlay } from '@/hooks/useOverlay.hook'
 import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
+import { computed, onMounted, Ref, ref, toValue } from 'vue'
 
 const BOOKMARK_WIDTH = 2
 
-export const useNoteOverlay = (className: string, index: number) => {
+export const useNoteOverlay = (
+  className: string,
+  index: Ref<number> | number
+) => {
   const { x, y, isMobile } = useOverlay()
   const noteHeight = ref(0)
 
   const displayNoteOverlay = computed(() => {
     if (isMobile.value) {
-      return y.value > index * noteHeight.value
+      return y.value > toValue(index) * noteHeight.value
     } else {
-      return x.value > index * NOTE_WIDTH
+      return x.value > toValue(index) * NOTE_WIDTH
     }
   })
 
@@ -32,7 +34,7 @@ export const useNoteOverlay = (className: string, index: number) => {
     if (isMobile.value) {
       noteElement.style.top = `0`
     } else {
-      noteElement.style.left = `${(index + 1) * BOOKMARK_WIDTH}rem`
+      noteElement.style.left = `${(toValue(index) + 1) * BOOKMARK_WIDTH}rem`
 
       const stackedNoteContainers = document.querySelectorAll(
         '.stacked-note'

src/hooks/useTitleNotes.hook.ts

@@ -2,11 +2,11 @@ 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'
+import { computed, Ref, toValue, watch } from 'vue'
 
 export const generateTitle = (titles: string[]) => titles.join(' | ')
 
-export const useTitleNotes = (prefix: string) => {
+export const useTitleNotes = (prefix: Ref<string> | string) => {
   const { stackedNotes } = useQueryStackedNotes()
   const { notes } = useNotes()
   const titleNotes = computed(() =>
@@ -15,9 +15,9 @@ export const useTitleNotes = (prefix: string) => {
       .map((note) => pathToNoteTitle(note.path ?? ''))
   )
 
-  const title = useTitle(generateTitle([prefix, ...titleNotes.value]))
+  const title = useTitle(generateTitle([toValue(prefix), ...titleNotes.value]))
 
   watch(titleNotes, () => {
-    title.value = generateTitle([prefix, ...titleNotes.value])
+    title.value = generateTitle([toValue(prefix), ...titleNotes.value])
   })
 }