ui/src/components/community-form.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { Prompt } from 'inferno-router';
   3 import { Subscription } from 'rxjs';
   4 import { retryWhen, delay, take } from 'rxjs/operators';
   5 import {
   6   CommunityForm as CommunityFormI,
   7   UserOperation,
   8   Category,
   9   ListCategoriesResponse,
  10   CommunityResponse,
  11   WebSocketJsonResponse,
  12 } from '../interfaces';
  13 import { WebSocketService } from '../services';
  14 import { wsJsonToRes, capitalizeFirstLetter, toast, randomStr } from '../utils';
  15 import { i18n } from '../i18next';
  16
  17 import { Community } from '../interfaces';
  18 import { MarkdownTextArea } from './markdown-textarea';
  19
  20 interface CommunityFormProps {
  21   community?: Community; // If a community is given, that means this is an edit
  22   onCancel?(): any;
  23   onCreate?(community: Community): any;
  24   onEdit?(community: Community): any;
  25   enableNsfw: boolean;
  26 }
  27
  28 interface CommunityFormState {
  29   communityForm: CommunityFormI;
  30   categories: Array<Category>;
  31   loading: boolean;
  32 }
  33
  34 export class CommunityForm extends Component<
  35   CommunityFormProps,
  36   CommunityFormState
  37 > {
  38   private id = `community-form-${randomStr()}`;
  39   private subscription: Subscription;
  40
  41   private emptyState: CommunityFormState = {
  42     communityForm: {
  43       name: null,
  44       title: null,
  45       category_id: null,
  46       nsfw: false,
  47     },
  48     categories: [],
  49     loading: false,
  50   };
  51
  52   constructor(props: any, context: any) {
  53     super(props, context);
  54
  55     this.state = this.emptyState;
  56
  57     this.handleCommunityDescriptionChange = this.handleCommunityDescriptionChange.bind(
  58       this
  59     );
  60
  61     if (this.props.community) {
  62       this.state.communityForm = {
  63         name: this.props.community.name,
  64         title: this.props.community.title,
  65         category_id: this.props.community.category_id,
  66         description: this.props.community.description,
  67         edit_id: this.props.community.id,
  68         nsfw: this.props.community.nsfw,
  69         auth: null,
  70       };
  71     }
  72
  73     this.subscription = WebSocketService.Instance.subject
  74       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  75       .subscribe(
  76         msg => this.parseMessage(msg),
  77         err => console.error(err),
  78         () => console.log('complete')
  79       );
  80
  81     WebSocketService.Instance.listCategories();
  82   }
  83
  84   componentDidUpdate() {
  85     if (
  86       !this.state.loading &&
  87       (this.state.communityForm.name ||
  88         this.state.communityForm.title ||
  89         this.state.communityForm.description)
  90     ) {
  91       window.onbeforeunload = () => true;
  92     } else {
  93       window.onbeforeunload = undefined;
  94     }
  95   }
  96
  97   componentWillUnmount() {
  98     this.subscription.unsubscribe();
  99     window.onbeforeunload = null;
 100   }
 101
 102   render() {
 103     return (
 104       <>
 105         <Prompt
 106           when={
 107             !this.state.loading &&
 108             (this.state.communityForm.name ||
 109               this.state.communityForm.title ||
 110               this.state.communityForm.description)
 111           }
 112           message={i18n.t('block_leaving')}
 113         />
 114         <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
 115           {!this.props.community && (
 116             <div class="form-group row">
 117               <label class="col-12 col-form-label" htmlFor="community-name">
 118                 {i18n.t('name')}
 119                 <span
 120                   class="pointer unselectable ml-2 text-muted"
 121                   data-tippy-content={i18n.t('name_explain')}
 122                 >
 123                   <svg class="icon icon-inline">
 124                     <use xlinkHref="#icon-help-circle"></use>
 125                   </svg>
 126                 </span>
 127               </label>
 128               <div class="col-12">
 129                 <input
 130                   type="text"
 131                   id="community-name"
 132                   class="form-control"
 133                   value={this.state.communityForm.name}
 134                   onInput={linkEvent(this, this.handleCommunityNameChange)}
 135                   required
 136                   minLength={3}
 137                   maxLength={20}
 138                   pattern="[a-z0-9_]+"
 139                   title={i18n.t('community_reqs')}
 140                 />
 141               </div>
 142             </div>
 143           )}
 144           <div class="form-group row">
 145             <label class="col-12 col-form-label" htmlFor="community-title">
 146               {i18n.t('display_name')}
 147               <span
 148                 class="pointer unselectable ml-2 text-muted"
 149                 data-tippy-content={i18n.t('display_name_explain')}
 150               >
 151                 <svg class="icon icon-inline">
 152                   <use xlinkHref="#icon-help-circle"></use>
 153                 </svg>
 154               </span>
 155             </label>
 156             <div class="col-12">
 157               <input
 158                 type="text"
 159                 id="community-title"
 160                 value={this.state.communityForm.title}
 161                 onInput={linkEvent(this, this.handleCommunityTitleChange)}
 162                 class="form-control"
 163                 required
 164                 minLength={3}
 165                 maxLength={100}
 166               />
 167             </div>
 168           </div>
 169           <div class="form-group row">
 170             <label class="col-12 col-form-label" htmlFor={this.id}>
 171               {i18n.t('sidebar')}
 172             </label>
 173             <div class="col-12">
 174               <MarkdownTextArea
 175                 initialContent={this.state.communityForm.description}
 176                 onContentChange={this.handleCommunityDescriptionChange}
 177               />
 178             </div>
 179           </div>
 180           <div class="form-group row">
 181             <label class="col-12 col-form-label" htmlFor="community-category">
 182               {i18n.t('category')}
 183             </label>
 184             <div class="col-12">
 185               <select
 186                 class="form-control"
 187                 id="community-category"
 188                 value={this.state.communityForm.category_id}
 189                 onInput={linkEvent(this, this.handleCommunityCategoryChange)}
 190               >
 191                 {this.state.categories.map(category => (
 192                   <option value={category.id}>{category.name}</option>
 193                 ))}
 194               </select>
 195             </div>
 196           </div>
 197
 198           {this.props.enableNsfw && (
 199             <div class="form-group row">
 200               <div class="col-12">
 201                 <div class="form-check">
 202                   <input
 203                     class="form-check-input"
 204                     id="community-nsfw"
 205                     type="checkbox"
 206                     checked={this.state.communityForm.nsfw}
 207                     onChange={linkEvent(this, this.handleCommunityNsfwChange)}
 208                   />
 209                   <label class="form-check-label" htmlFor="community-nsfw">
 210                     {i18n.t('nsfw')}
 211                   </label>
 212                 </div>
 213               </div>
 214             </div>
 215           )}
 216           <div class="form-group row">
 217             <div class="col-12">
 218               <button
 219                 type="submit"
 220                 class="btn btn-secondary mr-2"
 221                 disabled={this.state.loading}
 222               >
 223                 {this.state.loading ? (
 224                   <svg class="icon icon-spinner spin">
 225                     <use xlinkHref="#icon-spinner"></use>
 226                   </svg>
 227                 ) : this.props.community ? (
 228                   capitalizeFirstLetter(i18n.t('save'))
 229                 ) : (
 230                   capitalizeFirstLetter(i18n.t('create'))
 231                 )}
 232               </button>
 233               {this.props.community && (
 234                 <button
 235                   type="button"
 236                   class="btn btn-secondary"
 237                   onClick={linkEvent(this, this.handleCancel)}
 238                 >
 239                   {i18n.t('cancel')}
 240                 </button>
 241               )}
 242             </div>
 243           </div>
 244         </form>
 245       </>
 246     );
 247   }
 248
 249   handleCreateCommunitySubmit(i: CommunityForm, event: any) {
 250     event.preventDefault();
 251     i.state.loading = true;
 252     if (i.props.community) {
 253       WebSocketService.Instance.editCommunity(i.state.communityForm);
 254     } else {
 255       WebSocketService.Instance.createCommunity(i.state.communityForm);
 256     }
 257     i.setState(i.state);
 258   }
 259
 260   handleCommunityNameChange(i: CommunityForm, event: any) {
 261     i.state.communityForm.name = event.target.value;
 262     i.setState(i.state);
 263   }
 264
 265   handleCommunityTitleChange(i: CommunityForm, event: any) {
 266     i.state.communityForm.title = event.target.value;
 267     i.setState(i.state);
 268   }
 269
 270   handleCommunityDescriptionChange(val: string) {
 271     this.state.communityForm.description = val;
 272     this.setState(this.state);
 273   }
 274
 275   handleCommunityCategoryChange(i: CommunityForm, event: any) {
 276     i.state.communityForm.category_id = Number(event.target.value);
 277     i.setState(i.state);
 278   }
 279
 280   handleCommunityNsfwChange(i: CommunityForm, event: any) {
 281     i.state.communityForm.nsfw = event.target.checked;
 282     i.setState(i.state);
 283   }
 284
 285   handleCancel(i: CommunityForm) {
 286     i.props.onCancel();
 287   }
 288
 289   parseMessage(msg: WebSocketJsonResponse) {
 290     let res = wsJsonToRes(msg);
 291     console.log(msg);
 292     if (msg.error) {
 293       toast(i18n.t(msg.error), 'danger');
 294       this.state.loading = false;
 295       this.setState(this.state);
 296       return;
 297     } else if (res.op == UserOperation.ListCategories) {
 298       let data = res.data as ListCategoriesResponse;
 299       this.state.categories = data.categories;
 300       if (!this.props.community) {
 301         this.state.communityForm.category_id = data.categories[0].id;
 302       }
 303       this.setState(this.state);
 304     } else if (res.op == UserOperation.CreateCommunity) {
 305       let data = res.data as CommunityResponse;
 306       this.state.loading = false;
 307       this.props.onCreate(data.community);
 308     }
 309     // TODO is this necessary
 310     else if (res.op == UserOperation.EditCommunity) {
 311       let data = res.data as CommunityResponse;
 312       this.state.loading = false;
 313       this.props.onEdit(data.community);
 314     }
 315   }
 316 }