feat: improve Page History

Rule-34 · Dec 28, 2023 · 6e5dda5 · 6e5dda5
1 parent fb31847
commit 6e5dda5
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 36 deletions.
diff --git a/components/pages/home/PageHistory.vue b/components/pages/home/PageHistory.vue
@@ -11,7 +11,8 @@
     return (
       path
         //
-        .replace('/posts?', '')
+        .replace('/posts/', 'domain: ')
+        .replace('?', '&')
         .split('&')
         .map(
           (_query) =>

diff --git a/composables/usePageHistory.ts b/composables/usePageHistory.ts
@@ -1,4 +1,4 @@
-import { useEventListener, useStorage } from '@vueuse/core'
+import { useStorage } from '@vueuse/core'
 
 interface PageHistory {
   path: string
@@ -15,56 +15,81 @@ if (process.client) {
   // TODO: Serialize Date
 }
 
-export function usePageHistory() {
-  const route = useRoute()
+/**
+ * Checks if the relative URL is the previous page
+ */
+function isUrlPreviousPage(url1: string, url2: string): boolean {
+  if (!url1 || !url2) {
+    return false
+  }
+
+  const url1WithoutPage = new URL(url1, window.location.origin)
+  const url1Page = url1WithoutPage.searchParams.get('page')
+  url1WithoutPage.searchParams.delete('page')
+
+  const url2WithoutPage = new URL(url2, window.location.origin)
+  const url2Page = url2WithoutPage.searchParams.get('page')
+  url2WithoutPage.searchParams.delete('page')
+
+  const isSameUrlWithoutPage = url1WithoutPage.href === url2WithoutPage.href
+  const isPreviousPage = url2Page === String(Number(url1Page) - 1)
 
+  return isSameUrlWithoutPage && isPreviousPage
+}
+
+export function usePageHistory() {
   /**
-   * Saves the current route full path to the page history
+   * Adds a relative URL to the page history
    * With a maximum of 10 pages
    */
-  function addListener() {
+  function addUrlToPageHistory(relativeUrl: string) {
     if (process.server) {
-      return
+      throw new Error('This should only be called on the client')
     }
 
-    useEventListener(document, 'visibilitychange', (event) => {
-      if (document.visibilityState !== 'hidden') {
-        return
-      }
+    const url = new URL(relativeUrl, window.location.origin)
 
-      if (route.path !== '/posts') {
-        return
-      }
+    // Skip if it's not the posts path
+    if (!url.pathname.startsWith('/posts/')) {
+      return
+    }
 
-      if (route.fullPath === '/posts') {
-        return
-      }
+    // Skip if there are no query params
+    if (!url.search) {
+      return
+    }
 
-      // Skip if the last page is the same
-      if (pageHistory.value.length && pageHistory.value[pageHistory.value.length - 1].path === route.fullPath) {
-        return
-      }
+    const previousPage = pageHistory.value[pageHistory.value.length - 1]
 
-      // TODO: Skip if only domain is set
+    // Skip if the previous url is the same
+    if (previousPage && previousPage.path === relativeUrl) {
+      return
+    }
 
-      if (pageHistory.value.length >= 10) {
-        pageHistory.value.shift()
-      }
+    // Replace if the previous url is the previous page before current page
+    if (previousPage && isUrlPreviousPage(relativeUrl, previousPage.path)) {
+      pageHistory.value.pop()
+    }
 
-      pageHistory.value.push({
-        path: route.fullPath,
-        date: new Date()
-      })
+    // Maximum of 10 pages
+    if (pageHistory.value.length >= 10) {
+      pageHistory.value.shift()
+    }
 
-      // Deduplicate and retain the last duplicate
-      pageHistory.value = pageHistory.value.filter((value, index, self) => {
-        return self.indexOf(value) === index
-      })
+    pageHistory.value.push({
+      path: relativeUrl,
+      date: new Date()
     })
+
+    // TODO: Remove duplicated paths, while keeping the most recent
+    // pageHistory.value = pageHistory.value.filter((page, index, self) => {
+    //
+    //   return self.findIndex((p) => p.path === page.path) === index
+    // })
   }
 
   return {
     pageHistory,
-    addListener
+    addUrlToPageHistory
   }
 }
diff --git a/pages/posts/[domain].vue b/pages/posts/[domain].vue
@@ -21,9 +21,15 @@
   const userSettings = useUserSettings()
   const { isPremium } = useUserData()
   const { booruList } = useBooruList()
-  const { addListener } = usePageHistory()
+  const { addUrlToPageHistory } = usePageHistory()
 
-  addListener()
+  const unregisterRouterAfterEach = router.afterEach((to, from) => {
+    addUrlToPageHistory(to.fullPath)
+  })
+
+  onBeforeUnmount(() => {
+    unregisterRouterAfterEach()
+  })
 
   const { selectedDomainFromStorage } = useSelectedDomainFromStorage()