diff options
author | Dessalines <tyhou13@gmx.com> | 2019-03-26 11:00:18 -0700 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2019-03-26 11:00:18 -0700 |
commit | 25dcb8f4f4f80e401d1d3154923e2dcd05664c76 (patch) | |
tree | 85e9644b64e0eb3fa139db18075dbfd73f854a38 /ui/src/components/create-post.tsx | |
parent | e1cb805cfc719d6266ec50e5f1ef3ac1edf74656 (diff) |
Adding a few endpoints.
- Adding CreatePost, CreateComment, CreateCommunity
Diffstat (limited to 'ui/src/components/create-post.tsx')
-rw-r--r-- | ui/src/components/create-post.tsx | 121 |
1 files changed, 103 insertions, 18 deletions
diff --git a/ui/src/components/create-post.tsx b/ui/src/components/create-post.tsx index bb6e60e2..9ddf8c97 100644 --- a/ui/src/components/create-post.tsx +++ b/ui/src/components/create-post.tsx @@ -1,56 +1,141 @@ import { Component, linkEvent } from 'inferno'; - -import { LoginForm, PostForm, UserOperation } from '../interfaces'; +import { Subscription } from "rxjs"; +import { retryWhen, delay, take } from 'rxjs/operators'; +import { PostForm, Post, PostResponse, UserOperation, Community, ListCommunitiesResponse } from '../interfaces'; import { WebSocketService, UserService } from '../services'; import { msgOp } from '../utils'; interface State { postForm: PostForm; + communities: Array<Community>; } -let emptyState: State = { - postForm: { - name: null, - url: null, - attributed_to: null - } -} export class CreatePost extends Component<any, State> { + private subscription: Subscription; + private emptyState: State = { + postForm: { + name: null, + auth: null, + community_id: null + }, + communities: [] + } + constructor(props, context) { super(props, context); - this.state = emptyState; + this.state = this.emptyState; - WebSocketService.Instance.subject.subscribe( - (msg) => this.parseMessage(msg), - (err) => console.error(err), - () => console.log('complete') - ); + 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.listCommunities(); } + componentWillUnmount() { + this.subscription.unsubscribe(); + } render() { return ( <div class="container"> <div class="row"> <div class="col-12 col-lg-6 mb-4"> - create post - {/* {this.postForm()} */} + {this.postForm()} </div> </div> </div> ) } + postForm() { + return ( + <div> + <form onSubmit={linkEvent(this, this.handlePostSubmit)}> + <h3>Create a Post</h3> + <div class="form-group row"> + <label class="col-sm-2 col-form-label">URL</label> + <div class="col-sm-10"> + <input type="url" class="form-control" value={this.state.postForm.url} onInput={linkEvent(this, this.handlePostUrlChange)} /> + </div> + </div> + <div class="form-group row"> + <label class="col-sm-2 col-form-label">Title</label> + <div class="col-sm-10"> + <textarea value={this.state.postForm.name} onInput={linkEvent(this, this.handlePostNameChange)} class="form-control" required rows="3" /> + </div> + </div> + <div class="form-group row"> + <label class="col-sm-2 col-form-label">Body</label> + <div class="col-sm-10"> + <textarea value={this.state.postForm.body} onInput={linkEvent(this, this.handlePostBodyChange)} class="form-control" rows="6" /> + </div> + </div> + <div class="form-group row"> + <label class="col-sm-2 col-form-label">Forum</label> + <div class="col-sm-10"> + <select class="form-control" value={this.state.postForm.community_id} onInput={linkEvent(this, this.handlePostCommunityChange)}> + {this.state.communities.map(community => + <option value={community.id}>{community.name}</option> + )} + </select> + </div> + </div> + <div class="form-group row"> + <div class="col-sm-10"> + <button type="submit" class="btn btn-secondary">Create Post</button> + </div> + </div> + </form> + </div> + ); + } + + handlePostSubmit(i: CreatePost, event) { + event.preventDefault(); + WebSocketService.Instance.createPost(i.state.postForm); + } + + handlePostUrlChange(i: CreatePost, event) { + i.state.postForm.url = event.target.value; + i.setState(i.state); + } + + handlePostNameChange(i: CreatePost, event) { + i.state.postForm.name = event.target.value; + i.setState(i.state); + } + + handlePostBodyChange(i: CreatePost, event) { + i.state.postForm.body = event.target.value; + i.setState(i.state); + } + + handlePostCommunityChange(i: CreatePost, event) { + i.state.postForm.community_id = Number(event.target.value); + i.setState(i.state); + } + parseMessage(msg: any) { console.log(msg); let op: UserOperation = msgOp(msg); if (msg.error) { alert(msg.error); return; - } else { + } else if (op == UserOperation.ListCommunities) { + let res: ListCommunitiesResponse = msg; + this.state.communities = res.communities; + this.setState(this.state); + } else if (op == UserOperation.CreatePost) { + let res: PostResponse = msg; + this.props.history.push(`/post/${res.post.id}`); } } |