src/shared/components/create-community.tsx

   1 import { Component } from 'inferno';
   2 import { Subscription } from 'rxjs';
   3 import { CommunityForm } from './community-form';
   4 import { HtmlTags } from './html-tags';
   5 import {
   6   CommunityView,
   7   UserOperation,
   8   SiteView,
   9   ListCategoriesResponse,
  10   Category,
  11 } from 'lemmy-js-client';
  12 import {
  13   setIsoData,
  14   toast,
  15   wsJsonToRes,
  16   wsSubscribe,
  17   isBrowser,
  18   wsUserOp,
  19 } from '../utils';
  20 import { WebSocketService, UserService } from '../services';
  21 import { i18n } from '../i18next';
  22 import { InitialFetchRequest } from 'shared/interfaces';
  23
  24 interface CreateCommunityState {
  25   site_view: SiteView;
  26   categories: Category[];
  27   loading: boolean;
  28 }
  29
  30 export class CreateCommunity extends Component<any, CreateCommunityState> {
  31   private isoData = setIsoData(this.context);
  32   private subscription: Subscription;
  33   private emptyState: CreateCommunityState = {
  34     site_view: this.isoData.site_res.site_view,
  35     categories: [],
  36     loading: true,
  37   };
  38   constructor(props: any, context: any) {
  39     super(props, context);
  40     this.handleCommunityCreate = this.handleCommunityCreate.bind(this);
  41     this.state = this.emptyState;
  42
  43     this.parseMessage = this.parseMessage.bind(this);
  44     this.subscription = wsSubscribe(this.parseMessage);
  45
  46     if (!UserService.Instance.user && isBrowser()) {
  47       toast(i18n.t('not_logged_in'), 'danger');
  48       this.context.router.history.push(`/login`);
  49     }
  50
  51     // Only fetch the data if coming from another route
  52     if (this.isoData.path == this.context.router.route.match.url) {
  53       this.state.categories = this.isoData.routeData[0].categories;
  54       this.state.loading = false;
  55     } else {
  56       WebSocketService.Instance.client.listCategories();
  57     }
  58   }
  59
  60   componentWillUnmount() {
  61     if (isBrowser()) {
  62       this.subscription.unsubscribe();
  63     }
  64   }
  65
  66   get documentTitle(): string {
  67     return `${i18n.t('create_community')} - ${this.state.site_view.site.name}`;
  68   }
  69
  70   render() {
  71     return (
  72       <div class="container">
  73         <HtmlTags
  74           title={this.documentTitle}
  75           path={this.context.router.route.match.url}
  76         />
  77         {this.state.loading ? (
  78           <h5>
  79             <svg class="icon icon-spinner spin">
  80               <use xlinkHref="#icon-spinner"></use>
  81             </svg>
  82           </h5>
  83         ) : (
  84           <div class="row">
  85             <div class="col-12 col-lg-6 offset-lg-3 mb-4">
  86               <h5>{i18n.t('create_community')}</h5>
  87               <CommunityForm
  88                 categories={this.state.categories}
  89                 onCreate={this.handleCommunityCreate}
  90                 enableNsfw={this.state.site_view.site.enable_nsfw}
  91               />
  92             </div>
  93           </div>
  94         )}
  95       </div>
  96     );
  97   }
  98
  99   handleCommunityCreate(cv: CommunityView) {
 100     this.props.history.push(`/c/${cv.community.name}`);
 101   }
 102
 103   static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
 104     return [req.client.listCategories()];
 105   }
 106
 107   parseMessage(msg: any) {
 108     let op = wsUserOp(msg);
 109     if (msg.error) {
 110       // Toast errors are already handled by community-form
 111       return;
 112     } else if (op == UserOperation.ListCategories) {
 113       let data = wsJsonToRes<ListCategoriesResponse>(msg).data;
 114       this.state.categories = data.categories;
 115       this.state.loading = false;
 116       this.setState(this.state);
 117     }
 118   }
 119 }