♻️ (store) use a store to store readme and files

src/hooks/useFile.hook.ts

@@ -3,13 +3,10 @@ import { useMarkdown } from '@/hooks/useMarkdown.hook'
 import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
 import { Octokit } from '@octokit/rest'
 import { useNoteCache } from '@/modules/note/hooks/useNoteCache'
+import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 
-export const useFile = (
-  owner: string,
-  repo: string,
-  sha: string,
-  retrieveContent = true
-) => {
+export const useFile = (sha: string, retrieveContent = true) => {
+  const store = useUserRepoStore()
   const { getCachedNote, saveCacheNote } = useNoteCache(sha)
   const { accessToken } = useGitHubLogin()
   const fromCache = ref(false)
@@ -21,16 +18,20 @@ export const useFile = (
   const content = ref('')
 
   const getFileContent = async () => {
+    if (!store.user || !store.repo) {
+      null
+    }
+
     const file = await octokit.request(
       'GET /repos/{owner}/{repo}/git/blobs/{file_sha}',
       {
-        owner,
-        repo,
+        owner: store.user,
+        repo: store.repo,
         file_sha: sha
       }
     )
 
-    return file?.data.content
+    return file?.data.content ?? null
   }
 
   const getContent = async () => {

src/hooks/useImages.hook.ts

@@ -1,19 +1,15 @@
 import { useFile } from '@/hooks/useFile.hook'
-import { useRepo } from '@/hooks/useRepo.hook'
 import { resolvePath } from '@/modules/repo/services/resolvePath'
-import { computed, Ref } from 'vue'
+import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
+import { computed } from 'vue'
 
 const SRC_PREFIX = 'data:image/jpeg;charset=utf-8;base64,'
 
-export const useImages = (
-  user: Ref<string>,
-  repo: Ref<string>,
-  sha: string
-) => {
-  const { tree } = useRepo(user, repo, false)
+export const useImages = (sha: string) => {
+  const store = useUserRepoStore()
 
   const currentFilePath = computed(
-    () => tree.value.find((file) => file.sha === sha)?.path
+    () => store.files.find((file) => file.sha === sha)?.path
   )
 
   const images = document.querySelectorAll(`.note-${sha} img`)
@@ -30,17 +26,12 @@ export const useImages = (
         image.getAttribute('src') ?? ''
       )
 
-      const imageFile = tree.value.find((file) => file.path === imageFilePath)
+      const imageFile = store.files.find((file) => file.path === imageFilePath)
 
       if (!imageFile?.sha) {
         return
       }
-      const { getFileContent } = useFile(
-        user.value,
-        repo.value,
-        imageFile.sha,
-        false
-      )
+      const { getFileContent } = useFile(imageFile.sha, false)
 
       const fileContent = await getFileContent()
       image.setAttribute('src', `${SRC_PREFIX} ${fileContent}`)

src/hooks/useNote.hook.ts

@@ -1,40 +1,27 @@
-import {
-  computed,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  watch
-} from '@vue/runtime-core'
+import { computed, onMounted, onUnmounted, watch } from '@vue/runtime-core'
 
 import { NOTE_WIDTH } from '@/constants/note-width'
-import { Ref } from '@vue/reactivity'
 import { noteEventBus } from '@/bus/noteBusEvent'
 import { useFocus } from '@/hooks/useFocus.hook'
-import { useLinks } from '@/hooks/useLinks.hook'
 import { useOverlay } from '@/hooks/useOverlay.hook'
 import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
-import { useRepo } from '@/hooks/useRepo.hook'
 import { useRouter } from 'vue-router'
 import { resolvePath } from '@/modules/repo/services/resolvePath'
+import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 
-export const useNote = (
-  containerClass: string,
-  user: Ref<string>,
-  repo: Ref<string>
-) => {
+export const useNote = (containerClass: string) => {
+  const store = useUserRepoStore()
   const { push, currentRoute } = useRouter()
   const { isMobile } = useOverlay(false)
   const { scrollToFocusedNote } = useFocus()
   const { stackedNotes, updateQueryStackedNotes } = useQueryStackedNotes()
-  const { readme, notFound, tree } = useRepo(user, repo)
-  const { listenToClick } = useLinks('note-display')
 
   const titles = computed(() =>
     stackedNotes.value?.reduce((obj: Record<string, string>, note) => {
       if (!note) {
         return obj
       }
-      const filePath = tree.value.find((file) => file.sha === note)?.path ?? ''
+      const filePath = store.files.find((file) => file.sha === note)?.path ?? ''
 
       const fileNames = filePath.split('.')
 
@@ -52,11 +39,13 @@ export const useNote = (
 
   const unsubscribeLink = noteEventBus.addEventBusListener(
     ({ path, currentNoteSHA }) => {
-      const currentFile = tree.value.find((file) => file.sha === currentNoteSHA)
+      const currentFile = store.files.find(
+        (file) => file.sha === currentNoteSHA
+      )
 
       const finalPath = resolvePath(currentFile?.path ?? '', path)
 
-      const file = tree.value.find((file) => file.path === finalPath)
+      const file = store.files.find((file) => file.path === finalPath)
 
       if (!file?.sha || stackedNotes.value.includes(file.sha)) {
         scrollToFocusedNote(file?.sha)
@@ -88,8 +77,8 @@ export const useNote = (
       push({
         name: currentRoute.value.name ?? 'Home',
         params: {
-          user: user.value,
-          repo: repo.value
+          user: store.user,
+          repo: store.repo
         },
         query: {
           stackedNotes: newStackedNotes
@@ -101,12 +90,6 @@ export const useNote = (
     }
   )
 
-  watch([readme, user, repo], () => {
-    nextTick(() => {
-      listenToClick()
-    })
-  })
-
   const resizeContainer = () => {
     const element = document.querySelector(
       `.${containerClass}`
@@ -134,8 +117,6 @@ export const useNote = (
   })
 
   return {
-    titles,
-    readme,
-    notFound
+    titles
   }
 }

src/hooks/useRepo.hook.ts

@@ -1,104 +0,0 @@
-import { Ref, ref, watch } from '@vue/runtime-core'
-
-import { Octokit } from '@octokit/rest'
-import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
-import { useMarkdown } from '@/hooks/useMarkdown.hook'
-import { useNoteCache } from '@/modules/note/hooks/useNoteCache'
-
-interface Tree {
-  path?: string
-  mode?: string
-  type?: string
-  sha?: string
-  size?: number
-  url?: string
-}
-
-const tree = ref<Tree[]>([])
-
-export const useRepo = (
-  owner: Ref<string>,
-  repo: Ref<string>,
-  retrieve = true,
-  retrieveReadme = true
-) => {
-  const { getCachedNote, saveCacheNote } = useNoteCache('README')
-  const { accessToken } = useGitHubLogin()
-  const { render } = useMarkdown()
-
-  const octokit = new Octokit({
-    auth: accessToken.value
-  })
-
-  const readme = ref<string | null>(null)
-  const notFound = ref(false)
-
-  const retrieveRepo = async () => {
-    if (!owner.value || !repo.value) {
-      return
-    }
-    const cachedReadme = await getCachedNote()
-
-    try {
-      if (retrieveReadme) {
-        if (cachedReadme) {
-          readme.value = render(cachedReadme.content)
-        }
-
-        const README = await octokit.repos.getReadme({
-          owner: owner.value,
-          repo: repo.value
-        })
-
-        if (README) {
-          readme.value = render(README.data.content)
-          saveCacheNote(README.data.content)
-        }
-      }
-
-      const commits = await octokit.request(
-        'GET /repos/{owner}/{repo}/commits',
-        {
-          repo: repo.value,
-          owner: owner.value
-        }
-      )
-
-      const lastCommit = commits.data.shift()
-
-      if (!lastCommit) {
-        return
-      }
-
-      const treeResponse = await octokit.request(
-        'GET /repos/{owner}/{repo}/git/trees/{tree_sha}',
-        {
-          repo: repo.value,
-          owner: owner.value,
-          tree_sha: lastCommit.commit.tree.sha,
-          recursive: 'true'
-        }
-      )
-
-      if (treeResponse) {
-        tree.value = treeResponse.data.tree.filter((t) => t.type === 'blob')
-      }
-    } catch (error) {
-      if (!cachedReadme) {
-        notFound.value = true
-      }
-    }
-  }
-
-  if (retrieve) {
-    retrieveRepo()
-  }
-
-  watch([owner, repo], () => retrieveRepo())
-
-  return {
-    readme,
-    notFound,
-    tree
-  }
-}