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

2021-03-24 21:23:23 +01:00
parent 165cfb96e7
commit e199c68d68
18 changed files with 202 additions and 229 deletions
--- a/src/components/FluxNote.vue
+++ b/src/components/FluxNote.vue
@@ -25,8 +25,6 @@
      v-for="(stackedNote, index) in stackedNotes"
      :key="stackedNote"
      :index="index"
-      :user="user"
-      :repo="repo"
      :sha="stackedNote"
      :title="titles[stackedNote ?? '']"
    />
@@ -38,7 +36,6 @@ import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
 import {
  defineComponent,
  defineAsyncComponent,
-  toRefs,
  computed,
  watch,
  nextTick,
@@ -48,6 +45,7 @@ import HeaderNote from '@/components/HeaderNote.vue'
 import { useNote } from '@/hooks/useNote.hook'
 import { useMarkdown } from '@/hooks/useMarkdown.hook'
 import { useLinks } from '@/hooks/useLinks.hook'
+import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'

 const StackedNote = defineAsyncComponent(() =>
  import('@/components/StackedNote.vue')
@@ -65,27 +63,31 @@ export default defineComponent({
    content: { type: String, required: false, default: null }
  },
  setup(props) {
+    const store = useUserRepoStore()
    const { renderString } = useMarkdown()
-    const refProps = toRefs(props)
    const { listenToClick } = useLinks('note-display')
    const { stackedNotes, resetStackedNotes } = useQueryStackedNotes()

-    const { readme, ...noteProps } = useNote(
-      'note-container',
-      refProps.user,
-      refProps.repo
-    )
+    const { ...noteProps } = useNote('note-container')

    const renderedContent = computed(() =>
-      props.content !== null ? renderString(props.content) : readme.value
+      props.content !== null ? renderString(props.content) : store.readme
    )

    const hasContent = computed(() => !!renderedContent.value)

-    watch(renderedContent, () => nextTick(() => listenToClick()))
+    watch(renderedContent, () =>
+      nextTick(() => {
+        console.log(renderedContent)
+
+        listenToClick()
+      })
+    )
+
+    store.setUserRepo(props.user, props.repo)

    onUnmounted(() => {
-      readme.value = ''
+      store.resetUserRepo()
    })

    return {
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -17,7 +17,7 @@
 </template>

 <script lang="ts">
-import { computed, defineComponent, nextTick, toRefs, watch } from 'vue'
+import { computed, defineComponent, nextTick, watch } from 'vue'
 import { useFile } from '@/hooks/useFile.hook'
 import { useLinks } from '@/hooks/useLinks.hook'
 import { useNoteOverlay } from '@/hooks/useNoteOverlay.hook'
@@ -28,15 +28,12 @@ export default defineComponent({
  name: 'StackedNote',
  props: {
    index: { type: Number, required: true },
-    user: { type: String, required: true },
-    repo: { type: String, required: true },
    title: { type: String, required: true },
    sha: { type: String, required: true }
  },
  setup(props) {
-    const refProps = toRefs(props)
    const { scrollToFocusedNote } = useFocus()
-    const { content, fromCache } = useFile(props.user, props.repo, props.sha)
+    const { content, fromCache } = useFile(props.sha)
    const { listenToClick } = useLinks('stacked-note', props.sha)
    const className = computed(() => `stacked-note-${props.index}`)
    const titleClassName = computed(() => `title-${className.value}`)
@@ -47,7 +44,7 @@ export default defineComponent({
      if (content.value) {
        nextTick(() => {
          listenToClick()
-          useImages(refProps.user, refProps.repo, props.sha)
+          useImages(props.sha)
        })
      }
    })
--- a/src/hooks/useFile.hook.ts
+++ b/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 () => {
--- a/src/hooks/useImages.hook.ts
+++ b/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}`)
--- a/src/hooks/useNote.hook.ts
+++ b/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
  }
 }
--- a/src/hooks/useRepo.hook.ts
+++ b/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
-  }
-}
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,6 @@
 import '@/registerServiceWorker'

+import { createPinia } from 'pinia'
 import App from './App.vue'
 import { createApp } from 'vue'
 import { createI18n } from 'vue-i18n'
@@ -14,4 +15,5 @@ const i18n = createI18n({
 createApp(App)
  .use(router)
  .use(i18n)
+  .use(createPinia())
  .mount('#app')
--- a/src/modules/note/hooks/useFolderNotes.ts
+++ b/src/modules/note/hooks/useFolderNotes.ts
@@ -1,21 +1,17 @@
-import { useRepo } from '@/hooks/useRepo.hook'
-import { computed, Ref } from 'vue'
+import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
+import { computed } from 'vue'

-export const useFolderNotes = (
-  folder: string,
-  owner: Ref<string>,
-  repo: Ref<string>
-) => {
-  const { tree } = useRepo(owner, repo, true, false)
+export const useFolderNotes = (folder: string) => {
+  const store = useUserRepoStore()

  const fleetingNotes = computed(() =>
-    tree.value.filter(
+    store.files.filter(
      (file) => file.path?.startsWith(folder) && file.path?.endsWith('.md')
    )
  )

  const content = computed(() =>
-    fleetingNotes.value.length
+    fleetingNotes.value?.length
      ? fleetingNotes.value
          .map((note) => `- [${note.path}](${note.path})`)
          .join('\n')
--- a/src/modules/repo/interfaces/RepoFile.ts
+++ b/src/modules/repo/interfaces/RepoFile.ts
@@ -0,0 +1,8 @@
+export interface RepoFile {
+  path?: string
+  mode?: string
+  type?: string
+  sha?: string
+  size?: number
+  url?: string
+}
--- a/src/modules/repo/services/repo.ts
+++ b/src/modules/repo/services/repo.ts
@@ -0,0 +1,77 @@
+import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
+import { useMarkdown } from '@/hooks/useMarkdown.hook'
+import { useNoteCache } from '@/modules/note/hooks/useNoteCache'
+import { RepoFile } from '@/modules/repo/interfaces/RepoFile'
+import { Octokit } from '@octokit/rest'
+
+export const getFiles = async (
+  owner: string,
+  repo: string
+): Promise<RepoFile[]> => {
+  if (!owner || !repo) {
+    return []
+  }
+
+  const { accessToken } = useGitHubLogin()
+
+  const octokit = new Octokit({
+    auth: accessToken.value
+  })
+
+  const commits = await octokit.request('GET /repos/{owner}/{repo}/commits', {
+    owner,
+    repo
+  })
+
+  const lastCommit = commits.data.shift()
+
+  if (!lastCommit) {
+    return []
+  }
+
+  const treeResponse = await octokit.request(
+    'GET /repos/{owner}/{repo}/git/trees/{tree_sha}',
+    {
+      owner,
+      repo,
+      tree_sha: lastCommit.commit.tree.sha,
+      recursive: 'true'
+    }
+  )
+
+  return treeResponse?.data.tree.filter((t) => t.type === 'blob') ?? []
+}
+
+export const getMainReadme = async (owner: string, repo: string) => {
+  if (!owner || !repo) {
+    return null
+  }
+  const { render } = useMarkdown()
+  const { getCachedNote, saveCacheNote } = useNoteCache('README')
+
+  const cachedReadme = await getCachedNote()
+
+  try {
+    const { accessToken } = useGitHubLogin()
+    const octokit = new Octokit({
+      auth: accessToken.value
+    })
+
+    const README = await octokit.repos.getReadme({
+      owner,
+      repo
+    })
+
+    if (README) {
+      saveCacheNote(README.data.content)
+      return render(README.data.content)
+    }
+  } catch (error) {
+    console.warn(error)
+    if (cachedReadme) {
+      return render(cachedReadme.content)
+    }
+  }
+
+  return null
+}
--- a/src/modules/repo/store/userRepo.store.ts
+++ b/src/modules/repo/store/userRepo.store.ts
@@ -0,0 +1,39 @@
+import { RepoFile } from '@/modules/repo/interfaces/RepoFile'
+import { getFiles, getMainReadme } from '@/modules/repo/services/repo'
+import { defineStore } from 'pinia'
+
+interface State {
+  user: string
+  repo: string
+  files: RepoFile[]
+  readme: string | null
+}
+
+export const useUserRepoStore = defineStore({
+  id: 'USER_REPO_STATE',
+  state: (): State => ({
+    user: '',
+    repo: '',
+    files: [],
+    readme: null
+  }),
+  actions: {
+    async setUserRepo(newUser: string, newRepo: string) {
+      this.user = newUser
+      this.repo = newRepo
+      const [readme, files] = await Promise.all([
+        getMainReadme(newUser, newRepo),
+        getFiles(newUser, newRepo)
+      ])
+
+      this.readme = readme
+      this.files = files
+    },
+    resetUserRepo() {
+      this.user = ''
+      this.repo = ''
+      this.files = []
+      this.readme = null
+    }
+  }
+})
--- a/src/modules/user/hooks/useUserSettings.ts
+++ b/src/modules/user/hooks/useUserSettings.ts
@@ -0,0 +1 @@
+export const useUserSettings = () => {}
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -1,5 +1,14 @@
@charset "utf-8";
-@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Courgette&family=IBM+Plex+Serif&family=Kiwi+Maru&family=Maven+Pro&family=Noto+Sans+KR&family=Tajawal&display=swap');
+
+/**
+  font-family: 'Courgette', cursive;
+  font-family: 'IBM Plex Serif', serif;
+  font-family: 'Kiwi Maru', serif;
+  font-family: 'Maven Pro', sans-serif;
+  font-family: 'Noto Sans KR', sans-serif;
+  font-family: 'Tajawal', sans-serif;
+*/

 $primary: #2c3a47;
 $link: #3b7e70;
--- a/src/views/DraftNotes.vue
+++ b/src/views/DraftNotes.vue
@@ -9,9 +9,8 @@
 </template>

 <script lang="ts">
-import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
 import { useFolderNotes } from '@/modules/note/hooks/useFolderNotes'
-import { defineAsyncComponent, defineComponent, onMounted, toRefs } from 'vue'
+import { defineAsyncComponent, defineComponent } from 'vue'

 const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))

@@ -26,18 +25,8 @@ export default defineComponent({
    user: { type: String, required: true },
    repo: { type: String, required: true }
  },
-  setup(props) {
-    const refProps = toRefs(props)
-    const { content } = useFolderNotes(
-      DRAFT_FOLDER,
-      refProps.user,
-      refProps.repo
-    )
-    const { resetStackedNotes } = useQueryStackedNotes()
-
-    onMounted(() => {
-      resetStackedNotes()
-    })
+  setup() {
+    const { content } = useFolderNotes(DRAFT_FOLDER)

    return {
      content
--- a/src/views/FleetingNotes.vue
+++ b/src/views/FleetingNotes.vue
@@ -14,9 +14,8 @@
 </template>

 <script lang="ts">
-import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
 import { useFolderNotes } from '@/modules/note/hooks/useFolderNotes'
-import { defineAsyncComponent, defineComponent, onMounted, toRefs } from 'vue'
+import { defineAsyncComponent, defineComponent } from 'vue'

 const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))

@@ -31,18 +30,8 @@ export default defineComponent({
    user: { type: String, required: true },
    repo: { type: String, required: true }
  },
-  setup(props) {
-    const refProps = toRefs(props)
-    const { content } = useFolderNotes(
-      FLEETING_NOTES_FOLDER,
-      refProps.user,
-      refProps.repo
-    )
-    const { resetStackedNotes } = useQueryStackedNotes()
-
-    onMounted(() => {
-      resetStackedNotes()
-    })
+  setup() {
+    const { content } = useFolderNotes(FLEETING_NOTES_FOLDER)

    return {
      content
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -6,13 +6,7 @@
 </template>

 <script lang="ts">
-import {
-  defineComponent,
-  defineAsyncComponent,
-  computed,
-  toRefs,
-  watch
-} from 'vue'
+import { defineComponent, defineAsyncComponent, computed } from 'vue'
 import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'

 const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
@@ -32,13 +26,8 @@ export default defineComponent({
    repo: { type: String, required: false, default: '' }
  },
  setup(props) {
-    const refProps = toRefs(props)
    const { resetStackedNotes } = useQueryStackedNotes()

-    watch([refProps.user, refProps.repo], () => {
-      resetStackedNotes()
-    })
-
    return {
      resetStackedNotes,
      routeKey: computed(() => `${props.user}-${props.repo}`)