From f4c1792f399b0183bb856ef9620e847ea4f97c34 Mon Sep 17 00:00:00 2001
From: riggraz <riccardo.graziosi97@gmail.com>
Date: Wed, 25 Sep 2019 11:50:23 +0200
Subject: [PATCH] Add edit link to posts and comments

---
 app/javascript/components/Comments/Comment.tsx     | 14 +++++++++++++-
 app/javascript/components/Comments/CommentList.tsx |  4 ++++
 app/javascript/components/Comments/CommentsP.tsx   |  3 +++
 app/javascript/components/Post/PostP.tsx           |  9 ++++++++-
 app/javascript/components/shared/Separator.tsx     |  5 +++++
 app/javascript/stylesheets/components/Post.scss    | 12 ++++++++++++
 6 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 app/javascript/components/shared/Separator.tsx

diff --git a/app/javascript/components/Comments/Comment.tsx b/app/javascript/components/Comments/Comment.tsx
index 647fa6da..4626e778 100644
--- a/app/javascript/components/Comments/Comment.tsx
+++ b/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>
     {
diff --git a/app/javascript/components/Comments/CommentList.tsx b/app/javascript/components/Comments/CommentList.tsx
index f2b3fe4e..2b085424 100644
--- a/app/javascript/components/Comments/CommentList.tsx
+++ b/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>
         );
diff --git a/app/javascript/components/Comments/CommentsP.tsx b/app/javascript/components/Comments/CommentsP.tsx
index 58fcb7c6..096d6909 100644
--- a/app/javascript/components/Comments/CommentsP.tsx
+++ b/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>
     );
diff --git a/app/javascript/components/Post/PostP.tsx b/app/javascript/components/Post/PostP.tsx
index ffecb106..315abcb1 100644
--- a/app/javascript/components/Post/PostP.tsx
+++ b/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>
diff --git a/app/javascript/components/shared/Separator.tsx b/app/javascript/components/shared/Separator.tsx
new file mode 100644
index 00000000..5981c253
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/app/javascript/stylesheets/components/Post.scss b/app/javascript/stylesheets/components/Post.scss
index c2d0b758..24a9a977 100644
--- a/app/javascript/stylesheets/components/Post.scss
+++ b/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,