-import { Component, linkEvent } from 'inferno';
-import { Prompt } from 'inferno-router';
-import { Subscription } from 'rxjs';
-import { retryWhen, delay, take } from 'rxjs/operators';
+import { Component, linkEvent } from "inferno";
+import { Prompt } from "inferno-router";
+import { Subscription } from "rxjs";
import {
- CommunityForm as CommunityFormI,
+ EditCommunity,
+ CreateCommunity,
UserOperation,
- Category,
- ListCategoriesResponse,
CommunityResponse,
- WebSocketJsonResponse,
- Community,
-} from 'lemmy-js-client';
-import { WebSocketService } from '../services';
-import { wsJsonToRes, capitalizeFirstLetter, toast, randomStr } from '../utils';
-import { i18n } from '../i18next';
+ CommunityView,
+} from "lemmy-js-client";
+import { WebSocketService } from "../services";
+import {
+ wsJsonToRes,
+ capitalizeFirstLetter,
+ toast,
+ randomStr,
+ wsSubscribe,
+ wsUserOp,
+ wsClient,
+ authField,
+} from "../utils";
+import { i18n } from "../i18next";
-import { MarkdownTextArea } from './markdown-textarea';
-import { ImageUploadForm } from './image-upload-form';
+import { MarkdownTextArea } from "./markdown-textarea";
+import { ImageUploadForm } from "./image-upload-form";
+import { Icon, Spinner } from "./icon";
interface CommunityFormProps {
- community?: Community; // If a community is given, that means this is an edit
+ community_view?: CommunityView; // If a community is given, that means this is an edit
onCancel?(): any;
- onCreate?(community: Community): any;
- onEdit?(community: Community): any;
+ onCreate?(community: CommunityView): any;
+ onEdit?(community: CommunityView): any;
enableNsfw: boolean;
}
interface CommunityFormState {
- communityForm: CommunityFormI;
- categories: Category[];
+ communityForm: CreateCommunity;
loading: boolean;
}
communityForm: {
name: null,
title: null,
- category_id: null,
nsfw: false,
icon: null,
banner: null,
+ auth: authField(false),
},
- categories: [],
loading: false,
};
this.handleBannerUpload = this.handleBannerUpload.bind(this);
this.handleBannerRemove = this.handleBannerRemove.bind(this);
- if (this.props.community) {
+ let cv = this.props.community_view;
+ if (cv) {
this.state.communityForm = {
- name: this.props.community.name,
- title: this.props.community.title,
- category_id: this.props.community.category_id,
- description: this.props.community.description,
- edit_id: this.props.community.id,
- nsfw: this.props.community.nsfw,
- icon: this.props.community.icon,
- banner: this.props.community.banner,
- auth: null,
+ name: cv.community.name,
+ title: cv.community.title,
+ description: cv.community.description,
+ nsfw: cv.community.nsfw,
+ icon: cv.community.icon,
+ banner: cv.community.banner,
+ auth: authField(),
};
}
- 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')
- );
-
- WebSocketService.Instance.listCategories();
+ this.parseMessage = this.parseMessage.bind(this);
+ this.subscription = wsSubscribe(this.parseMessage);
}
+ // TODO this should be checked out
componentDidUpdate() {
if (
!this.state.loading &&
this.state.communityForm.title ||
this.state.communityForm.description)
}
- message={i18n.t('block_leaving')}
+ message={i18n.t("block_leaving")}
/>
<form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
- {!this.props.community && (
+ {!this.props.community_view && (
<div class="form-group row">
<label class="col-12 col-form-label" htmlFor="community-name">
- {i18n.t('name')}
+ {i18n.t("name")}
<span
class="pointer unselectable ml-2 text-muted"
- data-tippy-content={i18n.t('name_explain')}
+ data-tippy-content={i18n.t("name_explain")}
>
- <svg class="icon icon-inline">
- <use xlinkHref="#icon-help-circle"></use>
- </svg>
+ <Icon icon="help-circle" classes="icon-inline" />
</span>
</label>
<div class="col-12">
minLength={3}
maxLength={20}
pattern="[a-z0-9_]+"
- title={i18n.t('community_reqs')}
+ title={i18n.t("community_reqs")}
/>
</div>
</div>
)}
<div class="form-group row">
<label class="col-12 col-form-label" htmlFor="community-title">
- {i18n.t('display_name')}
+ {i18n.t("display_name")}
<span
class="pointer unselectable ml-2 text-muted"
- data-tippy-content={i18n.t('display_name_explain')}
+ data-tippy-content={i18n.t("display_name_explain")}
>
- <svg class="icon icon-inline">
- <use xlinkHref="#icon-help-circle"></use>
- </svg>
+ <Icon icon="help-circle" classes="icon-inline" />
</span>
</label>
<div class="col-12">
</div>
</div>
<div class="form-group">
- <label>{i18n.t('icon')}</label>
+ <label>{i18n.t("icon")}</label>
<ImageUploadForm
- uploadTitle={i18n.t('upload_icon')}
+ uploadTitle={i18n.t("upload_icon")}
imageSrc={this.state.communityForm.icon}
onUpload={this.handleIconUpload}
onRemove={this.handleIconRemove}
/>
</div>
<div class="form-group">
- <label>{i18n.t('banner')}</label>
+ <label>{i18n.t("banner")}</label>
<ImageUploadForm
- uploadTitle={i18n.t('upload_banner')}
+ uploadTitle={i18n.t("upload_banner")}
imageSrc={this.state.communityForm.banner}
onUpload={this.handleBannerUpload}
onRemove={this.handleBannerRemove}
</div>
<div class="form-group row">
<label class="col-12 col-form-label" htmlFor={this.id}>
- {i18n.t('sidebar')}
+ {i18n.t("sidebar")}
</label>
<div class="col-12">
<MarkdownTextArea
/>
</div>
</div>
- <div class="form-group row">
- <label class="col-12 col-form-label" htmlFor="community-category">
- {i18n.t('category')}
- </label>
- <div class="col-12">
- <select
- class="form-control"
- id="community-category"
- 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>
{this.props.enableNsfw && (
<div class="form-group row">
onChange={linkEvent(this, this.handleCommunityNsfwChange)}
/>
<label class="form-check-label" htmlFor="community-nsfw">
- {i18n.t('nsfw')}
+ {i18n.t("nsfw")}
</label>
</div>
</div>
disabled={this.state.loading}
>
{this.state.loading ? (
- <svg class="icon icon-spinner spin">
- <use xlinkHref="#icon-spinner"></use>
- </svg>
- ) : this.props.community ? (
- capitalizeFirstLetter(i18n.t('save'))
+ <Spinner />
+ ) : this.props.community_view ? (
+ capitalizeFirstLetter(i18n.t("save"))
) : (
- capitalizeFirstLetter(i18n.t('create'))
+ capitalizeFirstLetter(i18n.t("create"))
)}
</button>
- {this.props.community && (
+ {this.props.community_view && (
<button
type="button"
class="btn btn-secondary"
onClick={linkEvent(this, this.handleCancel)}
>
- {i18n.t('cancel')}
+ {i18n.t("cancel")}
</button>
)}
</div>
handleCreateCommunitySubmit(i: CommunityForm, event: any) {
event.preventDefault();
i.state.loading = true;
- if (i.props.community) {
- WebSocketService.Instance.editCommunity(i.state.communityForm);
+ if (i.props.community_view) {
+ let form: EditCommunity = {
+ ...i.state.communityForm,
+ community_id: i.props.community_view.community.id,
+ };
+ WebSocketService.Instance.send(wsClient.editCommunity(form));
} else {
- WebSocketService.Instance.createCommunity(i.state.communityForm);
+ WebSocketService.Instance.send(
+ wsClient.createCommunity(i.state.communityForm)
+ );
}
i.setState(i.state);
}
this.setState(this.state);
}
- handleCommunityCategoryChange(i: CommunityForm, event: any) {
- i.state.communityForm.category_id = Number(event.target.value);
- i.setState(i.state);
- }
-
handleCommunityNsfwChange(i: CommunityForm, event: any) {
i.state.communityForm.nsfw = event.target.checked;
i.setState(i.state);
}
handleIconRemove() {
- this.state.communityForm.icon = '';
+ this.state.communityForm.icon = "";
this.setState(this.state);
}
}
handleBannerRemove() {
- this.state.communityForm.banner = '';
+ this.state.communityForm.banner = "";
this.setState(this.state);
}
- parseMessage(msg: WebSocketJsonResponse) {
- let res = wsJsonToRes(msg);
- console.log(msg);
+ parseMessage(msg: any) {
+ let op = wsUserOp(msg);
if (msg.error) {
- toast(i18n.t(msg.error), 'danger');
+ toast(i18n.t(msg.error), "danger");
this.state.loading = false;
this.setState(this.state);
return;
- } else if (res.op == UserOperation.ListCategories) {
- let data = res.data as ListCategoriesResponse;
- this.state.categories = data.categories;
- if (!this.props.community) {
- this.state.communityForm.category_id = data.categories[0].id;
- }
- this.setState(this.state);
- } else if (res.op == UserOperation.CreateCommunity) {
- let data = res.data as CommunityResponse;
+ } else if (op == UserOperation.CreateCommunity) {
+ let data = wsJsonToRes<CommunityResponse>(msg).data;
this.state.loading = false;
- this.props.onCreate(data.community);
- } else if (res.op == UserOperation.EditCommunity) {
- let data = res.data as CommunityResponse;
+ this.props.onCreate(data.community_view);
+ } else if (op == UserOperation.EditCommunity) {
+ let data = wsJsonToRes<CommunityResponse>(msg).data;
this.state.loading = false;
- this.props.onEdit(data.community);
+ this.props.onEdit(data.community_view);
}
}
}
projects / lemmy-ui.git / blobdiff