[WIP] Remove & Edit user

Author: jellydn

README.md

@@ -9,3 +9,4 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
  * [Rebass](http://jxnblk.com/rebass/)
  * [react-snapshot](https://www.npmjs.com/package/react-snapshot)
  * [styled-components](https://github.com/styled-components/styled-components)
+ * [faker](https://github.com/marak/Faker.js//)

package.json

@@ -4,6 +4,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "faker": "^4.1.0",
     "gh-pages": "^1.0.0",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",

src/components/UserCreation/index.js

@@ -14,33 +14,40 @@ class UserCreation extends PureComponent {
 
   static defaultProps = {
     name: '',
-    age: 10,
+    age: 0,
     nickname: '',
     onChange: (field, value) => {},
     onSave: user => {},
     onCancel: () => {}
   };
 
+  onSubmit = evt => {
+    evt.preventDefault();
+    console.warn('onSubmit');
+  };
+
   render() {
     const { age, name, nickname } = this.props;
-
     return (
       <Container>
         <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}

src/components/UserList/UserItem.js

@@ -4,22 +4,26 @@ import { Row, Column, Button } from 'rebass';
 
 class UserItem extends Component {
   static propTypes = {
-    id: PropTypes.number.isRequired,
+    id: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
     age: PropTypes.number.isRequired,
     nickname: PropTypes.string.isRequired,
-    isEdit: PropTypes.bool.isRequired
+    isEdit: PropTypes.bool.isRequired,
+    onEdit: PropTypes.func.isRequired,
+    onRemove: PropTypes.func.isRequired
   };
 
   static defaultProps = {
     id: 0,
     name: '',
     age: 0,
     nickname: '',
-    isEdit: false
+    isEdit: false,
+    onEdit: (userId, user) => {},
+    onRemove: userId => {}
   };
 
-  renderAction = isEdit => {
+  renderAction = ({ id, isEdit }) => {
     if (isEdit) {
       return (
         <Column>
@@ -31,7 +35,12 @@ class UserItem extends Component {
     return (
       <Column>
         <Button children="Edit" />
-        <Button children="Delete" />
+        <Button
+          onClick={() => {
+            this.props.onRemove(id);
+          }}
+          children="Delete"
+        />
       </Column>
     );
   };
@@ -49,7 +58,7 @@ class UserItem extends Component {
         <Column>
           {nickname}
         </Column>
-        {this.renderAction(isEdit)}
+        {this.renderAction(this.props)}
       </Row>
     );
   }

src/components/UserList/index.js

@@ -1,20 +1,29 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Container, Row, Column, Divider } from 'rebass';
 import UserItem from './UserItem';
 
-class UserList extends PureComponent {
+class UserList extends Component {
   static propTypes = {
-    users: PropTypes.array.isRequired
+    users: PropTypes.array.isRequired,
+    onEdit: PropTypes.func.isRequired,
+    onRemove: PropTypes.func.isRequired
   };
 
   static defaultProps = {
-    users: []
+    users: [],
+    onEdit: (userId, user) => {},
+    onRemove: userId => {}
   };
 
   renderUserRow = users => {
     return users.map(item =>
-      <UserItem key={`${item.id}-${item.nickname}`} {...item} />
+      <UserItem
+        key={`${item.id}-${item.nickname}`}
+        {...item}
+        onEdit={this.props.onEdit}
+        onRemove={this.props.onRemove}
+      />
     );
   };
 

src/containers/Users/index.js

@@ -1,44 +1,65 @@
 import React, { Component } from 'react';
+import { Flex, Box, Button } from 'rebass';
 import UserList from '../../components/UserList';
 import UserCreation from '../../components/UserCreation';
-import { Flex, Box, Button } from 'rebass';
+import {
+  getUsers,
+  addUser,
+  updateUser,
+  removeUser,
+  initFakeData
+} from '../../store/user';
 
 class Users extends Component {
   state = {
     users: [],
     isAdding: false,
     newUser: {
       name: '',
-      age: 10,
+      age: 0,
       nickname: ''
     }
   };
 
-  showNewUserForm = () => {
+  onShowNewUserForm = () => {
     this.setState(prevState => ({ isAdding: true }));
   };
 
-  closeNewUserForm = () => {
+  onCloseNewUserForm = () => {
     this.setState(prevState => ({ isAdding: false }));
   };
 
-  addUser = () => {
-    console.warn('addUser');
-    const { newUser } = this.state;
-    this.setState(
-      prevState => ({
-        users: [].concat(prevState.users, { ...newUser, id: Date.now() })
-      }),
-      () => {
-        this.setState({
-          newUser: {
-            name: '',
-            age: 10,
-            nickname: ''
-          }
-        });
-      }
-    );
+  onAddUser = () => {
+    const { newUser, users } = this.state;
+    console.warn('onAddUser', newUser);
+    addUser(newUser, () => {
+      this.setState({
+        users: getUsers(),
+        newUser: {
+          name: '',
+          age: 0,
+          nickname: ''
+        }
+      });
+    });
+  };
+
+  onUpdateUser = (id, user) => {
+    console.warn('onRemoveUser', id);
+    updateUser(id, user, () => {
+      this.setState({
+        users: getUsers()
+      });
+    });
+  };
+
+  onRemoveUser = id => {
+    console.warn('onRemoveUser', id);
+    removeUser(id, () => {
+      this.setState({
+        users: getUsers()
+      });
+    });
   };
 
   onChangeInput = (field, value) => {
@@ -51,7 +72,7 @@ class Users extends Component {
         hasChange = true;
         break;
       case 'age':
-        updateData = Object.assign({}, newUser, { age: value });
+        updateData = Object.assign({}, newUser, { age: Number(value) });
         hasChange = true;
         break;
       case 'nickname':
@@ -68,25 +89,38 @@ class Users extends Component {
     }
   };
 
+  componentWillMount() {
+    console.warn('componentWillMount');
+    initFakeData();
+    this.setState({
+      users: getUsers()
+    });
+  }
+
   render() {
     const { users, isAdding, newUser } = this.state;
+    console.warn('Users render', users, isAdding, newUser);
     return (
       <Flex column align="center">
         <Box m="auto">
-          <UserList users={users} />
+          <UserList
+            users={users}
+            onEdit={this.onUpdateUser}
+            onRemove={this.onRemoveUser}
+          />
         </Box>
         {isAdding &&
           <Box m="auto">
             <UserCreation
               {...newUser}
-              onSave={this.addUser}
-              onCancel={this.closeNewUserForm}
+              onSave={this.onAddUser}
+              onCancel={this.onCloseNewUserForm}
               onChange={this.onChangeInput}
             />
           </Box>}
         {!isAdding &&
           <Box m="auto">
-            <Button onClick={this.showNewUserForm} children="Add" />
+            <Button onClick={this.onShowNewUserForm} children="Add" />
           </Box>}
       </Flex>
     );

src/store/user.js

@@ -0,0 +1,62 @@
+import faker from 'faker';
+const DB_KEY = 'REACT_USERS';
+let data = [];
+
+function getRandomIntInclusive(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive
+}
+
+function initFakeData() {
+  try {
+    data = JSON.parse(localStorage.getItem(DB_KEY));
+  } catch (error) {
+    data = [];
+  }
+  if (data.length === 0) {
+    for (let index = 0; index < 5; index++) {
+      data.push({
+        id: faker.random.uuid(),
+        name: faker.name.findName(),
+        age: getRandomIntInclusive(20, 40),
+        nickname: faker.internet.userName()
+      });
+    }
+    localStorage.setItem(DB_KEY, JSON.stringify(data));
+  }
+}
+
+function addUser(user, callback) {
+  const newUser = { id: faker.random.uuid(), ...user };
+  data.push(newUser);
+  localStorage.setItem(DB_KEY, JSON.stringify(data));
+  callback && callback();
+}
+
+function removeUser(userId, callback) {
+  const foundIndex = data.findIndex(item => item.id === userId);
+
+  if (foundIndex !== -1) {
+    data.splice(foundIndex, 1);
+  }
+  localStorage.setItem(DB_KEY, JSON.stringify(data));
+  callback && callback();
+}
+
+function updateUser(userId, user, callback) {
+  const foundIndex = data.find(item => item.id === userId);
+  if (foundIndex !== -1) {
+    const updateData = Object.assign({}, data[foundIndex], user);
+    data.splice(foundIndex, 1, updateData);
+  }
+  localStorage.setItem(DB_KEY, JSON.stringify(data));
+  callback && callback();
+}
+
+function getUsers() {
+  console.warn('getUsers', data);
+  return data;
+}
+
+export { initFakeData, getUsers, addUser, updateUser, removeUser };

yarn.lock

@@ -2982,6 +2982,10 @@ extsprintf@1.3.0, extsprintf@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
 
+faker@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/faker/-/faker-4.1.0.tgz#1e45bbbecc6774b3c195fad2835109c6d748cc3f"
+
 fast-deep-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"