Update dependency (#5337)

* update node version

* update dependency

* updat i18n

* update seafile-js version

* remove unnecessary dependency

* update seafile-js version

* update react react-dom version

* update react-dev-utils version

* delete unnecessary dependency

* optimize code

.github/workflows/dist.yml

@@ -21,7 +21,7 @@ jobs:
           python-version: "3.8"
       - uses: actions/setup-node@v1
         with:
-          node-version: "10.x"
+          node-version: "16.x"
 
       - name: gettext for django
         run: sudo apt-get install gettext python3-wheel libjwt-dev

frontend/config/webpack.config.js

@@ -14,8 +14,6 @@ const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const safePostCssParser = require('postcss-safe-parser');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
-const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const ESLintPlugin = require('eslint-webpack-plugin');
@@ -25,7 +23,6 @@ const modules = require('./modules');
 const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
-const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 const postcssNormalize = require('postcss-normalize');
@@ -623,12 +620,6 @@ module.exports = function (webpackEnv) {
       // a plugin that prints an error when you attempt to do this.
       // See https://github.com/facebook/create-react-app/issues/240
       isEnvDevelopment && new CaseSensitivePathsPlugin(),
-      // If you require a missing module and then `npm install` it, you still have
-      // to restart the development server for webpack to discover it. This plugin
-      // makes the discovery automatic so you don't have to restart.
-      // See https://github.com/facebook/create-react-app/issues/186
-      isEnvDevelopment &&
-        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
       isEnvProduction &&
         new MiniCssExtractPlugin({
           // Options similar to the same options in webpackOptions.output
@@ -682,37 +673,6 @@ module.exports = function (webpackEnv) {
       //     // See https://github.com/cra-template/pwa/issues/13#issuecomment-722667270
       //     maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
       //   }),
-      // TypeScript type checking
-      // useTypeScript &&
-      //   new ForkTsCheckerWebpackPlugin({
-      //     typescript: resolve.sync('typescript', {
-      //       basedir: paths.appNodeModules,
-      //     }),
-      //     async: isEnvDevelopment,
-      //     checkSyntacticErrors: true,
-      //     resolveModuleNameModule: process.versions.pnp
-      //       ? `${__dirname}/pnpTs.js`
-      //       : undefined,
-      //     resolveTypeReferenceDirectiveModule: process.versions.pnp
-      //       ? `${__dirname}/pnpTs.js`
-      //       : undefined,
-      //     tsconfig: paths.appTsConfig,
-      //     reportFiles: [
-      //       // This one is specifically to match during CI tests,
-      //       // as micromatch doesn't match
-      //       // '../cra-template-typescript/template/src/App.tsx'
-      //       // otherwise.
-      //       '../**/src/**/*.{ts,tsx}',
-      //       '**/src/**/*.{ts,tsx}',
-      //       '!**/src/**/__tests__/**',
-      //       '!**/src/**/?(*.)(spec|test).*',
-      //       '!**/src/setupProxy.*',
-      //       '!**/src/setupTests.*',
-      //     ],
-      //     silent: true,
-      //     // The formatter is invoked directly in WebpackDevServerUtils during development
-      //     formatter: isEnvProduction ? typescriptFormatter : undefined,
-      //   }),
       isEnvDevelopment && new ESLintPlugin({
         // Plugin options
         extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],

frontend/package.json

@@ -8,35 +8,33 @@
     "@seafile/resumablejs": "1.1.16",
     "@seafile/seafile-calendar": "0.0.12",
     "@seafile/seafile-editor": "0.3.111",
-    "chart.js": "2.9.4",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.0.8",
     "glamor": "^2.20.40",
-    "i18next": "^17.0.13",
-    "i18next-browser-languagedetector": "^3.0.3",
-    "i18next-xhr-backend": "^3.1.2",
+    "i18next": "22.4.6",
+    "i18next-browser-languagedetector": "7.0.1",
+    "i18next-xhr-backend": "3.2.2",
     "MD5": "^1.3.0",
-    "merge": "^1.2.1",
     "moment": "^2.22.2",
     "object-assign": "4.1.1",
     "prismjs": "1.23.0",
     "prop-types": "^15.6.2",
     "qrcode.react": "^1.0.1",
     "raf": "3.4.0",
-    "react": "^16.8.6",
+    "react": "16.14.0",
     "react-app-polyfill": "^2.0.0",
     "react-chartjs-2": "^2.8.0",
-    "react-codemirror": "^1.0.0",
+    "react-codemirror2": "7.2.1",
     "react-cookies": "^0.1.0",
-    "react-dom": "^16.8.6",
-    "react-i18next": "^10.12.2",
+    "react-dom": "16.14.0",
+    "react-i18next": "12.1.1",
     "react-mentions": "^3.0.2",
     "react-moment": "^0.7.9",
     "react-qr-code": "^1.0.5",
     "react-responsive": "^6.1.2",
     "react-select": "^2.4.1",
     "reactstrap": "^6.4.0",
-    "seafile-js": "0.2.186",
+    "seafile-js": "0.2.190",
     "socket.io-client": "^2.2.0",
     "unified": "^7.0.0",
     "url-parse": "^1.4.3",
@@ -108,7 +106,7 @@
     "@testing-library/user-event": "^12.1.10",
     "@typescript-eslint/eslint-plugin": "^4.5.0",
     "@typescript-eslint/parser": "^4.5.0",
-    "babel-eslint": "8.0.1",
+    "babel-eslint": "10.1.0",
     "babel-jest": "^26.6.0",
     "babel-loader": "8.1.0",
     "babel-plugin-dynamic-import-node": "2.3.3",
@@ -147,7 +145,7 @@
     "postcss-preset-env": "6.7.0",
     "postcss-safe-parser": "5.0.2",
     "prompts": "2.4.0",
-    "react-dev-utils": "11.0.4",
+    "react-dev-utils": "12.0.1",
     "react-refresh": "^0.8.3",
     "resolve": "1.18.1",
     "resolve-url-loader": "^3.1.2",
@@ -161,7 +159,6 @@
     "webpack": "4.44.2",
     "webpack-bundle-tracker": "1.7.0",
     "webpack-dev-server": "3.11.0",
-    "webpack-manifest-plugin": "2.2.0",
-    "workbox-webpack-plugin": "5.1.4"
+    "webpack-manifest-plugin": "2.2.0"
   }
 }

frontend/src/components/file-content-view/text.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Utils } from '../../utils/utils';
 
-import CodeMirror from 'react-codemirror';
+import { UnControlled as CodeMirror } from 'react-codemirror2';
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/mode/css/css';
 import 'codemirror/mode/clike/clike';

frontend/src/css/text-file-view.css

@@ -1,7 +1,7 @@
 .text-file-view {
     overflow: auto;
 }
-.text-file-view .ReactCodeMirror {
+.text-file-view .react-codemirror2 {
     box-shadow: 0 0 6px #ccc;
     border: 1px solid #ccc;
     width: calc(100% - 40px);

frontend/src/pages/share-with-ocm/remote-dir-view.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import { Button } from 'reactstrap';
-import { post } from 'axios';
+import axios from 'axios';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import { loginUrl, siteRoot, gettext } from '../../utils/constants';
@@ -106,7 +106,7 @@ class DirView extends Component {
       let formData = new FormData();
       formData.append('parent_dir', path);
       formData.append('file', file);
-      post(res.data, formData).then(res => {
+      axios.post(res.data, formData).then(res => {
         const fileObj = res.data[0];
         let newDirent = new Dirent({
           'type': 'file',

frontend/src/pages/sys-admin/repos/dir-view.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import { Button } from 'reactstrap';
-import { post } from 'axios';
+import axios from 'axios';
 import { Utils } from '../../../utils/utils';
 import { seafileAPI } from '../../../utils/seafile-api';
 import { siteRoot, gettext } from '../../../utils/constants';
@@ -130,7 +130,7 @@ class DirView extends Component {
       let formData = new FormData();
       formData.append('parent_dir', path);
       formData.append('file', file);
-      post(res.data.upload_link, formData).then(res => {
+      axios.post(res.data.upload_link, formData).then(res => {
         const fileObj = res.data[0];
         let newDirent = new Dirent({
           'is_file': true,

frontend/src/shared-file-view-text.js

@@ -4,7 +4,7 @@ import { Utils } from './utils/utils';
 import SharedFileView from './components/shared-file-view/shared-file-view';
 import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
 
-import CodeMirror from 'react-codemirror';
+import { UnControlled as CodeMirror } from 'react-codemirror2';
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/mode/css/css';
 import 'codemirror/mode/clike/clike';

frontend/src/view-file-text.js

@@ -8,7 +8,7 @@ import FileView from './components/file-view/file-view';
 import FileViewTip from './components/file-view/file-view-tip';
 import { seafileAPI } from './utils/seafile-api';
 
-import CodeMirror from 'react-codemirror';
+import { UnControlled as CodeMirror } from 'react-codemirror2';
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/mode/css/css';
 import 'codemirror/mode/clike/clike';