ui/src/components/comment-form.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import {
   3   CommentNode as CommentNodeI,
   4   CommentForm as CommentFormI,
   5 } from '../interfaces';
   6 import {
   7   capitalizeFirstLetter,
   8   mdToHtml,
   9   randomStr,
  10   markdownHelpUrl,
  11   toast,
  12   setupTribute,
  13 } from '../utils';
  14 import { WebSocketService, UserService } from '../services';
  15 import autosize from 'autosize';
  16 import Tribute from 'tributejs/src/Tribute.js';
  17 import { i18n } from '../i18next';
  18 import { T } from 'inferno-i18next';
  19
  20 interface CommentFormProps {
  21   postId?: number;
  22   node?: CommentNodeI;
  23   onReplyCancel?(): any;
  24   edit?: boolean;
  25   disabled?: boolean;
  26 }
  27
  28 interface CommentFormState {
  29   commentForm: CommentFormI;
  30   buttonTitle: string;
  31   previewMode: boolean;
  32   imageLoading: boolean;
  33 }
  34
  35 export class CommentForm extends Component<CommentFormProps, CommentFormState> {
  36   private id = `comment-form-${randomStr()}`;
  37   private tribute: Tribute;
  38   private emptyState: CommentFormState = {
  39     commentForm: {
  40       auth: null,
  41       content: null,
  42       post_id: this.props.node
  43         ? this.props.node.comment.post_id
  44         : this.props.postId,
  45       creator_id: UserService.Instance.user
  46         ? UserService.Instance.user.id
  47         : null,
  48     },
  49     buttonTitle: !this.props.node
  50       ? capitalizeFirstLetter(i18n.t('post'))
  51       : this.props.edit
  52       ? capitalizeFirstLetter(i18n.t('edit'))
  53       : capitalizeFirstLetter(i18n.t('reply')),
  54     previewMode: false,
  55     imageLoading: false,
  56   };
  57
  58   constructor(props: any, context: any) {
  59     super(props, context);
  60
  61     this.tribute = setupTribute();
  62     this.state = this.emptyState;
  63
  64     if (this.props.node) {
  65       if (this.props.edit) {
  66         this.state.commentForm.edit_id = this.props.node.comment.id;
  67         this.state.commentForm.parent_id = this.props.node.comment.parent_id;
  68         this.state.commentForm.content = this.props.node.comment.content;
  69         this.state.commentForm.creator_id = this.props.node.comment.creator_id;
  70       } else {
  71         // A reply gets a new parent id
  72         this.state.commentForm.parent_id = this.props.node.comment.id;
  73       }
  74     }
  75   }
  76
  77   componentDidMount() {
  78     var textarea: any = document.getElementById(this.id);
  79     autosize(textarea);
  80     this.tribute.attach(textarea);
  81     textarea.addEventListener('tribute-replaced', () => {
  82       this.state.commentForm.content = textarea.value;
  83       this.setState(this.state);
  84       autosize.update(textarea);
  85     });
  86   }
  87
  88   render() {
  89     return (
  90       <div class="mb-3">
  91         <form onSubmit={linkEvent(this, this.handleCommentSubmit)}>
  92           <div class="form-group row">
  93             <div className={`col-sm-12`}>
  94               <textarea
  95                 id={this.id}
  96                 className={`form-control ${this.state.previewMode && 'd-none'}`}
  97                 value={this.state.commentForm.content}
  98                 onInput={linkEvent(this, this.handleCommentContentChange)}
  99                 onPaste={linkEvent(this, this.handleImageUploadPaste)}
 100                 required
 101                 disabled={this.props.disabled}
 102                 rows={2}
 103                 maxLength={10000}
 104               />
 105               {this.state.previewMode && (
 106                 <div
 107                   className="md-div"
 108                   dangerouslySetInnerHTML={mdToHtml(
 109                     this.state.commentForm.content
 110                   )}
 111                 />
 112               )}
 113             </div>
 114           </div>
 115           <div class="row">
 116             <div class="col-sm-12">
 117               <button
 118                 type="submit"
 119                 class="btn btn-sm btn-secondary mr-2"
 120                 disabled={this.props.disabled}
 121               >
 122                 {this.state.buttonTitle}
 123               </button>
 124               {this.state.commentForm.content && (
 125                 <button
 126                   className={`btn btn-sm mr-2 btn-secondary ${this.state
 127                     .previewMode && 'active'}`}
 128                   onClick={linkEvent(this, this.handlePreviewToggle)}
 129                 >
 130                   <T i18nKey="preview">#</T>
 131                 </button>
 132               )}
 133               {this.props.node && (
 134                 <button
 135                   type="button"
 136                   class="btn btn-sm btn-secondary mr-2"
 137                   onClick={linkEvent(this, this.handleReplyCancel)}
 138                 >
 139                   <T i18nKey="cancel">#</T>
 140                 </button>
 141               )}
 142               <a
 143                 href={markdownHelpUrl}
 144                 target="_blank"
 145                 class="d-inline-block float-right text-muted small font-weight-bold"
 146               >
 147                 <T i18nKey="formatting_help">#</T>
 148               </a>
 149               <form class="d-inline-block mr-2 float-right text-muted small font-weight-bold">
 150                 <label
 151                   htmlFor={`file-upload-${this.id}`}
 152                   className={`${UserService.Instance.user && 'pointer'}`}
 153                 >
 154                   <T i18nKey="upload_image">#</T>
 155                 </label>
 156                 <input
 157                   id={`file-upload-${this.id}`}
 158                   type="file"
 159                   accept="image/*,video/*"
 160                   name="file"
 161                   class="d-none"
 162                   disabled={!UserService.Instance.user}
 163                   onChange={linkEvent(this, this.handleImageUpload)}
 164                 />
 165               </form>
 166               {this.state.imageLoading && (
 167                 <svg class="icon icon-spinner spin">
 168                   <use xlinkHref="#icon-spinner"></use>
 169                 </svg>
 170               )}
 171             </div>
 172           </div>
 173         </form>
 174       </div>
 175     );
 176   }
 177
 178   handleCommentSubmit(i: CommentForm, event: any) {
 179     event.preventDefault();
 180     if (i.props.edit) {
 181       WebSocketService.Instance.editComment(i.state.commentForm);
 182     } else {
 183       WebSocketService.Instance.createComment(i.state.commentForm);
 184     }
 185
 186     i.state.previewMode = false;
 187     i.state.commentForm.content = undefined;
 188     event.target.reset();
 189     i.setState(i.state);
 190     if (i.props.node) {
 191       i.props.onReplyCancel();
 192     }
 193
 194     autosize.update(document.querySelector('textarea'));
 195   }
 196
 197   handleCommentContentChange(i: CommentForm, event: any) {
 198     i.state.commentForm.content = event.target.value;
 199     i.setState(i.state);
 200   }
 201
 202   handlePreviewToggle(i: CommentForm, event: any) {
 203     event.preventDefault();
 204     i.state.previewMode = !i.state.previewMode;
 205     i.setState(i.state);
 206   }
 207
 208   handleReplyCancel(i: CommentForm) {
 209     i.props.onReplyCancel();
 210   }
 211
 212   handleImageUploadPaste(i: CommentForm, event: any) {
 213     let image = event.clipboardData.files[0];
 214     if (image) {
 215       i.handleImageUpload(i, image);
 216     }
 217   }
 218
 219   handleImageUpload(i: CommentForm, event: any) {
 220     let file: any;
 221     if (event.target) {
 222       event.preventDefault();
 223       file = event.target.files[0];
 224     } else {
 225       file = event;
 226     }
 227
 228     const imageUploadUrl = `/pictshare/api/upload.php`;
 229     const formData = new FormData();
 230     formData.append('file', file);
 231
 232     i.state.imageLoading = true;
 233     i.setState(i.state);
 234
 235     fetch(imageUploadUrl, {
 236       method: 'POST',
 237       body: formData,
 238     })
 239       .then(res => res.json())
 240       .then(res => {
 241         let url = `${window.location.origin}/pictshare/${res.url}`;
 242         let imageMarkdown =
 243           res.filetype == 'mp4' ? `[vid](${url}/raw)` : `![](${url})`;
 244         let content = i.state.commentForm.content;
 245         content = content ? `${content}\n${imageMarkdown}` : imageMarkdown;
 246         i.state.commentForm.content = content;
 247         i.state.imageLoading = false;
 248         i.setState(i.state);
 249         var textarea: any = document.getElementById(i.id);
 250         autosize.update(textarea);
 251       })
 252       .catch(error => {
 253         i.state.imageLoading = false;
 254         i.setState(i.state);
 255         toast(error, 'danger');
 256       });
 257   }
 258 }