From 5a14ffba130b6b77166695d49c4f3968bf210b82 Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Sun, 4 Apr 2021 14:53:56 +0200
Subject: [PATCH] :bug: (images) get file content for images

---
 src/components/FluxNote.vue |  4 ++--
 src/hooks/useFile.hook.ts   | 20 ++++++++++++++------
 src/hooks/useImages.hook.ts |  4 ++--
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue
index b1668d9..f4e6b9a 100644
--- a/src/components/FluxNote.vue
+++ b/src/components/FluxNote.vue
@@ -84,7 +84,7 @@ export default defineComponent({
     const { stackedNotes, resetStackedNotes } = useQueryStackedNotes()
     const { scrollToFocusedNote } = useFocus()
 
-    const { ...noteProps } = useNote('note-container')
+    const { titles } = useNote('note-container')
 
     const renderedContent = computed(() =>
       props.content !== null ? renderString(props.content) : store.readme
@@ -123,7 +123,7 @@ export default defineComponent({
       resetStackedNotes,
       userSettings: computed(() => store.userSettings),
       focus: () => scrollToFocusedNote(undefined, true),
-      ...noteProps
+      titles
     }
   }
 })
diff --git a/src/hooks/useFile.hook.ts b/src/hooks/useFile.hook.ts
index 0d87640..0062d4c 100644
--- a/src/hooks/useFile.hook.ts
+++ b/src/hooks/useFile.hook.ts
@@ -5,6 +5,7 @@ import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { getFileContent } from '@/modules/repo/services/repo'
 
 export const useFile = (sha: string, retrieveContent = true) => {
+  const { render } = useMarkdown()
   const store = useUserRepoStore()
   const { getCachedNote, saveCacheNote } = useNoteCache(sha)
   const fromCache = ref(false)
@@ -12,23 +13,29 @@ export const useFile = (sha: string, retrieveContent = true) => {
   const content = ref('')
 
   const getContent = async () => {
-    const { render } = useMarkdown()
-    const contentFile = await getFileContent(store.user, store.repo, sha)
+    const fileContent = await getCachedFileContent()
+    if (!fileContent) {
+      return
+    }
+    content.value = render(fileContent)
+  }
 
+  const getCachedFileContent = async (): Promise<string | null> => {
     const cachedNote = await getCachedNote()
 
     fromCache.value = !!cachedNote
 
     if (cachedNote) {
-      content.value = render(cachedNote.content)
-      return
+      return cachedNote.content
     }
 
+    const contentFile = await getFileContent(store.user, store.repo, sha)
+
     if (!contentFile) {
-      return
+      return null
     }
     saveCacheNote(contentFile)
-    content.value = render(contentFile)
+    return contentFile
   }
 
   if (retrieveContent) {
@@ -38,6 +45,7 @@ export const useFile = (sha: string, retrieveContent = true) => {
   return {
     content,
     getContent,
+    getCachedFileContent,
     fromCache
   }
 }
diff --git a/src/hooks/useImages.hook.ts b/src/hooks/useImages.hook.ts
index 4dc4e1e..f4d485a 100644
--- a/src/hooks/useImages.hook.ts
+++ b/src/hooks/useImages.hook.ts
@@ -31,9 +31,9 @@ export const useImages = (sha: string) => {
       if (!imageFile?.sha) {
         return
       }
-      const { getContent } = useFile(imageFile.sha, false)
+      const { getCachedFileContent } = useFile(imageFile.sha, false)
 
-      const fileContent = await getContent()
+      const fileContent = await getCachedFileContent()
       image.setAttribute('src', `${SRC_PREFIX} ${fileContent}`)
     }
   })