From 15fef6f0b45d79bd3cb57a81d8cea572d1222346 Mon Sep 17 00:00:00 2001
From: kadiryazici <kyzc411@gmail.com>
Date: Wed, 28 Feb 2024 19:21:37 +0300
Subject: [PATCH] Move route to seperate composable

---
 src/App.vue                                      | 10 +++++-----
 src/components/AppScroller.vue                   |  6 +++---
 src/components/AppSidebar.vue                    |  6 +++---
 src/{stores/route.ts => composables/useRoute.ts} |  3 ++-
 src/main.ts                                      |  2 +-
 src/pages/HomePage.vue                           |  4 ++--
 src/pages/LandingPage.vue                        |  2 +-
 src/pages/SettingsPage.vue                       |  2 +-
 src/stores/store.ts                              |  2 +-
 9 files changed, 19 insertions(+), 18 deletions(-)
 rename src/{stores/route.ts => composables/useRoute.ts} (89%)

diff --git a/src/App.vue b/src/App.vue
index 7c3d46e..b0a0ca5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,13 +9,13 @@ import { useStore } from './stores/store'
 import LandingPage from './pages/LandingPage.vue'
 import { useInterval } from './composables/useInterval'
 import { AppStorage } from './storage'
-import { Page, useRoute } from './stores/route'
 import ContextMenu from './components/ContextMenu.vue'
 import { useContextmenu } from './stores/contextmenu'
 import { useTheme } from './composables/useTheme'
+import { Page, useRoute } from './composables/useRoute'
 
 const store = useStore()
-const route = useRoute()
+const { currentPage } = useRoute()
 const contextmenu = useContextmenu()
 
 useInterval(() => {
@@ -41,9 +41,9 @@ watchEffect(() => {
   <AppSidebar />
 
   <AppScroller>
-    <HomePage v-if="route.currentPage === Page.Home" />
-    <SettingsPage v-else-if="route.currentPage === Page.Settings" />
-    <LandingPage v-else-if="route.currentPage === Page.Landing" />
+    <HomePage v-if="currentPage === Page.Home" />
+    <SettingsPage v-else-if="currentPage === Page.Settings" />
+    <LandingPage v-else-if="currentPage === Page.Landing" />
   </AppScroller>
 
   <ContextMenu
diff --git a/src/components/AppScroller.vue b/src/components/AppScroller.vue
index 787cd03..635d9c6 100644
--- a/src/components/AppScroller.vue
+++ b/src/components/AppScroller.vue
@@ -8,8 +8,8 @@ import { useStore } from '../stores/store'
 import type { Option } from '../types'
 import { batchFn } from '../utils/batch'
 import { ColorPreference } from '../constants'
-import { useRoute } from '../stores/route'
 import { useTheme } from '../composables/useTheme'
+import { useRoute } from '../composables/useRoute'
 
 const route = useRoute()
 const scrollView = ref<Option<OverlayScrollbarsComponentRef>>(null)
@@ -18,11 +18,11 @@ const focus = batchFn(() => {
   scrollView.value?.getElement()?.focus()
 })
 
-watch(() => route.currentPage, focus, { flush: 'post' })
 useTauriEvent('window:hidden', focus)
 onMounted(focus)
+watch(route.currentPage, () => {
+  focus()
 
-watch(() => route.currentPage, () => {
   const element = scrollView.value?.osInstance()?.elements().scrollOffsetElement
   if (element)
     element.scrollTop = 0
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index f215646..ae4634a 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -6,8 +6,8 @@ import { REPO_LINK } from '../constants'
 import { useStore } from '../stores/store'
 import { AppStorage } from '../storage'
 import { useKey } from '../composables/useKey'
-import { Page, useRoute } from '../stores/route'
 import { useI18n } from '../composables/useI18n'
+import { Page, useRoute } from '../composables/useRoute'
 import { Icons } from './Icons'
 import SidebarButton from './SidebarButton.vue'
 import Popover from './Popover.vue'
@@ -49,7 +49,7 @@ const moreItems = computed(() => [
 
 useKey('r', () => {
   store.fetchNotifications(true)
-}, { source: () => route.currentPage === Page.Home })
+}, { source: () => route.currentPage.value === Page.Home })
 </script>
 
 <template>
@@ -109,7 +109,7 @@ useKey('r', () => {
       <SlotRef>
         <template #default>
           <SidebarButton
-            :disabled="route.currentPage !== Page.Home"
+            :disabled="route.currentPage.value !== Page.Home"
             @click="store.fetchNotifications(true)"
           >
             <Icons.Sync16 />
diff --git a/src/stores/route.ts b/src/composables/useRoute.ts
similarity index 89%
rename from src/stores/route.ts
rename to src/composables/useRoute.ts
index 5d0a270..40c788d 100644
--- a/src/stores/route.ts
+++ b/src/composables/useRoute.ts
@@ -1,6 +1,7 @@
 import { readonly, ref, shallowRef } from 'vue'
 import { defineStore } from 'pinia'
 import type { Option } from '../types'
+import { singleton } from '../utils/common'
 
 export enum Page {
   Settings = 'Settings',
@@ -12,7 +13,7 @@ export type PageState = {
   fetchOnEnter?: boolean
 }
 
-export const useRoute = defineStore('route', () => {
+export const useRoute = singleton(() => {
   const currentPage = ref(Page.Landing)
   const pageFrom = ref<Option<Page>>(null)
   const state = shallowRef<PageState>({})
diff --git a/src/main.ts b/src/main.ts
index 135505e..9610a74 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -15,9 +15,9 @@ import App from './App.vue'
 import { AppStorage, cacheStorageFromDisk } from './storage'
 import { useStore } from './stores/store'
 import { useKey } from './composables/useKey'
-import { Page, useRoute } from './stores/route'
 import 'dayjs/locale/en'
 import 'dayjs/locale/tr'
+import { Page, useRoute } from './composables/useRoute'
 
 async function main() {
   if (import.meta.env.MODE !== 'production') {
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 62d6e84..93bedc3 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -17,15 +17,15 @@ import { isRepository } from '../utils/notification'
 import { type ItemMeta, menuItem } from '../components/MenuItems.vue'
 import { useKey } from '../composables/useKey'
 import { CheckedNotificationProcess } from '../constants'
-import { useRoute } from '../stores/route'
 import { vContextmenu } from '../directives/contextmenu'
 import { useI18n } from '../composables/useI18n'
+import { useRoute } from '../composables/useRoute'
 
 const store = useStore()
 const route = useRoute()
 const { t } = useI18n()
 
-if (route.state.fetchOnEnter)
+if (route.state.value.fetchOnEnter)
   store.fetchNotifications(true)
 
 function handleOpenNotification(thread: Thread) {
diff --git a/src/pages/LandingPage.vue b/src/pages/LandingPage.vue
index 8fc31af..a9ffc42 100644
--- a/src/pages/LandingPage.vue
+++ b/src/pages/LandingPage.vue
@@ -13,8 +13,8 @@ import EmptyState from '../components/EmptyState.vue'
 import { createAuthURL } from '../utils/github'
 import { useTimeoutPool } from '../composables/useTimeoutPool'
 import { getServerPort } from '../api/app'
-import { Page, useRoute } from '../stores/route'
 import { useI18n } from '../composables/useI18n'
+import { Page, useRoute } from '../composables/useRoute'
 
 const store = useStore()
 const route = useRoute()
diff --git a/src/pages/SettingsPage.vue b/src/pages/SettingsPage.vue
index 3c26a14..3924f27 100644
--- a/src/pages/SettingsPage.vue
+++ b/src/pages/SettingsPage.vue
@@ -20,8 +20,8 @@ import MenuItems, { menuItem } from '../components/MenuItems.vue'
 import Popover from '../components/Popover.vue'
 import Switch from '../components/Switch.vue'
 import SettingItem from '../components/SettingItem.vue'
-import { Page, useRoute } from '../stores/route'
 import { useI18n } from '../composables/useI18n'
+import { Page, useRoute } from '../composables/useRoute'
 
 const route = useRoute()
 const { t, currentLanguage } = useI18n()
diff --git a/src/stores/store.ts b/src/stores/store.ts
index 8ef4d94..0b8a51f 100644
--- a/src/stores/store.ts
+++ b/src/stores/store.ts
@@ -10,8 +10,8 @@ import { CheckedNotificationProcess, InvokeCommand, notificationApiMutex } from
 import { AppStorage } from '../storage'
 import type { NotificationList, Option } from '../types'
 import { filterNewThreads, isRepository, isThread, toNotificationList } from '../utils/notification'
-import { Page, useRoute } from '../stores/route'
 import { everySome } from '../utils/array'
+import { Page, useRoute } from '../composables/useRoute'
 
 export const useStore = defineStore('store', () => {
   const notifications = shallowRef<NotificationList>([])