Added a bunch of features to the React Native / Relay example app, su…

…ch as “making it work.”

Reviewed By: yuzhi

Differential Revision: D3032545

fb-gh-sync-id: d7461913abc3ecb5dc5dd08c0869c85f6cac5ae9
shipit-source-id: d7461913abc3ecb5dc5dd08c0869c85f6cac5ae9

examples/TodoMVC/components/Todo.js

@@ -35,7 +35,16 @@ class Todo extends Component {
   state = {
     isEditing: false,
   };
-  _handleCompletePress = () => {
+  constructor(props, context) {
+    super(props, context);
+    this._handleCompletePress = this._handleCompletePress.bind(this);
+    this._handleLabelPress = this._handleLabelPress.bind(this);
+    this._handleTextInputCancel = this._handleTextInputCancel.bind(this);
+    this._handleTextInputDelete = this._handleTextInputDelete.bind(this);
+    this._handleTextInputSave = this._handleTextInputSave.bind(this);
+    this._setEditMode = this._setEditMode.bind(this);
+  }
+  _handleCompletePress() {
     var complete = !this.props.todo.complete;
     Relay.Store.commitUpdate(
       new ChangeTodoStatusMutation({
@@ -44,26 +53,26 @@ class Todo extends Component {
         viewer: this.props.viewer,
       })
     );
-  };
-  _handleLabelPress = () => {
+  }
+  _handleLabelPress() {
     this._setEditMode(true);
-  };
-  _handleTextInputCancel = () => {
+  }
+  _handleTextInputCancel() {
     this._setEditMode(false);
-  };
-  _handleTextInputDelete = () => {
+  }
+  _handleTextInputDelete() {
     this._setEditMode(false);
     this.props.onDestroy();
-  };
-  _handleTextInputSave = text => {
+  }
+  _handleTextInputSave(text) {
     this._setEditMode(false);
     Relay.Store.commitUpdate(
       new RenameTodoMutation({todo: this.props.todo, text})
     );
-  };
-  _setEditMode = shouldEdit => {
+  }
+  _setEditMode(shouldEdit) {
     this.setState({isEditing: shouldEdit});
-  };
+  }
   renderCompleteCheckbox() {
     const imageModule = this.props.todo.complete ?
       require('../images/todo_checkbox-active.png') :

examples/TodoMVC/components/TodoApp.js

@@ -25,9 +25,13 @@ import React, {
 } from 'react-native';
 
 class TodoApp extends Component {
-  _handleStatusChange = status => {
+  constructor(props, context) {
+    super(props, context);
+    this._handleStatusChange = this._handleStatusChange.bind(this);
+  }
+  _handleStatusChange(status) {
     this.props.relay.setVariables({status});
-  };
+  }
   render() {
     return (
       <View style={styles.container}>

examples/TodoMVC/components/TodoList.js

@@ -47,8 +47,13 @@ class TodoList extends Component {
       listScrollEnabled: true,
       todosDataSource: _todosDataSource.cloneWithRows(edges),
     };
+    this._handleMarkAllPress = this._handleMarkAllPress.bind(this);
+    this._handleSwipeInactive = this._handleSwipeInactive.bind(this);
+    this._handleTextInputSave = this._handleTextInputSave.bind(this);
+    this._handleTodoDestroy = this._handleTodoDestroy.bind(this);
+    this.renderTodoEdge = this.renderTodoEdge.bind(this);
   }
-  _handleMarkAllPress = () => {
+  _handleMarkAllPress() {
     const numTodos = this.props.viewer.totalCount;
     const numCompletedTodos = this.props.viewer.completedCount;
     const complete = numTodos !== numCompletedTodos;
@@ -59,23 +64,23 @@ class TodoList extends Component {
         viewer: this.props.viewer,
       })
     );
-  };
-  _handleSwipeInactive = swipeInactive => {
+  }
+  _handleSwipeInactive(swipeInactive) {
     this.setState({listScrollEnabled: swipeInactive});
-  };
-  _handleTextInputSave = text => {
+  }
+  _handleTextInputSave(text) {
     Relay.Store.commitUpdate(
       new AddTodoMutation({text, viewer: this.props.viewer})
     );
-  };
-  _handleTodoDestroy = todo => {
+  }
+  _handleTodoDestroy(todo) {
     Relay.Store.commitUpdate(
       new RemoveTodoMutation({
         todo,
         viewer: this.props.viewer,
       })
     );
-  };
+  }
   componentWillReceiveProps(nextProps) {
     if (this.props.viewer.todos.edges !== nextProps.viewer.todos.edges) {
       const {
@@ -87,7 +92,7 @@ class TodoList extends Component {
       });
     }
   }
-  renderTodoEdge = todoEdge => {
+  renderTodoEdge(todoEdge) {
     const destroyHandler = this._handleTodoDestroy.bind(null, todoEdge.node);
     return (
       <Swipeout
@@ -138,7 +143,7 @@ class TodoList extends Component {
         <ListView
           dataSource={this.state.todosDataSource}
           initialListSize={this.state.initialListSize}
-          renderRow={this.renderTodoEdge}mac
+          renderRow={this.renderTodoEdge}
           renderSeparator={this.renderSeparator}
         />
       </View>

examples/TodoMVC/components/TodoListFooter.js

@@ -28,14 +28,19 @@ class TodoListFooter extends Component {
     status: PropTypes.oneOf(['active', 'any', 'completed']).isRequired,
     style: View.propTypes.style,
   };
-  _handleRemoveCompletedTodosPress = () => {
+  constructor(props, context) {
+    super(props, context);
+    this._handleRemoveCompletedTodosPress =
+      this._handleRemoveCompletedTodosPress.bind(this);
+  }
+  _handleRemoveCompletedTodosPress() {
     Relay.Store.commitUpdate(
       new RemoveCompletedTodosMutation({
         todos: this.props.viewer.todos,
         viewer: this.props.viewer,
       })
     );
-  };
+  }
   render() {
     var numCompletedTodos = this.props.viewer.completedCount;
     var numRemainingTodos = this.props.viewer.totalCount - numCompletedTodos;

examples/TodoMVC/components/TodoTextInput.js

@@ -34,10 +34,16 @@ export default class TodoTextInput extends Component {
     value: TextInput.propTypes.value,
   };
   state = {
-    isEditing: false,
     text: this.props.initialValue || '',
   };
-  _commitChanges = () => {
+  constructor(props, context) {
+    super(props, context);
+    this._commitChanges = this._commitChanges.bind(this);
+    this._handleBlur = this._handleBlur.bind(this);
+    this._handleChangeText = this._handleChangeText.bind(this);
+    this._handleSubmitEditing = this._handleSubmitEditing.bind(this);
+  }
+  _commitChanges() {
     var newText = this.state.text.trim();
     if (this.props.onDelete && newText === '') {
       this.props.onDelete();
@@ -49,20 +55,20 @@ export default class TodoTextInput extends Component {
         this.setState({text: ''});
       }
     }
-  };
-  _handleBlur = () => {
+  }
+  _handleBlur() {
     if (this.props.commitOnBlur) {
       this._commitChanges();
     }
-  };
-  _handleChangeText = text => {
+  }
+  _handleChangeText(text) {
     if (this._mounted !== false) {
       this.setState({text: text});
     }
-  };
-  _handleSubmitEditing = () => {
+  }
+  _handleSubmitEditing() {
     this._commitChanges();
-  };
+  }
   componentWillUnmount() {
     this._mounted = false;
   }