Adding some UI cancel buttons.

ui/src/components/community-form.tsx

@@ -67,26 +67,26 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
     return (
       <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">Name</label>
+          <label class="col-12 col-form-label">Name</label>
-          <div class="col-sm-10">
+          <div class="col-12">
             <input type="text" class="form-control" value={this.state.communityForm.name} onInput={linkEvent(this, this.handleCommunityNameChange)} required minLength={3} pattern="[a-z0-9_]+" title="lowercase, underscores, and no spaces."/>
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">Title / Headline</label>
+          <label class="col-12 col-form-label">Title</label>
-          <div class="col-sm-10">
+          <div class="col-12">
             <input type="text" value={this.state.communityForm.title} onInput={linkEvent(this, this.handleCommunityTitleChange)} class="form-control" required minLength={3} />
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">Description / Sidebar</label>
+          <label class="col-12 col-form-label">Sidebar</label>
-          <div class="col-sm-10">
+          <div class="col-12">
             <textarea value={this.state.communityForm.description} onInput={linkEvent(this, this.handleCommunityDescriptionChange)} class="form-control" rows={6} />
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">Category</label>
+          <label class="col-12 col-form-label">Category</label>
-          <div class="col-sm-10">
+          <div class="col-12">
             <select class="form-control" value={this.state.communityForm.category_id} onInput={linkEvent(this, this.handleCommunityCategoryChange)}>
               {this.state.categories.map(category =>
                 <option value={category.id}>{category.name}</option>
@@ -95,8 +95,9 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
           </div>
         </div>
         <div class="form-group row">
-          <div class="col-sm-10">
+          <div class="col-12">
-            <button type="submit" class="btn btn-secondary">{this.props.community ? 'Edit' : 'Create'} Community</button>
+            <button type="submit" class="btn btn-secondary mr-2">{this.props.community ? 'Save' : 'Create'}</button>
+            {this.props.community && <button type="button" class="btn btn-secondary" onClick={linkEvent(this, this.handleCancel)}>Cancel</button>}
           </div>
         </div>
       </form>
@@ -132,6 +133,10 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
     i.setState(i.state);
   }
 
+  handleCancel(i: CommunityForm, event) {
+    i.props.onCancel();
+  }
+
   parseMessage(msg: any) {
     let op: UserOperation = msgOp(msg);
     console.log(msg);

ui/src/components/community.tsx

@@ -71,7 +71,7 @@ export class Community extends Component<any, State> {
     return (
       <div class="container">
         <div class="row">
-          <div class="col-12 col-sm-10 col-lg-9">
+          <div class="col-12 col-lg-9">
             <h4>/f/{this.state.community.name}</h4>
             <div>{this.selects()}</div>
             {this.state.posts.length > 0 
@@ -80,7 +80,7 @@ export class Community extends Component<any, State> {
               : <div>no listings</div>
             }
           </div>
-          <div class="col-12 col-sm-2 col-lg-3">
+          <div class="col-12 col-lg-3">
             <Sidebar community={this.state.community} moderators={this.state.moderators} />
           </div>
         </div>

ui/src/components/post-form.tsx

@@ -95,7 +95,8 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
           </div>
           <div class="form-group row">
             <div class="col-sm-10">
-              <button type="submit" class="btn btn-secondary">{this.props.post ? 'Edit' : 'Create'} Post</button>
+              <button type="submit" class="btn btn-secondary mr-2">{this.props.post ? 'Save' : 'Create'}</button>
+              {this.props.post && <button type="button" class="btn btn-secondary" onClick={linkEvent(this, this.handleCancel)}>Cancel</button>}
             </div>
           </div>
         </form>
@@ -132,6 +133,10 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     i.setState(i.state);
   }
 
+  handleCancel(i: PostForm, event) {
+    i.props.onCancel();
+  }
+
   parseMessage(msg: any) {
     let op: UserOperation = msgOp(msg);
     if (msg.error) {

ui/src/components/post-listing.tsx

@@ -34,6 +34,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     this.handlePostLike = this.handlePostLike.bind(this);
     this.handlePostDisLike = this.handlePostDisLike.bind(this);
     this.handleEditPost = this.handleEditPost.bind(this);
+    this.handleEditCancel = this.handleEditCancel.bind(this);
   }
 
   render() {
@@ -41,7 +42,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       <div>
         {!this.state.showEdit 
           ? this.listing()
-          : <PostForm post={this.props.post} onEdit={this.handleEditPost} />
+          : <PostForm post={this.props.post} onEdit={this.handleEditPost} onCancel={this.handleEditCancel}/>
         }
       </div>
     )
@@ -144,6 +145,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     i.setState(i.state);
   }
 
+  handleEditCancel() {
+    this.state.showEdit = false;
+    this.setState(this.state);
+  }
+
   // The actual editing is done in the recieve for post
   handleEditPost(post: Post) {
     this.state.showEdit = false;

ui/src/components/sidebar.tsx

@@ -24,6 +24,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     super(props, context);
     this.state = this.emptyState;
     this.handleEditCommunity = this.handleEditCommunity.bind(this);
+    this.handleEditCancel = this.handleEditCancel.bind(this);
   }
 
   render() {
@@ -31,7 +32,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
       <div>
         {!this.state.showEdit 
           ? this.sidebar()
-          : <CommunityForm community={this.props.community} onEdit={this.handleEditCommunity} />
+          : <CommunityForm community={this.props.community} onEdit={this.handleEditCommunity} onCancel={this.handleEditCancel}/>
         }
       </div>
     )
@@ -86,6 +87,11 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     this.setState(this.state);
   }
 
+  handleEditCancel() {
+    this.state.showEdit = false;
+    this.setState(this.state);
+  }
+
   // TODO no deleting communities yet
   handleDeleteClick(i: Sidebar, event) {
   }