Fix todo item save bug; Move instanceVars to state

src/todomvc/app.re

@@ -115,6 +115,7 @@ module Top = {
               todo == todoToSave ? {...todo, TodoItem.title: text} : todo
           )
           state.todos;
+      saveLocally todos;
       Some {...state, editing: None, todos}
     };
     let cancel {state} _ => Some {...state, editing: None};

src/todomvc/todoItem.re

@@ -5,7 +5,7 @@ let enterKey = 13;
 type todo = {id: string, title: string, completed: bool};
 
 module TodoItem = {
-  include ReactRe.Component.Stateful.InstanceVars;
+  include ReactRe.Component.Stateful;
   let name = "TodoItemRe";
   type props = {
     todo,
@@ -16,47 +16,55 @@ module TodoItem = {
     onToggle: unit => unit,
     onCancel: unit => unit
   };
-  type state = {editText: string};
-  type instanceVars = {mutable editFieldRef: option Dom.element};
-  let getInstanceVars () => {editFieldRef: None};
-  let getInitialState props => {editText: props.todo.title};
+  /* mutable state? Yes, that's right. In ReactJS we'd keep such `ref`,
+     subdescriptions, timerIDs and the rest attached into the component instance
+     itself (e.g. `this.editFieldRef`) in order to mutate them and circumvent re-
+     render (triggered by setState). Reason-React asks you to be more honest about
+     this: this pattern is effectively mutating internal state without causing a re-
+     render. */
+  type state = {editText: string, mutable editFieldRef: option Dom.element};
+  let getInitialState props => {editText: props.todo.title, editFieldRef: None};
   let handleSubmit {props, state} _ =>
     switch (String.trim state.editText) {
     | "" =>
       props.onDestroy ();
       None
     | nonEmptyValue =>
       props.onSave nonEmptyValue;
-      Some {editText: nonEmptyValue}
+      Some {...state, editText: nonEmptyValue}
     };
-  let handleEdit {props} _ /* event */ => {
+  let handleEdit {props, state} _ /* event */ => {
     props.onEdit ();
-    Some {editText: props.todo.title}
+    Some {...state, editText: props.todo.title}
   };
-  let handleKeyDown ({props} as componentBag) event =>
+  let handleKeyDown ({props, state} as componentBag) event =>
     if (ReactEventRe.Keyboard.which event === escapeKey) {
       props.onCancel ();
-      Some {editText: props.todo.title}
+      Some {...state, editText: props.todo.title}
     } else if (
       ReactEventRe.Keyboard.which event === enterKey
     ) {
       handleSubmit componentBag ()
     } else {
       None
     };
-  let handleChange {props} event =>
+  let handleChange {props, state} event =>
     props.editing ?
-      Some {editText: (ReactDOMRe.domElementToObj (ReactEventRe.Form.target event))##value} : None;
-  let setEditFieldRef {instanceVars} r => instanceVars.editFieldRef = Some r;
+      Some {
+        ...state,
+        editText: (ReactDOMRe.domElementToObj (ReactEventRe.Form.target event))##value
+      } :
+      None;
+  let setEditFieldRef {state} r => state.editFieldRef = Some r;
 
   /**
    * Safely manipulate the DOM after updating the state when invoking
    * `props.onEdit()` in the `handleEdit` method above.
    * For more info refer to notes at https://facebook.github.io/react/docs/component-api.html#setstate
    * and https://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate
    */
-  let componentDidUpdate ::prevProps prevState::_ {props, instanceVars} =>
-    switch (prevProps.editing, props.editing, instanceVars.editFieldRef) {
+  let componentDidUpdate ::prevProps prevState::_ {props, state} =>
+    switch (prevProps.editing, props.editing, state.editFieldRef) {
     | (false, true, Some field) =>
       let node = ReactDOMRe.domElementToObj field;
       ignore (node##focus ());