Flux - 27 - Scaffolding Image Detail

Author: StephenGrider

imgur-client/src/components/image-detail.jsx

@@ -0,0 +1,9 @@
+var React = require('react');
+
+module.exports = React.createClass({
+  render: function() {
+    return <div>
+      I am an image detail.
+    </div>
+  }
+});

imgur-client/src/components/image-preview.jsx

@@ -1,4 +1,6 @@
 var React = require('react');
+var ReactRouter = require('react-router');
+var Link = ReactRouter.Link;
 
 module.exports = React.createClass({
   getInitialState: function() {
@@ -7,15 +9,16 @@ module.exports = React.createClass({
     }
   },
   render: function() {
-    return <div
+    return <Link
+      to={"images/" + this.props.id}
       className="image-preview"
       onMouseEnter={this.handleMouseEnter}
       onMouseLeave={this.handleMouseLeave}
       >
       {this.props.animated && this.state.hovering ? this.video() : this.image()}
       {this.props.animated && !this.state.hovering ? this.icon() : null }
       {this.state.hovering ? this.inset() : null}
-    </div>
+    </Link>
   },
   inset: function() {
     return <div className="inset">

imgur-client/src/routes.jsx

@@ -6,11 +6,13 @@ var Route = ReactRouter.Route;
 
 var Main = require('./components/main');
 var Topic = require('./components/topic');
+var ImageDetail = require('./components/image-detail');
 
 module.exports = (
   <Router history={new HashHistory}>
     <Route path="/" component={Main}>
       <Route path="topics/:id" component={Topic} />
+      <Route path="images/:id" component={ImageDetail} />
     </Route>
   </Router>
 )