Looking up the contest on route change.

Author: smerth

api/index.js

@@ -2,9 +2,15 @@ import express from 'express';
 import data from '../src/testData';
 
 const router = express.Router();
+const contests = data.contests.reduce((obj, contest) => {
+  obj[contest.id] = contest;
+  return obj;
+}, {});
 
 router.get('/contests', (req, res) => {
-  res.send({contests: data.contests});
+  res.send({
+    contests: contests
+  });
 });
 
 export default router;

src/components/App.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Header from './Header';
 import ContestList from './ContestList';
+import Contest from './Contest';
 
 const pushState = (obj, url) => 
   window.history.pushState(obj, '', url);
@@ -20,14 +21,26 @@ class App extends React.Component {
       { currentContestId: contestId},
       `/contest/${contestId}`
     );
+    // Look up contest
+    // this.state.contests[contestId]
+    this.setState({
+      pageHeader: this.state.contests[contestId].contestName,
+      currentContestId: contestId
+    });
   };
+  currentContent() {
+    if (this.state.currentContestId) {
+      return <Contest {...this.state.contests[this.state.currentContestId]}/>;
+    }
+    return <ContestList
+      onContestClick = {this.fetchContest}
+      contests={this.state.contests} />;
+  }
   render () {
     return (
       <div className="App">
         <Header message={this.state.pageHeader} />
-        <ContestList
-          onContestClick = {this.fetchContest}
-          contests={this.state.contests} />
+        {this.currentContent()}
       </div>
     );
   }

src/components/Contest.js

@@ -0,0 +1,17 @@
+import React, { Component, PropTypes } from 'react';
+
+class Contest extends Component {
+  render() {
+    return (
+      <div className="Contest">
+        {this.props.id}     
+      </div>
+    );
+  }
+}
+
+Contest.PropTypes = {
+    id: PropTypes.number.isRequired
+}
+
+export default Contest;

src/components/ContestList.js

@@ -3,16 +3,17 @@ import ContestPreview from './ContestPreview';
 
 const ContestList = ({contests, onContestClick}) => (
   <div className="ContestList">
-    {contests.map(contest => 
+    {Object.keys(contests).map(contestId => 
       <ContestPreview 
-        key={contest.id} 
-        onClick={onContestClick} {...contest}/>
+        key={contestId} 
+        onClick={onContestClick} 
+        {...contests[contestId]}/>
     )}        
   </div>
 );
 
 ContestList.propTypes = {
-  contests: React.PropTypes.array,
+  contests: React.PropTypes.object,
   onContestClick: React.PropTypes.func.isRequired,
 };