{
17 | @Bind()
18 | public handleLogin() {
19 | const { form: { validateFields } } = this.props;
20 | validateFields((err: object, values: object)=>{
21 | if(!err) {
22 | login(values).then(res=>{
23 | const result = getResponse(res);
24 | if(result) {
25 | const { _id } = result.content;
26 | notification.success();
27 | sessionStorage.setItem('token',result.token);
28 | const path = {
29 | pathname: `/todo/${_id}`,
30 | // state: {
31 | // name: 'huangbin',
32 | // age: 23
33 | // },
34 | // search: 'name=huang&age=23'
35 | }
36 | this.props.history.push(path);
37 | }
38 | })
39 | }
40 | })
41 | }
42 | public render() {
43 | const { form: { getFieldDecorator } } = this.props;
44 | return (
45 |
46 |
69 |
70 | );
71 | }
72 | }
73 |
74 | export default withRouter(Form.create()(Login));
--------------------------------------------------------------------------------
/src/routes/Register/index.module.less:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | display: flex;
3 | align-items: center;
4 | flex-direction: column;
5 | padding: 20px;
6 | :global {
7 | .ant-form {
8 | width: 300px;
9 | .ant-row {
10 | display: flex;
11 | margin: 10px 0 0 0;
12 | justify-content: center;
13 | }
14 | }
15 | }
16 | }
--------------------------------------------------------------------------------
/src/routes/Register/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Form, Input, Button } from 'antd';
3 | import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
4 |
5 | import notification from '../../utils/notification';
6 | import { getResponse } from '../../utils/utils';
7 | import { register } from '../../services/user';
8 | import { Bind } from 'lodash-decorators';
9 | import styles from './index.module.less';
10 |
11 | interface RegisterProps {
12 | form: any
13 | }
14 | const FormItem = Form.Item;
15 | class Register extends Component {
16 | @Bind()
17 | public handleRegister() {
18 | const { form: { validateFields } } = this.props;
19 | validateFields((err: any,values: any)=>{
20 | if(!err) {
21 | register(values).then(res=>{
22 | const result = getResponse(res);
23 | if(result) {
24 | notification.success();
25 | }
26 | })
27 | }
28 | })
29 | }
30 | public render() {
31 | const { form: { getFieldDecorator } } = this.props;
32 | return (
33 |
34 |
58 |
59 | );
60 | }
61 | }
62 |
63 | export default withRouter(Form.create()(Register));
--------------------------------------------------------------------------------
/src/routes/Todo/Todo.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button, Input, Form } from 'antd';
3 | import uuid from 'uuid/v4';
4 | import { connect } from 'react-redux';
5 | import { Bind } from 'lodash-decorators';
6 | import { withRouter, RouteComponentProps } from 'react-router-dom';
7 |
8 | import { fetchUserList } from 'service/user';
9 | import { getResponse } from 'utils/utils';
10 | import notification from 'utils/notification';
11 | import * as actions from '../../actions/todo'; // shadow name problem must to import *
12 | import * as userActions from '../../actions/user';
13 | import { add } from '../../services/todo';
14 | import TodoList from './TodoList';
15 | import styles from './index.module.less';
16 |
17 | interface TodoProps {
18 | updateState: any,
19 | updateUser: any,
20 | form: any,
21 | todoState: any,
22 | userId: number,
23 | }
24 | interface S {
25 | userId: number;
26 | listDom: any;
27 | }
28 | const FormItem = Form.Item;
29 | // @connect(
30 | // (state: any)=>state,
31 | // { updateState }
32 | // )
33 | class Todo extends Component {
34 | constructor(props: TodoProps & RouteComponentProps) {
35 | super(props);
36 | const { userId } = this.props.match.params as TodoProps;
37 | this.state = {
38 | userId,
39 | listDom: undefined,
40 | }
41 | }
42 | public componentDidMount() {
43 | const { updateUser } = this.props;
44 | fetchUserList({}).then(res=>{
45 | const result = getResponse(res);
46 | if(result) {
47 | updateUser({ userList: result.content });
48 | }
49 | })
50 | }
51 | @Bind()
52 | public handleAdd() {
53 | const {
54 | updateState,
55 | form: { validateFieldsAndScroll, resetFields },
56 | todoState: { todoList = [] }
57 | } = this.props;
58 | const { userId, listDom } = this.state;
59 | validateFieldsAndScroll((err: any, values: any)=>{
60 | if(!err) {
61 | const { content } = values;
62 | content && updateState({
63 | todoList: [
64 | { userId, content, completed: false, time: Date.now(), _id: uuid() },
65 | ...todoList
66 | ]
67 | });
68 | add({ userId, content, completed: false }).then(res=>{
69 | if(res) {
70 | notification.success();
71 | listDom && listDom.handleSearchList({ userId });
72 | }
73 | })
74 | resetFields();
75 | }
76 | })
77 | }
78 |
79 | @Bind()
80 | public handleRef(node: any) {
81 | this.setState({
82 | listDom: node
83 | })
84 | }
85 | public render() {
86 | const { userId } = this.state;
87 | const { form } = this.props;
88 | const { getFieldDecorator } = form;
89 | return (
90 |
91 |
105 |
106 |
107 | );
108 | }
109 | }
110 |
111 | export default withRouter(connect(
112 | (state: any)=>({todoState: state.todo}),
113 | { updateState: actions.updateState, updateUser: userActions.updateState }
114 | )(Form.create()(Todo)));
--------------------------------------------------------------------------------
/src/routes/Todo/TodoList.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Table, Button, Badge } from 'antd';
3 | import { connect } from 'react-redux';
4 | import { Bind } from 'lodash-decorators';
5 | import { getResponse, createPagination } from 'utils/utils';
6 | import { renderTimeStamp } from 'utils/render';
7 | import { fetchTodoList, deleteTodo, toggleTodo } from 'service/todo';
8 | import * as actions from '../../actions/todo';
9 | import notification from 'utils/notification';
10 |
11 | interface TodoListProps {
12 | user: any,
13 | todoState: any,
14 | updateState: any,
15 | toggleCompleted: any,
16 | userId: number,
17 | onRef: any,
18 | }
19 | interface S {
20 | loading: boolean;
21 | selectedRowKeys: string[];
22 | }
23 | interface RecordProps {
24 | _id: any;
25 | completed: boolean,
26 | }
27 | class TodoList extends Component {
28 | // public static getDerivedStateFromProps(props: TodoListProps, state: S): any {
29 | // const { loading } = state;
30 | // const { loading: nextLoading } = props;
31 | // if( !loading && nextLoading !== loading ) {
32 | // return {
33 | // loading: nextLoading,
34 | // }
35 | // }
36 | // return null;
37 | // }
38 | constructor(props: TodoListProps) {
39 | super(props);
40 | props.onRef(this);
41 | this.state = {
42 | loading: true,
43 | selectedRowKeys: [],
44 | }
45 | }
46 | public componentDidMount() {
47 | const { userId } = this.props;
48 | this.handleSearchList({ userId });
49 | }
50 | @Bind()
51 | public handleSearchList(params: object) {
52 | this.setState({ loading: true });
53 | const { updateState } = this.props;
54 | fetchTodoList(params).then(res=>{
55 | const result = getResponse(res);
56 | if(result) {
57 | const { content } = result;
58 | this.setState({ loading: false });
59 | updateState({ todoList: content, pagination: createPagination(result) });
60 | this.handleSetSelectedRowKeys(content);
61 | }
62 | })
63 | }
64 | @Bind()
65 | public handleSetSelectedRowKeys(content: any[]) {
66 | const selectedRowKeys: any[] = [];
67 | content.forEach((item: { _id: any, completed: boolean })=>{
68 | if(item.completed) {
69 | selectedRowKeys.push(item._id);
70 | }
71 | })
72 | console.log(selectedRowKeys);
73 | this.setState({ selectedRowKeys });
74 | }
75 | @Bind()
76 | public handleDelete(record: RecordProps) {
77 | deleteTodo({_id: record._id}).then(res=>{
78 | const result = getResponse(res);
79 | if(result) {
80 | notification.success();
81 | const { userId } = this.props;
82 | this.handleSearchList({ userId });
83 | }
84 | })
85 | }
86 | @Bind()
87 | public handleChangeRow(selectedRowKeys: string[], selectedRows: any[]) {
88 | const { userId, todoState: { todoList = [] } } = this.props;
89 | // this.setState({ selectedRowKeys });
90 | // toggleCompleted({ selectedRowKeys });
91 | const toggleList: object[] = [];
92 | todoList.forEach((item: RecordProps)=> {
93 | if(selectedRowKeys.indexOf(item._id) >= 0) {
94 | if(!item.completed) {
95 | toggleList.push(item); // 如果被选中但是先前没完成
96 | }
97 | } else if(item.completed) {
98 | toggleList.push(item); // 或者之前没被选中 现在是完成
99 | }
100 | })
101 | toggleTodo({ toggleList }).then((res: object)=> {
102 | const result = getResponse(res);
103 | if(result) {
104 | notification.success();
105 | this.handleSearchList({ userId });
106 | }
107 | })
108 | }
109 | @Bind()
110 | public handleChangePage(pagination: { current: number, pageSize: number }) {
111 | const { updateState, userId } = this.props;
112 | const { current, pageSize } = pagination;
113 | this.setState({ loading: true });
114 | fetchTodoList({ userId, current, pageSize }).then(res=>{
115 | const result = getResponse(res);
116 | if(result) {
117 | updateState({ todoList: result.content, pagination: createPagination(result) });
118 | this.setState({ loading: false });
119 | }
120 | })
121 | }
122 | public render() {
123 | const { loading = false, selectedRowKeys } = this.state;
124 | const { todoState: { todoList = [], pagination = {} }, user, userId } = this.props;
125 | const rowSelection = {
126 | selectedRowKeys,
127 | onChange: this.handleChangeRow,
128 | }
129 | const { name } = user.userList.length > 0 && user.userList.find((item: { _id: any })=> item._id === userId);
130 | const columns = [
131 | {
132 | title: '用户名',
133 | dataIndex: 'userId',
134 | width: 250,
135 | render: ()=> {name},
136 | },
137 | {
138 | title: '内容',
139 | dataIndex: 'content',
140 | width: 250,
141 | render: (val: string, record: RecordProps) =>
142 | record.completed ?
143 | {val} :
144 | val,
145 | },
146 | {
147 | title: '是否已完成',
148 | dataIndex: 'completed',
149 | width: 120,
150 | align: 'center' as 'center',
151 | render: (value: boolean) => value ? : ,
152 | },
153 | {
154 | title: '备忘时间',
155 | dataIndex: 'time',
156 | width: 250,
157 | render: renderTimeStamp,
158 | },
159 | {
160 | title: '操作',
161 | dataIndex: 'operation',
162 | align: 'center' as 'center',
163 | width: 100,
164 | render: (val: string, record: RecordProps, index: number) =>
165 | ,
166 | }
167 | ];
168 | const tableProps = {
169 | columns,
170 | loading,
171 | pagination,
172 | rowSelection,
173 | rowKey: '_id',
174 | scroll: { y: 400 },
175 | bordered: true,
176 | dataSource: todoList,
177 | onChange: this.handleChangePage,
178 | }
179 | return (
180 |
181 | )
182 | }
183 | }
184 | export default connect(
185 | (state: any)=>({todoState: state.todo, user: state.user}),
186 | { updateState: actions.updateState, toggleCompleted: actions.toggleCompleted }
187 | )(TodoList);
188 |
--------------------------------------------------------------------------------
/src/routes/Todo/index.module.less:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | display: flex;
3 | align-items: center;
4 | flex-flow: column nowrap;
5 | :global {
6 | p {
7 | margin: 0;
8 | }
9 | }
10 | .todo {
11 | display: flex;
12 | align-items: center;
13 | justify-content: center;
14 | padding: 20px;
15 | color: rgba(24, 144, 255, .8);
16 | :global {
17 | .ant-row,.ant-form-item {
18 | display: flex;
19 | flex-direction: row;
20 | margin-bottom: 0;
21 | }
22 | .ant-input {
23 | width: 150px;
24 | margin: 0 20px;
25 | }
26 | }
27 | }
28 | }
--------------------------------------------------------------------------------
/src/services/todo.tsx:
--------------------------------------------------------------------------------
1 | import request from '../utils/request';
2 | import { parseParams } from 'utils/utils';
3 |
4 | export async function add(params: any) {
5 | return request(`/todo/add`, {
6 | method: 'POST',
7 | data: params,
8 | })
9 | }
10 |
11 | export async function fetchTodoList(params: any) {
12 | return request(`/todo/fetch`, {
13 | method: 'GET',
14 | params: parseParams(params),
15 | })
16 | }
17 |
18 | export async function deleteTodo(params: any) {
19 | return request(`/todo/delete`, {
20 | method: 'DELETE',
21 | data: params,
22 | })
23 | }
24 |
25 | export async function toggleTodo(params: any) {
26 | return request(`/todo/toggle`, {
27 | method: 'PUT',
28 | data: params,
29 | })
30 | }
--------------------------------------------------------------------------------
/src/services/user.tsx:
--------------------------------------------------------------------------------
1 | import request from '../utils/request';
2 |
3 | export async function register(params: any) {
4 | return request(`/user/register`, {
5 | method: 'POST',
6 | data: params,
7 | })
8 | }
9 |
10 | export async function login(params: any) {
11 | return request(`/user/login`, {
12 | method: 'POST',
13 | data: params,
14 | })
15 | }
16 |
17 | export async function fetchUserList(params: any) {
18 | return request(`/user/fetchUserList`, {
19 | method: 'GET',
20 | params,
21 | })
22 | }
23 |
--------------------------------------------------------------------------------
/src/utils/connect.tsx:
--------------------------------------------------------------------------------
1 | import { connect as connectComponent } from 'react-redux';
2 |
3 | export const connect = (mapStateToProps: any, actions: any) => {
4 | return (target: any) => (
5 | connectComponent(mapStateToProps, actions)(target) as any
6 | );
7 | };
--------------------------------------------------------------------------------
/src/utils/notification.tsx:
--------------------------------------------------------------------------------
1 | import { notification } from 'antd';
2 |
3 | interface ParamsProps {
4 | message: string
5 | description: string
6 | // [key: string]: any
7 | }
8 | /**
9 | * 操作成功通知提示
10 | * @function success
11 | * @param {object} params - 默认属性
12 | * @param {?string} [params.message=操作成功] - 提示信息
13 | * @param {?string} [params.description] - 详细描述
14 | */
15 | function success(params?: ParamsProps) {
16 | const { message = "操作成功", description = "", ...others } = params || {};
17 | notification.success({
18 | message,
19 | description,
20 | duration: 2,
21 | ...others,
22 | });
23 | }
24 |
25 | // /**
26 | // * 操作失败通知提示
27 | // * @function error
28 | // * @param {object} params - 默认属性
29 | // * @param {?string} [params.message=操作失败] - 提示信息
30 | // * @param {?string} [params.description] - 详细描述
31 | // */
32 | // function error({ message:string = "操作失败", description: string = "", ...others: any }) {
33 | // notification.error({
34 | // message: message,
35 | // description,
36 | // duration: 2,
37 | // ...others,
38 | // });
39 | // }
40 |
41 | // /**
42 | // * 操作异常通知提示
43 | // * @function warning
44 | // * @param {object} params - 默认属性
45 | // * @param {?string} [params.message=操作异常] - 提示信息
46 | // * @param {?string} [params.description] - 详细描述
47 | // */
48 | // function warning({ message: string, description: string, ...others: any }) {
49 | // notification.warning({
50 | // message: message || "操作异常",
51 | // description,
52 | // duration: 2,
53 | // ...others,
54 | // });
55 | // }
56 |
57 | // /**
58 | // * 操作信息通知提示
59 | // * @function info
60 | // * @param {object} config - 默认属性
61 | // * @param {?string} [params.message] - 提示信息
62 | // * @param {?string} [params.description] - 详细描述
63 | // */
64 | // function info({ message: string, description: string, ...others: any }) {
65 | // notification.info({
66 | // message,
67 | // description,
68 | // duration: 2,
69 | // ...others,
70 | // });
71 | // }
72 |
73 | export default {
74 | success,
75 | // error,
76 | // warning,
77 | // info,
78 | };
79 |
--------------------------------------------------------------------------------
/src/utils/render.tsx:
--------------------------------------------------------------------------------
1 | function renderTimeStamp(time: number) {
2 | return new Date(time).toLocaleString();
3 | }
4 |
5 | export { renderTimeStamp }
--------------------------------------------------------------------------------
/src/utils/request.tsx:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import { notification } from 'antd';
3 |
4 | notification.config({
5 | placement: 'bottomRight',
6 | });
7 |
8 | function checkStatus(response: any) {
9 | if (response.status >= 200 && response.status < 300) {
10 | return response;
11 | }
12 |
13 | const errorText = response.statusText;
14 | const error = new Error(errorText);
15 | // error.name = response.status;
16 | // error.response = response;
17 | throw error;
18 | }
19 |
20 | export default function request(url: string, options: any) {
21 | const newOptions = { responseType: 'json', ...options };
22 | // newOptions.body = JSON.stringify(newOptions.body);
23 | const token = sessionStorage.getItem('token');
24 | return axios({
25 | url,
26 | headers: {
27 | 'Authorization': `bearer ${token}`
28 | },
29 | ...newOptions
30 | })
31 | .then(checkStatus)
32 | .then(response => {
33 | if (response.status === 204) {
34 | return {};
35 | }
36 | if (newOptions.responseType === 'blob') {
37 | return response.blob();
38 | }
39 | return response;
40 | })
41 | .catch(e => {
42 | const status = e.name;
43 | if (status === 401) {
44 | // removeAccessToken();
45 | window.location.href = "localhost:3000";
46 | return;
47 | }
48 |
49 | notification.error({
50 | message: `请求错误 ${status}`,
51 | description: e.message,
52 | });
53 | });
54 | }
--------------------------------------------------------------------------------
/src/utils/utils.tsx:
--------------------------------------------------------------------------------
1 | import { notification } from 'antd';
2 | import { PAGE_SIZE_OPTIONS } from 'constance/utils';
3 |
4 | interface ResponseProps {
5 | current: number;
6 | pageSize: number;
7 | total: number;
8 | }
9 | function getResponse(response: any) {
10 | if (response) {
11 | if(response.data.failed) {
12 | notification.error({
13 | message: '请求错误',
14 | description: response.data.message,
15 | });
16 | } else {
17 | return response.data;
18 | }
19 | }
20 | }
21 |
22 | function createPagination(response: ResponseProps) {
23 | if(response) {
24 | return {
25 | showSizeChanger: true,
26 | pageSizeOptions: [...PAGE_SIZE_OPTIONS],
27 | current: response.current + 1,
28 | pageSize: response.pageSize,
29 | total: response.total,
30 | showTotal: (total: number, range: any) => `显示 ${range[0]} - ${range[1]} 共 ${total} 条`
31 | }
32 | }
33 | return {}
34 | }
35 |
36 | function parseParams(params: ResponseProps) {
37 | const { current = 1, pageSize = 10, ...other } = params;
38 | return {
39 | current: current - 1,
40 | pageSize,
41 | ...other,
42 | }
43 | }
44 |
45 | export { getResponse, createPagination, parseParams }
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "outDir": "build/dist",
5 | "module": "esnext",
6 | "target": "es5",
7 | "lib": ["es6", "dom"],
8 | "sourceMap": true,
9 | "allowJs": true,
10 | "jsx": "react",
11 | "moduleResolution": "node",
12 | // "rootDir": "src",
13 | "forceConsistentCasingInFileNames": true,
14 | "noImplicitReturns": true,
15 | "noImplicitThis": true,
16 | "noImplicitAny": true,
17 | "importHelpers": true,
18 | "strictNullChecks": true,
19 | "suppressImplicitAnyIndexErrors": true,
20 | "noUnusedLocals": true,
21 | "experimentalDecorators": true,
22 | "allowSyntheticDefaultImports": true,
23 | "paths": {
24 | "utils/*": ["./src/utils/*"],
25 | "service/*": ["./src/services/*"],
26 | "constance/*": ["./src/constance/*"],
27 | "actions/*": ["./src/actions/*"],
28 | }
29 | },
30 | "exclude": [
31 | "node_modules",
32 | "build",
33 | "scripts",
34 | "acceptance-tests",
35 | "webpack",
36 | "jest",
37 | "src/setupTests.ts"
38 | ]
39 | }
40 |
--------------------------------------------------------------------------------
/tsconfig.prod.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json"
3 | }
--------------------------------------------------------------------------------
/tsconfig.test.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "module": "commonjs"
5 | }
6 | }
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
3 | "rules": {
4 | "ordered-imports": false,
5 | "interface-name" : [true, "never-prefix"],
6 | "no-console": [true, "warning"],
7 | "no-unused-expression": false,
8 | "jsx-boolean-value": false,
9 | "jsx-no-lambda": false,
10 | "object-literal-sort-keys": false
11 | },
12 | "linterOptions": {
13 | "exclude": [
14 | "config/**/*.js",
15 | "node_modules/**/*.ts",
16 | "coverage/lcov-report/*.js",
17 | "server/**/*.js"
18 | ]
19 | }
20 | }
21 |
--------------------------------------------------------------------------------