From b405a52dfc2ecfe0a786c20560990c90cc935ab5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Fri, 19 Apr 2019 12:07:51 +0800
Subject: [PATCH] UserRegister finish

---
 UserRegister/src/_mock.js                     |  5 -
 UserRegister/src/_mock.ts                     |  8 ++
 UserRegister/src/{index.js => index.tsx}      | 93 ++++++++++++-------
 .../src/locales/{en-US.js => en-US.ts}        |  0
 .../src/locales/{zh-CN.js => zh-CN.ts}        |  0
 .../src/locales/{zh-TW.js => zh-TW.ts}        |  0
 UserRegister/src/model.js                     | 28 ------
 UserRegister/src/model.ts                     | 54 +++++++++++
 UserRegister/src/{service.js => service.ts}   |  3 +-
 package.json                                  |  2 +-
 10 files changed, 127 insertions(+), 66 deletions(-)
 delete mode 100644 UserRegister/src/_mock.js
 create mode 100644 UserRegister/src/_mock.ts
 rename UserRegister/src/{index.js => index.tsx} (83%)
 rename UserRegister/src/locales/{en-US.js => en-US.ts} (100%)
 rename UserRegister/src/locales/{zh-CN.js => zh-CN.ts} (100%)
 rename UserRegister/src/locales/{zh-TW.js => zh-TW.ts} (100%)
 delete mode 100644 UserRegister/src/model.js
 create mode 100644 UserRegister/src/model.ts
 rename UserRegister/src/{service.js => service.ts} (53%)

diff --git a/UserRegister/src/_mock.js b/UserRegister/src/_mock.js
deleted file mode 100644
index d5f84bef..00000000
--- a/UserRegister/src/_mock.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
-  'POST /api/BLOCK_NAME/register': (req, res) => {
-    res.send({ status: 'ok', currentAuthority: 'user' });
-  },
-};
diff --git a/UserRegister/src/_mock.ts b/UserRegister/src/_mock.ts
new file mode 100644
index 00000000..f57799be
--- /dev/null
+++ b/UserRegister/src/_mock.ts
@@ -0,0 +1,8 @@
+export default {
+  'POST /api/BLOCK_NAME/register': (
+    req: any,
+    res: { send: (arg0: { status: string; currentAuthority: string }) => void }
+  ) => {
+    res.send({ status: 'ok', currentAuthority: 'user' });
+  },
+};
diff --git a/UserRegister/src/index.js b/UserRegister/src/index.tsx
similarity index 83%
rename from UserRegister/src/index.js
rename to UserRegister/src/index.tsx
index eb49b457..d4c30f2b 100644
--- a/UserRegister/src/index.js
+++ b/UserRegister/src/index.tsx
@@ -2,9 +2,11 @@ import React, { Component } from 'react';
 import { connect } from 'dva';
 import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
 import Link from 'umi/link';
-import router from 'umi/router';
-import { Form, Input, Button, Select, Row, Col, Popover, Progress } from 'antd';
+import { Form, Input, message, Button, Select, Row, Col, Popover, Progress } from 'antd';
 import styles from './style.less';
+import { Dispatch } from 'redux';
+import { IStateType } from './model';
+import { FormComponentProps } from 'antd/lib/form';
 
 const FormItem = Form.Item;
 const { Option } = Select;
@@ -28,19 +30,59 @@ const passwordStatusMap = {
   ),
 };
 
