Instead of simple li elements the search results will display links to repo route.
The main application will also have its own route - the default "/".
    ReactDOM.render(
       <Router history={hashHistory}> 
         <Route path="/" component={SearchPage}></Route>
         <Route path="repo/:owner/:repo" component={Repo} />
       </Router>,
        document.getElementById('example')
      );
Repo route will have its own component - Repo comonent, there will be displayed details of selected repo
    var Repo = withRouter(
      React.createClass({
        render: function() {
          return (
            <ul>
              <li><strong>owner</strong>:{this.props.params.owner}</li>
              <li><strong>repo</strong>:{this.props.params.repo}</li>
              <a href="#/">back</a>
            </ul>
          );
        }
      })
    );
    
Now the only thing left is modify the SearchResults components so it ill display links to repos:
    // Results List
    var ResultsList = React.createClass({
 
      render: function() {
        
          var createItem = function(repo, idx) {
           return <li key={idx}><Link to={`/repo/${repo.owner.login}/${repo.name}`}>{repo.name}</Link></li>;
          };
          var list;
          if(this.props.results && this.props.results.length && !this.props.loading) {
            list = this.props.results.map(createItem);
          } 
          return <ul className="results">{list}</ul>;
        
      }
    });
See the code on plnkr
 
 
 
No comments:
Post a Comment