From 1b65351be4eaf6aad4decb09129d5d5a350c5265 Mon Sep 17 00:00:00 2001
From: Baorong Li <superlbr@gmail.com>
Date: Tue, 24 Mar 2020 15:17:57 +0800
Subject: [PATCH] upgrade umi@3 fin.

---
 src/pages/post/index.js             |   1 +
 src/pages/request/index.js          | 125 ++++++++++++++++------------
 src/pages/user/components/Filter.js |  19 ++---
 src/pages/user/components/Modal.js  |  74 ++++++++--------
 src/pages/user/index.js             |   4 +-
 5 files changed, 117 insertions(+), 106 deletions(-)

diff --git a/src/pages/post/index.js b/src/pages/post/index.js
index 1f4f9d9..c20db47 100644
--- a/src/pages/post/index.js
+++ b/src/pages/post/index.js
@@ -15,6 +15,7 @@ const EnumPostStatus = {
   PUBLISHED: 2,
 }
 
+@withI18n()
 @connect(({ post, loading }) => ({ post, loading }))
 class Post extends PureComponent {
   handleTabClick = key => {
diff --git a/src/pages/request/index.js b/src/pages/request/index.js
index 22a30e5..b440512 100644
--- a/src/pages/request/index.js
+++ b/src/pages/request/index.js
@@ -37,6 +37,7 @@ const requests = Object.values(api).map(item => {
 
 let uuid = 2
 class RequestPage extends React.Component {
+  formRef = React.createRef()
   constructor(props) {
     super(props)
     this.state = {
@@ -51,15 +52,17 @@ class RequestPage extends React.Component {
   handleRequest = () => {
     const { method, url } = this.state
 
-    this.props.form.validateFields((err, values) => {
-      if (!err) {
+    this.formRef.current.validateFields()
+      .then(values => {
+        // values: { check[1]: true, key[1]: 'username', value[1]: 'admin' }
+
         const params = {}
-        if (values.key) {
-          values.key.forEach((item, index) => {
-            if (item && values.check[index]) {
-              params[item] = values.value[index]
-            }
-          })
+        for (let i in values) {
+          if (i.startsWith('check')) {
+            const index = i.match(/check\[(\d+)\]/)[1]
+            const key = values[`key[${index}]`]
+            params[key] = values[`value[${index}]`]
+          }
         }
 
         request({ method, url, data: params }).then(data => {
@@ -67,8 +70,23 @@ class RequestPage extends React.Component {
             result: JSON.stringify(data),
           })
         })
-      }
-    })
+      })
+      .catch(errorInfo => {
+        console.log(errorInfo)
+        /*
+        errorInfo:
+          {
+            values: {
+              username: 'username',
+              password: 'password',
+            },
+            errorFields: [
+              { password: ['username'], errors: ['Please input your Password!'] },
+            ],
+            outOfDate: false,
+          }
+        */
+      })
   }
 
   handleClickListItem = ({ method, url }) => {
@@ -116,7 +134,6 @@ class RequestPage extends React.Component {
 
   render() {
     const { result, url, method, keys, visible } = this.state
-    const { getFieldDecorator } = this.props.form
 
     return (
       <Page inner>
@@ -185,50 +202,50 @@ class RequestPage extends React.Component {
                 <Trans>Send</Trans>
               </Button>
             </Row>
-            <Form >
-            <div
-              className={classnames(styles.paramsBlock, {
-                [styles.hideParams]: !visible,
-              })}
-            >
-              {keys.map((key, index) => (
-                <Row
-                  gutter={8}
-                  type="flex"
-                  justify="start"
-                  align="middle"
-                  key={key}
-                >
-                  <Col style={{ marginTop: 8 }}>
-                    <Form.Item name={`check[${key}]`}>
-                      <Checkbox defaultChecked />
-                    </Form.Item>
-                  </Col>
-                  <Col style={{ marginTop: 8 }}>
-                    <Form.Item name={`key[${key}]`}>
-                      <Input placeholder="Key" />
-                    </Form.Item>
-                  </Col>
-                  <Col style={{ marginTop: 8 }}>
-                    <Form.Item name={`value[${key}]`}>
-                      <Input placeholder="Value" />
-                    </Form.Item>
-                  </Col>
-                  <Col style={{ marginTop: 8 }}>
-                    <CloseOutlined
-                      onClick={this.handleRemoveField.bind(this, key)}
-                      style={{ cursor: 'pointer' }}
-                    />
-                  </Col>
-                </Row>
-              ))}
+            <Form ref={this.formRef} name="control-ref" >
+              <div
+                className={classnames(styles.paramsBlock, {
+                  [styles.hideParams]: !visible,
+                })}
+              >
+                {keys.map((key, index) => (
+                  <Row
+                    gutter={8}
+                    type="flex"
+                    justify="start"
+                    align="middle"
+                    key={key}
+                  >
+                    <Col style={{ marginTop: 8 }}>
+                      <Form.Item name={`check[${key}]`} valuePropName="checked">
+                        <Checkbox defaultChecked />
+                      </Form.Item>
+                    </Col>
+                    <Col style={{ marginTop: 8 }}>
+                      <Form.Item name={`key[${key}]`}>
+                        <Input placeholder="Key" />
+                      </Form.Item>
+                    </Col>
+                    <Col style={{ marginTop: 8 }}>
+                      <Form.Item name={`value[${key}]`}>
+                        <Input placeholder="Value" />
+                      </Form.Item>
+                    </Col>
+                    <Col style={{ marginTop: 8 }}>
+                      <CloseOutlined
+                        onClick={this.handleRemoveField.bind(this, key)}
+                        style={{ cursor: 'pointer' }}
+                      />
+                    </Col>
+                  </Row>
+                ))}
 
-              <Row style={{ marginTop: 8 }}>
-                <Button onClick={this.handleAddField}>
-                  <Trans>Add Param</Trans>
-                </Button>
-              </Row>
-            </div>
+                <Row style={{ marginTop: 8 }}>
+                  <Button onClick={this.handleAddField}>
+                    <Trans>Add Param</Trans>
+                  </Button>
+                </Row>
+              </div>
             </Form>
             <div className={styles.result}>{result}</div>
           </Col>
diff --git a/src/pages/user/components/Filter.js b/src/pages/user/components/Filter.js
index 8cd271f..93d99ff 100644
--- a/src/pages/user/components/Filter.js
+++ b/src/pages/user/components/Filter.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import moment from 'moment'
 import { FilterItem } from 'components'
 
-import { Trans, withI18n } from '@lingui/react'
+import { Trans } from '@lingui/react'
 import { Button, Row, Col, DatePicker, Form, Input, Cascader } from 'antd'
 import city from 'utils/city'
 
@@ -23,14 +23,12 @@ const TwoColProps = {
   xl: 96,
 }
 
-@withI18n()
 class Filter extends Component {
   formRef = React.createRef()
 
   handleFields = fields => {
-    console.log(fields)
     const { createTime } = fields
-    if (createTime.length) {
+    if (createTime && createTime.length) {
       fields.createTime = [
         moment(createTime[0]).format('YYYY-MM-DD'),
         moment(createTime[1]).format('YYYY-MM-DD'),
@@ -39,10 +37,10 @@ class Filter extends Component {
     return fields
   }
 
-  handleSubmit = values => {
+  handleSubmit = () => {
     const { onFilterChange } = this.props
-
-    fields = this.handleFields(values)
+    const values = this.formRef.current.getFieldsValue()
+    const fields = this.handleFields(values)
     onFilterChange(fields)
   }
 
@@ -62,7 +60,6 @@ class Filter extends Component {
   }
   handleChange = (key, values) => {
     const { onFilterChange } = this.props
-
     let fields = this.formRef.current.getFieldsValue()
     fields[key] = values
     fields = this.handleFields(fields)
@@ -103,9 +100,6 @@ class Filter extends Component {
                 style={{ width: '100%' }}
                 options={city}
                 placeholder={i18n.t`Please pick an address`}
-                getPopupContainer={() =>
-                  document.getElementById('addressCascader')
-                }
               />
             </Form.Item>
           </Col>
@@ -120,9 +114,6 @@ class Filter extends Component {
               <Form.Item name="createTime">
                 <RangePicker
                   style={{ width: '100%' }}
-                  getCalendarContainer={() => {
-                    return document.getElementById('createTimeRangePicker')
-                  }}
                 />
               </Form.Item>
             </FilterItem>
diff --git a/src/pages/user/components/Modal.js b/src/pages/user/components/Modal.js
index 7827d5d..7bec6e3 100644
--- a/src/pages/user/components/Modal.js
+++ b/src/pages/user/components/Modal.js
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Form, Input, InputNumber, Radio, Modal, Cascader } from 'antd'
-import { Trans, withI18n } from '@lingui/react'
+import { Trans } from '@lingui/react'
 import city from 'utils/city'
 
 const FormItem = Form.Item
@@ -14,70 +14,70 @@ const formItemLayout = {
     span: 14,
   },
 }
-@withI18n()
+
 class UserModal extends PureComponent {
+  formRef = React.createRef()
+
   handleOk = () => {
     const { item = {}, onOk } = this.props
-    const [form] = Form.useForm()
-    const { validateFields, getFieldsValue } = form
 
-    validateFields(errors => {
-      if (errors) {
-        return
-      }
-      const data = {
-        ...getFieldsValue(),
-        key: item.key,
-      }
-      data.address = data.address.join(' ')
-      onOk(data)
-    })
+    this.formRef.current.validateFields()
+      .then(values => {
+        const data = {
+          ...values,
+          key: item.key,
+        }
+        data.address = data.address.join(' ')
+        onOk(data)
+      })
+      .catch(errorInfo => {
+        console.log(errorInfo)
+      })
   }
 
   render() {
-    const { item = {}, onOk, form, ...modalProps } = this.props
-    const { getFieldDecorator } = form
+    const { i18n, item = {}, onOk, form, ...modalProps } = this.props
 
     return (
       <Modal {...modalProps} onOk={this.handleOk}>
-        <Form initialValues={{ ...item, address:item.address && item.address.split(' ') , }} layout="horizontal">
-          <FormItem name='name' rules={{required: true}}
+        <Form ref={this.formRef} name="control-ref" initialValues={{ ...item, address: item.address && item.address.split(' ') }} layout="horizontal">
+          <FormItem name='name' rules={[{ required: true }]}
             label={i18n.t`Name`} hasFeedback {...formItemLayout}>
             <Input />
           </FormItem>
-          <FormItem name='nickName' rules={{required: true}} 
+          <FormItem name='nickName' rules={[{ required: true }]}
             label={i18n.t`NickName`} hasFeedback {...formItemLayout}>
             <Input />
           </FormItem>
-          <FormItem name='isMale' rules={{required: true}}
+          <FormItem name='isMale' rules={[{ required: true }]}
             label={i18n.t`Gender`} hasFeedback {...formItemLayout}>
-              <Radio.Group>
-                <Radio value>
-                  <Trans>Male</Trans>
-                </Radio>
-                <Radio value={false}>
-                  <Trans>Female</Trans>
-                </Radio>
-              </Radio.Group>
+            <Radio.Group>
+              <Radio value>
+                <Trans>Male</Trans>
+              </Radio>
+              <Radio value={false}>
+                <Trans>Female</Trans>
+              </Radio>
+            </Radio.Group>
           </FormItem>
           <FormItem name='age' label={i18n.t`Age`} hasFeedback {...formItemLayout}>
             <InputNumber min={18} max={100} />
           </FormItem>
-          <FormItem name='phone' rules={{required: true,pattern: /^1[34578]\d{9}$/,message: i18n.t`The input is not valid phone!`,}}
+          <FormItem name='phone' rules={[{ required: true, pattern: /^1[34578]\d{9}$/, message: i18n.t`The input is not valid phone!`, }]}
             label={i18n.t`Phone`} hasFeedback {...formItemLayout}>
             <Input />
           </FormItem>
-          <FormItem name='email' rules={{ required: true, pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/, message: i18n.t`The input is not valid E-mail!`, }}
+          <FormItem name='email' rules={[{ required: true, pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/, message: i18n.t`The input is not valid E-mail!`, }]}
             label={i18n.t`Email`} hasFeedback {...formItemLayout}>
             <Input />
           </FormItem>
-          <FormItem name='address' rules={{ required: true, }}
+          <FormItem name='address' rules={[{ required: true, }]}
             label={i18n.t`Address`} hasFeedback {...formItemLayout}>
-              <Cascader
-                style={{ width: '100%' }}
-                options={city}
-                placeholder={i18n.t`Pick an address`}
-              />
+            <Cascader
+              style={{ width: '100%' }}
+              options={city}
+              placeholder={i18n.t`Pick an address`}
+            />
           </FormItem>
         </Form>
       </Modal>
diff --git a/src/pages/user/index.js b/src/pages/user/index.js
index 6a9f4da..610c967 100644
--- a/src/pages/user/index.js
+++ b/src/pages/user/index.js
@@ -53,6 +53,7 @@ class User extends PureComponent {
     const { currentItem, modalVisible, modalType } = user
 
     return {
+      i18n,
       item: modalType === 'create' ? {} : currentItem,
       visible: modalVisible,
       destroyOnClose: true,
@@ -129,10 +130,11 @@ class User extends PureComponent {
   }
 
   get filterProps() {
-    const { location, dispatch } = this.props
+    const { location, dispatch, i18n } = this.props
     const { query } = location
 
     return {
+      i18n,
       filter: {
         ...query,
       },