upgrade React v17 / react-intl / minor fixes

.gitignore

@@ -29,3 +29,5 @@ yarn-debug.log*
 yarn-error.log*
 
 .vscode/*
+.idea
+stats.html

package.json

@@ -27,11 +27,11 @@
     "polished": "^4.0.5",
     "qs": "^6.9.4",
     "rc-upload": "^3.2.0",
-    "react": "^16.12.0",
+    "react": "^17",
     "react-cookie": "^4.0.3",
-    "react-dom": "^16.12.0",
+    "react-dom": "^17",
     "react-filepond": "^7.0.1",
-    "react-intl": "^3.12.0",
+    "react-intl": "^5",
     "react-redux": "^7.2.0",
     "react-resize-detector": "^4.2.1",
     "react-router-dom": "^5.1.2",
@@ -78,10 +78,10 @@
     "@types/classnames": "^2.2.9",
     "@types/jwt-decode": "^2.2.1",
     "@types/lodash-es": "^4.14.149",
-    "@types/node": "^18",
+    "@types/node": "^20",
     "@types/qs": "^6.9.5",
-    "@types/react": "^16",
-    "@types/react-dom": "^16",
+    "@types/react": "<18",
+    "@types/react-dom": "<18",
     "@types/react-filepond": "^5.0.5",
     "@types/react-redux": "^7.1.7",
     "@types/react-resize-detector": "^4.2.0",
@@ -106,7 +106,8 @@
     "vite-plugin-imp": "^2.4.0"
   },
   "overrides": {
-    "@types/react": "^16",
-    "@types/react-dom": "^16"
+    "typescript": "^5.3",
+    "react": "^17",
+    "react-dom": "^17"
   }
 }

src/App.tsx

@@ -9,6 +9,7 @@ import Index from './pages/Index';
 import Login from './pages/Login';
 import Register from './pages/Register';
 import ResetPassword from './pages/ResetPassword';
+import { NotFoundPage } from './pages/404';
 import { AppState } from './store';
 import style from './style';
 
@@ -164,6 +165,9 @@ const App: React.FC = () => {
               <Admin />
             </Route>
           )}
+          <Route path="/*">
+            <NotFoundPage />
+          </Route>
         </Switch>
       )}
     </>

src/apis/index.ts

@@ -61,10 +61,10 @@
 };
 
 /** 成功的响应 */
 export interface BasicSuccessResult<T = any> {
   type: typeof resultTypes.SUCCESS;
   data: T;
   headers: any;
 }
 
 /** 基础错误响应结果的数据 */
@@ -125,7 +125,9 @@
   | CancelFailureResult
   | OtherFailureResult;
 
