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!