[Enh] Inline edit user

jellydn · jellydn · commit 9256023a6542 · 2017-08-21T12:47:18.000+07:00
diff --git a/src/components/UserCreation/index.js b/src/components/UserCreation/index.js
diff --git a/src/components/UserForm/index.js b/src/components/UserForm/index.js
@@ -0,0 +1,68 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Row, Input, Button } from 'rebass';
+import logger from '../../utils/logger';
+
+class UserForm extends PureComponent {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    age: PropTypes.number.isRequired,
+    nickname: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onSave: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    isAdd: PropTypes.bool
+  };
+
+  static defaultProps = {
+    name: '',
+    age: 0,
+    nickname: '',
+    onChange: (field, value) => {},
+    onSave: user => {},
+    onCancel: () => {},
+    isAdd: true
+  };
+
+  onSubmit = evt => {
+    evt.preventDefault();
+    logger.warn('onSubmit');
+  };
+
+  render() {
+    const { age, name, nickname, isAdd } = this.props;
+    return (
+      <Row>
+        <Input
+          required
+          placeholder="Name"
+          name="name"
+          value={name}
+          onChange={evt => this.props.onChange('name', evt.target.value)}
+        />
+        <Input
+          required
+          type="number"
+          placeholder="0"
+          name="age"
+          value={age}
+          onChange={evt => this.props.onChange('age', evt.target.value)}
+        />
+        <Input
+          required
+          placeholder="Nickname"
+          name="nickname"
+          value={nickname}
+          onChange={evt => this.props.onChange('nickname', evt.target.value)}
+        />
+        <Button
+          onClick={this.props.onSave}
+          children={isAdd ? 'Save' : 'Update'}
+        />
+        <Button onClick={this.props.onCancel} children="Cancel" />
+      </Row>
+    );
+  }
+}
+
+export default UserForm;
diff --git a/src/components/UserList/UserItem.js b/src/components/UserList/UserItem.js
@@ -1,40 +1,78 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Row, Column, Button } from 'rebass';
+import UserForm from '../UserForm';
+import logger from '../../utils/logger';
 
 class UserItem extends Component {
+  state = {
+    updateUser: {
+      name: '',
+      age: 0,
+      nickname: '',
+      id: ''
+    }
+  };
+
   static propTypes = {
     id: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
     age: PropTypes.number.isRequired,
     nickname: PropTypes.string.isRequired,
     isEdit: PropTypes.bool.isRequired,
     onEdit: PropTypes.func.isRequired,
+    onInlineEdit: PropTypes.func.isRequired,
     onRemove: PropTypes.func.isRequired
   };
 
   static defaultProps = {
-    id: 0,
+    id: '',
     name: '',
     age: 0,
     nickname: '',
     isEdit: false,
     onEdit: (userId, user) => {},
-    onRemove: userId => {}
+    onRemove: userId => {},
+    onInlineEdit: (userId, isEdit) => {}
   };
 
-  renderAction = ({ id, isEdit }) => {
-    if (isEdit) {
-      return (
-        <Column>
-          <Button children="Edit" />
-          <Button children="Cancel" />
-        </Column>
-      );
+  onChangeInput = (field, value) => {
+    const { updateUser } = this.state;
+    let updateData = {};
+    let hasChange = false;
+    switch (field) {
+      case 'name':
+        updateData = Object.assign({}, updateUser, { name: value });
+        hasChange = true;
+        break;
+      case 'age':
+        updateData = Object.assign({}, updateUser, { age: Number(value) });
+        hasChange = true;
+        break;
+      case 'nickname':
+        updateData = Object.assign({}, updateUser, { nickname: value });
+        hasChange = true;
+        break;
+      default:
+        logger.warn('unsupport field', field);
     }
+    logger.warn('onChangeInput updateUser', field, value, updateData);
+    if (hasChange) {
+      this.setState(prevState => ({
+        updateUser: updateData
+      }));
+    }
+  };
+
+  renderAction = ({ id }) => {
     return (
       <Column>
-        <Button children="Edit" />
+        <Button
+          onClick={() => {
+            this.props.onInlineEdit(id);
+          }}
+          children="Edit"
+        />
         <Button
           onClick={() => {
             this.props.onRemove(id);
@@ -45,22 +83,54 @@ class UserItem extends Component {
     );
   };
 
-  render() {
+  onCancelInlineEdit = () => {
+    const { id } = this.props;
+    const { name, age, nickname } = this.props;
+    this.setState(prevState => ({
+      updateUser: { id, name, age, nickname }
+    }));
+    this.props.onInlineEdit(id, false);
+  };
+
+  saveChange = () => {
+    const { id } = this.props;
+    const { updateUser } = this.state;
+    this.props.onEdit(id, updateUser);
+    this.props.onInlineEdit(id, false);
+  };
+
+  componentDidMount() {
     const { id, name, age, nickname } = this.props;
-    return (
-      <Row key={`${id}-${nickname}`}>
-        <Column>
-          {name}
-        </Column>
-        <Column>
-          {age}
-        </Column>
-        <Column>
-          {nickname}
-        </Column>
-        {this.renderAction(this.props)}
-      </Row>
-    );
+    this.setState(prevState => ({
+      updateUser: { id, name, age, nickname }
+    }));
+  }
+
+  render() {
+    const { id, isEdit } = this.props;
+    const { updateUser: { name, age, nickname } } = this.state;
+    return isEdit
+      ? <UserForm
+          name={name}
+          age={age}
+          nickname={nickname}
+          isAdd={false}
+          onSave={this.saveChange}
+          onCancel={this.onCancelInlineEdit}
+          onChange={this.onChangeInput}
+        />
+      : <Row key={`${id}-${nickname}-${name}`}>
+          <Column>
+            {name}
+          </Column>
+          <Column>
+            {age}
+          </Column>
+          <Column>
+            {nickname}
+          </Column>
+          {this.renderAction(this.props)}
+        </Row>;
   }
 }
 
diff --git a/src/components/UserList/index.js b/src/components/UserList/index.js
@@ -7,13 +7,17 @@ import logger from '../../utils/logger';
 class UserList extends Component {
   static propTypes = {
     users: PropTypes.array.isRequired,
+    editIds: PropTypes.array.isRequired,
     onEdit: PropTypes.func.isRequired,
+    onInlineEdit: PropTypes.func.isRequired,
     onRemove: PropTypes.func.isRequired
   };
 
   static defaultProps = {
     users: [],
+    editIds: [],
     onEdit: (userId, user) => {},
+    onInlineEdit: (userId, isEdit) => {},
     onRemove: userId => {}
   };
 
@@ -25,7 +29,9 @@ class UserList extends Component {
         <UserItem
           key={`${item.id}-${item.nickname}`}
           {...item}
+          isEdit={this.props.editIds.indexOf(item.id) !== -1}
           onEdit={this.props.onEdit}
+          onInlineEdit={this.props.onInlineEdit}
           onRemove={this.props.onRemove}
         />
       )
diff --git a/src/containers/Users/index.js b/src/containers/Users/index.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Flex, Box, Button } from 'rebass';
 import UserList from '../../components/UserList';
-import UserCreation from '../../components/UserCreation';
+import UserForm from '../../components/UserForm';
 import { getUsers, addUser, updateUser, removeUser } from '../../store/user';
 import logger from '../../utils/logger';
 
@@ -13,7 +13,8 @@ class Users extends Component {
       name: '',
       age: 0,
       nickname: ''
-    }
+    },
+    editIds: []
   };
 
   onShowNewUserForm = () => {
@@ -24,6 +25,18 @@ class Users extends Component {
     this.setState(prevState => ({ isAdding: false }));
   };
 
+  onInlineEdit = (id, isEdit = true) => {
+    if (isEdit) {
+      this.setState(prevState => ({
+        editIds: [].concat(prevState.editIds, id)
+      }));
+    } else {
+      this.setState(prevState => ({
+        editIds: prevState.editIds.filter(item => item !== id)
+      }));
+    }
+  };
+
   onAddUser = () => {
     const { newUser } = this.state;
     logger.warn('onAddUser', newUser);
@@ -77,6 +90,8 @@ class Users extends Component {
       default:
         logger.warn('unsupport field', field);
     }
+    logger.warn('onChangeInput newUser', field, value, updateData);
+
     if (hasChange) {
       this.setState(prevState => ({
         newUser: updateData
@@ -92,20 +107,22 @@ class Users extends Component {
   }
 
   render() {
-    const { users, isAdding, newUser } = this.state;
+    const { users, editIds, isAdding, newUser } = this.state;
     logger.warn('Users render', users, isAdding, newUser);
     return (
       <Flex column align="center">
         <Box m="auto">
           <UserList
             users={users}
+            editIds={editIds}
             onEdit={this.onUpdateUser}
+            onInlineEdit={this.onInlineEdit}
             onRemove={this.onRemoveUser}
           />
         </Box>
         {isAdding &&
           <Box m="auto">
-            <UserCreation
+            <UserForm
               {...newUser}
               onSave={this.onAddUser}
               onCancel={this.onCloseNewUserForm}
