From 314575beca01e5b498ddada7e751e0bd17027b44 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 10 May 2021 01:27:15 +0800
Subject: [PATCH] fix: catch network error by using async

---
 src/driver/core/FileExplorer.ts          |  2 +-
 src/utils/hooks/useCatchNetworkError.tsx | 56 +++++++++++++-----------
 2 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/src/driver/core/FileExplorer.ts b/src/driver/core/FileExplorer.ts
index a3ddfd2..69ce519 100644
--- a/src/driver/core/FileExplorer.ts
+++ b/src/driver/core/FileExplorer.ts
@@ -11,7 +11,7 @@ export type Props = {
   accessToken: string | undefined
   config: Config
   loadWithPJAX(url: string): void
-  catchNetworkErrors: <T>(fn: () => T) => T | undefined
+  catchNetworkErrors: <T>(fn: () => T) => Promise<T | undefined>
 }
 
 export type ConnectorState = {
diff --git a/src/utils/hooks/useCatchNetworkError.tsx b/src/utils/hooks/useCatchNetworkError.tsx
index a33b5c8..901788a 100644
--- a/src/utils/hooks/useCatchNetworkError.tsx
+++ b/src/utils/hooks/useCatchNetworkError.tsx
@@ -1,5 +1,6 @@
 import { useConfigs } from 'containers/ConfigsContext'
 import { errors, platformName } from 'platforms'
+import { useCallback } from 'react'
 import { useLoadedContext } from 'utils/hooks/useLoadedContext'
 import { SideBarErrorContext } from '../../components/ErrorContext'
 import { SideBarStateContext } from '../../components/SideBarState'
@@ -9,33 +10,36 @@ export function useCatchNetworkError() {
   const stateContext = useLoadedContext(SideBarStateContext)
   const errorContext = useLoadedContext(SideBarErrorContext)
 
-  return function <T>(fn: () => T) {
-    try {
-      return fn()
-    } catch (err) {
-      if (err.message === errors.EMPTY_PROJECT) {
-        errorContext.onChange('This project seems to be empty.')
-      } else if (err.message === errors.BLOCKED_PROJECT) {
-        errorContext.onChange('Access to the project is blocked.')
-      } else if (
-        err.message === errors.NOT_FOUND ||
-        err.message === errors.BAD_CREDENTIALS ||
-        err.message === errors.API_RATE_LIMIT
-      ) {
-        stateContext.onChange('error-due-to-auth')
-      } else if (err.message === errors.CONNECTION_BLOCKED) {
-        if (accessToken) {
-          errorContext.onChange(`Cannot connect to ${platformName}.`)
-        } else {
+  return useCallback(
+    async function <T>(fn: () => T) {
+      try {
+        return await fn() // keep the await so that catch block can catch async errors
+      } catch (err) {
+        if (err.message === errors.EMPTY_PROJECT) {
+          errorContext.onChange('This project seems to be empty.')
+        } else if (err.message === errors.BLOCKED_PROJECT) {
+          errorContext.onChange('Access to the project is blocked.')
+        } else if (
+          err.message === errors.NOT_FOUND ||
+          err.message === errors.BAD_CREDENTIALS ||
+          err.message === errors.API_RATE_LIMIT
+        ) {
           stateContext.onChange('error-due-to-auth')
+        } else if (err.message === errors.CONNECTION_BLOCKED) {
+          if (accessToken) {
+            errorContext.onChange(`Cannot connect to ${platformName}.`)
+          } else {
+            stateContext.onChange('error-due-to-auth')
+          }
+        } else if (err.message === errors.SERVER_FAULT) {
+          errorContext.onChange(`${platformName} server went down.`)
+        } else {
+          stateContext.onChange('disabled')
+          errorContext.onChange('Some thing went wrong.')
+          throw err
         }
-      } else if (err.message === errors.SERVER_FAULT) {
-        errorContext.onChange(`${platformName} server went down.`)
-      } else {
-        stateContext.onChange('disabled')
-        errorContext.onChange('Some thing went wrong.')
-        throw err
       }
-    }
-  }
+    },
+    [accessToken /* , stateContext.value, errorContext.value */],
+  )
 }