diff options
author | Dessalines <tyhou13@gmx.com> | 2019-10-18 17:20:27 -0700 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2019-10-18 17:20:27 -0700 |
commit | 4e5561283392d2ab1545cabb4455a8ffc490f86b (patch) | |
tree | a4ee9cc096826dc32faf3675212c7f95f1b3ea5e /ui/src/components/comment-form.tsx | |
parent | 82ea5ae9186e5a8e631c87a61077e16713eb87a4 (diff) |
Running prettier on code.
- #305 , #309
Diffstat (limited to 'ui/src/components/comment-form.tsx')
-rw-r--r-- | ui/src/components/comment-form.tsx | 188 |
1 files changed, 135 insertions, 53 deletions
diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx index 2095e9e5..bebe6269 100644 --- a/ui/src/components/comment-form.tsx +++ b/ui/src/components/comment-form.tsx @@ -1,7 +1,22 @@ import { Component, linkEvent } from 'inferno'; -import { CommentNode as CommentNodeI, CommentForm as CommentFormI, SearchForm, SearchType, SortType, UserOperation, SearchResponse } from '../interfaces'; -import { Subscription } from "rxjs"; -import { capitalizeFirstLetter, mentionDropdownFetchLimit, msgOp, mdToHtml, randomStr, markdownHelpUrl } from '../utils'; +import { + CommentNode as CommentNodeI, + CommentForm as CommentFormI, + SearchForm, + SearchType, + SortType, + UserOperation, + SearchResponse, +} from '../interfaces'; +import { Subscription } from 'rxjs'; +import { + capitalizeFirstLetter, + mentionDropdownFetchLimit, + msgOp, + mdToHtml, + randomStr, + markdownHelpUrl, +} from '../utils'; import { WebSocketService, UserService } from '../services'; import * as autosize from 'autosize'; import { i18n } from '../i18next'; @@ -25,7 +40,6 @@ interface CommentFormState { } export class CommentForm extends Component<CommentFormProps, CommentFormState> { - private id = `comment-form-${randomStr()}`; private userSub: Subscription; private communitySub: Subscription; @@ -34,13 +48,21 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { commentForm: { auth: null, content: null, - post_id: this.props.node ? this.props.node.comment.post_id : this.props.postId, - creator_id: UserService.Instance.user ? UserService.Instance.user.id : null, + post_id: this.props.node + ? this.props.node.comment.post_id + : this.props.postId, + creator_id: UserService.Instance.user + ? UserService.Instance.user.id + : null, }, - buttonTitle: !this.props.node ? capitalizeFirstLetter(i18n.t('post')) : this.props.edit ? capitalizeFirstLetter(i18n.t('edit')) : capitalizeFirstLetter(i18n.t('reply')), + buttonTitle: !this.props.node + ? capitalizeFirstLetter(i18n.t('post')) + : this.props.edit + ? capitalizeFirstLetter(i18n.t('edit')) + : capitalizeFirstLetter(i18n.t('reply')), previewMode: false, imageLoading: false, - } + }; constructor(props: any, context: any) { super(props, context); @@ -57,7 +79,9 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { selectTemplate: (item: any) => { return `:${item.original.key}:`; }, - values: Object.entries(emojiShortName).map(e => {return {'key': e[1], 'val': e[0]}}), + values: Object.entries(emojiShortName).map(e => { + return { key: e[1], val: e[0] }; + }), allowSpaces: false, autocompleteMode: true, menuItemLimit: mentionDropdownFetchLimit, @@ -88,8 +112,8 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { allowSpaces: false, autocompleteMode: true, menuItemLimit: mentionDropdownFetchLimit, - } - ] + }, + ], }); this.state = this.emptyState; @@ -104,7 +128,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { // A reply gets a new parent id this.state.commentForm.parent_id = this.props.node.comment.id; } - } + } } componentDidMount() { @@ -124,27 +148,82 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { <form onSubmit={linkEvent(this, this.handleCommentSubmit)}> <div class="form-group row"> <div className={`col-sm-12`}> - <textarea id={this.id} className={`form-control ${this.state.previewMode && 'd-none'}`} value={this.state.commentForm.content} onInput={linkEvent(this, this.handleCommentContentChange)} required disabled={this.props.disabled} rows={2} maxLength={10000} /> - {this.state.previewMode && - <div className="md-div" dangerouslySetInnerHTML={mdToHtml(this.state.commentForm.content)} /> - } + <textarea + id={this.id} + className={`form-control ${this.state.previewMode && 'd-none'}`} + value={this.state.commentForm.content} + onInput={linkEvent(this, this.handleCommentContentChange)} + required + disabled={this.props.disabled} + rows={2} + maxLength={10000} + /> + {this.state.previewMode && ( + <div + className="md-div" + dangerouslySetInnerHTML={mdToHtml( + this.state.commentForm.content + )} + /> + )} </div> </div> <div class="row"> <div class="col-sm-12"> - <button type="submit" class="btn btn-sm btn-secondary mr-2" disabled={this.props.disabled}>{this.state.buttonTitle}</button> - {this.state.commentForm.content && - <button className={`btn btn-sm mr-2 btn-secondary ${this.state.previewMode && 'active'}`} onClick={linkEvent(this, this.handlePreviewToggle)}><T i18nKey="preview">#</T></button> - } - {this.props.node && <button type="button" class="btn btn-sm btn-secondary mr-2" onClick={linkEvent(this, this.handleReplyCancel)}><T i18nKey="cancel">#</T></button>} - <a href={markdownHelpUrl} target="_blank" class="d-inline-block float-right text-muted small font-weight-bold"><T i18nKey="formatting_help">#</T></a> + <button + type="submit" + class="btn btn-sm btn-secondary mr-2" + disabled={this.props.disabled} + > + {this.state.buttonTitle} + </button> + {this.state.commentForm.content && ( + <button + className={`btn btn-sm mr-2 btn-secondary ${this.state + .previewMode && 'active'}`} + onClick={linkEvent(this, this.handlePreviewToggle)} + > + <T i18nKey="preview">#</T> + </button> + )} + {this.props.node && ( + <button + type="button" + class="btn btn-sm btn-secondary mr-2" + onClick={linkEvent(this, this.handleReplyCancel)} + > + <T i18nKey="cancel">#</T> + </button> + )} + <a + href={markdownHelpUrl} + target="_blank" + class="d-inline-block float-right text-muted small font-weight-bold" + > + <T i18nKey="formatting_help">#</T> + </a> <form class="d-inline-block mr-2 float-right text-muted small font-weight-bold"> - <label htmlFor={`file-upload-${this.id}`} className={`${UserService.Instance.user && 'pointer'}`}><T i18nKey="upload_image">#</T></label> - <input id={`file-upload-${this.id}`} type="file" accept="image/*,video/*" name="file" class="d-none" disabled={!UserService.Instance.user} onChange={linkEvent(this, this.handleImageUpload)} /> + <label + htmlFor={`file-upload-${this.id}`} + className={`${UserService.Instance.user && 'pointer'}`} + > + <T i18nKey="upload_image">#</T> + </label> + <input + id={`file-upload-${this.id}`} + type="file" + accept="image/*,video/*" + name="file" + class="d-none" + disabled={!UserService.Instance.user} + onChange={linkEvent(this, this.handleImageUpload)} + /> </form> - {this.state.imageLoading && - <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> - } + {this.state.imageLoading && ( + <svg class="icon icon-spinner spin"> + <use xlinkHref="#icon-spinner"></use> + </svg> + )} </div> </div> </form> @@ -200,23 +279,24 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { method: 'POST', body: formData, }) - .then(res => res.json()) - .then(res => { - let url = `${window.location.origin}/pictshare/${res.url}`; - let markdown = (res.filetype == 'mp4') ? `[vid](${url}/raw)` : `![](${url})`; - let content = i.state.commentForm.content; - content = (content) ? `${content} ${markdown}` : markdown; - i.state.commentForm.content = content; - i.state.imageLoading = false; - i.setState(i.state); - }) - .catch((error) => { - i.state.imageLoading = false; - i.setState(i.state); - alert(error); - }) + .then(res => res.json()) + .then(res => { + let url = `${window.location.origin}/pictshare/${res.url}`; + let markdown = + res.filetype == 'mp4' ? `[vid](${url}/raw)` : `![](${url})`; + let content = i.state.commentForm.content; + content = content ? `${content} ${markdown}` : markdown; + i.state.commentForm.content = content; + i.state.imageLoading = false; + i.setState(i.state); + }) + .catch(error => { + i.state.imageLoading = false; + i.setState(i.state); + alert(error); + }); } - + userSearch(text: string, cb: any) { if (text) { let form: SearchForm = { @@ -229,18 +309,19 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { WebSocketService.Instance.search(form); - this.userSub = WebSocketService.Instance.subject - .subscribe( - (msg) => { + this.userSub = WebSocketService.Instance.subject.subscribe( + msg => { let op: UserOperation = msgOp(msg); if (op == UserOperation.Search) { let res: SearchResponse = msg; - let users = res.users.map(u => {return {key: u.name}}); + let users = res.users.map(u => { + return { key: u.name }; + }); cb(users); this.userSub.unsubscribe(); } }, - (err) => console.error(err), + err => console.error(err), () => console.log('complete') ); } else { @@ -260,18 +341,19 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> { WebSocketService.Instance.search(form); - this.communitySub = WebSocketService.Instance.subject - .subscribe( - (msg) => { + this.communitySub = WebSocketService.Instance.subject.subscribe( + msg => { let op: UserOperation = msgOp(msg); if (op == UserOperation.Search) { let res: SearchResponse = msg; - let communities = res.communities.map(u => {return {key: u.name}}); + let communities = res.communities.map(u => { + return { key: u.name }; + }); cb(communities); this.communitySub.unsubscribe(); } }, - (err) => console.error(err), + err => console.error(err), () => console.log('complete') ); } else { |