upgrade umi@3 partly

.umirc.js

@@ -39,7 +39,6 @@ export default {
     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'),

package.json

@@ -100,6 +100,7 @@
   "scripts": {
     "analyze": "cross-env ANALYZE=1 umi build",
     "build": "umi build",
+    "check:model": "umi dva list model",
     "lint:js": "eslint --ext .js src",
     "lint:style": "stylelint \"src/**/*.less\" --syntax less",
     "start": "umi dev",

src/layouts/BaseLayout.js

@@ -1,6 +1,6 @@
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
-import { connect } from 'dva'
+import { connect } from 'umi'
 import { Helmet } from 'react-helmet'
 import { Loader } from 'components'
 import { queryLayout } from 'utils'

src/layouts/PrimaryLayout.js

@@ -3,7 +3,7 @@
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { withRouter } from 'umi'
-import { connect } from 'dva'
+import { connect } from 'umi'
 import { MyLayout, GlobalFooter } from 'components'
 import { BackTop, Layout, Drawer } from 'antd'
 import { enquireScreen, unenquireScreen } from 'enquire-js'

src/pages/dashboard/index.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { connect } from 'dva'
+import { connect } from 'umi'
 import { Row, Col, Card } from 'antd'
 import { Color } from 'utils'
 import { Page, ScrollBar } from 'components'

src/pages/login/index.js

@@ -1,6 +1,6 @@
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
-import { connect } from 'dva'
+import { connect } from 'umi'
 import { Button, Row, Input, Form } from 'antd'
 import { GlobalFooter } from 'components'
 import { GithubOutlined } from '@ant-design/icons'
@@ -9,25 +9,19 @@ import { setLocale } from 'utils'
 import config from 'utils/config'
 
 import styles from './index.less'
+
 const FormItem = Form.Item
-const [form] = Form.useForm();
 
 @withI18n()
 @connect(({ loading, dispatch }) => ({ loading, dispatch }))
 class Login extends PureComponent {
-  handleOk = () => {
-    const { validateFieldsAndScroll } = form
-    validateFieldsAndScroll((errors, values) => {
-      if (errors) {
-        return
-      }
-      dispatch({ type: 'login/login', payload: values })
-    })
-  }
 
   render() {
-    const { loading, i18n } = this.props
-
+    const { dispatch, loading, i18n } = this.props
+    
+    const handleOk = values => {
+      dispatch({ type: 'login/login', payload: values })
+    }
     let footerLinks = [
       {
         key: 'github',
@@ -55,11 +49,12 @@ class Login extends PureComponent {
             <img alt="logo" src={config.logoPath} />
             <span>{config.siteName}</span>
           </div>
-          <Form>
+          <Form
+            onFinish={handleOk}
+            >
             <FormItem name="username" 
               rules={[{ required: true }]} hasFeedback>
                 <Input
-                  onPressEnter={this.handleOk}
                   placeholder={i18n.t`Username`}
                 />
             </FormItem>
@@ -67,14 +62,13 @@ class Login extends PureComponent {
               rules={[{ required: true }]} hasFeedback>
                 <Input
                   type="password"
-                  onPressEnter={this.handleOk}
                   placeholder={i18n.t`Password`}
                 />
             </FormItem>
             <Row>
               <Button
                 type="primary"
-                onClick={this.handleOk}
+                htmlType="submit"
                 loading={loading.effects.login}
               >
                 <Trans>Sign in</Trans>

src/pages/login/model.js

@@ -8,7 +8,14 @@ export default {
   namespace: 'login',
 
   state: {},
-
+  // subscriptions: {
+  //   setup({ dispatch, history }) {
+  //     history.listen(location => {
+  //       if (pathToRegexp('/login').exec(location.pathname)) {
+  //       }
+  //     })
+  //   },
+  // },
   effects: {
     *login({ payload }, { put, call, select }) {
       const data = yield call(loginUser, payload)

src/pages/post/index.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { connect } from 'dva'
+import { connect } from 'umi'
 import { Tabs } from 'antd'
 import { history } from 'umi'
 import { stringify } from 'qs'

src/pages/user/[id]/index.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { connect } from 'dva'
+import { connect } from 'umi'
 import { Page } from 'components'
 import styles from './index.less'
 

src/pages/user/components/Filter.js

@@ -25,7 +25,10 @@ const TwoColProps = {
 
 @withI18n()
 class Filter extends Component {
+  formRef = React.createRef()
+
   handleFields = fields => {
+    console.log(fields)
     const { createTime } = fields
     if (createTime.length) {
       fields.createTime = [
@@ -36,21 +39,15 @@ class Filter extends Component {
     return fields
   }
 
-  handleSubmit = () => {
+  handleSubmit = values => {
     const { onFilterChange } = this.props
-    const [form] = Form.useForm()
-    const { getFieldsValue } = form
 
-    let fields = getFieldsValue()
-    fields = this.handleFields(fields)
+    fields = this.handleFields(values)
     onFilterChange(fields)
   }
 
   handleReset = () => {
-    const [form] = Form.useForm()
-    const { getFieldsValue, setFieldsValue } = form
-
-    const fields = getFieldsValue()
+    const fields = this.formRef.current.getFieldsValue()
     for (let item in fields) {
       if ({}.hasOwnProperty.call(fields, item)) {
         if (fields[item] instanceof Array) {
@@ -60,14 +57,13 @@ class Filter extends Component {
         }
       }
     }
-    setFieldsValue(fields)
+    this.formRef.current.setFieldsValue(fields)
     this.handleSubmit()
   }
   handleChange = (key, values) => {
-    const { form, onFilterChange } = this.props
-    const { getFieldsValue } = form
+    const { onFilterChange } = this.props
 
-    let fields = getFieldsValue()
+    let fields = this.formRef.current.getFieldsValue()
     fields[key] = values
     fields = this.handleFields(fields)
     onFilterChange(fields)
@@ -75,8 +71,6 @@ class Filter extends Component {
 
   render() {
     const { onAdd, filter, i18n } = this.props
-    const [form] = Form.useForm()
-    const { getFieldDecorator } = form
     const { name, address } = filter
 
     let initialCreateTime = []
@@ -88,85 +82,83 @@ class Filter extends Component {
     }
 
     return (
-      <Form initialValue={{ name, address, createTime: initialCreateTime }}>
-      <Row gutter={24}>
-        <Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
-          <Form.Item name = "name">
-            <Search
+      <Form ref={this.formRef} name="control-ref" initialValues={{ name, address, createTime: initialCreateTime }}>
+        <Row gutter={24}>
+          <Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
+            <Form.Item name="name">
+              <Search
                 placeholder={i18n.t`Search Name`}
                 onSearch={this.handleSubmit}
               />
-          </Form.Item>
-        </Col>
-        <Col
-          {...ColProps}
-          xl={{ span: 4 }}
-          md={{ span: 8 }}
-          id="addressCascader"
-        >
-          <Form.Item name = "address">
-            <Cascader
-              style={{ width: '100%' }}
-              options={city}
-              placeholder={i18n.t`Please pick an address`}
-              onChange={this.handleChange.bind(this, 'address')}
-              getPopupContainer={() =>
-                document.getElementById('addressCascader')
-              }
-            />
-          </Form.Item>
-        </Col>
-        <Col
-          {...ColProps}
-          xl={{ span: 6 }}
-          md={{ span: 8 }}
-          sm={{ span: 12 }}
-          id="createTimeRangePicker"
-        >
-          <FilterItem label={i18n.t`CreateTime`}>
-            <Form.Item name="createTime">
-              <RangePicker
+            </Form.Item>
+          </Col>
+          <Col
+            {...ColProps}
+            xl={{ span: 4 }}
+            md={{ span: 8 }}
+            id="addressCascader"
+          >
+            <Form.Item name="address">
+              <Cascader
                 style={{ width: '100%' }}
-                onChange={this.handleChange.bind(this, 'createTime')}
-                getCalendarContainer={() => {
-                  return document.getElementById('createTimeRangePicker')
-                }}
+                options={city}
+                placeholder={i18n.t`Please pick an address`}
+                getPopupContainer={() =>
+                  document.getElementById('addressCascader')
+                }
               />
             </Form.Item>
-          </FilterItem>
-        </Col>
-        <Col
-          {...TwoColProps}
-          xl={{ span: 10 }}
-          md={{ span: 24 }}
-          sm={{ span: 24 }}
-        >
-          <Row type="flex" align="middle" justify="space-between">
-            <div>
-              <Button
-                type="primary"
-                className="margin-right"
-                onClick={this.handleSubmit}
-              >
-                <Trans>Search</Trans>
+          </Col>
+          <Col
+            {...ColProps}
+            xl={{ span: 6 }}
+            md={{ span: 8 }}
+            sm={{ span: 12 }}
+            id="createTimeRangePicker"
+          >
+            <FilterItem label={i18n.t`CreateTime`}>
+              <Form.Item name="createTime">
+                <RangePicker
+                  style={{ width: '100%' }}
+                  getCalendarContainer={() => {
+                    return document.getElementById('createTimeRangePicker')
+                  }}
+                />
+              </Form.Item>
+            </FilterItem>
+          </Col>
+          <Col
+            {...TwoColProps}
+            xl={{ span: 10 }}
+            md={{ span: 24 }}
+            sm={{ span: 24 }}
+          >
+            <Row type="flex" align="middle" justify="space-between">
+              <div>
+                <Button
+                  type="primary" htmlType="submit"
+                  className="margin-right"
+                  onClick={this.handleSubmit}
+                >
+                  <Trans>Search</Trans>
+                </Button>
+                <Button onClick={this.handleReset}>
+                  <Trans>Reset</Trans>
+                </Button>
+              </div>
+              <Button type="ghost" onClick={onAdd}>
+                <Trans>Create</Trans>
               </Button>
-              <Button onClick={this.handleReset}>
-                <Trans>Reset</Trans>
-              </Button>
-            </div>
-            <Button type="ghost" onClick={onAdd}>
-              <Trans>Create</Trans>
-            </Button>
-          </Row>
-        </Col>
-      </Row></Form>
+            </Row>
+          </Col>
+        </Row>
+      </Form>
     )
   }
 }
 
 Filter.propTypes = {
   onAdd: PropTypes.func,
-  form: PropTypes.object,
   filter: PropTypes.object,
   onFilterChange: PropTypes.func,
 }

src/pages/user/index.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { history } from 'umi'
-import { connect } from 'dva'
+import { connect } from 'umi'
 import { Row, Col, Button, Popconfirm } from 'antd'
 import { withI18n } from '@lingui/react'
 import { Page } from 'components'

src/themes/index.less

@@ -15,6 +15,10 @@ body {
   height: 8px;
 }
 
+.margin-right {
+  margin-right: 16px;
+}
+
 :global {
   .ant-breadcrumb {
     & > span {
@@ -79,10 +83,6 @@ body {
     padding: 12px 16px !important;
   }
 
-  .margin-right {
-    margin-right: 16px;
-  }
-
   a:focus {
     text-decoration: none;
   }

src/utils/config.js

@@ -1,6 +1,6 @@
 module.exports = {
   siteName: 'AntD Admin',
-  copyright: 'Ant Design Admin  ©2019 zuiidea',
+  copyright: 'Ant Design Admin  ©2020 zuiidea',
   logoPath: '/logo.svg',
   apiPrefix: '/api/v1',
   fixedHeader: true, // sticky primary layout header

src/utils/index.js

@@ -1,5 +1,6 @@
 import { cloneDeep } from 'lodash'
 const { pathToRegexp } = require("path-to-regexp")
+import moment from 'moment'
 import 'moment/locale/zh-cn'
 import store from 'store'
 import { i18n } from './config'
@@ -159,16 +160,13 @@ export function queryLayout(layouts, pathname) {
 
 
 export function getLocale() {
-  return store.get('locale')
+  return store.get('locale') || defaultLanguage
 }
 
 export function setLocale(language) {
   if (getLocale() !== language) {
     moment.locale(language === 'zh' ? 'zh-cn' : language)
     store.set('locale', language)
-    history.push({
-      pathname: `/${window.location.pathname}`,
-      search: window.location.search,
-    })
+    window.location.reload()
   }
 }