Merge branch 'release/0.0.1'

package.json

@@ -34,9 +34,11 @@
     "codemirror": "^5.65.5",
     "framer-motion": "^6.3.0",
     "i18next": "^21.6.16",
+    "i18next-browser-languagedetector": "^6.1.4",
     "immer": "^9.0.14",
     "jshint": "^2.13.4",
     "lodash": "^4.17.21",
+    "qs": "^6.11.0",
     "react": "^17.0.2",
     "react-custom-scrollbars": "^4.2.1",
     "react-dnd": "^16.0.1",
@@ -55,8 +57,7 @@
     "tern": "^0.24.3",
     "toposort": "^2.0.2",
     "use-bus": "^2.5.1",
-    "uuid": "^8.3.2",
-    "ws": "^8.7.0"
+    "uuid": "^8.3.2"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.2",
@@ -73,6 +74,7 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/codemirror": "^5.60.5",
     "@types/jest": "^27.4.1",
+    "@types/qs": "^6.9.7",
     "@types/react": "^17.0.2",
     "@types/react-custom-scrollbars": "^4.0.10",
     "@types/react-dom": "^17.0.2",
@@ -86,24 +88,24 @@
     "@uiw/react-color-saturation": "^1.0.10",
     "@uiw/react-color-swatch": "^1.0.10",
     "@vitejs/plugin-react": "^1.3.2",
+    "chart.js": "^3.7.1",
+    "chartjs-adapter-moment": "^1.0.0",
+    "chartjs-plugin-datalabels": "^2.0.0",
     "cypress": "^9.5.1",
     "husky": "^7.0.4",
     "jest": "^27.4.1",
     "jest-environment-jsdom": "^27.4.1",
+    "moment": "^2.29.3",
     "prettier": "^2.5.1",
+    "react-chartjs-2": "^4.1.0",
     "sinon": "^13.0.1",
     "ts-jest": "^27.1.5",
     "turbo": "^1.1.1",
     "typescript": "^4.6.3",
     "vite": "^2.9.9",
     "vite-plugin-chunk-split": "^0.2.2",
     "vite-plugin-istanbul": "^2.7.3",
-    "vite-plugin-svgr": "^2.1.0",
-    "chart.js": "^3.7.1",
-    "chartjs-adapter-moment": "^1.0.0",
-    "chartjs-plugin-datalabels": "^2.0.0",
-    "react-chartjs-2": "^4.1.0",
-    "moment": "^2.29.3"
+    "vite-plugin-svgr": "^2.1.0"
   },
   "workspaces": [
     "src/*",

src/App.tsx

@@ -1,90 +1,39 @@
 import { css, Global } from "@emotion/react"
-import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"
+import { BrowserRouter } from "react-router-dom"
 import { globalStyle } from "./style"
-import { DashboardApps } from "@/page/Dashboard/DashboardApps"
-import { DashboardResources } from "@/page/Dashboard/DashboardResources"
-import { IllaApp } from "@/page/Dashboard"
-import { Editor } from "@/page/App"
-import { UserLogin } from "@/page/User"
-import { Register } from "@/page/User/Register"
-import { Login } from "@/page/User/Login"
-import { ResetPassword } from "@/page/User/ResetPassword"
-import { Setting } from "@/page/Setting"
-import { Page404 } from "@/page/status/404"
-import { Page403 } from "@/page/status/403"
-import { Page500 } from "@/page/status/500"
-import { SettingAccount } from "@/page/Setting/SettingAccount"
-import { SettingPassword } from "@/page/Setting/SettingPassword"
-import { SettingOthers } from "@/page/Setting/SettingOthers"
 import { ConfigProvider } from "@illa-design/config-provider"
-import "@/i18n/config"
 import "@/api/base"
-import { AxiosInterceptor } from "@/api/AxiosInterceptor"
-
-import { Deploy } from "@/page/Deploy"
 import { HTML5Backend } from "react-dnd-html5-backend"
 import { GlobalDataProvider } from "@/page/App/context/globalDataProvider"
 import { DndProvider } from "react-dnd"
-
-import AuthInit from "./authInit"
 import { useSelector } from "react-redux"
 import {
   getCurrentConfigLanguage,
   getCurrentTranslateLanguage,
 } from "@/redux/currentUser/currentUserSelector"
-import i18n from "./i18n/config"
 import { useEffect } from "react"
+import { ILLARoute } from "@/router"
+import { useTranslation } from "react-i18next"
 
 function App() {
   const configLanguage = useSelector(getCurrentConfigLanguage)
   const currentUserLanguage = useSelector(getCurrentTranslateLanguage)
+  const { i18n } = useTranslation()
 
   useEffect(() => {
-    i18n.changeLanguage(currentUserLanguage).then()
+    if (!!currentUserLanguage) {
+      i18n.changeLanguage(currentUserLanguage).then()
+    }
   }, [currentUserLanguage])
 
   return (
     <BrowserRouter>
       <DndProvider backend={HTML5Backend}>
         <GlobalDataProvider>
-          <AxiosInterceptor>
-            <AuthInit>
-              <ConfigProvider locale={configLanguage}>
-                <Global styles={css(globalStyle)} />
-                <Routes>
-                  <Route path="dashboard" element={<IllaApp />}>
-                    <Route index element={<Navigate to="./apps" />} />
-                    <Route path="apps" element={<DashboardApps />} />
-                    <Route path="resources" element={<DashboardResources />} />
-                  </Route>
-                  <Route path="user" element={<UserLogin />}>
-                    <Route index element={<Navigate to="./login" />} />
-                    <Route path="login" element={<Login />} />
-                    <Route path="register" element={<Register />} />
-                    <Route path="forgotPassword" element={<ResetPassword />} />
-                  </Route>
-                  <Route index element={<Navigate to="/dashboard" />} />
-                  <Route
-                    path="app/:appId/version/:versionId"
-                    element={<Editor />}
-                  />
-                  <Route path="setting" element={<Setting />}>
-                    <Route index element={<Navigate to="./account" />} />
-                    <Route path="account" element={<SettingAccount />} />
-                    <Route path="password" element={<SettingPassword />} />
-                    <Route path="others" element={<SettingOthers />} />
-                  </Route>
-                  <Route
-                    path="deploy/app/:appId/version/:versionId"
-                    element={<Deploy />}
-                  />
-                  <Route path="403" element={<Page403 />} />
-                  <Route path="500" element={<Page500 />} />
-                  <Route path="*" element={<Page404 />} />
-                </Routes>
-              </ConfigProvider>
-            </AuthInit>
-          </AxiosInterceptor>
+          <ConfigProvider locale={configLanguage}>
+            <Global styles={css(globalStyle)} />
+            <ILLARoute />
+          </ConfigProvider>
         </GlobalDataProvider>
       </DndProvider>
     </BrowserRouter>

src/api/base.ts

@@ -1,33 +1,70 @@
 import Axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from "axios"
-import { getLocalStorage } from "@/utils/storage"
+import { clearLocalStorage, getLocalStorage } from "@/utils/storage"
+import {
+  addRequestPendingPool,
+  removeRequestPendingPool,
+} from "@/api/helpers/axiosPendingPool"
 
 export interface Success {
   status: string // always ok
 }
 
 export interface ApiError {
-  errorCode: string
+  errorCode: string | number
   errorMessage: string
 }
-
+// TODO: @aruseito use OOP to create request
 const axios = Axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL,
+  timeout: 10000,
   headers: {
     "Content-Encoding": "gzip",
     "Content-Type": "application/json",
   },
 })
 
-axios.interceptors.request.use((config) => {
-  const token = getLocalStorage("token")
-  if (token) {
-    config.headers = {
-      ...(config.headers ?? {}),
-      Authorization: token,
+axios.interceptors.request.use(
+  (config) => {
+    addRequestPendingPool(config)
+    const token = getLocalStorage("token")
+    if (token) {
+      config.headers = {
+        ...(config.headers ?? {}),
+        Authorization: token,
+      }
     }
-  }
-  return config
-})
+    return config
+  },
+  (err) => {
+    return Promise.reject(err)
+  },
+)
+
+axios.interceptors.response.use(
+  (response) => {
+    const { config } = response
+    removeRequestPendingPool(config)
+    return response
+  },
+  (error: AxiosError) => {
+    const { response } = error
+    if (response) {
+      const { data } = response
+      // TODO: @aruseito maybe need custom error status,because of we'll have plugin to request other's api
+      if (data.errorCode === 401) {
+        clearLocalStorage()
+        const { pathname } = location
+        location.href = "/user/login?from=" + pathname || "/"
+      }
+      // else if (data.errorCode === 403) {
+      //   location.href = "/403"
+      // } else if (data.errorCode >= 500) {
+      //   location.href = "/500"
+      // }
+    }
+    return Promise.reject(error)
+  },
+)
 
 export class Api {
   static request<RespData, RequestBody = any, ErrorResp = ApiError>(
@@ -58,17 +95,4 @@ export class Api {
         }
       })
   }
-
-  static addResponseInterceptor<RespData, RespConfig>(
-    resInterceptor?: (
-      value: AxiosResponse<RespData, RespConfig>,
-    ) => RespData | Promise<RespData>,
-    errInterceptor?: (error: any) => any,
-  ) {
-    return axios.interceptors.response.use(resInterceptor, errInterceptor)
-  }
-
-  static removeResponseInterceptor(interceptor: number) {
-    axios.interceptors.response.eject(interceptor)
-  }
 }

src/api/helpers/axiosPendingPool.tsx

@@ -0,0 +1,38 @@
+import { AxiosRequestConfig } from "axios"
+import qs from "qs"
+
+let pendingPollMap = new Map<string, (reason?: any) => void>()
+
+export const generateUniqueKey = (config: AxiosRequestConfig) =>
+  [
+    config.method,
+    config.url,
+    qs.stringify(config.params),
+    qs.stringify(config.data),
+  ].join("/")
+
+export const clearRequestPendingPool = () => {
+  pendingPollMap.forEach((cancel) => {
+    cancel?.()
+  })
+  pendingPollMap.clear()
+}
+
+export const removeRequestPendingPool = (config: AxiosRequestConfig) => {
+  const key = generateUniqueKey(config)
+  if (pendingPollMap.has(key)) {
+    const cancel = pendingPollMap.get(key)
+    cancel?.()
+    pendingPollMap.delete(key)
+  }
+}
+
+export const addRequestPendingPool = (config: AxiosRequestConfig) => {
+  removeRequestPendingPool(config)
+  const key = generateUniqueKey(config)
+  const controller = new AbortController()
+  config.signal = controller.signal
+  if (!pendingPollMap.has(key)) {
+    pendingPollMap.set(key, controller.abort.bind(controller))
+  }
+}