feat:AccountCenter ts development completed

AccountCenter/src/data.d.ts

+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;
+}

AccountCenter/src/index.js → AccountCenter/src/index.tsx

 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 }) => ({
+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 {
-  static getDerivedStateFromProps(props, state) {
+  })
+)
+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<HTMLInputElement>) => {
     this.setState({ inputValue: e.target.value });
   };
 
@@ -130,12 +165,12 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent {
                 <Divider dashed />
                 <div className={styles.tags}>
                   <div className={styles.tagsTitle}>标签</div>
-                  {currentUser.tags.concat(newTags).map(item => (
-                    <Tag key={item.key}>{item.label}</Tag>
-                  ))}
+                  {currentUser.tags.concat(newTags).map(item => {
+                    return <Tag key={item.key}>{item.label}</Tag>;
+                  })}
                   {inputVisible && (
                     <Input
-                      ref={this.saveInputRef}
+                      ref={ref => this.saveInputRef(ref)}
                       type="text"
                       size="small"
                       style={{ width: 78 }}

AccountCenter/src/model.js → AccountCenter/src/model.ts

-import { query as queryUsers, queryCurrent } from './service';
+import { queryCurrent } from './service';
+import { Dispatch } from 'redux';
+import { CurrentUser } from './data';
 
+export interface ModalState {
+  currentUser: CurrentUser;
+}
+
+type callType<T, A extends any[], R> = (thisArg?: T, ...args: A) => R;
+Function.call;
 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 }) {
+    *fetchCurrent(
+      _: ModalState,
+      {
+        call,
+        put,
+      }: {
+        call: callType<Function, [], Promise<any>>;
+        put: Dispatch;
+      }
+    ) {
       const response = yield call(queryCurrent);
       yield put({
         type: 'saveCurrentUser',
@@ -26,27 +35,16 @@ export default {
   },
 
   reducers: {
-    save(state, action) {
-      return {
-        ...state,
-        list: action.payload,
-      };
-    },
-    saveCurrentUser(state, action) {
+    saveCurrentUser(
+      state: ModalState,
+      action: {
+        payload: CurrentUser;
+      }
+    ) {
       return {
         ...state,
         currentUser: action.payload || {},
       };
     },
-    changeNotifyCount(state, action) {
-      return {
-        ...state,
-        currentUser: {
-          ...state.currentUser,
-          notifyCount: action.payload.totalCount,
-          unreadCount: action.payload.unreadCount,
-        },
-      };
-    },
   },
 };

AccountCenter/src/service.js → AccountCenter/src/service.ts

 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');
 }

package.json

 {
   "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}": [

typings.d.ts

@@ -9,4 +9,5 @@ declare module '*.jpeg';
 declare module '*.gif';
 declare module '*.bmp';
 declare module '*.tiff';
+
 declare var APP_TYPE: string;