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 { Spinner } from "./icon";
   6 import {
   7   CommunityView,
   8   UserOperation,
   9   SiteView,
  10   ListCategoriesResponse,
  11   Category,
  12 } from "lemmy-js-client";
  13 import {
  14   setIsoData,
  15   toast,
  16   wsJsonToRes,
  17   wsSubscribe,
  18   isBrowser,
  19   wsUserOp,
  20   wsClient,
  21 } from "../utils";
  22 import { WebSocketService, UserService } from "../services";
  23 import { i18n } from "../i18next";
  24 import { InitialFetchRequest } from "shared/interfaces";
  25
  26 interface CreateCommunityState {
  27   site_view: SiteView;
  28   categories: Category[];
  29   loading: boolean;
  30 }
  31
  32 export class CreateCommunity extends Component<any, CreateCommunityState> {
  33   private isoData = setIsoData(this.context);
  34   private subscription: Subscription;
  35   private emptyState: CreateCommunityState = {
  36     site_view: this.isoData.site_res.site_view,
  37     categories: [],
  38     loading: true,
  39   };
  40   constructor(props: any, context: any) {
  41     super(props, context);
  42     this.handleCommunityCreate = this.handleCommunityCreate.bind(this);
  43     this.state = this.emptyState;
  44
  45     this.parseMessage = this.parseMessage.bind(this);
  46     this.subscription = wsSubscribe(this.parseMessage);
  47
  48     if (!UserService.Instance.user && isBrowser()) {
  49       toast(i18n.t("not_logged_in"), "danger");
  50       this.context.router.history.push(`/login`);
  51     }
  52
  53     // Only fetch the data if coming from another route
  54     if (this.isoData.path == this.context.router.route.match.url) {
  55       this.state.categories = this.isoData.routeData[0].categories;
  56       this.state.loading = false;
  57     } else {
  58       WebSocketService.Instance.send(wsClient.listCategories());
  59     }
  60   }
  61
  62   componentWillUnmount() {
  63     if (isBrowser()) {
  64       this.subscription.unsubscribe();
  65     }
  66   }
  67
  68   get documentTitle(): string {
  69     return `${i18n.t("create_community")} - ${this.state.site_view.site.name}`;
  70   }
  71
  72   render() {
  73     return (
  74       <div class="container">
  75         <HtmlTags
  76           title={this.documentTitle}
  77           path={this.context.router.route.match.url}
  78         />
  79         {this.state.loading ? (
  80           <h5>
  81             <Spinner />
  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 }