Community editing

- Community editing mostly working. Fixes #26

1 files changed, 57 insertions, 1 deletions

diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx
index e8a2f410..90c35924 100644
--- a/ui/src/components/sidebar.tsx
+++ b/ui/src/components/sidebar.tsx
@@ -1,7 +1,9 @@
 import { Component, linkEvent } from 'inferno';
 import { Link } from 'inferno-router';
 import { Community, CommunityUser } from '../interfaces';
+import { WebSocketService, UserService } from '../services';
 import { mdToHtml } from '../utils';
+import { CommunityForm } from './community-form';
 
 interface SidebarProps {
   community: Community;
@@ -9,20 +11,49 @@ interface SidebarProps {
 }
 
 interface SidebarState {
+  showEdit: boolean;
 }
 
 export class Sidebar extends Component<SidebarProps, SidebarState> {
 
+  private emptyState: SidebarState = {
+    showEdit: false
+  }
+
   constructor(props, context) {
     super(props, context);
+    this.state = this.emptyState;
+    this.handleEditCommunity = this.handleEditCommunity.bind(this);
   }
 
-
   render() {
+    return (
+      <div>
+        {!this.state.showEdit 
+          ? this.sidebar()
+          : <CommunityForm community={this.props.community} onEdit={this.handleEditCommunity} />
+        }
+      </div>
+    )
+  }
+
+  sidebar() {
     let community = this.props.community;
     return (
       <div>
         <h4>{community.title}</h4>
+        {this.amMod && 
+            <ul class="list-inline mb-1 text-muted small font-weight-bold"> 
+              <li className="list-inline-item">
+                <span class="pointer" onClick={linkEvent(this, this.handleEditClick)}>edit</span>
+              </li>
+              {this.amCreator && 
+                <li className="list-inline-item">
+                {/* <span class="pointer" onClick={linkEvent(this, this.handleDeleteClick)}>delete</span> */}
+              </li>
+              }
+            </ul>
+          }
         <ul class="list-inline">
           <li className="list-inline-item"><Link className="badge badge-light" to="/communities">{community.category_name}</Link></li>
           <li className="list-inline-item badge badge-light">{community.number_of_subscribers} Subscribers</li>
@@ -44,4 +75,29 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
       </div>
     );
   }
+
+  handleEditClick(i: Sidebar, event) {
+    i.state.showEdit = true;
+    i.setState(i.state);
+  }
+
+  handleEditCommunity(community: Community) {
+    this.state.showEdit = false;
+    this.setState(this.state);
+  }
+
+  // TODO no deleting communities yet
+  handleDeleteClick(i: Sidebar, event) {
+  }
+
+  private get amCreator(): boolean {
+    return UserService.Instance.loggedIn && this.props.community.creator_id == UserService.Instance.user.id;
+  }
+
+  private get amMod(): boolean {
+    console.log(this.props.moderators);
+    console.log(this.props);
+    return UserService.Instance.loggedIn && 
+      this.props.moderators.map(m => m.user_id).includes(UserService.Instance.user.id);
+  }
 }