From 6e1bef7a6f0a44c6f8c0dd0017f930dd8fe15b3b 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 |  3 +-
 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(+), 37 deletions(-)

diff --git a/package.json b/package.json
index d30e9c7..c2b426e 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.31.2",
     "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 f0bbd6b..c657582 100644
--- a/src/components/FileExplorer.tsx
+++ b/src/components/FileExplorer.tsx
@@ -204,8 +204,7 @@ function ListView({
     if (targetPath) expandTo(targetPath)
   }, [metaData.branchName])
   useOnLocationChange(goToCurrentItem)
-  useEvent('pjax:complete', goToCurrentItem, window)
-
+  useEvent('pjax:ready', goToCurrentItem, document)
   return (
     <FixedSizeList
       ref={listRef}
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index ab8c05a..6e93a44 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -69,7 +69,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 08b00a7..a91c4cc 100644
--- a/src/platforms/GitHub/index.ts
+++ b/src/platforms/GitHub/index.ts
@@ -163,7 +163,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) {
@@ -175,5 +175,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 68075ba..eff996e 100644
--- a/src/platforms/Gitee/index.ts
+++ b/src/platforms/Gitee/index.ts
@@ -162,5 +162,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 3b10667..69d9ece 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6956,6 +6956,11 @@ pino@~5.13.0:
     quick-format-unescaped "^3.0.3"
     sonic-boom "^0.7.5"
 
+pjax-api@^3.31.2:
+  version "3.31.2"
+  resolved "https://registry.yarnpkg.com/pjax-api/-/pjax-api-3.31.2.tgz#909d31a7238cb2555f5f3aefbbf17e7fb47ee0fc"
+  integrity sha512-g46QnbcQxdzyuD2QX4b/OL+szsjWF0UQ3rKZOHZ6Xno8On8E6D68HWGjFo9LnSmB4C/li9/4x/BWdSlvjEm65g==
+
 pkg-dir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"