From fbe2a026be79a409648d44f0fa5a673cfef75a23 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Thu, 2 Apr 2020 23:44:42 +0800
Subject: [PATCH] feat: use pjax-api

---
 package.json                    |  1 +
 src/components/FileExplorer.tsx |  2 +-
 src/components/SideBar.tsx      |  2 +-
 src/platforms/GitHub/index.ts   |  4 +-
 src/platforms/Gitee/index.ts    |  2 +-
 src/utils/hooks/usePJAX.ts      | 65 +++++++++++++++++----------------
 yarn.lock                       |  5 +++
 7 files changed, 45 insertions(+), 36 deletions(-)

diff --git a/package.json b/package.json
index bae4dd4..242f2f8 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "ini": "^1.3.5",
     "js-base64": "^2.5.1",
     "nprogress": "^0.2.0",
+    "pjax-api": "^3.30.1",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-use": "^13.8.0",
diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx
index eef0954..95fdc88 100644
--- a/src/components/FileExplorer.tsx
+++ b/src/components/FileExplorer.tsx
@@ -212,7 +212,7 @@ function ListView({
     if (targetPath) expandTo(targetPath)
   }, [metaData.branchName])
   useOnLocationChange(goToCurrentItem)
-  useEvent('pjax:complete', goToCurrentItem, window)
+  useEvent('pjax:ready', goToCurrentItem, document)
   return (
     <List
       ref={listRef}
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index e61a187..3f38cc7 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -70,7 +70,7 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
     },
     [props.metaData?.branchName, configContext.val.intelligentToggle],
   )
-  useEvent('pjax:complete', updateSideBarVisibility, window)
+  useEvent('pjax:ready', updateSideBarVisibility, document)
 
   const copyFileButton = configContext.val.copyFileButton
   useGitHubAttachCopyFileButton(copyFileButton)
diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts
index 4d0eb22..dccd27b 100644
--- a/src/platforms/GitHub/index.ts
+++ b/src/platforms/GitHub/index.ts
@@ -172,7 +172,7 @@ export function useGitHubAttachCopySnippetButton(copySnippetButton: boolean) {
     [copySnippetButton],
   )
   React.useEffect(attachCopySnippetButton, [copySnippetButton])
-  useEvent('pjax:complete', attachCopySnippetButton, window)
+  useEvent('pjax:ready', attachCopySnippetButton, document)
 }
 
 export function useGitHubAttachCopyFileButton(copyFileButton: boolean) {
@@ -184,5 +184,5 @@ export function useGitHubAttachCopyFileButton(copyFileButton: boolean) {
     [copyFileButton],
   )
   React.useEffect(attachCopyFileButton, [copyFileButton])
-  useEvent('pjax:complete', attachCopyFileButton, window)
+  useEvent('pjax:ready', attachCopyFileButton, document)
 }
diff --git a/src/platforms/Gitee/index.ts b/src/platforms/Gitee/index.ts
index 2ef8d24..531c07b 100644
--- a/src/platforms/Gitee/index.ts
+++ b/src/platforms/Gitee/index.ts
@@ -173,5 +173,5 @@ export function useGiteeAttachCopySnippetButton(copySnippetButton: boolean) {
     [copySnippetButton],
   )
   React.useEffect(attachCopySnippetButton, [copySnippetButton])
-  useEvent('pjax:complete', attachCopySnippetButton, window)
+  useEvent('pjax:ready', attachCopySnippetButton, document)
 }
diff --git a/src/utils/hooks/usePJAX.ts b/src/utils/hooks/usePJAX.ts
index 629f13a..c1d13e3 100644
--- a/src/utils/hooks/usePJAX.ts
+++ b/src/utils/hooks/usePJAX.ts
@@ -1,40 +1,43 @@
-import * as PJAX from 'pjax'
+import { Config, Pjax } from 'pjax-api'
 import * as React from 'react'
+import { useEvent } from 'react-use'
 import { useProgressBar } from './useProgressBar'
 
+const config: Config = {
+  areas: [
+    // github
+    '.repository-content',
+    '[data-pjax="#js-repo-pjax-container"]',
+    '.page-content',
+    // gitee
+    '#git-project-content',
+  ],
+  update: {
+    css: false,
+  },
+  fetch: {
+    cache(path) {
+      return path
+    },
+  },
+}
+
 export function usePJAX() {
-  // Note: shall not enable below pjax:send listener as there would be dual bar when GitHub PJAX links are triggered
-  // window.addEventListener('pjax:send', () => mountTopProgressBar())
-  const [pjax] = React.useState(
-    () =>
-      new PJAX({
-        elements: 'match-nothing-selector',
-        selectors: [
-          '.repository-content',
-          'title',
-          '[data-pjax="#js-repo-pjax-container"]',
-          '.page-content',
-          '#git-project-content',
-        ],
-        scrollTo: false,
-        analytics: false,
-        cacheBust: false,
-        forceCache: true, // TODO: merge namespace, add forceCache
-      }),
-  )
-  const progressBar = useProgressBar()
+  // make history travel work
   React.useEffect(() => {
-    window.addEventListener('pjax:complete', progressBar.unmount)
-    return () => window.removeEventListener('pjax:complete', progressBar.unmount)
+    new Pjax({
+      ...config,
+      filter() {
+        return false
+      },
+    })
   }, [])
 
-  const loadWithPJAX = React.useCallback(
-    function loadWithPJAX(URL: string) {
-      progressBar.mount()
-      pjax.loadUrl(URL, { scrollTo: 0 })
-    },
-    [pjax],
-  )
+  const progressBar = useProgressBar()
+  useEvent('pjax:fetch', progressBar.mount, window)
+  useEvent('pjax:unload', progressBar.unmount, window)
 
-  return loadWithPJAX
+  return React.useCallback(url => {
+    Pjax.assign(url, config)
+  }, [])
 }
diff --git a/yarn.lock b/yarn.lock
index 06f2cd1..b3fab8e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6925,6 +6925,11 @@ pino@~5.13.0:
     quick-format-unescaped "^3.0.3"
     sonic-boom "^0.7.5"
 
+pjax-api@^3.30.1:
+  version "3.30.1"
+  resolved "https://registry.yarnpkg.com/pjax-api/-/pjax-api-3.30.1.tgz#a263950e15162f339dcddd6a3dd75d17c51e7b12"
+  integrity sha512-yH6SzgvYxHuyJXwn/AXdjL0PB6pdk/W/lyv+numHuDQTbEi9uvjG1N0a8uUtkiMdFfuCpCP7EoxjJzQfO4Z86w==
+
 pkg-dir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"