⚡️ Upgrading umi@3.4

.eslintignore

@@ -1,7 +1,3 @@
-src/**/*-test.js
-src/public
 src/routes/chart/ECharts/theme
-src/routes/chart/highCharts/mapdata
-src/locales/_build/
 src/locales/**/*.js
 docs/**/*.js

.umirc.js

@@ -1,102 +0,0 @@
-// https://umijs.org/config/
-import { resolve } from 'path'
-import { i18n } from './src/utils/config'
-
-export default {
-  ignoreMomentLocale: true,
-  targets: { ie: 9 },
-  plugins: [
-    [
-      // https://umijs.org/plugin/umi-plugin-react.html
-      'umi-plugin-react',
-      {
-        dva: { immer: true },
-        antd: true,
-        dynamicImport: {
-          webpackChunkName: true,
-          loadingComponent: './components/Loader/Loader',
-        },
-        routes: {
-          exclude: [
-            /model\.(j|t)sx?$/,
-            /service\.(j|t)sx?$/,
-            /models\//,
-            /components\//,
-            /services\//,
-            /chart\/Container\.js$/,
-            /chart\/ECharts\/.+Component\.js$/,
-            /chart\/ECharts\/.+ComPonent\.js$/,
-            /chart\/ECharts\/theme\/.+\.js$/,
-            /chart\/highCharts\/.+Component\.js$/,
-            /chart\/highCharts\/mapdata\/.+\.js$/,
-            /chart\/Recharts\/.+Component\.js$/,
-            /chart\/Recharts\/Container\.js$/,
-          ],
-          update: routes => {
-            if (!i18n) return routes
-
-            const newRoutes = []
-            for (const item of routes[0].routes) {
-              newRoutes.push(item)
-              if (item.path) {
-                newRoutes.push(
-                  Object.assign({}, item, {
-                    path:
-                      `/:lang(${i18n.languages
-                        .map(item => item.key)
-                        .join('|')})` + item.path,
-                  })
-                )
-              }
-            }
-            routes[0].routes = newRoutes
-
-            return routes
-          },
-        },
-        dll: {
-          include: ['dva', 'dva/router', 'dva/saga', 'dva/fetch', 'antd/es'],
-        },
-        hardSource: /* isMac */ process.platform === 'darwin',
-        pwa: {
-          manifestOptions: {
-            srcPath: 'manifest.json'
-          },
-        }
-      },
-    ],
-  ],
-  // Theme for antd
-  // https://ant.design/docs/react/customize-theme
-  theme: './config/theme.config.js',
-  // Webpack Configuration
-  proxy: {
-    '/api/v1/weather': {
-      target: 'https://api.seniverse.com/',
-      changeOrigin: true,
-      pathRewrite: { '^/api/v1/weather': '/v3/weather' },
-    },
-  },
-  alias: {
-    api: resolve(__dirname, './src/services/'),
-    components: resolve(__dirname, './src/components'),
-    config: resolve(__dirname, './src/utils/config'),
-    models: resolve(__dirname, './src/models'),
-    routes: resolve(__dirname, './src/routes'),
-    services: resolve(__dirname, './src/services'),
-    themes: resolve(__dirname, './src/themes'),
-    utils: resolve(__dirname, './src/utils'),
-  },
-  extraBabelPresets: ['@lingui/babel-preset-react'],
-  extraBabelPlugins: [
-    [
-      'import',
-      {
-        libraryName: 'lodash',
-        libraryDirectory: '',
-        camel2DashComponentName: false,
-      },
-      'lodash',
-    ],
-  ],
-}

.umirc.ts

@@ -0,0 +1,43 @@
+import { resolve } from 'path'
+import type { IConfig } from 'umi'
+
+const config: IConfig = {
+  ignoreMomentLocale: true,
+  targets: { ie: 9 },
+  dva: { immer: true },
+  antd: {},
+  proxy: {
+    '/api/v1/weather': {
+      target: 'https://api.seniverse.com/',
+      changeOrigin: true,
+      pathRewrite: { '^/api/v1/weather': '/v3/weather' },
+    },
+  },
+  routes:[
+    { path: '/login', component: './login' },
+  ],
+  alias: {
+    api: resolve(__dirname, './src/services/'),
+    components: resolve(__dirname, './src/components'),
+    config: resolve(__dirname, './src/utils/config'),
+    models: resolve(__dirname, './src/models'),
+    routes: resolve(__dirname, './src/routes'),
+    services: resolve(__dirname, './src/services'),
+    themes: resolve(__dirname, './src/themes'),
+    utils: resolve(__dirname, './src/utils'),
+  },
+  extraBabelPresets: ['@lingui/babel-preset-react'],
+  extraBabelPlugins: [
+    [
+      'import',
+      {
+        libraryName: 'lodash',
+        libraryDirectory: '',
+        camel2DashComponentName: false,
+      },
+      'lodash',
+    ],
+  ],
+}
+
+export default config

