Add saving read state

DataRepository.js

@@ -99,9 +99,8 @@ DataRepository.prototype.fetchStories = function(date?: Date,
     Promise.all([localStorage, networking])
       .then((values) => {
         var error, result;
-        if (values[0] || values[1]) {
-          result = values[1] ? values[1] : values[0];
-        } else {
+        result = this._mergeReadState(values[0], values[1]);
+        if (!result) {
           error = new Error('Load story error');
         }
         callback && callback(error, result);
@@ -146,9 +145,8 @@ DataRepository.prototype.fetchThemeStories = function(themeId: Number, lastID?:
     Promise.all([localStorage, networking])
       .then((values) => {
         var error, result;
-        if (values[0] || values[1]) {
-          result = values[1] ? values[1] : values[0];
-        } else {
+        result = this._mergeReadState(values[0], values[1]);
+        if (!result) {
           error = new Error('Load story by theme error');
         }
         callback && callback(error, result);
@@ -223,6 +221,33 @@ DataRepository.prototype.getThemes = function(
       return themes;
     });
 
-}
+};
+
+DataRepository.prototype._mergeReadState = function(src, dst) {
+
+  if (!src) {
+    return dst;
+  }
+
+  if (!dst) {
+    return src;
+  }
+
+  var reads = {};
+  var story;
+  for (var i = src.stories.length - 1; i >= 0 ; i--) {
+    story = src.stories[i];
+    reads[story.id] = story.read;
+  }
+
+  for (var i = dst.stories.length - 1; i >= 0 ; i--) {
+    story = dst.stories[i];
+    if (reads[story.id]) {
+      story.read = true;
+    }
+  }
+
+  return dst;
+};
 
 module.exports = DataRepository;

ListScreen.js

@@ -199,6 +199,7 @@ var ListScreen = React.createClass({
     }
   },
   selectStory: function(story: Object) {
+    story.read = true;
     if (Platform.OS === 'ios') {
       this.props.navigator.push({
         title: story.title,

StoryItem.js

@@ -10,10 +10,19 @@ var {
   Text,
   TouchableHighlight,
   TouchableNativeFeedback,
-  View
+  View,
 } = React;
 
+var precomputeStyle = require('precomputeStyle');
+
+var TITLE_REF = 'title';
+
 var StoryItem = React.createClass({
+  updateReadSate: function() {
+    var nativeProps = precomputeStyle({color: '#777777'});
+    this.refs[TITLE_REF].setNativeProps(nativeProps);
+    this.props.onSelect();
+  },
   render: function() {
     var TouchableElement = TouchableHighlight;
     if (Platform.OS === 'android') {
@@ -22,15 +31,16 @@ var StoryItem = React.createClass({
     return (
       <View {...this.props}>
         <TouchableElement
-          onPress={this.props.onSelect}
+          onPress={this.updateReadSate /*this.props.onSelect*/}
           onShowUnderlay={this.props.onHighlight}
           onHideUnderlay={this.props.onUnhighlight}>
           <View style={styles.row}>
             {/* $FlowIssue #7363964 - There's a bug in Flow where you cannot
               * omit a property or set it to undefined if it's inside a shape,
               * even if it isn't required */}
             <Text
-              style={this.props.story.read ? storyTitleRead : styles.storyTitle}
+              ref={TITLE_REF}
+              style={this.props.story.read ? styles.storyTitleRead : styles.storyTitle}
               numberOfLines={3}>
                 {this.props.story.title}
             </Text>