Navigating to a contest url

Author: smerth

src/components/App.js

@@ -2,6 +2,9 @@ import React from 'react';
 import Header from './Header';
 import ContestList from './ContestList';
 
+const pushState = (obj, url) => 
+  window.history.pushState(obj, '', url);
+
 class App extends React.Component {
   state = {
     pageHeader: 'Naming Contests',
@@ -12,12 +15,19 @@ class App extends React.Component {
   }
   componentWillUnmount () {
   }
-
+  fetchContest = (contestId) => {
+    pushState(
+      { currentContestId: contestId},
+      `/contest/${contestId}`
+    );
+  };
   render () {
     return (
       <div className="App">
         <Header message={this.state.pageHeader} />
-        <ContestList contests={this.state.contests} />
+        <ContestList
+          onContestClick = {this.fetchContest}
+          contests={this.state.contests} />
       </div>
     );
   }

src/components/ContestList.js

@@ -1,16 +1,19 @@
 import React from 'react';
 import ContestPreview from './ContestPreview';
 
-const ContestList = ({contests}) => (
+const ContestList = ({contests, onContestClick}) => (
   <div className="ContestList">
     {contests.map(contest => 
-      <ContestPreview key={contest.id} {...contest}/>
+      <ContestPreview 
+        key={contest.id} 
+        onClick={onContestClick} {...contest}/>
     )}        
   </div>
 );
 
 ContestList.propTypes = {
-  contests: React.PropTypes.array
+  contests: React.PropTypes.array,
+  onContestClick: React.PropTypes.func.isRequired,
 };
 
 export default ContestList;

src/components/ContestPreview.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 class ContestPreview extends Component {
 
   handleClick = () => {
-    console.log(this.props.contestName);
+    this.props.onClick(this.props.id)
   }
 
   render() {
@@ -21,8 +21,10 @@ class ContestPreview extends Component {
 }
 
 ContestPreview.propTypes = {
+  id: React.PropTypes.number.isRequired,
   categoryName: React.PropTypes.string.isRequired,
-  contestName: React.PropTypes.string.isRequired
+  contestName: React.PropTypes.string.isRequired,
+  onClick: React.PropTypes.func.isRequired,
 };
 
 export default ContestPreview;