jest.config.js

@@ -1,4 +1,3 @@
 module.exports = {
-  testURL: 'http://localhost:8000',
-  experimentalDecorators: true
+  testURL: 'http://localhost:8000'
 }

package.json

@@ -23,15 +23,20 @@
     "path-to-regexp": "^2.4.0",
     "prop-types": "^15.6.2",
     "qs": "^6.5.2",
+    "react": "^17.0.2",
     "react-countup": "^4.0.0-alpha.6",
+    "react-dom": "^17.0.2",
     "react-helmet": "^5.2.0",
     "react-perfect-scrollbar": "^1.4.2",
+    "recharts": "^2.0.9",
     "store": "^2.0.12"
   },
   "devDependencies": {
     "@lingui/babel-preset-react": "^2.7.1",
     "@lingui/cli": "^2.7.1",
     "@lingui/loader": "^2.7.1",
+    "@umijs/preset-react": "^1.8.3",
+    "@umijs/preset-ui": "^2.2.9",
     "babel-eslint": "^10.0.1",
     "babel-plugin-dev-expression": "^0.2.1",
     "babel-plugin-import": "^1.10.0",
@@ -52,8 +57,8 @@
     "stylelint": "^9.8.0",
     "stylelint-config-prettier": "^4.0.0",
     "stylelint-config-standard": "^18.2.0",
-    "umi": "^2.3.0-beta.1",
-    "umi-plugin-react": "^1.2.3"
+    "typescript": "^4.2.3",
+    "umi": "^3.4.8"
   },
   "optionalDependencies": {
     "puppeteer": "^1.10.0"

src/components/Editor/Editor.js

@@ -1,17 +0,0 @@
-import React from 'react'
-import { Editor } from 'react-draft-wysiwyg'
-import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
-import styles from './Editor.less'
-
-const DraftEditor = props => {
-  return (
-    <Editor
-      toolbarClassName={styles.toolbar}
-      wrapperClassName={styles.wrapper}
-      editorClassName={styles.editor}
-      {...props}
-    />
-  )
-}
-
-export default DraftEditor

src/components/Editor/Editor.less

@@ -1,106 +0,0 @@
-.wrapper {
-  height: 500px;
-
-  :global {
-    .rdw-dropdownoption-default {
-      padding: 6px;
-    }
-
-    .rdw-dropdown-optionwrapper {
-      box-sizing: content-box;
-      width: 100%;
-      border-radius: 0 0 2px 2px;
-      &:hover {
-        box-shadow: none;
-      }
-    }
-
-    .rdw-inline-wrapper {
-      flex-wrap: wrap;
-      margin-bottom: 0;
-
-      .rdw-option-wrapper {
-        margin-bottom: 6px;
-      }
-    }
-
-    .rdw-option-active {
-      box-shadow: 1px 1px 0 #e8e8e8 inset;
-    }
-
-    .rdw-colorpicker-option {
-      box-shadow: none;
-    }
-
-    .rdw-colorpicker-modal,
-    .rdw-embedded-modal,
-    .rdw-emoji-modal,
-    .rdw-image-modal,
-    .rdw-link-modal {
-      box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
-    }
-
-    .rdw-colorpicker-modal,
-    .rdw-embedded-modal,
-    .rdw-link-modal {
-      height: auto;
-    }
-
-    .rdw-emoji-modal {
-      width: 214px;
-    }
-
-    .rdw-colorpicker-modal {
-      width: auto;
-    }
-
-    .rdw-embedded-modal-btn,
-    .rdw-image-modal-btn,
-    .rdw-link-modal-btn {
-      height: 32px;
-      margin-top: 12px;
-    }
-
-    .rdw-embedded-modal-input,
-    .rdw-embedded-modal-size-input,
-    .rdw-link-modal-input {
-      padding: 2px 6px;
-      height: 32px;
-    }
-
-    .rdw-dropdown-selectedtext {
-      color: #000;
-    }
-
-    .rdw-dropdown-wrapper,
-    .rdw-option-wrapper {
-      min-width: 36px;
-      transition: all 0.2s ease;
-      height: 30px;
-
-      &:active {
-        box-shadow: 1px 1px 0 #e8e8e8 inset;
-      }
-
-      &:hover {
-        box-shadow: 1px 1px 0 #e8e8e8;
-      }
-    }
-
-    .rdw-dropdown-wrapper {
-      min-width: 60px;
-    }
-
-    .rdw-editor-main {
-      box-sizing: border-box;
-    }
-  }
-
-  .editor {
-    border: 1px solid #f1f1f1;
-    padding: 5px;
-    border-radius: 2px;
-    height: auto;
-    min-height: 200px;
-  }
-}

src/components/Editor/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "Editor",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Editor.js"
-}

src/components/Layout/Bread.js

@@ -1,7 +1,7 @@
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { Breadcrumb, Icon } from 'antd'
-import Link from 'umi/navlink'
+import { Link } from 'umi'
 import withRouter from 'umi/withRouter'
 import { withI18n } from '@lingui/react'
 import { pathMatchRegexp, queryAncestors } from 'utils'

src/components/Layout/Menu.js

@@ -1,7 +1,7 @@
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { Menu, Icon } from 'antd'
-import Navlink from 'umi/navlink'
+import { Link, Navlink } from 'umi'
 import withRouter from 'umi/withRouter'
 import {
   arrayToTree,

src/components/index.js

@@ -1,4 +1,3 @@
-import Editor from './Editor'
 import FilterItem from './FilterItem'
 import DropOption from './DropOption'
 import Loader from './Loader'
@@ -6,4 +5,4 @@ import ScrollBar from './ScrollBar'
 import * as MyLayout from './Layout/index.js'
 import Page from './Page'
 
-export { MyLayout, Editor, FilterItem, DropOption, Loader, Page, ScrollBar }
+export { MyLayout, FilterItem, DropOption, Loader, Page, ScrollBar }

src/models/app.js

@@ -1,169 +0,0 @@
-/* global window */
-
-import { router } from 'utils'
-import { stringify } from 'qs'
-import store from 'store'
-import { ROLE_TYPE } from 'utils/constant'
-import { queryLayout, pathMatchRegexp } from 'utils'
-import { CANCEL_REQUEST_MESSAGE } from 'utils/constant'
-import { queryRouteList, logoutUser, queryUserInfo } from 'api'
-import config from 'config'
-
-export default {
-  namespace: 'app',
-  state: {
-    user: {},
-    permissions: {
-      visit: [],
-    },
-    routeList: [
-      {
-        id: '1',
-        icon: 'laptop',
-        name: 'Dashboard',
-        zhName: '仪表盘',
-        router: '/dashboard',
-      },
-    ],
-    locationPathname: '',
-    locationQuery: {},
-    theme: store.get('theme') || 'light',
-    collapsed: store.get('collapsed') || false,
-    notifications: [
-      {
-        title: 'New User is registered.',
-        date: new Date(Date.now() - 10000000),
-      },
-      {
-        title: 'Application has been approved.',
-        date: new Date(Date.now() - 50000000),
-      },
-    ],
-  },
-  subscriptions: {
-    setupHistory({ dispatch, history }) {
-      history.listen(location => {
-        dispatch({
-          type: 'updateState',
-          payload: {
-            locationPathname: location.pathname,
-            locationQuery: location.query,
-          },
-        })
-      })
-    },
-
-    setupRequestCancel({ history }) {
-      history.listen(() => {
-        const { cancelRequest = new Map() } = window
-
-        cancelRequest.forEach((value, key) => {
-          if (value.pathname !== window.location.pathname) {
-            value.cancel(CANCEL_REQUEST_MESSAGE)
-            cancelRequest.delete(key)
-          }
-        })
-      })
-    },
-
-    setup({ dispatch }) {
-      dispatch({ type: 'query' })
-    },
-  },
-  effects: {
-    *query({ payload }, { call, put, select }) {
-      const { success, user } = yield call(queryUserInfo, payload)
-      const { locationPathname } = yield select(_ => _.app)
-
-      if (success && user) {
-        const { list } = yield call(queryRouteList)
-        const { permissions } = user
-        let routeList = list
-        if (
-          permissions.role === ROLE_TYPE.ADMIN ||
-          permissions.role === ROLE_TYPE.DEVELOPER
-        ) {
-          permissions.visit = list.map(item => item.id)
-        } else {
-          routeList = list.filter(item => {
-            const cases = [
-              permissions.visit.includes(item.id),
-              item.mpid
-                ? permissions.visit.includes(item.mpid) || item.mpid === '-1'
-                : true,
-              item.bpid ? permissions.visit.includes(item.bpid) : true,
-            ]
-            return cases.every(_ => _)
-          })
-        }
-        yield put({
-          type: 'updateState',
-          payload: {
-            user,
-            permissions,
-            routeList,
-          },
-        })
-        if (pathMatchRegexp('/login', window.location.pathname)) {
-          router.push({
-            pathname: '/dashboard',
-          })
-        }
-      } else if (queryLayout(config.layouts, locationPathname) !== 'public') {
-        router.push({
-          pathname: '/login',
-          search: stringify({
-            from: locationPathname,
-          }),
-        })
-      }
-    },
-
-    *signOut({ payload }, { call, put }) {
-      const data = yield call(logoutUser)
-      if (data.success) {
-        yield put({
-          type: 'updateState',
-          payload: {
-            user: {},
-            permissions: { visit: [] },
-            menu: [
-              {
-                id: '1',
-                icon: 'laptop',
-                name: 'Dashboard',
-                zhName: '仪表盘',
-                router: '/dashboard',
-              },
-            ],
-          },
-        })
-        yield put({ type: 'query' })
-      } else {
-        throw data
-      }
-    },
-  },
-  reducers: {
-    updateState(state, { payload }) {
-      return {
-        ...state,
-        ...payload,
-      }
-    },
-
-    handleThemeChange(state, { payload }) {
-      store.set('theme', payload)
-      state.theme = payload
-    },
-
-    handleCollapseChange(state, { payload }) {
-      store.set('collapsed', payload)
-      state.collapsed = payload
-    },
-
-    allNotificationsRead(state) {
-      state.notifications = []
-    },
-  },
-}

src/pages/404.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Icon } from 'antd'
+import { Page } from '@/components'
+import styles from './404.less'
+
+const NoFoundPage = () => (
+  <Page inner>
+    <div className={styles.error}>
+      <Icon type="frown-o" />
+      <h1>404 Not Found</h1>
+    </div>
+  </Page>
+)
+
+export default NoFoundPage

