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