diff options
author | Dessalines <tyhou13@gmx.com> | 2019-04-04 15:29:14 -0700 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2019-04-04 15:29:14 -0700 |
commit | ed688f9292f079e04fa5ad22b2505d8a45cb3d46 (patch) | |
tree | f0e99679eab81f0e67d51f5cb43fefc0bb1f3e9f /ui/src/components/create-community.tsx | |
parent | f3cbe9e6cee4a03d8677414ae29b81a59d31b71c (diff) |
Community editing
- Community editing mostly working. Fixes #26
Diffstat (limited to 'ui/src/components/create-community.tsx')
-rw-r--r-- | ui/src/components/create-community.tsx | 131 |
1 files changed, 8 insertions, 123 deletions
diff --git a/ui/src/components/create-community.tsx b/ui/src/components/create-community.tsx index e21db8ac..cd43c8fa 100644 --- a/ui/src/components/create-community.tsx +++ b/ui/src/components/create-community.tsx @@ -1,47 +1,11 @@ import { Component, linkEvent } from 'inferno'; -import { Subscription } from "rxjs"; -import { retryWhen, delay, take } from 'rxjs/operators'; -import { CommunityForm, UserOperation, Category, ListCategoriesResponse } from '../interfaces'; -import { WebSocketService, UserService } from '../services'; -import { msgOp } from '../utils'; +import { CommunityForm } from './community-form'; -import { Community } from '../interfaces'; - -interface State { - communityForm: CommunityForm; - categories: Array<Category>; -} - -export class CreateCommunity extends Component<any, State> { - private subscription: Subscription; - - private emptyState: State = { - communityForm: { - name: null, - title: null, - category_id: null - }, - categories: [] - } +export class CreateCommunity extends Component<any, any> { constructor(props, context) { super(props, context); - - this.state = this.emptyState; - - this.subscription = WebSocketService.Instance.subject - .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10)))) - .subscribe( - (msg) => this.parseMessage(msg), - (err) => console.error(err), - () => console.log("complete") - ); - - WebSocketService.Instance.listCategories(); - } - - componentWillUnmount() { - this.subscription.unsubscribe(); + this.handleCommunityCreate = this.handleCommunityCreate.bind(this); } render() { @@ -49,96 +13,17 @@ export class CreateCommunity extends Component<any, State> { <div class="container"> <div class="row"> <div class="col-12 col-lg-6 mb-4"> - {this.communityForm()} + <h3>Create Forum</h3> + <CommunityForm onCreate={this.handleCommunityCreate}/> </div> </div> </div> ) } - communityForm() { - return ( - <div> - <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}> - <h3>Create Forum</h3> - <div class="form-group row"> - <label class="col-sm-2 col-form-label">Name</label> - <div class="col-sm-10"> - <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> - <div class="col-sm-10"> - <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> - <div class="col-sm-10"> - <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> - <div class="col-sm-10"> - <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> - )} - </select> - </div> - </div> - <div class="form-group row"> - <div class="col-sm-10"> - <button type="submit" class="btn btn-secondary">Create</button> - </div> - </div> - </form> - </div> - ); - } - - handleCreateCommunitySubmit(i: CreateCommunity, event) { - event.preventDefault(); - WebSocketService.Instance.createCommunity(i.state.communityForm); - } - - handleCommunityNameChange(i: CreateCommunity, event) { - i.state.communityForm.name = event.target.value; - i.setState(i.state); - } - - handleCommunityTitleChange(i: CreateCommunity, event) { - i.state.communityForm.title = event.target.value; - i.setState(i.state); - } - - handleCommunityDescriptionChange(i: CreateCommunity, event) { - i.state.communityForm.description = event.target.value; - i.setState(i.state); - } - - handleCommunityCategoryChange(i: CreateCommunity, event) { - i.state.communityForm.category_id = Number(event.target.value); - i.setState(i.state); + handleCommunityCreate(id: number) { + this.props.history.push(`/community/${id}`); } +} - parseMessage(msg: any) { - let op: UserOperation = msgOp(msg); - console.log(msg); - if (msg.error) { - alert(msg.error); - return; - } else if (op == UserOperation.ListCategories){ - let res: ListCategoriesResponse = msg; - this.state.categories = res.categories; - this.state.communityForm.category_id = res.categories[0].id; - this.setState(this.state); - } else if (op == UserOperation.CreateCommunity) { - let community: Community = msg.community; - this.props.history.push(`/community/${community.id}`); - } - } -} |