Skip to content

Instantly share code, notes, and snippets.

@clalimarmo
Last active September 21, 2015 15:23
Show Gist options
  • Save clalimarmo/ace176c77b5f84f84891 to your computer and use it in GitHub Desktop.
Save clalimarmo/ace176c77b5f84f84891 to your computer and use it in GitHub Desktop.
Deep Linking with React + Flux, main controller view, replace links with AppLink component
TasksApp = React.createClass({
getInitialState: function() {
return {
selectedTask: TaskStore.selectedTask(),
tasks: TaskStore.tasks(),
};
},
componentWillMount: function() {
TaskStore.addChangeListener(this.updateState);
},
componentWillUnmount: function() {
TaskStore.removeChangeListener(this.updateState);
},
updateState: function() {
this.setState({
selectedTask: TaskStore.selectedTask(),
tasks: TaskStore.tasks(),
});
},
render: function() {
return (
<div>
<ul id="tasks" className="left-pane">
{this.renderTaskListItems()}
</ul>
{this.renderTodoDetailPane()}
</div>
);
},
renderTaskListItems: function() {
return this.state.tasks.map(function(task) {
// instead of <a> tags, we use a special component that dispatches "navigate" Actions
return (
<li key={task.id}>
<AppLink href={"/tasks/" + task.id}>{task.title}</AppLink>
</li>
);
});
},
renderTodoDetailPane: function() {
if (this.state.selectedTask) {
return (<TaskDetail className="right-pane" key={task.id} task={task} />);
}
},
});
TaskDetail = React.createClass({
render: function() {
// left as an exercise
return (<div></div>);
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment