diff --git a/AccountCenter/src/_mock.js b/AccountCenter/src/_mock.ts similarity index 100% rename from AccountCenter/src/_mock.js rename to AccountCenter/src/_mock.ts diff --git a/AccountCenter/src/data.d.ts b/AccountCenter/src/data.d.ts new file mode 100644 index 0000000000000000000000000000000000000000..f956d756ae6654981966c705e61216256791aa78 --- /dev/null +++ b/AccountCenter/src/data.d.ts @@ -0,0 +1,48 @@ +export interface ITag { + key: string; + label: string; +} + +export interface Province { + label: string; + key: string; +} + +export interface City { + label: string; + key: string; +} + +export interface Geographic { + province: Province; + city: City; +} + +export interface Notice { + id: string; + title: string; + logo: string; + description: string; + updatedAt: string; + member: string; + href: string; + memberLink: string; +} + +export interface CurrentUser { + name: string; + avatar: string; + userid: string; + notice: Notice[]; + email: string; + signature: string; + title: string; + group: string; + tags: ITag[]; + notifyCount: number; + unreadCount: number; + country: string; + geographic: Geographic; + address: string; + phone: string; +} diff --git a/AccountCenter/src/index.js b/AccountCenter/src/index.tsx similarity index 76% rename from AccountCenter/src/index.js rename to AccountCenter/src/index.tsx index a8dc908478b04b4442c5a2ed3a081c31e4d76771..5cd4a3bff6a330a5943fdc73d036d238ea7df895 100644 --- a/AccountCenter/src/index.js +++ b/AccountCenter/src/index.tsx @@ -1,8 +1,12 @@ import React, { PureComponent } from 'react'; import { connect } from 'dva'; +import { Dispatch } from 'redux'; import Link from 'umi/link'; +import { RouteChildrenProps } from 'react-router'; import { Card, Row, Col, Icon, Avatar, Tag, Divider, Input } from 'antd'; import styles from './Center.less'; +import { ITag, CurrentUser } from './data'; +import { ModalState } from './model'; const operationTabList = [ { @@ -31,24 +35,53 @@ const operationTabList = [ }, ]; -@connect(({ loading, BLOCK_NAME_CAMEL_CASE }) => ({ - currentUser: BLOCK_NAME_CAMEL_CASE.currentUser, - currentUserLoading: loading.effects['BLOCK_NAME_CAMEL_CASE/fetchCurrent'], -})) -class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent { - static getDerivedStateFromProps(props, state) { +interface BLOCK_NAME_CAMEL_CASEProps extends RouteChildrenProps { + dispatch: Dispatch; + currentUser: CurrentUser; + currentUserLoading: boolean; +} +interface BLOCK_NAME_CAMEL_CASEState { + newTags: ITag[]; + tabKey: string; + inputVisible: boolean; + inputValue: string; +} + +@connect( + ({ + loading, + BLOCK_NAME_CAMEL_CASE, + }: { + loading: { effects: any }; + BLOCK_NAME_CAMEL_CASE: ModalState; + }) => ({ + currentUser: BLOCK_NAME_CAMEL_CASE.currentUser, + currentUserLoading: loading.effects['BLOCK_NAME_CAMEL_CASE/fetchCurrent'], + }) +) +class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent< + BLOCK_NAME_CAMEL_CASEProps, + BLOCK_NAME_CAMEL_CASEState +> { + static getDerivedStateFromProps( + props: BLOCK_NAME_CAMEL_CASEProps, + state: BLOCK_NAME_CAMEL_CASEState + ) { const { match, location } = props; const { tabKey } = state; - const urlTabKey = location.pathname.replace(`${match.path}/`, ''); + const path = match && match.path; + + const urlTabKey = location.pathname.replace(`${path}/`, ''); if (urlTabKey && urlTabKey !== '/' && tabKey !== urlTabKey) { return { tabKey: urlTabKey, }; } + return null; } - state = { + state: BLOCK_NAME_CAMEL_CASEState = { newTags: [], inputVisible: false, inputValue: '', @@ -62,7 +95,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent { }); } - onTabChange = key => { + onTabChange = (key: string) => { // If you need to sync state to url // const { match } = this.props; // router.push(`${match.url}/${key}`); @@ -72,14 +105,16 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent { }; showInput = () => { - this.setState({ inputVisible: true }, () => this.input.focus()); + this.setState({ inputVisible: true }, () => this.input && this.input.focus()); }; - saveInputRef = input => { + input: Input | null | undefined; + + saveInputRef = (input: Input | null) => { this.input = input; }; - handleInputChange = e => { + handleInputChange = (e: React.ChangeEvent) => { this.setState({ inputValue: e.target.value }); }; @@ -130,12 +165,12 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent {
标签
- {currentUser.tags.concat(newTags).map(item => ( - {item.label} - ))} + {currentUser.tags.concat(newTags).map(item => { + return {item.label}; + })} {inputVisible && ( this.saveInputRef(ref)} type="text" size="small" style={{ width: 78 }} diff --git a/AccountCenter/src/model.js b/AccountCenter/src/model.js deleted file mode 100644 index f927b437690729e549debbb3c3bd24965a4d2db6..0000000000000000000000000000000000000000 --- a/AccountCenter/src/model.js +++ /dev/null @@ -1,52 +0,0 @@ -import { query as queryUsers, queryCurrent } from './service'; - -export default { - namespace: 'BLOCK_NAME_CAMEL_CASE', - - state: { - list: [], - currentUser: {}, - }, - - effects: { - *fetch(_, { call, put }) { - const response = yield call(queryUsers); - yield put({ - type: 'save', - payload: response, - }); - }, - *fetchCurrent(_, { call, put }) { - const response = yield call(queryCurrent); - yield put({ - type: 'saveCurrentUser', - payload: response, - }); - }, - }, - - reducers: { - save(state, action) { - return { - ...state, - list: action.payload, - }; - }, - saveCurrentUser(state, action) { - return { - ...state, - currentUser: action.payload || {}, - }; - }, - changeNotifyCount(state, action) { - return { - ...state, - currentUser: { - ...state.currentUser, - notifyCount: action.payload.totalCount, - unreadCount: action.payload.unreadCount, - }, - }; - }, - }, -}; diff --git a/AccountCenter/src/model.ts b/AccountCenter/src/model.ts new file mode 100644 index 0000000000000000000000000000000000000000..2cbf4a3fc33c3cd87ee144cd5893d3d54a45880a --- /dev/null +++ b/AccountCenter/src/model.ts @@ -0,0 +1,50 @@ +import { queryCurrent } from './service'; +import { Dispatch } from 'redux'; +import { CurrentUser } from './data'; + +export interface ModalState { + currentUser: CurrentUser; +} + +type callType = (thisArg?: T, ...args: A) => R; +Function.call; +export default { + namespace: 'BLOCK_NAME_CAMEL_CASE', + + state: { + currentUser: {}, + }, + + effects: { + *fetchCurrent( + _: ModalState, + { + call, + put, + }: { + call: callType>; + put: Dispatch; + } + ) { + const response = yield call(queryCurrent); + yield put({ + type: 'saveCurrentUser', + payload: response, + }); + }, + }, + + reducers: { + saveCurrentUser( + state: ModalState, + action: { + payload: CurrentUser; + } + ) { + return { + ...state, + currentUser: action.payload || {}, + }; + }, + }, +}; diff --git a/AccountCenter/src/service.js b/AccountCenter/src/service.ts similarity index 61% rename from AccountCenter/src/service.js rename to AccountCenter/src/service.ts index 6fdf83df65bd2e0e359eb6f1bc9d8ee076cff540..d4b10c6b2a7679d9db5db3afdd51b88fdfd01f99 100644 --- a/AccountCenter/src/service.js +++ b/AccountCenter/src/service.ts @@ -1,9 +1,5 @@ import request from 'umi-request'; -export async function query() { - return request('/api/BLOCK_NAME/users'); -} - export async function queryCurrent() { return request('/api/BLOCK_NAME/currentUser'); } diff --git a/package.json b/package.json index 7ead9b8eabf43e6ea67ea3e425ca9ae210680f9d..6613ef52a20250c96c020f16db083e4f59663b55 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "private": true, "scripts": { - "dev": "PAGES_PATH='Exception500/src' umi dev", + "dev": "PAGES_PATH='AccountCenter/src' umi dev", "lint:style": "stylelint \"src/**/*.less\" --syntax less", "lint": "eslint --ext .js src mock tests && npm run lint:style", "lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style", @@ -30,7 +30,8 @@ "stylelint-config-standard": "^18.0.0", "umi": "^2.3.0-0", "umi-plugin-block-dev": "^1.3.1", - "umi-plugin-react": "^1.3.0-0" + "umi-plugin-react": "^1.3.0-0", + "umi-request": "^1.0.0" }, "lint-staged": { "x/**/*.{js,ts,tsx,json,jsx,less}": [ diff --git a/typings.d.ts b/typings.d.ts index 31596c27cd6d3ab40d0cdb1220dd9de1a238d638..33a88e28d2c36d816d65d888f5203b99a721b625 100644 --- a/typings.d.ts +++ b/typings.d.ts @@ -9,4 +9,5 @@ declare module '*.jpeg'; declare module '*.gif'; declare module '*.bmp'; declare module '*.tiff'; + declare var APP_TYPE: string;