Implemented nested routes.

* HotspotViewer turns into App and Home.
caseycesari · May 24, 2016 · 611ee05 · 611ee05
1 parent 6b677e9
commit 611ee05
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 63 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "type": "git",
     "url": "http://www.github.com/caseypt/ebird-hotspot-viewer.git"
   },
-  "main": "./src/app.js",
+  "main": "./src/main.js",
   "dependencies": {
     "fbemitter": "^2.0.2",
     "flux": "^2.1.1",

diff --git a/src/index.html b/src/index.html
@@ -9,30 +9,7 @@
         <link rel="stylesheet" href="css/app.css">
     </head>
     <body>
-        <nav class="navbar navbar-inverse navbar-fixed-top">
-            <div class="container">
-                <div class="navbar-header">
-                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-                        <span class="sr-only">Toggle navigation</span>
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                    </button>
-                    <a class="navbar-brand" href="#">eBird Hotspot Viewer</a>
-                </div>
-                <div id="navbar" class="collapse navbar-collapse">
-                    <ul class="nav navbar-nav">
-                        <li class="active"><a href="#">Home</a></li>
-                        <li><a href="#about">About</a></li>
-                        <li><a href="#contact">Contact</a></li>
-                    </ul>
-                </div><!--/.nav-collapse -->
-            </div>
-        </nav>
-
-        <div class="container">
-            <h1>eBird Hotspot Viewer</h1>
-            <div id="app"></div>
+        <div id="app" class="container">
         </div>
     </body>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

diff --git a/src/js/app.js b/src/js/app.js
diff --git a/src/js/components/HotspotViewer.js → src/js/components/App.js b/src/js/components/HotspotViewer.js → src/js/components/App.js
@@ -1,17 +1,22 @@
-import React, { Component } from 'react';
-import HotspotList from './HotspotList.js';
-import Loading from './Loading.js';
+import React, { Component, PropTypes } from 'react';
 
 import { Actions } from '../actions/Actions';
 import { Store } from '../stores/Store';
+import Header from './Header.js';
+import Loading from './Loading.js';
+
+const propTypes = {
+    children: PropTypes.object,
+};
+
 
 function getState() {
     return {
         location: Store.getLocation(),
     };
 }
 
-export default class HotspotViewer extends Component {
+export default class App extends Component {
     constructor() {
         super();
 
@@ -42,27 +47,21 @@ export default class HotspotViewer extends Component {
     onChange() {
         this.setState(getState());
     }
-
     render() {
-        let content = <Loading message={'Loading nearby hotspots...'} />;
+        let content = <Loading message={'Getting your location...'} />;
 
-        if (this.state.location || this.state.hotspotId) {
-            content = (
-              <HotspotList
-                hotspotId={this.state.hotspotId}
-                hotspots={this.state.hotspots}
-                sightings={this.state.sightings}
-                dist={10}
-                lat={this.state.location.lat}
-                lng={this.state.location.lng}
-              />
-            );
+        if (this.state.location) {
+            content = this.props.children;
         }
 
         return (
-          <div className="hotspot-list row">
+          <div>
+            <Header />
+            <h1>eBird Hotspot Viewer</h1>
             {content}
           </div>
         );
     }
 }
+
+App.propTypes = propTypes;
diff --git a/src/js/components/Header.js b/src/js/components/Header.js
@@ -0,0 +1,33 @@
+import React from 'react';
+
+export default function Header() {
+    return (
+      <nav className="navbar navbar-inverse navbar-fixed-top">
+        <div className="container">
+          <div className="navbar-header">
+            <button
+              type="button"
+              className="navbar-toggle collapsed"
+              data-toggle="collapse"
+              data-target="#navbar"
+              aria-expanded="false"
+              aria-controls="navbar"
+            >
+              <span className="sr-only">Toggle navigation</span>
+              <span className="icon-bar"></span>
+              <span className="icon-bar"></span>
+              <span className="icon-bar"></span>
+            </button>
+            <a className="navbar-brand" href="#">eBird Hotspot Viewer</a>
+          </div>
+          <div id="navbar" className="collapse navbar-collapse">
+            <ul className="nav navbar-nav">
+              <li className="active"><a href="#">Home</a></li>
+              <li><a href="#about">About</a></li>
+              <li><a href="#contact">Contact</a></li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+    );
+}
diff --git a/src/js/components/Home.js b/src/js/components/Home.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Link } from 'react-router';
+
+export default function App() {
+    return (
+      <Link
+        to="/hotspots"
+        type="button"
+        className="btn btn-primary"
+      >
+        View nearby hotspots
+      </Link>
+    );
+}
diff --git a/src/js/components/HotspotList.js b/src/js/components/HotspotList.js
@@ -1,13 +1,15 @@
 import React, { Component, PropTypes } from 'react';
-import Hotspot from './Hotspot.js';
-import { Actions } from '../actions/Actions';
+import $ from 'jquery';
 
+import { Actions } from '../actions/Actions';
 import { Store } from '../stores/Store';
-import $ from 'jquery';
+import Hotspot from './Hotspot.js';
+import Loading from './Loading.js';
 
 function getState() {
     return {
         hotspots: Store.getHotspotList(),
+        location: Store.getLocation(),
     };
 }
 
@@ -29,10 +31,10 @@ export default class HotspotList extends Component {
     componentDidMount() {
         Store.addChangeListener(this.onChange);
 
-        if ((this.props.lat && this.props.lng) &&
+        if ((this.state.location.lat && this.state.location.lng) &&
             (!this.state.hotspots || this.state.hotspots.length === 0)) {
             $.ajax({
-                url: `http://ebird.org/ws1.1/ref/hotspot/geo?dist=${this.props.dist}&lat=${this.props.lat}&lng=${this.props.lng}&fmt=json`,
+                url: `http://ebird.org/ws1.1/ref/hotspot/geo?dist=${10}&lat=${this.state.location.lat}&lng=${this.state.location.lng}&fmt=json`,
                 dataType: 'json',
                 cache: false,
                 success: data => {
@@ -54,7 +56,7 @@ export default class HotspotList extends Component {
     }
 
     render() {
-        let content;
+        let content = <Loading message={'Loading nearby hotspots...'} />;
 
         if (this.state.hotspots) {
             content = this.state.hotspots.map(h =>

diff --git a/src/js/main.js b/src/js/main.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/App.js';
+import Home from './components/Home.js';
+import HotspotList from './components/HotspotList.js';
+import SightingsList from './components/SightingsList.js';
+
+import { Router, Route, hashHistory, IndexRoute } from 'react-router';
+
+ReactDOM.render((
+  <Router history={hashHistory}>
+    <Route path="/" component={App}>
+      <IndexRoute component={Home} />
+      <Route path="/hotspots" component={HotspotList} />
+      <Route path="/hotspot/:hotspotId" component={SightingsList} />
+    </Route>
+  </Router>
+ ), document.getElementById('app'));
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-    entry: './src/js/app.js',
+    entry: './src/js/main.js',
     output: {
         path: './dist',
         filename: 'bundle.js',