-export const request = <T = any>(axiosConfig: AxiosRequestConfig) => {
+export const request = <T = any>(
+  axiosConfig: AxiosRequestConfig,
+): Promise<BasicSuccessResult<T>> => {
   return instance({
     // param=value1&param=value2，去除 query 中数组的 [] 结尾
     paramsSerializer: function (params) {

src/components/Button.tsx

@@ -13,7 +13,7 @@ import { Tooltip, TooltipProps } from './Tooltip';
 interface ButtonProps {
   tooltipProps?: TooltipProps;
   loading?: boolean;
-  disibled?: boolean;
+  disabled?: boolean;
   type?: 'button' | 'link';
   linkProps?: React.DetailedHTMLProps<
     React.AnchorHTMLAttributes<HTMLAnchorElement>,
@@ -38,7 +38,7 @@ export const Button: FC<ButtonProps> = ({
   color = style.primaryColor,
   colorDisibled = style.primaryColorLightest,
   loading = false,
-  disibled = false,
+  disabled = false,
   onClick,
   className,
   children,
@@ -73,7 +73,7 @@ export const Button: FC<ButtonProps> = ({
   return (
     <div
       className={classNames('Button', className, {
-        'Button--disibled': disibled || loading,
+        'Button--disibled': disabled || loading,
         'Button--noChildren': !children,
       })}
       css={css`
@@ -98,7 +98,7 @@ export const Button: FC<ButtonProps> = ({
           color: ${color};
           margin-right: 10px;
         }
-        ${disibled || loading || clickEffect()}
+        ${disabled || loading || clickEffect()}
         &.Button--disibled {
           cursor: not-allowed;
           user-select: none;
@@ -120,7 +120,7 @@ export const Button: FC<ButtonProps> = ({
           }
         }
       `}
-      onClick={disibled || loading ? undefined : onClick}
+      onClick={disabled || loading ? undefined : onClick}
     >
       {tooltipProps ? (
         <Tooltip {...tooltipProps}>{buttonContent}</Tooltip>

src/components/Form.tsx

@@ -15,7 +15,7 @@ export const Form: FC<FormProps & AntdFormProps> = ({ ...props }) => {
   /** 处理 Form 值变动 */
   const handleValuesChange = (changedValues: Store, values: Store) => {
     // 当值变动时消除错误
-    for (let key in changedValues) {
+    for (const key in changedValues) {
       props.form?.setFields([{ name: key, errors: [] }]);
     }
     if (props.onValuesChange) {

src/components/ImageSourceViewerGod/Source.tsx

@@ -38,7 +38,7 @@ export const Source: FC<SourceProps> = ({
     (state: AppState) => state.project.currentProject,
   );
 
-  let statusLine = checkTranslationState(source);
+  const statusLine = checkTranslationState(source);
 
   const handleSourcePositionTypeChange = (checked: boolean) => {
     dispatch(

src/components/LanguageSelect.tsx

@@ -31,7 +31,7 @@ export const LanguageSelect: FC<LanguageSelectProps> = ({
   useEffect(() => {
     setLoading(true);
     apis.getLanguages().then((result) => {
-      let options = result.data.map((item) => {
+      const options = result.data.map((item) => {
         item = toLowerCamelCase(item);
         const option: SelectOption = {
           label: item.i18nName,

src/components/Movable.tsx

@@ -687,7 +687,7 @@ const MovableItemWithoutRef: React.ForwardRefRenderFunction<
    * @param size 组件的大小
    */
   const moveWithMargins: MoveWithMargins = (margins) => {
-    let position: Position = { x: 0, y: 0 };
+    const position: Position = { x: 0, y: 0 };
     // 计算 x 轴上百分比
     if (margins.x.edge === 'left') {
       // 根据左边定位
@@ -910,7 +910,7 @@ const MovableItemWithoutRef: React.ForwardRefRenderFunction<
   } {
     // 将光标位置放入数组
     const pointers = [];
-    for (let key in pointersRef.current) {
+    for (const key in pointersRef.current) {
       pointers.push(pointersRef.current[key]);
     }
     // 计算两个光标距离
@@ -1235,7 +1235,7 @@ const MovableItemWithoutRef: React.ForwardRefRenderFunction<
         onZoomEnd(stateRef.current);
       }
       // 更新初始移动状态
-      for (let id in pointersRef.current) {
+      for (const id in pointersRef.current) {
         startMoveInfoRef.current = {
           ...pointersRef.current[id],
         };

src/components/Output.tsx

@@ -86,7 +86,7 @@ export const Output: FC<OutputProps> = ({ index, output, className }) => {
       <div className="Output__Bottom">
         <Button
           className="Output__DownloadButton"
-          disibled={output.status === OUTPUT_STATUS.ERROR}
+          disabled={output.status === OUTPUT_STATUS.ERROR}
           loading={
             ![OUTPUT_STATUS.SUCCEEDED, OUTPUT_STATUS.ERROR].includes(
               output.status,

src/components/TeamInsightProjectList.tsx

@@ -348,7 +348,7 @@ export const TeamInsightProjectList: FC<TeamInsightProjectListProps> = ({
                     <div>
                       <CustomButton
                         className="TeamInsightProjectList__OutputDownloadButton"
-                        disibled={output.status === OUTPUT_STATUS.ERROR}
+                        disabled={output.status === OUTPUT_STATUS.ERROR}
                         loading={
                           ![
                             OUTPUT_STATUS.SUCCEEDED,

src/hooks/useTitle.ts

@@ -14,11 +14,12 @@ interface UseTitle {
  * @param prefix 前缀
  * @param suffix 后缀
  * @param hyphen 站点名和前缀/后缀之间的连字符
+ * @param deps
  */
 export const useTitle: UseTitle = (
   { prefix = '', suffix = '', hyphen = ' · ' }: UseTitleParams = {},
   deps = [],
-) => {
+): void => {
   const { formatMessage } = useIntl();
   if (prefix !== '') prefix = prefix + hyphen;
   if (suffix !== '') suffix = hyphen + suffix;

src/index.tsx

@@ -1,7 +1,7 @@
 import { ConfigProvider } from 'antd';
 import Bowser from 'bowser';
 import 'pepjs'; // 指针事件垫片
-import React from 'react';
+import React, { StrictMode } from 'react';
 import ReactDOM from 'react-dom';
 import { IntlProvider } from 'react-intl'; // i18n
 import { Provider } from 'react-redux';
@@ -65,7 +65,7 @@ store.dispatch(setOSName(osName));
 for (const hotKeyName in hotKeyInitialState) {
   const name = hotKeyName as keyof HotKeyState;
   for (const index of [0, 1]) {
-    let loadedHotKey = loadHotKey({ name, index });
+    const loadedHotKey = loadHotKey({ name, index });
     if (loadedHotKey !== 'disibled') {
       let option;
       if (loadedHotKey) {
@@ -79,17 +79,19 @@ for (const hotKeyName in hotKeyInitialState) {
 }
 // 渲染 APP
 ReactDOM.render(
-  <Provider store={store}>
-    <IntlProvider locale={locale} messages={intlMessages}>
-      <ConfigProvider
-        locale={antdLocale}
-        form={{ validateMessages: antdValidateMessages }}
-      >
-        <Router>
-          <App />
-        </Router>
-      </ConfigProvider>
-    </IntlProvider>
-  </Provider>,
+  <StrictMode>
+    <Provider store={store}>
+      <IntlProvider locale={locale} messages={intlMessages}>
+        <ConfigProvider
+          locale={antdLocale}
+          form={{ validateMessages: antdValidateMessages }}
+        >
+          <Router>
+            <App />
+          </Router>
+        </ConfigProvider>
+      </IntlProvider>
+    </Provider>
+  </StrictMode>,
   document.getElementById('root'),
 );

src/pages/404.tsx

@@ -0,0 +1,20 @@
+import { useTitle } from '../hooks';
+import { useHistory } from 'react-router-dom';
+import { FC, useEffect } from 'react';
+
+export const NotFoundPage: FC = (props) => {
+  const history = useHistory();
+  useTitle({
+    prefix: 'Page not found',
+  });
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      history.push('/');
+    }, 3000);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+  return <div>Page not found. You will be redirected shortly</div>;
+};

src/style.ts

@@ -12,7 +12,7 @@ function toHyphenCase(value: string | { [propNames: string]: any }) {
     return stringToHyphenCase(value);
   } else {
     const newValue: { [key: string]: any } = {};
-    for (let key in value) {
+    for (const key in value) {
       newValue[stringToHyphenCase(key)] = value[key];
     }
     return newValue;

src/utils/index.ts

@@ -21,7 +21,7 @@ function toHyphenCase(value: string | { [propNames: string]: any }) {
     return stringToHyphenCase(value);
   } else {
     const newValue: { [key: string]: any } = {};
-    for (let key in value) {
+    for (const key in value) {
       newValue[stringToHyphenCase(key)] = value[key];
     }
     return newValue;
@@ -50,7 +50,7 @@ function toUnderScoreCase(
     return value.map((v: any) => toUnderScoreCase(v));
   } else if (isPlainObject(value)) {
     const newValue: { [key: string]: any } = {};
-    for (let key in value) {
+    for (const key in value) {
       if (isPlainObject(value[key])) {
         // 递归处理所以子对象
         newValue[stringToUnderScoreCase(key)] = toUnderScoreCase(value[key]);
@@ -94,7 +94,7 @@ function toLowerCamelCase(
     return value.map((v: any) => toLowerCamelCase(v));
   } else if (isPlainObject(value)) {
     const newValue: { [key: string]: any } = {};
-    for (let key in value) {
+    for (const key in value) {
       if (isPlainObject(value[key])) {
         // 递归处理所以子对象
         newValue[stringToLowerCamelCase(key)] = toLowerCamelCase(value[key]);
@@ -125,7 +125,7 @@ interface ToFormErrors {
  */
 const toFormErrors: ToFormErrors = (value) => {
   const newValue = [];
-  for (let key in value) {
+  for (const key in value) {
     newValue.push({
       name: stringToLowerCamelCase(key),
       errors: value[key],

tsconfig.json

@@ -13,7 +13,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react-jsx"
   },
   "include": ["src"]
 }

vite.config.ts

@@ -16,6 +16,7 @@ const backendOrigin = 'http://localhost:13080';
 export default defineConfig({
   // root: 'src',
   build: {
+    sourcemap: true,
     outDir: path.join(__dirname, './build'),
     emptyOutDir: true,
     rollupOptions: {