From c43a5c2311b3df4c01b31e0fe577716d19e1e192 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 10 May 2021 00:07:26 +0800
Subject: [PATCH] feat: resolve OAuth token before sending request

---
 src/components/Gitako.tsx       | 25 +++++++++--------
 src/components/OAuthWrapper.tsx | 48 +++++++++++++++++++++++++++++++++
 src/components/RepoContext.tsx  | 43 +----------------------------
 3 files changed, 63 insertions(+), 53 deletions(-)
 create mode 100644 src/components/OAuthWrapper.tsx

diff --git a/src/components/Gitako.tsx b/src/components/Gitako.tsx
index 82470b9..ca91097 100644
--- a/src/components/Gitako.tsx
+++ b/src/components/Gitako.tsx
@@ -5,6 +5,7 @@ import * as React from 'react'
 import { useLoadedContext } from 'utils/hooks/useLoadedContext'
 import { ErrorBoundary } from './ErrorBoundary'
 import { StateBarErrorContextWrapper } from './ErrorContext'
+import { OAuthWrapper } from './OAuthWrapper'
 import { RepoContext, RepoContextWrapper } from './RepoContext'
 import { SideBarStateContext, StateBarStateContextWrapper } from './SideBarState'
 
@@ -14,17 +15,19 @@ export function Gitako() {
       <ConfigsContextWrapper>
         <StateBarStateContextWrapper>
           <StateBarErrorContextWrapper>
-            <RepoContextWrapper>
-              <IIFC>
-                {() => (
-                  <SideBar
-                    configContext={useConfigs()}
-                    stateContext={useLoadedContext(SideBarStateContext)}
-                    metaData={React.useContext(RepoContext)}
-                  />
-                )}
-              </IIFC>
-            </RepoContextWrapper>
+            <OAuthWrapper>
+              <RepoContextWrapper>
+                <IIFC>
+                  {() => (
+                    <SideBar
+                      configContext={useConfigs()}
+                      stateContext={useLoadedContext(SideBarStateContext)}
+                      metaData={useLoadedContext(RepoContext)}
+                    />
+                  )}
+                </IIFC>
+              </RepoContextWrapper>
+            </OAuthWrapper>
           </StateBarErrorContextWrapper>
         </StateBarStateContextWrapper>
       </ConfigsContextWrapper>
diff --git a/src/components/OAuthWrapper.tsx b/src/components/OAuthWrapper.tsx
new file mode 100644
index 0000000..0390972
--- /dev/null
+++ b/src/components/OAuthWrapper.tsx
@@ -0,0 +1,48 @@
+import { useConfigs } from 'containers/ConfigsContext'
+import { platform } from 'platforms'
+import * as React from 'react'
+import { parseURLSearch, run } from 'utils/general'
+import { useStateIO } from 'utils/hooks/useStateIO'
+
+/**
+ * Setup access token before sending other requests
+ */
+export function OAuthWrapper({ children }: React.PropsWithChildren<{}>) {
+  const running = useSetAccessToken()
+  return running ? null : <>{children}</>
+}
+
+function useSetAccessToken() {
+  const $block = useStateIO(() => Boolean(getCodeSearchParam()))
+  const configContext = useConfigs()
+  const { accessToken } = configContext.value
+  React.useEffect(() => {
+    run(async function () {
+      const code = getCodeSearchParam()
+      if (code && !accessToken) {
+        const accessToken = await getAccessTokenWithCode(code)
+        if (accessToken) configContext.onChange({ accessToken })
+      }
+      $block.onChange(false)
+    })
+  }, [])
+
+  return $block.value
+}
+
+function getCodeSearchParam() {
+  return parseURLSearch().get('code')
+}
+
+async function getAccessTokenWithCode(code: string) {
+  const accessToken = await platform.setOAuth(code)
+  if (!accessToken) alert(`Gitako: The OAuth token may have expired, please try again.`)
+  const search = parseURLSearch()
+  search.delete('code')
+  window.history.replaceState(
+    {},
+    'removed search param',
+    window.location.pathname.replace(window.location.search, search.toString()),
+  )
+  return accessToken
+}
diff --git a/src/components/RepoContext.tsx b/src/components/RepoContext.tsx
index 7d46c7e..2c97118 100644
--- a/src/components/RepoContext.tsx
+++ b/src/components/RepoContext.tsx
@@ -1,7 +1,6 @@
 import { useConfigs } from 'containers/ConfigsContext'
 import { platform } from 'platforms'
 import * as React from 'react'
-import { parseURLSearch, run } from 'utils/general'
 import { useEffectOnSerializableUpdates } from 'utils/hooks/useEffectOnSerializableUpdates'
 import { useLoadedContext } from 'utils/hooks/useLoadedContext'
 import { useOnPJAXDone } from 'utils/hooks/usePJAX'
@@ -15,13 +14,8 @@ export function RepoContextWrapper({ children }: React.PropsWithChildren<{}>) {
   const partialMetaData = usePartialMetaData()
   const defaultBranch = useDefaultBranch(partialMetaData)
   const metaData = useMetaData(partialMetaData, defaultBranch)
-  const fetchingAccessToken = useSetAccessToken()
 
-  return (
-    <RepoContext.Provider value={metaData}>
-      {metaData && !fetchingAccessToken && children}
-    </RepoContext.Provider>
-  )
+  return <RepoContext.Provider value={metaData}>{metaData && children}</RepoContext.Provider>
 }
 
 function resolvePartialMetaData() {
@@ -103,38 +97,3 @@ function useMetaData(
   }, [partialMetaData, branchName, defaultBranchName])
   return $metaData.value
 }
-
-function useSetAccessToken() {
-  const $running = useStateIO(() => Boolean(getCodeSearchParam()))
-  const configContext = useConfigs()
-  const { accessToken } = configContext.value
-  React.useEffect(() => {
-    run(async function () {
-      const code = getCodeSearchParam()
-      if (code && !accessToken) {
-        const accessToken = await getAccessTokenWithCode(code)
-        if (accessToken) configContext.onChange({ accessToken })
-      }
-      $running.onChange(false)
-    })
-  }, [])
-
-  return $running.value
-}
-
-function getCodeSearchParam() {
-  return parseURLSearch().get('code')
-}
-
-async function getAccessTokenWithCode(code: string) {
-  const accessToken = await platform.setOAuth(code)
-  if (!accessToken) alert(`Gitako: The OAuth token may have expired, please try again.`)
-  const search = parseURLSearch()
-  search.delete('code')
-  window.history.replaceState(
-    {},
-    'removed search param',
-    window.location.pathname.replace(window.location.search, search.toString()),
-  )
-  return accessToken
-}