[Enh] add logger

Author: jellydn

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "faker": "^4.1.0",
     "gh-pages": "^1.0.0",
+    "loglevel": "^1.4.1",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",

src/components/UserCreation/index.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { Container, Row, Input, Button } from 'rebass';
+import logger from '../../utils/logger';
 
 class UserCreation extends PureComponent {
   static propTypes = {
@@ -23,7 +24,7 @@ class UserCreation extends PureComponent {
 
   onSubmit = evt => {
     evt.preventDefault();
-    console.warn('onSubmit');
+    logger.warn('onSubmit');
   };
 
   render() {

src/components/UserList/UserItem.js

@@ -46,7 +46,7 @@ class UserItem extends Component {
   };
 
   render() {
-    const { id, name, age, nickname, isEdit } = this.props;
+    const { id, name, age, nickname } = this.props;
     return (
       <Row key={`${id}-${nickname}`}>
         <Column>

src/components/UserList/index.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Container, Row, Column, Divider } from 'rebass';
 import UserItem from './UserItem';
+import logger from '../../utils/logger';
 
 class UserList extends Component {
   static propTypes = {
@@ -29,7 +30,7 @@ class UserList extends Component {
 
   render() {
     const { users } = this.props;
-    console.warn('User List', users);
+    logger.warn('User List', users);
     return (
       <Container>
         <Row>

src/containers/Users/index.js

@@ -9,6 +9,7 @@ import {
   removeUser,
   initFakeData
 } from '../../store/user';
+import logger from '../../utils/logger';
 
 class Users extends Component {
   state = {
@@ -30,8 +31,8 @@ class Users extends Component {
   };
 
   onAddUser = () => {
-    const { newUser, users } = this.state;
-    console.warn('onAddUser', newUser);
+    const { newUser } = this.state;
+    logger.warn('onAddUser', newUser);
     addUser(newUser, () => {
       this.setState({
         users: getUsers(),
@@ -45,7 +46,7 @@ class Users extends Component {
   };
 
   onUpdateUser = (id, user) => {
-    console.warn('onRemoveUser', id);
+    logger.warn('onRemoveUser', id);
     updateUser(id, user, () => {
       this.setState({
         users: getUsers()
@@ -54,7 +55,7 @@ class Users extends Component {
   };
 
   onRemoveUser = id => {
-    console.warn('onRemoveUser', id);
+    logger.warn('onRemoveUser', id);
     removeUser(id, () => {
       this.setState({
         users: getUsers()
@@ -80,7 +81,7 @@ class Users extends Component {
         hasChange = true;
         break;
       default:
-        console.warn('unsupport field', field);
+        logger.warn('unsupport field', field);
     }
     if (hasChange) {
       this.setState(prevState => ({
@@ -90,7 +91,7 @@ class Users extends Component {
   };
 
   componentWillMount() {
-    console.warn('componentWillMount');
+    logger.warn('componentWillMount');
     initFakeData();
     this.setState({
       users: getUsers()

src/store/user.js

@@ -1,4 +1,5 @@
 import faker from 'faker';
+import logger from '../utils/logger';
 const DB_KEY = 'REACT_USERS';
 let data = [];
 
@@ -25,7 +26,7 @@ function initFakeData() {
   } catch (error) {
     data = [];
   }
-  if (data.length === 0) {
+  if (data && data.length === 0) {
     for (let index = 0; index < 5; index++) {
       data.push({
         id: faker.random.uuid(),
@@ -70,7 +71,7 @@ function updateUser(userId, user, callback) {
 }
 
 function getUsers() {
-  console.warn('getUsers', data);
+  logger.warn('getUsers', data);
   return data;
 }
 

src/utils/logger.js

@@ -0,0 +1,6 @@
+import logger from 'loglevel';
+
+const dev = process.env.NODE_ENV !== 'production';
+logger.setLevel(dev ? 'info' : 'error');
+
+export default logger;