added basic routing and have begun piecing together componest in a us…

…eable way

package.json

@@ -22,6 +22,7 @@
     "gulp-concat": "^2.4.3",
     "gulp-sass": "^1.3.2",
     "react": "^0.12.2",
+    "react-router": "^0.11.6",
     "reactify": "^1.0.0",
     "superagent": "^0.21.0"
   }

src/css/main.scss

@@ -12,6 +12,7 @@ html, body {
 	width: 100%;
 	height: 100%;
 	position: absolute;
+	padding-bottom: 60px;
 	background: $background;
 	left: 0px;
 	top: 0px;
@@ -21,15 +22,15 @@ html, body {
 }
 
 .card {
-	position: absolute;
-	height: 400px;
-	width: 40%;
+	position: relative;
+	//height: 400px;
+	width: 500px;
 	left: 50%;
-	margin-left: -20%;
-	top:50%;
-	margin-top:-200px;
+	margin-left: -250px;
 	background: $red;
 	padding-top:60px;
+	padding-bottom: 60px;
+	margin-bottom: 60px;
 	box-shadow: 0px 0px 40px #AAA;
 }
 

src/js/components/issue-list.component.js

@@ -0,0 +1,29 @@
+var React = require('react');
+var request = require('superagent');
+var LoadButton = require('./load-button.component.js');
+
+var IssueList = React.createClass({
+	render: function () {
+		var issues = this.props.issues;
+		return (
+			<div className="card">
+    			<form>
+		    		<button onClick={this.loadIssues}>load Issues</button>
+    			</form>
+    			<pre>{issues}</pre>
+    			<div className="title">lithe</div>
+    		</div>
+    	);
+	},
+	loadIssues: function () {
+		console.log('here');
+		var url = 'http://www.constellates.com:8888/issue';
+		var self = this;
+		request.get(url, function (res) {
+			self.props.issues = res.body;
+			console.log(res);
+		});
+	}
+});
+
+module.exports = IssueList;

src/js/main.js

@@ -1,8 +1,51 @@
-var SignInCard = require('./components/signin.component');
-var IssueCard = require('./components/issue-form.component');
-var React = require('react');
-
-React.render(
-	<SignInCard />,
-	document.getElementById('main')
-);
+// dependencies ----------------------------------------------------------
+
+var React        = require('react');
+	Router       = require('react-router'),
+	DefaultRoute = Router.DefaultRoute,
+	Link         = Router.Link,
+	Route        = Router.Route,
+	RouteHandler = Router.RouteHandler;
+
+// components ------------------------------------------------------------
+
+var SignInCard = require('./components/signin.component'),
+	IssueCard = require('./components/issue-form.component'),
+	IssueList = require('./components/issue-list.component');
+
+// parent view -----------------------------------------------------------
+
+var App = React.createClass({
+	render: function () {
+		return (
+			<div>
+				<header>
+					<ul>
+						<li><Link to="inbox">sign in</Link></li>
+						<li><Link to="calendar">create issue</Link></li>
+						<li><Link to="issues">issues</Link></li>
+					</ul>
+				</header>
+
+				<RouteHandler/>
+			</div>
+		)
+	}
+});
+
+// routes ----------------------------------------------------------------
+
+var routes = (
+	<Route name="app" path="/" handler={App}>
+		<Route name="inbox" handler={SignInCard}/>
+		<Route name="calendar" handler={IssueCard}/>
+		<Route name="issues" handler={IssueList}/>
+		<DefaultRoute handler={SignInCard}/>
+	</Route>
+);
+
+// render handler --------------------------------------------------------
+
+Router.run(routes, function (Handler) {
+	React.render(<Handler/>, document.getElementById('main'));
+});