fix(console): prevent extra interceptors in strict mode

console/src/api/ApiHeader.tsx

@@ -4,13 +4,14 @@ import { useQuery } from 'react-query'
 import { useCurrentUser } from '@/hooks/useCurrentUser'
 import axios from 'axios'
 import { toaster } from 'baseui/toast'
-import { getErrMsg } from '@/api'
+import { getErrMsg, setToken } from '@/api'
 import { useLocation } from 'react-router-dom'
 import useTranslation from '@/hooks/useTranslation'
 import { useCurrentUserRoles } from '@/hooks/useCurrentUserRoles'
 import { useFirstRender } from '@/hooks/useFirstRender'
 import { useProject } from '@project/hooks/useProject'
 import { useFetchProject } from '@/domain/project/hooks/useFetchProject'
+import qs from 'qs'
 
 export default function ApiHeader() {
     const location = useLocation()
@@ -27,12 +28,49 @@ export default function ApiHeader() {
     const projectInfo = useFetchProject(projectId)
     const { setProject } = useProject()
 
-    // console.log(projectId, location, location?.pathname.match(/^\/projects\/(\d*)\/?/))
-
     useFirstRender(() => {
+        // @ts-ignore
+        if (axios.interceptors.response.handlers.length > 0) return
+
         axios.interceptors.response.use(
-            (response) => response,
+            (response) => {
+                if (response.headers?.authorization) setToken(response.headers.authorization)
+                return response.data?.data ? response.data : response
+            },
             (error) => {
+                // eslint-disable-next-line no-restricted-globals
+                // eslint-disable-next-line prefer-destructuring
+                const winLocation = window.location
+
+                if (error.response?.status === 401) {
+                    setToken(undefined)
+                }
+
+                if (error.response?.status === 401 && error.config.method === 'get') {
+                    const withUnAuthRoute =
+                        ['/login', '/signup', '/create-account'].filter((path) => winLocation.pathname.includes(path))
+                            .length > 0
+                    const search = qs.parse(winLocation.search, { ignoreQueryPrefix: true })
+                    let { redirect } = search
+                    if (redirect && typeof redirect === 'string') {
+                        redirect = decodeURI(redirect)
+                    } else if (!withUnAuthRoute) {
+                        redirect = `${winLocation.pathname}${winLocation.search}`
+                    } else {
+                        redirect = '/projects'
+                    }
+
+                    if (!withUnAuthRoute) {
+                        winLocation.href = `${winLocation.protocol}//${
+                            winLocation.host
+                        }/login?redirect=${encodeURIComponent(redirect)}`
+                    }
+                }
+
+                // use user/current as default token auth, it will be triggered multi times, so slient here
+                const withSilentRoute = error.response.config.url.includes('/user/current')
+                if (withSilentRoute) return Promise.reject(error)
+
                 const errMsg = getErrMsg(error)
                 if (Date.now() - (lastErrMsgRef.current[errMsg] || 0) > errMsgExpireTimeSeconds * 1000) {
                     toaster.negative(
@@ -57,7 +95,7 @@ export default function ApiHeader() {
                     )
                     lastErrMsgRef.current[errMsg] = Date.now()
                 }
-                return error
+                return Promise.reject(error)
             }
         )
         // eslint-disable-next-line react-hooks/exhaustive-deps

console/src/api/Auth.tsx

@@ -30,7 +30,7 @@ const location = window.location
 export const AuthProvider = ({ children }: any) => {
     const [currentToken, setCurrentToken] = React.useState(getToken())
 
-    const userInfo = useQuery('currentUser', fetchCurrentUser, { refetchOnWindowFocus: false })
+    const userInfo = useQuery('currentUser', fetchCurrentUser, { refetchOnWindowFocus: false, retry: 0 })
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const { setCurrentUser } = useCurrentUser()
@@ -45,8 +45,14 @@ export const AuthProvider = ({ children }: any) => {
     }, [userInfo, setCurrentUser])
 
     const handleLogin = async (data: ILoginUserSchema) => {
-        await loginUser(data)
-        await userInfo.refetch()
+        try {
+            await loginUser(data)
+            await userInfo.refetch()
+        } catch (error) {
+            return ''
+        } finally {
+            if (getToken() !== currentToken) setCurrentToken(getToken())
+        }
 
         const search = qs.parse(location.search, { ignoreQueryPrefix: true })
         let { redirect } = search
@@ -56,18 +62,14 @@ export const AuthProvider = ({ children }: any) => {
             redirect = '/'
         }
 
-        setCurrentToken(getToken())
         return redirect
     }
 
     const handleLogout = () => {
         setToken(undefined)
-        // setCurrentToken(null)
         simulationJump('/logout')
     }
 
-    // console.log('raw:', !!getToken(), 'new:', !!currentToken, currentUser)
-
     const value = {
         token: currentToken,
         onLogin: handleLogin,

console/src/api/index.ts

@@ -1,6 +1,5 @@
 /* eslint-disable no-param-reassign */
 import axios from 'axios'
-import qs from 'qs'
 
 const key = 'token'
 const store = window.localStorage ?? {
@@ -10,6 +9,10 @@ const store = window.localStorage ?? {
     getter: () => undefined,
 }
 
+export const getToken = () => {
+    return store?.token
+}
+
 export const setToken = (token: string | undefined) => {
     if (!token) {
         store.removeItem(key)
@@ -20,48 +23,9 @@ export const setToken = (token: string | undefined) => {
 
 export function apiInit() {
     axios.interceptors.request.use((config) => {
-        config.headers.Authorization = store?.token
+        config.headers.Authorization = getToken()
         return config
     })
-    axios.interceptors.response.use(
-        (response) => {
-            if (response.headers.authorization) setToken(response.headers.authorization)
-            return response.data?.data ? response.data : response
-        },
-        (error) => {
-            // eslint-disable-next-line no-restricted-globals
-            // eslint-disable-next-line prefer-destructuring
-            const location = window.location
-            if (error.response?.status === 401) {
-                setToken(undefined)
-            }
-            if (error.response?.status === 401 && error.config.method === 'get') {
-                const withUnAuthRoute =
-                    ['/login', '/signup', '/create-account'].filter((path) => location.pathname.includes(path)).length >
-                    0
-                const search = qs.parse(location.search, { ignoreQueryPrefix: true })
-                let { redirect } = search
-                if (redirect && typeof redirect === 'string') {
-                    redirect = decodeURI(redirect)
-                } else if (!withUnAuthRoute) {
-                    redirect = `${location.pathname}${location.search}`
-                } else {
-                    redirect = '/projects'
-                }
-
-                if (!withUnAuthRoute) {
-                    location.href = `${location.protocol}//${location.host}/login?redirect=${encodeURIComponent(
-                        redirect
-                    )}`
-                }
-            }
-            return error
-        }
-    )
-}
-
-export const getToken = () => {
-    return store?.token
 }
 
 export function getErrMsg(err: any): string {

console/src/domain/datastore/hooks/useFetchDatastore.ts

@@ -21,10 +21,19 @@ export function useQueryDatastore(query: any) {
 }
 
 export function useQueryDatasetList(tableName?: string, page?: IListQuerySchema, rawResult = false) {
+    const { start, limit } = React.useMemo(() => {
+        const { pageNum = 1, pageSize = 10 } = page || {}
+
+        return {
+            start: (pageNum - 1) * pageSize ?? 0,
+            limit: pageSize ?? 0,
+        }
+    }, [page])
+
     const info = useQueryDatastore({
         tableName,
-        start: page?.pageNum ?? 0,
-        limit: page?.pageSize ?? 0,
+        start,
+        limit,
         rawResult,
     })
 
@@ -33,7 +42,7 @@ export function useQueryDatasetList(tableName?: string, page?: IListQuerySchema,
             info.refetch()
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [tableName, page])
+    }, [tableName, start, limit])
 
     return info
 }

console/src/pages/Dataset/DatasetVersionOverviewFiles.tsx

@@ -34,9 +34,7 @@ export default function DatasetVersionFiles() {
             start: page.pageNum,
             count: page.pageSize,
             total: rowCount,
-            afterPageChange: () => {
-                tables.refetch()
-            },
+            afterPageChange: () => {},
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [page, rowCount])

console/src/pages/Home/Login.tsx

@@ -2,11 +2,9 @@ import Card from '@/components/Card'
 import { createForm } from '@/components/Form'
 import useTranslation from '@/hooks/useTranslation'
 import { ILoginUserSchema } from '@user/schemas/user'
-// import { loginUser } from '@user/services/user'
 import { Input } from 'baseui/input'
-// import qs from 'qs'
 import React, { useCallback, useState } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useHistory } from 'react-router-dom'
 import Button from '@/components/Button'
 import IconFont from '@/components/IconFont'
 import { useAuth } from '@/api/Auth'
@@ -16,7 +14,6 @@ const { Form, FormItem } = createForm<ILoginUserSchema>()
 
 export default function Login() {
     const [t] = useTranslation()
-    const location = useLocation()
     const history = useHistory()
     const [isLoading, setIsLoading] = useState(false)
     const { onLogin } = useAuth()
@@ -31,8 +28,7 @@ export default function Login() {
                 setIsLoading(false)
             }
         },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [history, location.search, onLogin]
+        [history, onLogin]
     )
 
     return (

console/src/pages/Project/ProjectSidebar.tsx

@@ -48,12 +48,6 @@ export default function ProjectSidebar({ style }: IComposedSidebarProps) {
                 activePathPattern: /\/(runtimes|new_runtime)\/?/,
                 icon: <IconFont type='runtime' size={16} />,
             },
-            // {
-            //     title: t('Job'),
-            //     path: `/projects/${projectId}/jobs`,
-            //     activePathPattern: /\/(jobs|new_job)\/?/,
-            //     icon: <IconFont type='job' kind='white' size={20} />,
-            // },
         ]
     }, [project, projectId, t])
     return (

console/src/pages/Runtime/RuntimeVersionListCard.tsx

@@ -23,7 +23,7 @@ export default function RuntimeVersionListCard() {
             toaster.positive(t('runtime version reverted'), { autoHideDuration: 2000 })
             await runtimesInfo.refetch()
         },
-        [runtimesInfo, projectId, runtimeId]
+        [runtimesInfo, projectId, runtimeId, t]
     )
     return (
         <Card title={t('runtime versions')}>