-const passwordProgressMap = {
+const passwordProgressMap: {
+  ok: 'success';
+  pass: 'normal';
+  poor: 'exception';
+} = {
   ok: 'success',
   pass: 'normal',
   poor: 'exception',
 };
 
-@connect(({ BLOCK_NAME_CAMEL_CASE, loading }) => ({
-  BLOCK_NAME_CAMEL_CASE,
-  submitting: loading.effects['BLOCK_NAME_CAMEL_CASE/submit'],
-}))
-@Form.create()
-class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
-  state = {
+interface BLOCK_NAME_CAMEL_CASEProps extends FormComponentProps {
+  dispatch: Dispatch;
+  BLOCK_NAME_CAMEL_CASE: IStateType;
+  submitting: boolean;
+}
+interface BLOCK_NAME_CAMEL_CASEState {
+  count: number;
+  confirmDirty: boolean;
+  visible: boolean;
+  help: string;
+  prefix: string;
+}
+
+export interface IUserRegisterParams {
+  mail: string;
+  password: string;
+  confirm: string;
+  mobile: string;
+  captcha: string;
+  prefix: string;
+}
+
+@connect(
+  ({
+    BLOCK_NAME_CAMEL_CASE,
+    loading,
+  }: {
+    BLOCK_NAME_CAMEL_CASE: IStateType;
+    loading: {
+      effects: {
+        [key: string]: string;
+      };
+    };
+  }) => ({
+    BLOCK_NAME_CAMEL_CASE,
+    submitting: loading.effects['BLOCK_NAME_CAMEL_CASE/submit'],
+  })
+)
+class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
+  BLOCK_NAME_CAMEL_CASEProps,
+  BLOCK_NAME_CAMEL_CASEState
+> {
+  state: BLOCK_NAME_CAMEL_CASEState = {
     count: 0,
     confirmDirty: false,
     visible: false,
@@ -52,23 +94,18 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
     const { form, BLOCK_NAME_CAMEL_CASE } = this.props;
     const account = form.getFieldValue('mail');
     if (BLOCK_NAME_CAMEL_CASE.status === 'ok') {
-      router.push({
-        pathname: '/user/register-result',
-        state: {
-          account,
-        },
-      });
+      message.success('注册成功！');
     }
   }
 
   componentWillUnmount() {
     clearInterval(this.interval);
   }
-
+  interval: number | undefined;
   onGetCaptcha = () => {
     let count = 59;
     this.setState({ count });
-    this.interval = setInterval(() => {
+    this.interval = window.setInterval(() => {
       count -= 1;
       this.setState({ count });
       if (count === 0) {
@@ -89,7 +126,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
     return 'poor';
   };
 
-  handleSubmit = e => {
+  handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     const { form, dispatch } = this.props;
     form.validateFields({ force: true }, (err, values) => {
@@ -106,13 +143,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
     });
   };
 
-  handleConfirmBlur = e => {
-    const { value } = e.target;
-    const { confirmDirty } = this.state;
-    this.setState({ confirmDirty: confirmDirty || !!value });
-  };
-
-  checkConfirm = (rule, value, callback) => {
+  checkConfirm = (rule: any, value: string, callback: (messgae?: string) => void) => {
     const { form } = this.props;
     if (value && value !== form.getFieldValue('password')) {
       callback(formatMessage({ id: 'BLOCK_NAME.password.twice' }));
@@ -121,7 +152,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
     }
   };
 
-  checkPassword = (rule, value, callback) => {
+  checkPassword = (rule: any, value: string, callback: (messgae?: string) => void) => {
     const { visible, confirmDirty } = this.state;
     if (!value) {
       this.setState({
@@ -150,7 +181,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
     }
   };
 
-  changePrefix = value => {
+  changePrefix = (value: string) => {
     this.setState({
       prefix: value,
     });
@@ -204,7 +235,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
           </FormItem>
           <FormItem help={help}>
             <Popover
-              getPopupContainer={node => node.parentNode}
+              getPopupContainer={node => (node && node.parentNode ? node.parentNode : node)}
               content={
                 <div style={{ padding: '4px 0' }}>
                   {passwordStatusMap[this.getPasswordStatus()]}
@@ -303,7 +334,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
               <Col span={8}>
                 <Button
                   size="large"
-                  disabled={count}
+                  disabled={!!count}
                   className={styles.getCaptcha}
                   onClick={this.onGetCaptcha}
                 >
@@ -334,4 +365,4 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
   }
 }
 
-export default PAGE_NAME_UPPER_CAMEL_CASE;
+export default Form.create()(PAGE_NAME_UPPER_CAMEL_CASE);
diff --git a/UserRegister/src/locales/en-US.js b/UserRegister/src/locales/en-US.ts
similarity index 100%
rename from UserRegister/src/locales/en-US.js
rename to UserRegister/src/locales/en-US.ts
diff --git a/UserRegister/src/locales/zh-CN.js b/UserRegister/src/locales/zh-CN.ts
similarity index 100%
rename from UserRegister/src/locales/zh-CN.js
rename to UserRegister/src/locales/zh-CN.ts
diff --git a/UserRegister/src/locales/zh-TW.js b/UserRegister/src/locales/zh-TW.ts
similarity index 100%
rename from UserRegister/src/locales/zh-TW.js
rename to UserRegister/src/locales/zh-TW.ts
diff --git a/UserRegister/src/model.js b/UserRegister/src/model.js
deleted file mode 100644
index f65071ae..00000000
--- a/UserRegister/src/model.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { fakeRegister } from './service';
-
-export default {
-  namespace: 'BLOCK_NAME_CAMEL_CASE',
-
-  state: {
-    status: undefined,
-  },
-
-  effects: {
-    *submit({ payload }, { call, put }) {
-      const response = yield call(fakeRegister, payload);
-      yield put({
-        type: 'registerHandle',
-        payload: response,
-      });
-    },
-  },
-
-  reducers: {
-    registerHandle(state, { payload }) {
-      return {
-        ...state,
-        status: payload.status,
-      };
-    },
-  },
-};
diff --git a/UserRegister/src/model.ts b/UserRegister/src/model.ts
new file mode 100644
index 00000000..f5a1fc17
--- /dev/null
+++ b/UserRegister/src/model.ts
@@ -0,0 +1,54 @@
+import { fakeRegister } from './service';
+import { Reducer } from 'redux';
+import { EffectsCommandMap } from 'dva';
+import { AnyAction } from 'redux';
+
+export interface IStateType {
+  status?: 'ok' | 'error';
+  currentAuthority?: 'user' | 'guest' | 'admin';
+}
+
+export type Effect = (
+  action: AnyAction,
+  effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T }
+) => void;
+
+export interface ModelType {
+  namespace: string;
+  state: IStateType;
+  effects: {
+    submit: Effect;
+  };
+  reducers: {
+    registerHandle: Reducer<IStateType>;
+  };
+}
+
+const Model: ModelType = {
+  namespace: 'BLOCK_NAME_CAMEL_CASE',
+
+  state: {
+    status: undefined,
+  },
+
+  effects: {
+    *submit({ payload }, { call, put }) {
+      const response = yield call(fakeRegister, payload);
+      yield put({
+        type: 'registerHandle',
+        payload: response,
+      });
+    },
+  },
+
+  reducers: {
+    registerHandle(state, { payload }) {
+      return {
+        ...state,
+        status: payload.status,
+      };
+    },
+  },
+};
+
+export default Model;
diff --git a/UserRegister/src/service.js b/UserRegister/src/service.ts
similarity index 53%
rename from UserRegister/src/service.js
rename to UserRegister/src/service.ts
index 3a47fd11..b39a929a 100644
--- a/UserRegister/src/service.js
+++ b/UserRegister/src/service.ts
@@ -1,6 +1,7 @@
 import request from 'umi-request';
+import { IUserRegisterParams } from './index';
 
-export async function fakeRegister(params) {
+export async function fakeRegister(params: IUserRegisterParams) {
   return request('/api/BLOCK_NAME/register', {
     method: 'POST',
     data: params,
diff --git a/package.json b/package.json
index c932f2d5..4bf8aeb4 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "scripts": {
-    "dev": "cross-env PAGES_PATH='UserLogin/src' umi dev",
+    "dev": "cross-env PAGES_PATH='UserRegister/src' umi dev",
     "lint": "eslint --ext .js src mock tests && npm run lint:style",
     "lint-staged": "lint-staged",
     "lint-staged:js": "eslint --ext .js",
-- 
GitLab