Arpith Siromoney 💬

Keeping track of what you’ve read

The app I’m building, Constellational, lets you share notes (sign up here!). Today I added a way to easily keep track of what you’ve read: the navigation page (that you can use to go to your drafts, the posts you’re editing, or all your posts) now has a list of posts you’ve read (and users whose pages you’ve viewed).

When a row is rendered on the Navigation Page, it first checks if it’s a filter (like ‘All Posts’ or ‘Drafts’) and creates an appropriate onPress function (pushing the filter onto the navigator as part of the route).

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

If the row is a history object, it will either have a postURL for the post you read, or just a username for the user page you visited. If it’s a post, row.data.split(‘\n’)[0] lets us display just the first line.

This means we can start working on reading other users pages or posts in the app (instead of just in the browser). The code we’re interested in (in getAll(), in the Posts Page) is:

getAll() {
  if (this.props.username) {
    var user = PostStore.getUser(this.props.username);
    if (this.props.postID) {
      // Find the postURL that contains the postID
      var postURL = user.posts[0];
      user.posts.forEach((url) => {
        if (url.indexOf(this.props.postID) > -1) postURL = url;
      });
      // Move it to be displayed on top
      user.posts.splice(user.posts.indexOf(postURL), 1);
      user.posts.unshift(postURL);
    } 
    var posts = user.posts.map((url) => {
      PostStore.getPost(this.props.username, url));
    }
    return posts;
  }
}

That is, we first get the user’s list of posts, and if we’ve got a post we’re especially interested in, we move it to the top when we render the posts.

Note that today’s work fixes #58. Still to come: opening links that look like constellational.com/username/postID. This brings us closer to universal links.