added routing and some css

lib/boards-api.js

@@ -65,7 +65,7 @@ BoardsAPI.prototype.resolveIPNS = function(n,done){
     done(null,cached)
   }
   this.ipfs.name.resolve(n,(err,r) => {
-    console.log('Resolved',n,'to',r)
+    if(!err) console.log('Resolved',n,'to',r.Path)
     if(err){
       done(err)
     } else if(!cached){

package.json

@@ -33,11 +33,14 @@
     "gulp-connect": "^2.2.0",
     "gulp-minify-css": "^1.2.1",
     "gulp-uglify": "^1.5.1",
+    "history": "^1.13.1",
     "ipfs-api": "^2.6.2",
     "moment": "^2.10.6",
     "react": "^0.14.2",
     "react-dom": "^0.14.2",
+    "react-router": "^1.0.0",
     "vinyl-buffer": "^1.0.0",
-    "vinyl-source-stream": "^1.1.0"
+    "vinyl-source-stream": "^1.1.0",
+    "wolfy87-eventemitter": "^4.3.0"
   }
 }

webapp/app.jsx

@@ -1,5 +1,10 @@
 var React = require('react')
 var ReactDOM = require('react-dom')
+var Router = require('react-router').Router
+var Route = require('react-router').Route
+var IndexRoute = require('react-router').IndexRoute
+var Link = require('react-router').Link
+
 var ipfs = require('ipfs-api')('localhost',5001)
 var BoardsAPI = require('../lib/boards-api.js')
 
@@ -20,7 +25,11 @@ var App = React.createClass({
 var Homepage = React.createClass({
   render: function(){
     return (
+      <div>
         <h3>Hello</h3>
+        <p>Not much is implemented...</p>
+        <p>You can try <Link to="@QmXnfA41SXMX3tqFD4kjED7ehyvgTsuAho86TkEoTbZdpw">Opening a Profile</Link> though :)</p>
+      </div>
     )
   }
 })
@@ -30,7 +39,7 @@ var Navbar = React.createClass({
     return (
       <div className="navbar">
         <div className="container">
-          <h4>Boards</h4>
+          <h4><Link to="/">Boards</Link></h4>
         </div>
       </div>)
   }
@@ -41,7 +50,7 @@ var Profile = React.createClass({
     return { name: '...' }
   },
   componentDidMount: function(){
-    boards.getProfile(this.props.id, (err,res) => {
+    boards.getProfile(this.props.params.userid, (err,res) => {
       if(err){
         console.log(err)
         this.setState({
@@ -58,11 +67,27 @@ var Profile = React.createClass({
     return (<div className="profile">
       <h1>{this.state.name}</h1>
       <p>{this.state.error}</p>
-      <h5 className="light">@{this.props.id}</h5>
+      <h5 className="light">@{this.props.params.userid}</h5>
     </div>)
   }
 })
 
+var Board = React.createClass({
+  getInitialState: function(){
+    return { posts: [] }
+  },
+  render: function(){
+    return (
+      <div></div>
+    )
+  }
+})
+
 ReactDOM.render(
-  <App><Profile id="QmXnfA41SXMX3tqFD4kjED7ehyvgTsuAho86TkEoTbZdpw"/></App>, document.getElementById('root')
+  <Router>
+    <Route path="/" component={App}>
+      <IndexRoute component={Homepage} />
+      <Route path="/@:userid" component={Profile} />
+    </Route>
+  </Router>, document.getElementById('root')
 )

webapp/style.css

@@ -20,6 +20,11 @@
   height: 4.5em
 }
 
+.navbar a {
+  text-decoration: none;
+  color: inherit;
+}
+
 .navbar .container {
   padding-top: 1em
 }