From f83993154859b2afc2ff4665132e3b39c47dc7c1 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Tue, 5 Jul 2022 17:32:43 +0200
Subject: [PATCH] Added wip context menu

---
 apps/comments-ui/src/components/Comment.js    | 66 +++++++++++++------
 .../components/modals/AuthorContextMenu.js    | 32 +++++++++
 apps/comments-ui/src/images/icons/more.svg    |  5 ++
 3 files changed, 83 insertions(+), 20 deletions(-)
 create mode 100644 apps/comments-ui/src/components/modals/AuthorContextMenu.js
 create mode 100644 apps/comments-ui/src/images/icons/more.svg

diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index e7a2d63850..335f279dde 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -1,32 +1,58 @@
 import Avatar from './Avatar';
 import {formatRelativeTime} from '../utils/helpers';
+import {ReactComponent as MoreIcon} from '../images/icons/more.svg';
+import React from 'react';
+import AppContext from '../AppContext';
+import AuthorContextMenu from './modals/AuthorContextMenu';
 
-function Comment(props) {
-    const comment = props.comment;
+class Comment extends React.Component {
+    static contextType = AppContext;
 
-    const html = {__html: comment.html};
+    constructor(props) {
+        super(props);
+        this.state = {
+            isContextMenuOpen: false
+        };
 
-    return (
-        <div className="flex mb-4">
-            <div>
-                <div className="flex mb-2 space-x-4 justify-start items-center">
-                    <Avatar />
+        this.toggleContextMenu = this.toggleContextMenu.bind(this);
+    }
 
-                    <div>
-                        <h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name}</h4>
-                        <h6 className="text-xs text-neutral-400 font-sans">{formatRelativeTime(comment.created_at)}</h6>
+    toggleContextMenu() {
+        this.setState(state => ({
+            isContextMenuOpen: !state.isContextMenuOpen
+        }));
+    }
+
+    render() {
+        const comment = this.props.comment;
+
+        const html = {__html: comment.html};
+
+        return (
+            <div className="flex mb-4">
+                <div>
+                    <div className="flex mb-2 space-x-4 justify-start items-center">
+                        <Avatar />
+
+                        <div>
+                            <h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name}</h4>
+                            <h6 className="text-xs text-neutral-400 font-sans">{formatRelativeTime(comment.created_at)}</h6>
+                        </div>
+                        {/* <h6 className="text-sm text-neutral-400 font-sans">{comment.member.bio}</h6> */}
+                        {/* <div className="text-sm text-neutral-400 font-sans font-normal">
+                            {formatRelativeTime(comment.created_at)}
+                        </div> */}
                     </div>
-                    {/* <h6 className="text-sm text-neutral-400 font-sans">{comment.member.bio}</h6> */}
-                    {/* <div className="text-sm text-neutral-400 font-sans font-normal">
-                        {formatRelativeTime(comment.created_at)}
-                    </div> */}
-                </div>
-                <div className="ml-14 mb-4 font-sans leading-normal dark:text-neutral-300">
-                    <p dangerouslySetInnerHTML={html} className="whitespace-pre-wrap"></p>
+                    <div className="ml-14 mb-4 font-sans leading-normal dark:text-neutral-300">
+                        <p dangerouslySetInnerHTML={html} className="whitespace-pre-wrap"></p>
+                    </div>
+
+                    {/*</div>button><MoreIcon className='gh-comments-icon gh-comments-icon-more' /></button>
+                    {this.state.isContextMenuOpen ? <AuthorContextMenu /> : null}*/}
                 </div>
             </div>
-        </div>
-    );
+        );
+    }
 }
   
 export default Comment;
diff --git a/apps/comments-ui/src/components/modals/AuthorContextMenu.js b/apps/comments-ui/src/components/modals/AuthorContextMenu.js
new file mode 100644
index 0000000000..728fde1c53
--- /dev/null
+++ b/apps/comments-ui/src/components/modals/AuthorContextMenu.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import AppContext from '../../AppContext';
+
+class Form extends React.Component {
+    static contextType = AppContext;
+
+    constructor(props) {
+        super(props);
+        this.state = {};
+
+        this.deleteComment = this.deleteComment.bind(this);
+    }
+
+    deleteComment(event) {
+        // todo
+    }
+
+    render() {
+        return (
+            <div className='bg-white absolute'>
+                <button>
+                    Edit
+                </button>
+                <button onClick={this.deleteComment}>
+                    Delete
+                </button>
+            </div>
+        );
+    }
+}
+  
+export default Form;
diff --git a/apps/comments-ui/src/images/icons/more.svg b/apps/comments-ui/src/images/icons/more.svg
new file mode 100644
index 0000000000..bc70fbb31a
--- /dev/null
+++ b/apps/comments-ui/src/images/icons/more.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="5" cy="10" r="1.5" fill="black"/>
+<circle cx="10" cy="10" r="1.5" fill="black"/>
+<circle cx="15" cy="10" r="1.5" fill="black"/>
+</svg>