Add edit link to posts and comments

app/javascript/components/Comments/Comment.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { FormEvent } from 'react';
 
 import NewComment from './NewComment';
+import Separator from '../shared/Separator';
 import { MutedText } from '../shared/CustomTexts';
 
 import { CommentRepliesState } from '../../reducers/commentRepliesReducer';
@@ -22,6 +23,7 @@ interface Props {
   handleSubmitComment(body: string, parentId: number): void;
 
   isLoggedIn: boolean;
+  isPowerUser: boolean;
 }
 
 const Comment = ({
@@ -38,6 +40,7 @@ const Comment = ({
   handleSubmitComment,
 
   isLoggedIn,
+  isPowerUser,
 }: Props) => (
   <div className="comment">
     <div className="commentHeader">
@@ -48,7 +51,16 @@ const Comment = ({
       <a className="commentReplyButton" onClick={handleToggleCommentReply}>
         { reply.isOpen ? 'Cancel' : 'Reply' }
       </a>
-      &nbsp;&bull;&nbsp;
+      {
+        isPowerUser ?
+          <React.Fragment>
+            <Separator />
+            <a href={`/admin/comments/${id}`} data-turbolinks="false">Edit</a>
+          </React.Fragment>
+        :
+          null
+      }
+      <Separator />
       <MutedText>{friendlyDate(updatedAt)}</MutedText>
     </div>
     {

app/javascript/components/Comments/CommentList.tsx

@@ -17,6 +17,7 @@ interface Props {
   handleSubmitComment(body: string, parentId: number): void;
 
   isLoggedIn: boolean;
+  isPowerUser: boolean;
 }
 
 const CommentList = ({
@@ -30,6 +31,7 @@ const CommentList = ({
   handleSubmitComment,
 
   isLoggedIn,
+  isPowerUser,
 }: Props) => (
   <React.Fragment>
     {comments.map((comment, i) => {
@@ -49,6 +51,7 @@ const CommentList = ({
               {...comment}
 
               isLoggedIn={isLoggedIn}
+              isPowerUser={isPowerUser}
             />
 
             <CommentList
@@ -62,6 +65,7 @@ const CommentList = ({
               handleSubmitComment={handleSubmitComment}
 
               isLoggedIn={isLoggedIn}
+              isPowerUser={isPowerUser}
             />
           </div>
         );

app/javascript/components/Comments/CommentsP.tsx

@@ -12,6 +12,7 @@ import { CommentRepliesState } from '../../reducers/commentRepliesReducer';
 interface Props {
   postId: number;
   isLoggedIn: boolean;
+  isPowerUser: boolean;
   authenticityToken: string;
 
   comments: Array<IComment>;
@@ -47,6 +48,7 @@ class CommentsP extends React.Component<Props> {
   render() {
     const {
       isLoggedIn,
+      isPowerUser,
 
       comments,
       replies,
@@ -92,6 +94,7 @@ class CommentsP extends React.Component<Props> {
           parentId={null}
           level={1}
           isLoggedIn={isLoggedIn}
+          isPowerUser={isPowerUser}
         />
       </div>
     );

app/javascript/components/Post/PostP.tsx

@@ -65,7 +65,13 @@ class PostP extends React.Component<Props> {
 
         <div className="postAndCommentsContainer">
           <div className="postContainer">
-            <h2>{post.title}</h2>
+            <div className="postHeader">
+              <h2>{post.title}</h2>
+              {
+                isPowerUser && post ?
+                  <a href={`/admin/posts/${post.id}`} data-turbolinks="false">Edit</a> : null
+              }
+            </div>
             {
               isPowerUser && post ?
                 <div className="postSettings">
@@ -101,6 +107,7 @@ class PostP extends React.Component<Props> {
           <Comments
             postId={this.props.postId}
             isLoggedIn={isLoggedIn}
+            isPowerUser={isPowerUser}
             authenticityToken={authenticityToken}
           />
         </div>

app/javascript/components/shared/Separator.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const Separator = () => <span>&nbsp;&bull;&nbsp;</span>
+
+export default Separator;

app/javascript/stylesheets/components/Post.scss

@@ -26,6 +26,18 @@
       }
     }
 
+    .postHeader {
+      @extend
+        .d-flex;
+
+      a {
+        @extend
+          .ml-1;
+        
+        line-height: 1em;
+      }
+    }
+
     .postSettings {
       @extend
         .d-flex,