[FIX] data is null for first try

Author: jellydn

src/components/UserList/index.js

@@ -18,13 +18,17 @@ class UserList extends Component {
   };
 
   renderUserRow = users => {
-    return users.map(item =>
-      <UserItem
-        key={`${item.id}-${item.nickname}`}
-        {...item}
-        onEdit={this.props.onEdit}
-        onRemove={this.props.onRemove}
-      />
+    return (
+      users &&
+      users.length > 0 &&
+      users.map(item =>
+        <UserItem
+          key={`${item.id}-${item.nickname}`}
+          {...item}
+          onEdit={this.props.onEdit}
+          onRemove={this.props.onRemove}
+        />
+      )
     );
   };
 

src/containers/Users/index.js

@@ -2,13 +2,7 @@ import React, { Component } from 'react';
 import { Flex, Box, Button } from 'rebass';
 import UserList from '../../components/UserList';
 import UserCreation from '../../components/UserCreation';
-import {
-  getUsers,
-  addUser,
-  updateUser,
-  removeUser,
-  initFakeData
-} from '../../store/user';
+import { getUsers, addUser, updateUser, removeUser } from '../../store/user';
 import logger from '../../utils/logger';
 
 class Users extends Component {
@@ -92,15 +86,14 @@ class Users extends Component {
 
   componentWillMount() {
     logger.warn('componentWillMount');
-    initFakeData();
     this.setState({
       users: getUsers()
     });
   }
 
   render() {
     const { users, isAdding, newUser } = this.state;
-    console.warn('Users render', users, isAdding, newUser);
+    logger.warn('Users render', users, isAdding, newUser);
     return (
       <Flex column align="center">
         <Box m="auto">

src/store/user.js

@@ -20,26 +20,38 @@ function getRandomIntInclusive(min, max) {
   return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive
 }
 
-function initFakeData() {
+if (hasSupportLocalStorage()) {
   try {
     data = JSON.parse(localStorage.getItem(DB_KEY));
+    // fallback to array when its null
+    if (!data) {
+      data = [];
+    }
   } catch (error) {
     data = [];
   }
-  if (data && 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()
-      });
+}
+
+function initFakeData() {
+  const dev = process.env.NODE_ENV !== 'production';
+  if (dev) {
+    if (data && 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()
+        });
+      }
+      hasSupportLocalStorage() &&
+        localStorage.setItem(DB_KEY, JSON.stringify(data));
     }
-    hasSupportLocalStorage() &&
-      localStorage.setItem(DB_KEY, JSON.stringify(data));
   }
 }
 
+initFakeData();
+
 function addUser(user, callback) {
   const newUser = { id: faker.random.uuid(), ...user };
   data.push(newUser);