Added basic context aware context menus

apps/comments-ui/src/components/Comment.js

@@ -2,8 +2,8 @@ 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';
 import {getInitials} from '../utils/helpers';
+import CommentContextMenu from './modals/CommentContextMenu';
 
 class Comment extends React.Component {
     static contextType = AppContext;
@@ -52,7 +52,7 @@ class Comment extends React.Component {
                         <p dangerouslySetInnerHTML={html} className="whitespace-pre-wrap"></p>
                     </div>
                     <button onClick={this.toggleContextMenu}><MoreIcon className='gh-comments-icon gh-comments-icon-more' /></button>
-                    {this.state.isContextMenuOpen ? <AuthorContextMenu /> : null}
+                    {this.state.isContextMenuOpen ? <CommentContextMenu comment={comment} /> : null}
                 </div>
             </div>
         );

apps/comments-ui/src/components/modals/AdminContextMenu.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import AppContext from '../../AppContext';
+
+class AdminContextMenu 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 onClick={this.deleteComment}>
+                    Hide comment
+                </button>
+            </div>
+        );
+    }
+}
+  
+export default AdminContextMenu;

apps/comments-ui/src/components/modals/AuthorContextMenu.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import AppContext from '../../AppContext';
 
-class Form extends React.Component {
+class AuthorContextMenu extends React.Component {
     static contextType = AppContext;
 
     constructor(props) {
@@ -29,4 +29,4 @@ class Form extends React.Component {
     }
 }
   
-export default Form;
+export default AuthorContextMenu;

apps/comments-ui/src/components/modals/CommentContextMenu.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import AppContext from '../../AppContext';
+import AdminContextMenu from './AdminContextMenu';
+import AuthorContextMenu from './AuthorContextMenu';
+import NotAuthorContextMenu from './NotAuthorContextMenu';
+
+class CommentContextMenu extends React.Component {
+    static contextType = AppContext;
+
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+
+    get isAuthor() {
+        return this.props.comment.member.uuid === this.context?.member?.uuid;
+    }
+
+    get isAdmin() {
+        return false;
+    }
+
+    render() {
+        const comment = this.props.comment;
+
+        return (
+            <div>
+                {this.isAuthor ? <AuthorContextMenu comment={comment}/> : (this.isAdmin ? <AdminContextMenu comment={comment}/> : <NotAuthorContextMenu comment={comment}/>)}
+            </div>
+        );
+    }
+}
+  
+export default CommentContextMenu;

apps/comments-ui/src/components/modals/NotAuthorContextMenu.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import AppContext from '../../AppContext';
+
+class NotAuthorContextMenu extends React.Component {
+    static contextType = AppContext;
+
+    constructor(props) {
+        super(props);
+        this.state = {};
+
+        this.reportComment = this.reportComment.bind(this);
+    }
+
+    reportComment(event) {
+        // todo
+    }
+
+    render() {
+        return (
+            <div className='bg-white absolute'>
+                <button onClick={this.reportComment}>
+                    Report comment
+                </button>
+            </div>
+        );
+    }
+}
+  
+export default NotAuthorContextMenu;