comment permalinks done, but bugged

webapp/app.jsx

@@ -28,6 +28,7 @@ var Settings = require('settings.jsx')(boards)
 var Profile = require('profile.jsx')(boards)
 var Board = require('board.jsx')(boards)
 var PostPage = require('postpage.jsx')(boards)
+var CommentPage = require('commentpage.jsx')(boards)
 
 // Define Main Components
 
@@ -81,12 +82,15 @@ ReactDOM.render(
       <IndexRoute component={Homepage} />
       <Route path="/@:userid">
         <IndexRoute component={Profile} />
-        <Route path="post">
+        <Route path="post/:posthash" >
-          <Route path=":posthash" component={PostPage} />
+          <IndexRoute component={PostPage} />
         </Route>
         <Route path=":boardname">
           <IndexRoute component={Board} />
-          <Route path=":posthash" component={PostPage} />
+          <Route path=":posthash">
+            <IndexRoute component={PostPage} />
+            <Route path=":commenthash" component={CommentPage} />
+          </Route>
         </Route>
       </Route>
       <Route path="/post/:posthash" component={PostPage} />

webapp/components/clock.jsx

@@ -30,6 +30,6 @@ module.exports = React.createClass({
       return <Icon name="refresh" className="fa-spin" />
   },
   render: function(){
-    return <div className="clock"><Icon name="clock-o" className={this.props.className} /> {this.getDate()}</div>
+    return <div className="inline"><Icon name="clock-o" className={this.props.className} /> {this.getDate()}</div>
   }
 })

webapp/components/comment.jsx

@@ -2,6 +2,7 @@ var React = require('react')
 var Markdown = require('markdown.jsx')
 var Icon = require('icon.jsx')
 var Clock = require('clock.jsx')
+var Link = require('react-router').Link
 
 module.exports = function(boardsAPI){
   var UserID = require('userID.jsx')(boardsAPI)
@@ -14,6 +15,20 @@ module.exports = function(boardsAPI){
         if(this.isMounted()) this.setState({ moment: require('moment') })
       })
     },
+    getPermalink: function(){
+      if(this.props.adminID && this.props.board && this.props.post && this.props.comment.hash){
+        return <div className="inline not-first">
+          <Icon name="code" /> <Link to={'/@'+this.props.adminID+'/'+this.props.board+'/'+this.props.post+'/'+this.props.comment.hash}>Permalink</Link>
+        </div>
+      }
+    },
+    getParentlink: function(){
+      if(this.props.showParent && this.props.comment.parent && this.props.comment.parent !== this.props.post){
+        return <div className="inline not-first">
+          <Icon name="level-up" /> <Link to={'/@'+this.props.adminID+'/'+this.props.board+'/'+this.props.post+'/'+this.props.comment.parent}>Parent</Link>
+        </div>
+      }
+    },
     render: function(){
       if(this.props.comment){
         var Comments = this.props.comment.comments || require('comments.jsx')(boardsAPI)
@@ -21,9 +36,11 @@ module.exports = function(boardsAPI){
           <div className="icons">
             <UserID id={this.props.comment.op} />
             <Clock date={this.props.comment.date} />
+            {this.getPermalink()}
+            {this.getParentlink()}
           </div>
           <Markdown source={this.props.comment.text} />
-          <Comments className="shifted" parent={this.props.comment.hash} adminID={this.props.adminID} board={this.props.board}/>
+          <Comments className="shifted" parent={this.props.comment.hash} post={this.props.post} adminID={this.props.adminID} board={this.props.board}/>
         <hr/></div>
       } else {
         return <div><hr/>Invalid Comment<hr/></div>

webapp/components/comments.jsx

@@ -22,7 +22,7 @@ module.exports = function(boardsAPI){
     },
     getComments: function(){
       if(this.state.comments.length > 0)
-        return this.state.comments.map(cmnt => (<Comment key={cmnt.hash} comment={cmnt} comments={this} adminID={this.props.adminID} board={this.props.board}/>) )
+        return this.state.comments.map(cmnt => (<Comment key={cmnt.hash} comment={cmnt} post={this.props.post} comments={this} adminID={this.props.adminID} board={this.props.board}/>) )
       else return <div></div>
     },
     render: function(){

webapp/components/postpage.jsx

@@ -35,7 +35,7 @@ module.exports = function(boardsAPI){
         }
       })
     },
-    getContext(){
+    getContext: function(){
       if(this.props.params.userid){
         if(this.props.params.boardname)
           return <div>Posted by <UserID id={this.props.params.userid} /> in <Link to={'@'+this.props.params.userid+'/'+this.props.params.boardname}>#{this.props.params.boardname}</Link></div>
@@ -50,7 +50,7 @@ module.exports = function(boardsAPI){
             {this.getContext()}
           </div>
           <Post post={this.state.post} board={this.props.params.boardname} />
-          <Comments parent={this.props.params.posthash} board={this.props.params.boardname} adminID={this.props.params.userid}/>
+          <Comments parent={this.props.params.posthash} board={this.props.params.boardname} adminID={this.props.params.userid} post={this.props.params.posthash} />
         </div>
       else return <GetIPFS />
     }

webapp/style.css

@@ -20,7 +20,7 @@ a {
   text-decoration: none;
 }
 
-.clock {
+.inline {
   display: inline
 }
 
@@ -83,19 +83,19 @@ a:hover {
   margin: 2rem;
 }
 
-.post .icons .fa, .comment .icons .fa {
+.icons .fa, .comment .icons .fa {
   color: #707070;
 }
 
-.post .icons .a {
+.icons .a {
   color: #707070;
 }
 
-.post .icons .user-id {
+.icons .user-id {
-  display: inline-block;
+  display: inline;
 }
 
-.post .icons .not-first{
+.icons .not-first{
   margin-left: 1rem;
 }
 
@@ -103,6 +103,10 @@ a:hover {
   display: inline
 }
 
+.comment-page .user-id {
+  display: inline
+}
+
 .comment .icons {
   margin-bottom: 1rem;
 }