src/pages/login/index.tsx

@@ -0,0 +1,184 @@
+import React, { PureComponent, Fragment } from 'react'
+import { connect } from 'dva'
+import { Button, Row, Form, Icon, Input } from 'antd'
+import { GlobalFooter } from 'ant-design-pro'
+import { Trans, withI18n } from '@lingui/react'
+import { setLocale } from 'utils'
+// import config from 'utils/config'
+import { Dispatch } from 'umi'
+
+import styles from './index.less'
+const FormItem = Form.Item
+
+// @withI18n()
+// @connect(({ loading }) => ({ loading }))
+// @Form.create()
+// class Login extends PureComponent {
+//   handleOk = () => {
+//     const { dispatch, form } = this.props
+//     const { validateFieldsAndScroll } = form
+//     validateFieldsAndScroll((errors, values) => {
+//       if (errors) {
+//         return
+//       }
+//       dispatch({ type: 'login/login', payload: values })
+//     })
+//   }
+
+//   render() {
+//     const { loading, form, i18n } = this.props
+//     const { getFieldDecorator } = form
+
+//     let footerLinks = [
+//       {
+//         key: 'github',
+//         title: <Icon type="github" />,
+//         href: 'https://github.com/zuiidea/antd-admin',
+//         blankTarget: true,
+//       },
+//     ]
+
+//     if (config.i18n) {
+//       footerLinks = footerLinks.concat(
+//         config.i18n.languages.map(item => ({
+//           key: item.key,
+//           title: (
+//             <span onClick={setLocale.bind(null, item.key)}>{item.title}</span>
+//           ),
+//         }))
+//       )
+//     }
+
+//     return (
+//       <Fragment>
+//         <div className={styles.form}>
+//           <div className={styles.logo}>
+//             <img alt="logo" src={config.logoPath} />
+//             <span>{config.siteName}</span>
+//           </div>
+//           <form>
+//             <FormItem hasFeedback>
+//               {getFieldDecorator('username', {
+//                 rules: [
+//                   {
+//                     required: true,
+//                   },
+//                 ],
+//               })(
+//                 <Input
+//                   onPressEnter={this.handleOk}
+//                   placeholder={i18n.t`Username`}
+//                 />
+//               )}
+//             </FormItem>
+//             <FormItem hasFeedback>
+//               {getFieldDecorator('password', {
+//                 rules: [
+//                   {
+//                     required: true,
+//                   },
+//                 ],
+//               })(
+//                 <Input
+//                   type="password"
+//                   onPressEnter={this.handleOk}
+//                   placeholder={i18n.t`Password`}
+//                 />
+//               )}
+//             </FormItem>
+//             <Row>
+//               <Button
+//                 type="primary"
+//                 onClick={this.handleOk}
+//                 loading={loading.effects.login}
+//               >
+//                 <Trans>Sign in</Trans>
+//               </Button>
+//               <p>
+//                 <span>
+//                   <Trans>Username</Trans>
+//                   ：guest
+//                 </span>
+//                 <span>
+//                   <Trans>Password</Trans>
+//                   ：guest
+//                 </span>
+//               </p>
+//             </Row>
+//           </form>
+//         </div>
+//         <div className={styles.footer}>
+//           <GlobalFooter links={footerLinks} copyright={config.copyright} />
+//         </div>
+//       </Fragment>
+//     )
+//   }
+// }
+
+const Login = props => {
+  console.log(props)
+  return <div>Login</div>
+  // (<Fragment>
+  //   <div className={styles.form}>
+  //     <div className={styles.logo}>
+  //       <img alt="logo" src={config.logoPath} />
+  //       <span>{config.siteName}</span>
+  //     </div>
+  //     <form>
+  //       <FormItem hasFeedback>
+  //         {getFieldDecorator('username', {
+  //           rules: [
+  //             {
+  //               required: true,
+  //             },
+  //           ],
+  //         })(
+  //           <Input
+  //             onPressEnter={this.handleOk}
+  //             placeholder={i18n.t`Username`}
+  //           />
+  //         )}
+  //       </FormItem>
+  //       <FormItem hasFeedback>
+  //         {getFieldDecorator('password', {
+  //           rules: [
+  //             {
+  //               required: true,
+  //             },
+  //           ],
+  //         })(
+  //           <Input
+  //             type="password"
+  //             onPressEnter={this.handleOk}
+  //             placeholder={i18n.t`Password`}
+  //           />
+  //         )}
+  //       </FormItem>
+  //       <Row>
+  //         <Button
+  //           type="primary"
+  //           onClick={this.handleOk}
+  //           loading={loading.effects.login}
+  //         >
+  //           <Trans>Sign in</Trans>
+  //         </Button>
+  //         <p>
+  //           <span>
+  //             <Trans>Username</Trans>
+  //             ：guest
+  //           </span>
+  //           <span>
+  //             <Trans>Password</Trans>
+  //             ：guest
+  //           </span>
+  //         </p>
+  //       </Row>
+  //     </form>
+  //   </div>
+  //   <div className={styles.footer}>
+  //     <GlobalFooter links={footerLinks} copyright={config.copyright} />
+  //   </div>
+  // </Fragment>)
+}
+
+export default Login

src/services/index.js

@@ -35,4 +35,4 @@ APIFunction.queryWeather = params => {
   })
 }
 
-module.exports = APIFunction
+// module.exports = APIFunction

src/utils/index.js

@@ -120,19 +120,19 @@ const routerAddLangPrefix = params => {
 /**
  * Adjust the router to automatically add the current language prefix before the pathname in push and replace.
  */
-const myRouter = { ...umiRouter }
+// const myRouter = { ...umiRouter }
 
-myRouter.push = flow(
-  routerAddLangPrefix,
-  umiRouter.push
-)
+// myRouter.push = flow(
+//   routerAddLangPrefix,
+//   umiRouter.push
+// )
 
-myRouter.replace = flow(
-  routerAddLangPrefix,
-  myRouter.replace
-)
+// myRouter.replace = flow(
+//   routerAddLangPrefix,
+//   myRouter.replace
+// )
 
-export const router = myRouter
+// export const router = myRouter
 
 /**
  * Whether the path matches the regexp if the language prefix is ignored, https://github.com/pillarjs/path-to-regexp.

tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "noImplicitAny": false,
+    "paths": {
+      "@/*": ["src/*"],
+      "@@/*": ["src/.umi/*"]
+    },
+  },
+  "include": ["src"]
+}