-import { Component, linkEvent } from 'inferno';
-import { Prompt } from 'inferno-router';
-import { Subscription } from 'rxjs';
+import { Component, linkEvent } from "inferno";
+import { Prompt } from "inferno-router";
+import { Subscription } from "rxjs";
import {
EditCommunity,
CreateCommunity,
UserOperation,
- Category,
CommunityResponse,
CommunityView,
-} from 'lemmy-js-client';
-import { WebSocketService } from '../services';
+} from "lemmy-js-client";
+import { WebSocketService } from "../services";
import {
wsJsonToRes,
capitalizeFirstLetter,
wsUserOp,
wsClient,
authField,
-} from '../utils';
-import { i18n } from '../i18next';
+} 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_view?: CommunityView; // If a community is given, that means this is an edit
- categories: Category[];
onCancel?(): any;
onCreate?(community: CommunityView): any;
onEdit?(community: CommunityView): any;
communityForm: {
name: null,
title: null,
- category_id: this.props.categories[0].id,
nsfw: false,
icon: null,
banner: null,
this.state.communityForm = {
name: cv.community.name,
title: cv.community.title,
- category_id: cv.category.id,
description: cv.community.description,
nsfw: cv.community.nsfw,
icon: cv.community.icon,
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_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.props.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>
+ <Spinner />
) : this.props.community_view ? (
- capitalizeFirstLetter(i18n.t('save'))
+ capitalizeFirstLetter(i18n.t("save"))
) : (
- capitalizeFirstLetter(i18n.t('create'))
+ capitalizeFirstLetter(i18n.t("create"))
)}
</button>
{this.props.community_view && (
class="btn btn-secondary"
onClick={linkEvent(this, this.handleCancel)}
>
- {i18n.t('cancel')}
+ {i18n.t("cancel")}
</button>
)}
</div>
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: 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;