🐛 (stacked notes) refacto query stacked notes in a local store

src/hooks/useFocus.hook.ts

@@ -1,32 +1,21 @@
-import { LocationQueryValue, useRoute } from 'vue-router'
-import { computed, nextTick } from 'vue'
-
 import { NOTE_WIDTH } from '@/constants/note-width'
+import { nextTick } from 'vue'
 import { useOverlay } from '@/hooks/useOverlay.hook'
+import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
 import { useWindowSize } from '@vueuse/core'
 
 export const useFocus = () => {
   const { height } = useWindowSize()
   const { scrollToNote, isMobile } = useOverlay(false)
-  const { query } = useRoute()
+  const { stackedNotes } = useQueryStackedNotes()
 
-  const initialStackedNotes = computed(() =>
-    query.stackedNotes
-      ? Array.isArray(query.stackedNotes)
-        ? query.stackedNotes
-        : [query.stackedNotes]
-      : []
-  )
-
-  const scrollToFocusedNote = (
-    sha?: string,
-    stackedNotes: LocationQueryValue[] = initialStackedNotes.value
-  ) => {
+  const scrollToFocusedNote = (sha?: string) => {
     if (!sha) {
       return
     }
     nextTick(() => {
-      const index = stackedNotes.findIndex((noteSHA) => noteSHA === sha)
+      const index = stackedNotes.value.findIndex((noteSHA) => noteSHA === sha)
+
       if (isMobile.value) {
         const element = document.querySelector(`.note-${sha}`) as HTMLElement
         const top = (index + 1) * (element?.clientHeight ?? height.value)

src/hooks/useNote.hook.ts

@@ -1,4 +1,3 @@
-import { Ref, ref } from '@vue/reactivity'
 import {
   computed,
   nextTick,
@@ -6,14 +5,16 @@ import {
   onUnmounted,
   watch
 } from '@vue/runtime-core'
-import { useRoute, useRouter } from 'vue-router'
 
 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'
 
 const sanitizePath = (path: string) => {
   if (path.startsWith('./')) {
@@ -28,23 +29,15 @@ export const useNote = (
   repo: Ref<string>
 ) => {
   const { push } = useRouter()
-  const { query } = useRoute()
   const { isMobile } = useOverlay(false)
   const { scrollToFocusedNote } = useFocus()
-
-  const stackedNotes = ref(
-    query.stackedNotes
-      ? Array.isArray(query.stackedNotes)
-        ? query.stackedNotes
-        : [query.stackedNotes]
-      : []
-  )
+  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) => {
+    stackedNotes.value?.reduce((obj: Record<string, string>, note) => {
       if (!note) {
         return obj
       }
@@ -82,7 +75,7 @@ export const useNote = (
       )
 
       if (!file?.sha || stackedNotes.value.includes(file.sha)) {
-        scrollToFocusedNote(file?.sha, stackedNotes.value)
+        scrollToFocusedNote(file?.sha)
         return
       }
 
@@ -119,9 +112,8 @@ export const useNote = (
         }
       })
 
-      stackedNotes.value = newStackedNotes
-
-      scrollToFocusedNote(file.sha, stackedNotes.value)
+      updateQueryStackedNotes(newStackedNotes)
+      scrollToFocusedNote(file.sha)
     }
   )
 
@@ -145,10 +137,6 @@ export const useNote = (
     }
   }
 
-  const resetStackedNotes = () => {
-    stackedNotes.value = []
-  }
-
   onMounted(() => {
     resizeContainer()
   })
@@ -164,8 +152,6 @@ export const useNote = (
   return {
     titles,
     readme,
-    notFound,
-    stackedNotes,
-    resetStackedNotes
+    notFound
   }
 }

src/hooks/useQueryStackedNotes.hook.ts

@@ -0,0 +1,30 @@
+import { readonly, ref } from '@vue/reactivity'
+
+import { useRoute } from 'vue-router'
+
+const stackedNotes = ref<string[]>([])
+
+let initial = true
+
+export const useQueryStackedNotes = () => {
+  const { query } = useRoute()
+  if (initial) {
+    initial = false
+    stackedNotes.value = query.stackedNotes
+      ? Array.isArray(query.stackedNotes)
+        ? (query.stackedNotes
+            .map((n) => n?.toString())
+            .filter((n) => !!n) as string[])
+        : ([query.stackedNotes]
+            .map((n) => n?.toString())
+            .filter((n) => !!n) as string[])
+      : ([] as string[])
+  }
+
+  return {
+    stackedNotes: readonly(stackedNotes),
+    updateQueryStackedNotes: (newStackedNotes: string[]) =>
+      (stackedNotes.value = newStackedNotes),
+    resetStackedNotes: () => (stackedNotes.value = [])
+  }
+}

src/views/Home.vue

@@ -43,6 +43,7 @@
 <script lang="ts">
 import { defineComponent, defineAsyncComponent, computed, toRefs } from 'vue'
 import { useNote } from '@/hooks/useNote.hook'
+import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
 
 const StackedNote = defineAsyncComponent(() =>
   import('@/components/StackedNote.vue')
@@ -67,6 +68,7 @@ export default defineComponent({
 
     return {
       ...useNote('note-container', refProps.user, refProps.repo),
+      ...useQueryStackedNotes(),
       routeKey: computed(() => `${props.user}-${props.repo}`)
     }
   }