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 | |
parent | 82ea5ae9186e5a8e631c87a61077e16713eb87a4 (diff) |
Running prettier on code.
- #305 , #309
43 files changed, 4531 insertions, 2067 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 { diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx index ce4bb510..7eb5d9d4 100644 --- a/ui/src/components/comment-node.tsx +++ b/ui/src/components/comment-node.tsx @@ -1,6 +1,20 @@ import { Component, linkEvent } from 'inferno'; import { Link } from 'inferno-router'; -import { CommentNode as CommentNodeI, CommentLikeForm, CommentForm as CommentFormI, SaveCommentForm, BanFromCommunityForm, BanUserForm, CommunityUser, UserView, AddModToCommunityForm, AddAdminForm, TransferCommunityForm, TransferSiteForm, BanType } from '../interfaces'; +import { + CommentNode as CommentNodeI, + CommentLikeForm, + CommentForm as CommentFormI, + SaveCommentForm, + BanFromCommunityForm, + BanUserForm, + CommunityUser, + UserView, + AddModToCommunityForm, + AddAdminForm, + TransferCommunityForm, + TransferSiteForm, + BanType, +} from '../interfaces'; import { WebSocketService, UserService } from '../services'; import { mdToHtml, getUnixTime, canMod, isMod } from '../utils'; import * as moment from 'moment'; @@ -37,7 +51,6 @@ interface CommentNodeProps { } export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { - private emptyState: CommentNodeState = { showReply: false, showEdit: false, @@ -51,7 +64,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { viewSource: false, showConfirmTransferSite: false, showConfirmTransferCommunity: false, - } + }; constructor(props: any, context: any) { super(props, context); @@ -65,176 +78,405 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { render() { let node = this.props.node; return ( - <div className={`comment ${node.comment.parent_id && !this.props.noIndent ? 'ml-4' : ''}`}> - {!this.state.collapsed && - <div className={`vote-bar mr-2 float-left small text-center ${this.props.viewOnly && 'no-click'}`}> - <button className={`btn p-0 ${node.comment.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentLike)}> - <svg class="icon upvote"><use xlinkHref="#icon-arrow-up"></use></svg> + <div + className={`comment ${ + node.comment.parent_id && !this.props.noIndent ? 'ml-4' : '' + }`} + > + {!this.state.collapsed && ( + <div + className={`vote-bar mr-2 float-left small text-center ${this.props + .viewOnly && 'no-click'}`} + > + <button + className={`btn p-0 ${ + node.comment.my_vote == 1 ? 'text-info' : 'text-muted' + }`} + onClick={linkEvent(node, this.handleCommentLike)} + > + <svg class="icon upvote"> + <use xlinkHref="#icon-arrow-up"></use> + </svg> </button> - <div class={`font-weight-bold text-muted`}>{node.comment.score}</div> - <button className={`btn p-0 ${node.comment.my_vote == -1 ? 'text-danger' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentDisLike)}> - <svg class="icon downvote"><use xlinkHref="#icon-arrow-down"></use></svg> + <div class={`font-weight-bold text-muted`}> + {node.comment.score} + </div> + <button + className={`btn p-0 ${ + node.comment.my_vote == -1 ? 'text-danger' : 'text-muted' + }`} + onClick={linkEvent(node, this.handleCommentDisLike)} + > + <svg class="icon downvote"> + <use xlinkHref="#icon-arrow-down"></use> + </svg> </button> </div> - } - <div id={`comment-${node.comment.id}`} className={`details comment-node ml-4 ${this.isCommentNew ? 'mark' : ''}`}> + )} + <div + id={`comment-${node.comment.id}`} + className={`details comment-node ml-4 ${ + this.isCommentNew ? 'mark' : '' + }`} + > <ul class="list-inline mb-0 text-muted small"> <li className="list-inline-item"> - <Link className="text-info" to={`/u/${node.comment.creator_name}`}>{node.comment.creator_name}</Link> + <Link + className="text-info" + to={`/u/${node.comment.creator_name}`} + > + {node.comment.creator_name} + </Link> </li> - {this.isMod && - <li className="list-inline-item badge badge-light"><T i18nKey="mod">#</T></li> - } - {this.isAdmin && - <li className="list-inline-item badge badge-light"><T i18nKey="admin">#</T></li> - } - {this.isPostCreator && - <li className="list-inline-item badge badge-light"><T i18nKey="creator">#</T></li> - } - {(node.comment.banned_from_community || node.comment.banned) && - <li className="list-inline-item badge badge-danger"><T i18nKey="banned">#</T></li> - } + {this.isMod && ( + <li className="list-inline-item badge badge-light"> + <T i18nKey="mod">#</T> + </li> + )} + {this.isAdmin && ( + <li className="list-inline-item badge badge-light"> + <T i18nKey="admin">#</T> + </li> + )} + {this.isPostCreator && ( + <li className="list-inline-item badge badge-light"> + <T i18nKey="creator">#</T> + </li> + )} + {(node.comment.banned_from_community || node.comment.banned) && ( + <li className="list-inline-item badge badge-danger"> + <T i18nKey="banned">#</T> + </li> + )} <li className="list-inline-item"> - <span>( - <span className="text-info">+{node.comment.upvotes}</span> + <span> + (<span className="text-info">+{node.comment.upvotes}</span> <span> | </span> <span className="text-danger">-{node.comment.downvotes}</span> <span>) </span> </span> </li> <li className="list-inline-item"> - <span><MomentTime data={node.comment} /></span> + <span> + <MomentTime data={node.comment} /> + </span> </li> <li className="list-inline-item"> - <div className="pointer text-monospace" onClick={linkEvent(this, this.handleCommentCollapse)}>{this.state.collapsed ? '[+]' : '[-]'}</div> + <div + className="pointer text-monospace" + onClick={linkEvent(this, this.handleCommentCollapse)} + > + {this.state.collapsed ? '[+]' : '[-]'} + </div> </li> </ul> - {this.state.showEdit && <CommentForm node={node} edit onReplyCancel={this.handleReplyCancel} disabled={this.props.locked} />} - {!this.state.showEdit && !this.state.collapsed && + {this.state.showEdit && ( + <CommentForm + node={node} + edit + onReplyCancel={this.handleReplyCancel} + disabled={this.props.locked} + /> + )} + {!this.state.showEdit && !this.state.collapsed && ( <div> - {this.state.viewSource ? <pre>{this.commentUnlessRemoved}</pre> : - <div className="md-div" dangerouslySetInnerHTML={mdToHtml(this.commentUnlessRemoved)} /> - } + {this.state.viewSource ? ( + <pre>{this.commentUnlessRemoved}</pre> + ) : ( + <div + className="md-div" + dangerouslySetInnerHTML={mdToHtml(this.commentUnlessRemoved)} + /> + )} <ul class="list-inline mb-1 text-muted small font-weight-bold"> - {UserService.Instance.user && !this.props.viewOnly && + {UserService.Instance.user && !this.props.viewOnly && ( <> <li className="list-inline-item"> - <span class="pointer" onClick={linkEvent(this, this.handleReplyClick)}><T i18nKey="reply">#</T></span> + <span + class="pointer" + onClick={linkEvent(this, this.handleReplyClick)} + > + <T i18nKey="reply">#</T> + </span> </li> <li className="list-inline-item mr-2"> - <span class="pointer" onClick={linkEvent(this, this.handleSaveCommentClick)}>{node.comment.saved ? i18n.t('unsave') : i18n.t('save')}</span> + <span + class="pointer" + onClick={linkEvent(this, this.handleSaveCommentClick)} + > + {node.comment.saved ? i18n.t('unsave') : i18n.t('save')} + </span> </li> - {this.myComment && + {this.myComment && ( <> <li className="list-inline-item"> - <span class="pointer" onClick={linkEvent(this, this.handleEditClick)}><T i18nKey="edit">#</T></span> + <span + class="pointer" + onClick={linkEvent(this, this.handleEditClick)} + > + <T i18nKey="edit">#</T> + </span> </li> <li className="list-inline-item"> - <span class="pointer" onClick={linkEvent(this, this.handleDeleteClick)}> - {!node.comment.deleted ? i18n.t('delete') : i18n.t('restore')} + <span + class="pointer" + onClick={linkEvent(this, this.handleDeleteClick)} + > + {!node.comment.deleted + ? i18n.t('delete') + : i18n.t('restore')} </span> </li> </> - } + )} {/* Admins and mods can remove comments */} - {(this.canMod || this.canAdmin) && + {(this.canMod || this.canAdmin) && ( <li className="list-inline-item"> - {!node.comment.removed ? - <span class="pointer" onClick={linkEvent(this, this.handleModRemoveShow)}><T i18nKey="remove">#</T></span> : - <span class="pointer" onClick={linkEvent(this, this.handleModRemoveSubmit)}><T i18nKey="restore">#</T></span> - } + {!node.comment.removed ? ( + <span + class="pointer" + onClick={linkEvent(this, this.handleModRemoveShow)} + > + <T i18nKey="remove">#</T> + </span> + ) : ( + <span + class="pointer" + onClick={linkEvent( + this, + this.handleModRemoveSubmit + )} + > + <T i18nKey="restore">#</T> + </span> + )} </li> - } + )} {/* Mods can ban from community, and appoint as mods to community */} - {this.canMod && + {this.canMod && ( <> - {!this.isMod && + {!this.isMod && ( <li className="list-inline-item"> - {!node.comment.banned_from_community ? - <span class="pointer" onClick={linkEvent(this, this.handleModBanFromCommunityShow)}><T i18nKey="ban">#</T></span> : - <span class="pointer" onClick={linkEvent(this, this.handleModBanFromCommunitySubmit)}><T i18nKey="unban">#</T></span> - } + {!node.comment.banned_from_community ? ( + <span + class="pointer" + onClick={linkEvent( + this, + this.handleModBanFromCommunityShow + )} + > + <T i18nKey="ban">#</T> + </span> + ) : ( + <span + class="pointer" + onClick={linkEvent( + this, + this.handleModBanFromCommunitySubmit + )} + > + <T i18nKey="unban">#</T> + </span> + )} </li> - } - {!node.comment.banned_from_community && + )} + {!node.comment.banned_from_community && ( <li className="list-inline-item"> - <span class="pointer" onClick={linkEvent(this, this.handleAddModToCommunity)}>{this.isMod ? i18n.t('remove_as_mod') : i18n.t('appoint_as_mod')}</span> + <span + class="pointer" + onClick={linkEvent( + this, + this.handleAddModToCommunity + )} + > + {this.isMod + ? i18n.t('remove_as_mod') + : i18n.t('appoint_as_mod')} + </span> </li> - } + )} </> - } + )} {/* Community creators and admins can t |