-import { Component, linkEvent } from 'inferno';
-import { Subscription } from "rxjs";
+import { Component } from 'inferno';
+import { Helmet } from 'inferno-helmet';
+import { Subscription } from 'rxjs';
import { retryWhen, delay, take } from 'rxjs/operators';
-import { CommunityForm, UserOperation, Category, ListCategoriesResponse } from '../interfaces';
+import { CommunityForm } from './community-form';
+import {
+ Community,
+ UserOperation,
+ WebSocketJsonResponse,
+ GetSiteResponse,
+ Site,
+} from 'lemmy-js-client';
+import { toast, wsJsonToRes } from '../utils';
import { WebSocketService, UserService } from '../services';
-import { msgOp } from '../utils';
+import { i18n } from '../i18next';
-import { Community } from '../interfaces';
-
-interface State {
- communityForm: CommunityForm;
- categories: Array<Category>;
+interface CreateCommunityState {
+ site: Site;
}
-export class CreateCommunity extends Component<any, State> {
+export class CreateCommunity extends Component<any, CreateCommunityState> {
private subscription: Subscription;
-
- private emptyState: State = {
- communityForm: {
- name: null,
- title: null,
- category_id: null
+ private emptyState: CreateCommunityState = {
+ site: {
+ id: undefined,
+ name: undefined,
+ creator_id: undefined,
+ published: undefined,
+ creator_name: undefined,
+ number_of_users: undefined,
+ number_of_posts: undefined,
+ number_of_comments: undefined,
+ number_of_communities: undefined,
+ enable_downvotes: undefined,
+ open_registration: undefined,
+ enable_nsfw: undefined,
},
- categories: []
- }
-
- constructor(props, context) {
+ };
+ constructor(props: any, context: any) {
super(props, context);
-
+ this.handleCommunityCreate = this.handleCommunityCreate.bind(this);
this.state = this.emptyState;
+ if (!UserService.Instance.user) {
+ toast(i18n.t('not_logged_in'), 'danger');
+ this.context.router.history.push(`/login`);
+ }
+
this.subscription = WebSocketService.Instance.subject
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
.subscribe(
- (msg) => this.parseMessage(msg),
- (err) => console.error(err),
- () => console.log("complete")
+ msg => this.parseMessage(msg),
+ err => console.error(err),
+ () => console.log('complete')
);
- WebSocketService.Instance.listCategories();
+ WebSocketService.Instance.getSite();
}
componentWillUnmount() {
this.subscription.unsubscribe();
}
+ get documentTitle(): string {
+ if (this.state.site.name) {
+ return `${i18n.t('create_community')} - ${this.state.site.name}`;
+ } else {
+ return 'Lemmy';
+ }
+ }
+
render() {
return (
<div class="container">
+ <Helmet title={this.documentTitle} />
<div class="row">
- <div class="col-12 col-lg-6 mb-4">
- {this.communityForm()}
+ <div class="col-12 col-lg-6 offset-lg-3 mb-4">
+ <h5>{i18n.t('create_community')}</h5>
+ <CommunityForm
+ onCreate={this.handleCommunityCreate}
+ enableNsfw={this.state.site.enable_nsfw}
+ />
</div>
</div>
</div>
- )
- }
-
- communityForm() {
- return (
- <div>
- <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
- <h3>Create Forum</h3>
- <div class="form-group row">
- <label class="col-sm-2 col-form-label">Name</label>
- <div class="col-sm-10">
- <input type="text" class="form-control" value={this.state.communityForm.name} onInput={linkEvent(this, this.handleCommunityNameChange)} required minLength={3} />
- </div>
- </div>
- <div class="form-group row">
- <label class="col-sm-2 col-form-label">Title / Headline</label>
- <div class="col-sm-10">
- <input type="text" value={this.state.communityForm.title} onInput={linkEvent(this, this.handleCommunityTitleChange)} class="form-control" required minLength={3} />
- </div>
- </div>
- <div class="form-group row">
- <label class="col-sm-2 col-form-label">Description / Sidebar</label>
- <div class="col-sm-10">
- <textarea value={this.state.communityForm.description} onInput={linkEvent(this, this.handleCommunityDescriptionChange)} class="form-control" rows={6} />
- </div>
- </div>
- <div class="form-group row">
- <label class="col-sm-2 col-form-label">Category</label>
- <div class="col-sm-10">
- <select class="form-control" value={this.state.communityForm.category_id} onInput={linkEvent(this, this.handleCommunityCategoryChange)}>
- {this.state.categories.map(category =>
- <option value={category.id}>{category.name}</option>
- )}
- </select>
- </div>
- </div>
- <div class="form-group row">
- <div class="col-sm-10">
- <button type="submit" class="btn btn-secondary">Create</button>
- </div>
- </div>
- </form>
- </div>
);
}
- handleCreateCommunitySubmit(i: CreateCommunity, event) {
- event.preventDefault();
- WebSocketService.Instance.createCommunity(i.state.communityForm);
- }
-
- handleCommunityNameChange(i: CreateCommunity, event) {
- i.state.communityForm.name = event.target.value;
- i.setState(i.state);
+ handleCommunityCreate(community: Community) {
+ this.props.history.push(`/c/${community.name}`);
}
- handleCommunityTitleChange(i: CreateCommunity, event) {
- i.state.communityForm.title = event.target.value;
- i.setState(i.state);
- }
-
- handleCommunityDescriptionChange(i: CreateCommunity, event) {
- i.state.communityForm.description = event.target.value;
- i.setState(i.state);
- }
-
- handleCommunityCategoryChange(i: CreateCommunity, event) {
- i.state.communityForm.category_id = Number(event.target.value);
- i.setState(i.state);
- }
-
- parseMessage(msg: any) {
- let op: UserOperation = msgOp(msg);
+ parseMessage(msg: WebSocketJsonResponse) {
console.log(msg);
+ let res = wsJsonToRes(msg);
if (msg.error) {
- alert(msg.error);
+ // Toast errors are already handled by community-form
return;
- } else if (op == UserOperation.ListCategories){
- let res: ListCategoriesResponse = msg;
- this.state.categories = res.categories;
- this.state.communityForm.category_id = res.categories[0].id;
+ } else if (res.op == UserOperation.GetSite) {
+ let data = res.data as GetSiteResponse;
+ this.state.site = data.site;
this.setState(this.state);
- } else if (op == UserOperation.CreateCommunity) {
- let community: Community = msg.community;
- this.props.history.push(`/community/${community.id}`);
}
}
-
}
projects / lemmy.git / blobdiff