Arpith Siromoney 💬

Remembering what you read last

The app I’m building to share notes, Constellational, helps you keep track of what you’ve read recently. To let you re-read these posts or user pages, the navigation page displays your history as a list. It makes sense to show the last visit alone (this also keeps the list as brief as possible).

This is how I did it in React Native.

When a user or a particular post is viewed in the posts page, the url (username/postID, or just username) is added to the HistoryStore:

constructor(props, context) {
  super(props, context);
  if (this.props.username) {
    HistoryActions.add({
      username: this.props.username,
      postURL: this.props.postURL,
      url: this.props.url
    });
  }
}

The HistoryStore keeps track of visits that look like {url: url, timestamps: [secondVisit, firstVisit]}

var HistoryStore = assign({}, EventEmitter.prototype, {
  get: function() {
    if (!_history) {
      loadAsyncStore();
      return [];
    } else {
      var history = Object.keys(_history).map(url => _history[url]);
      var sorted = history.sort((a, b) => {
        if (a.timestamps[0] > b.timestamps[0]) return -1;
        else if (a.timestamps[0] < b.timestamps[0]) return 1;
        else return 0;
      });
      return sorted;
    }
  }
});

Note that the get() method sorts the visits based on the most recent timestamp (the first one in the timestamps list for each visit).

This lets the NavPage display a list of the users and posts you’ve read, sorted by when you read them (without duplicates).

renderRow(row) {
  let route = {
    id: 'posts',
    username: row.username,
    postURL: row.url,
    url: row.username
   };
   if (row.id) route.url = row.username + '/' + row.id;
   let onPress = () => this.props.navigator.push(route);
   let text = row.username;
   if (row.data) text = row.data.split('\n')[0];
   return <View style={styles.option}>
     <Text onPress={onPress} style={styles.text}>{text}</Text
   </View>;
 }

This fixes #68.

Do you want a pleasant way to share notes? Sign up here!