ReactExample: fix bug with pressing Add twice

examples/ReactExample/components/todo-app.js

@@ -59,19 +59,29 @@ class TodoApp extends React.Component {
     }
 
     _addNewTodoItem(list) {
+        let items = list.items;
+        if (!this._shouldAddNewItem(items)) {
+            return;
+        }
+
         realm.write(() => {
-            list.items.push({text: ''});
+            items.push({text: ''});
         });
 
-        this._setEditingRow(list.items.length - 1);
+        this._setEditingRow(items.length - 1);
     }
 
     _addNewTodoList() {
+        let items = this.todoLists;
+        if (!this._shouldAddNewItem(items)) {
+            return;
+        }
+
         realm.write(() => {
             realm.create('TodoList', {name: '', items: []});
         });
 
-        this._setEditingRow(this.todoLists.length - 1);
+        this._setEditingRow(items.length - 1);
     }
 
     _onPressTodoList(list) {
@@ -98,6 +108,14 @@ class TodoApp extends React.Component {
         this.refs.nav.push(route);
     }
 
+    _shouldAddNewItem(items) {
+        let editingRow = this.currentListView.state.editingRow;
+        let editingItem = editingRow != null && items[editingRow];
+
+        // Don't allow adding a new item if the one being edited is empty.
+        return !editingItem || !!editingItem.text || !!editingItem.name;
+    }
+
     _setEditingRow(rowIndex) {
         // Update the state on the currently displayed TodoList to edit this new item.
         this.currentListView.setState({editingRow: rowIndex});

examples/ReactExample/components/todo-listview.js

@@ -24,16 +24,21 @@ class TodoListView extends React.Component {
         this.renderRow = this.renderRow.bind(this);
     }
 
-    componentWillUpdate(nextProps, nextState) {
+    componentDidUpdate() {
+        let items = this.props.items;
         let editingRow = this.state.editingRow;
 
-        if (editingRow != null && editingRow != nextState.editingRow) {
-            let item = this.props.items[editingRow];
-
-            // The item may have already been deleted.
-            if (item) {
-                this._deleteItemIfEmpty(item);
+        for (let i = items.length; i--;) {
+            if (i == editingRow) {
+                continue;
             }
+            if (this._deleteItemIfEmpty(items[i]) && i < editingRow) {
+                editingRow--;
+            }
+        }
+
+        if (editingRow != this.state.editingRow) {
+            this.setState({editingRow});
         }
     }
 
@@ -123,7 +128,9 @@ class TodoListView extends React.Component {
         // The item could be a TodoList or a Todo.
         if (!item.name && !item.text) {
             this._deleteItem(item);
+            return true;
         }
+        return false;
     }
 }