Adding some UI cancel buttons.

pull/64/head
Dessalines 2019-04-04 19:08:21 -07:00
parent bf1ba48031
commit 4352b24734
5 changed files with 37 additions and 15 deletions

View File

@ -67,26 +67,26 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
return ( return (
<form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}> <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
<div class="form-group row"> <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."/> <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> </div>
<div class="form-group row"> <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} /> <input type="text" value={this.state.communityForm.title} onInput={linkEvent(this, this.handleCommunityTitleChange)} class="form-control" required minLength={3} />
</div> </div>
</div> </div>
<div class="form-group row"> <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} /> <textarea value={this.state.communityForm.description} onInput={linkEvent(this, this.handleCommunityDescriptionChange)} class="form-control" rows={6} />
</div> </div>
</div> </div>
<div class="form-group row"> <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)}> <select class="form-control" value={this.state.communityForm.category_id} onInput={linkEvent(this, this.handleCommunityCategoryChange)}>
{this.state.categories.map(category => {this.state.categories.map(category =>
<option value={category.id}>{category.name}</option> <option value={category.id}>{category.name}</option>
@ -95,8 +95,9 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
</div> </div>
</div> </div>
<div class="form-group row"> <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>
</div> </div>
</form> </form>
@ -132,6 +133,10 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
i.setState(i.state); i.setState(i.state);
} }
handleCancel(i: CommunityForm, event) {
i.props.onCancel();
}
parseMessage(msg: any) { parseMessage(msg: any) {
let op: UserOperation = msgOp(msg); let op: UserOperation = msgOp(msg);
console.log(msg); console.log(msg);

View File

@ -71,7 +71,7 @@ export class Community extends Component<any, State> {
return ( return (
<div class="container"> <div class="container">
<div class="row"> <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> <h4>/f/{this.state.community.name}</h4>
<div>{this.selects()}</div> <div>{this.selects()}</div>
{this.state.posts.length > 0 {this.state.posts.length > 0
@ -80,7 +80,7 @@ export class Community extends Component<any, State> {
: <div>no listings</div> : <div>no listings</div>
} }
</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} /> <Sidebar community={this.state.community} moderators={this.state.moderators} />
</div> </div>
</div> </div>

View File

@ -95,7 +95,8 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
</div> </div>
<div class="form-group row"> <div class="form-group row">
<div class="col-sm-10"> <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>
</div> </div>
</form> </form>
@ -132,6 +133,10 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
i.setState(i.state); i.setState(i.state);
} }
handleCancel(i: PostForm, event) {
i.props.onCancel();
}
parseMessage(msg: any) { parseMessage(msg: any) {
let op: UserOperation = msgOp(msg); let op: UserOperation = msgOp(msg);
if (msg.error) { if (msg.error) {

View File

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

View File

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