directly update edited content

src/components/StackedNote.vue

@@ -16,6 +16,7 @@ import { useNoteOverlay } from '@/hooks/useNoteOverlay.hook'
 import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook'
 import { useTitleNotes } from '@/hooks/useTitleNotes.hook'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
+import { encodeUTF8ToBase64 } from '@/utils/decodeBase64ToUTF8'
 import { filenameToNoteTitle } from '@/utils/noteTitle'
 import { generateTweets } from '@/utils/twitter'
 
@@ -39,10 +40,11 @@ const user = computed(() => props.user)
 const repo = computed(() => props.repo)
 const sha = computed(() => props.sha)
 const index = computed(() => props.index)
+const editedSha = ref(sha.value)
 
 const { scrollToFocusedNote } = useRouteQueryStackedNotes()
 
-const { path, content, rawContent, getRawContent } = useFile(sha)
+const { path, content, rawContent, getRawContent, saveCacheNote } = useFile(sha)
 const initialRawContent = ref<string | null>(null)
 const className = computed(() => `stacked-note-${props.index}`)
 const { listenToClick } = useLinks(className.value, sha)
@@ -57,8 +59,7 @@ const displayedTitle = computed(() => filenameToNoteTitle(props.title))
 
 const { updateFile } = useGitHubUpdate({
   user: user.value,
-  repo: repo.value,
-  sha: sha.value
+  repo: repo.value
 })
 
 const mode = ref<'read' | 'edit'>('read')
@@ -82,9 +83,21 @@ watch([content, mode], () => {
   })
 })
 
-watch(mode, (newMode) => {
+watch(mode, async (newMode) => {
   if (newMode === 'read' && rawContent.value !== initialRawContent.value) {
-    updateFile({ content: rawContent.value, path: path.value })
+    const newSha = await updateFile({
+      content: rawContent.value,
+      path: path.value,
+      sha: editedSha.value
+    })
+
+    if (!newSha) {
+      return
+    }
+
+    editedSha.value = newSha
+    await saveCacheNote(encodeUTF8ToBase64(rawContent.value))
+    initialRawContent.value = rawContent.value
   }
 })
 </script>

src/hooks/useFile.hook.ts

@@ -13,14 +13,18 @@ export const useFile = (sha: Ref<string> | string, retrieveContent = true) => {
     return file?.path ?? ''
   })
 
-  const { render, getRawContent: getRawContentFromFile } = useMarkdown(
-    toValue(sha)
-  )
+  const {
+    render,
+    renderFromUTF8,
+    getRawContent: getRawContentFromFile
+  } = useMarkdown(toValue(sha))
   const { getCachedNote, saveCacheNote } = prepareNoteCache(toValue(sha))
   const fromCache = ref(false)
 
-  const content = ref('')
   const rawContent = ref('')
+  const content = computed(() =>
+    rawContent.value ? renderFromUTF8(rawContent.value) : ''
+  )
 
   const getCachedFileContent = async (): Promise<string | null> => {
     const cachedNote = await getCachedNote()
@@ -72,7 +76,6 @@ export const useFile = (sha: Ref<string> | string, retrieveContent = true) => {
       }
 
       rawContent.value = getRawContentFromFile(fileContent)
-      content.value = render(fileContent)
     })
   }
 
@@ -83,6 +86,7 @@ export const useFile = (sha: Ref<string> | string, retrieveContent = true) => {
     getRawContent,
     getContent,
     getCachedFileContent,
-    fromCache
+    fromCache,
+    saveCacheNote
   }
 }

src/hooks/useGitHubUpdate.hook.ts

@@ -4,19 +4,19 @@ import { confirmMessage, errorMessage } from '@/utils/notif'
 
 export const useGitHubUpdate = ({
   user,
-  repo,
-  sha
+  repo
 }: {
   user: string
   repo: string
-  sha: string
 }) => {
   const updateFile = async ({
     content,
-    path
+    path,
+    sha
   }: {
     content: string
     path: string
+    sha: string
   }) => {
     try {
       const octokit = await getOctokit()
@@ -35,7 +35,9 @@ export const useGitHubUpdate = ({
 
       confirmMessage('file saved on GitHub')
 
-      return response?.data.commit.sha ?? null
+      console.log(response)
+
+      return response?.data.content?.sha ?? null
     } catch (error) {
       errorMessage('File could not be saved')
     }

src/hooks/useMarkdown.hook.ts

@@ -41,15 +41,18 @@ const md = new MarkdownIt({
 
 export const useMarkdown = (defaultPrefix?: Ref<string> | string) => {
   const getRawContent = (content: string) => decodeBase64ToUTF8(content)
+  const renderFromUTF8 = (content: string, prefix?: string) =>
+    content
+      ? md.render(content, {
+          docId: defaultPrefix ? toValue(defaultPrefix) : prefix ?? ''
+        })
+      : ''
 
   return {
     toHTML: (content: string) => (content ? md.render(content) : ''),
     render: (content: string, prefix?: string) =>
-      content
-        ? md.render(decodeBase64ToUTF8(content), {
-            docId: defaultPrefix ? toValue(defaultPrefix) : prefix ?? ''
-          })
-        : '',
+      renderFromUTF8(decodeBase64ToUTF8(content), prefix),
+    renderFromUTF8,
     getRawContent
   }
 }