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')}