fix: pjax messed history up

src/components/SideBar.tsx

@@ -19,7 +19,8 @@ import * as React from 'react'
 import { useUpdateEffect } from 'react-use'
 import { cx } from 'utils/cx'
 import { parseURLSearch } from 'utils/general'
-import { useOnPJAXDone, usePJAX } from 'utils/hooks/usePJAX'
+import { loadWithPJAX, useOnPJAXDone, usePJAX } from 'utils/hooks/usePJAX'
+import { useProgressBar } from 'utils/hooks/useProgressBar'
 import * as keyHelper from 'utils/keyHelper'
 import { Icon } from './Icon'
 
@@ -94,7 +95,8 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
     props.init()
   }, [accessToken || '']) // '' prevents duplicated requests
 
-  const loadWithPJAX = usePJAX()
+  usePJAX()
+  useProgressBar()
 
   const {
     errorDueToAuth,

src/utils/hooks/usePJAX.ts

@@ -1,14 +1,11 @@
 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',
   ],
@@ -20,6 +17,7 @@ const config: Config = {
       return path
     },
   },
+  link: 'a:not(a)', // this helps fixing the go-back-in-history issue
   form: 'form:not(form)', // prevent blocking form submissions
   fallback(target, reason) {
     // prevent unexpected reload
@@ -36,14 +34,10 @@ export function usePJAX() {
       },
     })
   }, [])
+}
 
-  const progressBar = useProgressBar()
-  useEvent('pjax:fetch', progressBar.mount, window)
-  useEvent('pjax:unload', progressBar.unmount, window)
-
-  return React.useCallback(url => {
-    Pjax.assign(url, config)
-  }, [])
+export const loadWithPJAX = (url: string) => {
+  Pjax.assign(url, config)
 }
 
 export function useOnPJAXDone(callback: () => void, both = true) {

src/utils/hooks/useProgressBar.ts

@@ -1,22 +1,21 @@
 import * as NProgress from 'nprogress'
 import * as React from 'react'
+import { useEvent } from 'react-use'
+
+const progressBar = {
+  mount() {
+    NProgress.start()
+  },
+  unmount() {
+    NProgress.done()
+  },
+}
 
 export function useProgressBar() {
-  const [progressBar] = React.useState(() => {
-    return {
-      mount() {
-        NProgress.start()
-      },
-
-      unmount() {
-        NProgress.done()
-      },
-    }
-  })
-
   React.useEffect(() => {
     NProgress.configure({ showSpinner: false })
   }, [])
 
-  return progressBar
+  useEvent('pjax:fetch', progressBar.mount, window)
+  useEvent('pjax:unload', progressBar.unmount, window)
 }