import { Component, linkEvent } from 'inferno';
import { Prompt } from 'inferno-router';
-import { Site, SiteForm as SiteFormI } from '../interfaces';
+import { MarkdownTextArea } from './markdown-textarea';
+import { ImageUploadForm } from './image-upload-form';
+import { Site, SiteForm as SiteFormI } from 'lemmy-js-client';
import { WebSocketService } from '../services';
-import { capitalizeFirstLetter, randomStr, setupTribute } from '../utils';
-import autosize from 'autosize';
-import Tribute from 'tributejs/src/Tribute.js';
+import { capitalizeFirstLetter, randomStr } from '../utils';
import { i18n } from '../i18next';
interface SiteFormProps {
export class SiteForm extends Component<SiteFormProps, SiteFormState> {
private id = `site-form-${randomStr()}`;
- private tribute: Tribute;
private emptyState: SiteFormState = {
siteForm: {
enable_downvotes: true,
open_registration: true,
enable_nsfw: true,
name: null,
+ icon: null,
+ banner: null,
},
loading: false,
};
constructor(props: any, context: any) {
super(props, context);
- this.tribute = setupTribute();
this.state = this.emptyState;
+ this.handleSiteDescriptionChange = this.handleSiteDescriptionChange.bind(
+ this
+ );
+
+ this.handleIconUpload = this.handleIconUpload.bind(this);
+ this.handleIconRemove = this.handleIconRemove.bind(this);
+
+ this.handleBannerUpload = this.handleBannerUpload.bind(this);
+ this.handleBannerRemove = this.handleBannerRemove.bind(this);
if (this.props.site) {
this.state.siteForm = {
enable_downvotes: this.props.site.enable_downvotes,
open_registration: this.props.site.open_registration,
enable_nsfw: this.props.site.enable_nsfw,
+ icon: this.props.site.icon,
+ banner: this.props.site.banner,
};
}
}
- componentDidMount() {
- var textarea: any = document.getElementById(this.id);
- autosize(textarea);
- this.tribute.attach(textarea);
- textarea.addEventListener('tribute-replaced', () => {
- this.state.siteForm.description = textarea.value;
- this.setState(this.state);
- autosize.update(textarea);
- });
+ // Necessary to stop the loading
+ componentWillReceiveProps() {
+ this.state.loading = false;
+ this.setState(this.state);
+ }
+
+ componentDidUpdate() {
+ if (
+ !this.state.loading &&
+ !this.props.site &&
+ (this.state.siteForm.name || this.state.siteForm.description)
+ ) {
+ window.onbeforeunload = () => true;
+ } else {
+ window.onbeforeunload = undefined;
+ }
+ }
+
+ componentWillUnmount() {
+ window.onbeforeunload = null;
}
render() {
<Prompt
when={
!this.state.loading &&
+ !this.props.site &&
(this.state.siteForm.name || this.state.siteForm.description)
}
message={i18n.t('block_leaving')}
<form onSubmit={linkEvent(this, this.handleCreateSiteSubmit)}>
<h5>{`${
this.props.site
- ? capitalizeFirstLetter(i18n.t('edit'))
+ ? capitalizeFirstLetter(i18n.t('save'))
: capitalizeFirstLetter(i18n.t('name'))
} ${i18n.t('your_site')}`}</h5>
<div class="form-group row">
/>
</div>
</div>
+ <div class="form-group">
+ <label>{i18n.t('icon')}</label>
+ <ImageUploadForm
+ uploadTitle={i18n.t('upload_icon')}
+ imageSrc={this.state.siteForm.icon}
+ onUpload={this.handleIconUpload}
+ onRemove={this.handleIconRemove}
+ rounded
+ />
+ </div>
+ <div class="form-group">
+ <label>{i18n.t('banner')}</label>
+ <ImageUploadForm
+ uploadTitle={i18n.t('upload_banner')}
+ imageSrc={this.state.siteForm.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')}
</label>
<div class="col-12">
- <textarea
- id={this.id}
- value={this.state.siteForm.description}
- onInput={linkEvent(this, this.handleSiteDescriptionChange)}
- class="form-control"
- rows={3}
- maxLength={10000}
+ <MarkdownTextArea
+ initialContent={this.state.siteForm.description}
+ onContentChange={this.handleSiteDescriptionChange}
+ hideNavigationWarnings
/>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-12">
- <button type="submit" class="btn btn-secondary mr-2">
+ <button
+ type="submit"
+ class="btn btn-secondary mr-2"
+ disabled={this.state.loading}
+ >
{this.state.loading ? (
<svg class="icon icon-spinner spin">
<use xlinkHref="#icon-spinner"></use>
i.setState(i.state);
}
- handleSiteDescriptionChange(i: SiteForm, event: any) {
- i.state.siteForm.description = event.target.value;
- i.setState(i.state);
+ handleSiteDescriptionChange(val: string) {
+ this.state.siteForm.description = val;
+ this.setState(this.state);
}
handleSiteEnableNsfwChange(i: SiteForm, event: any) {
handleCancel(i: SiteForm) {
i.props.onCancel();
}
+
+ handleIconUpload(url: string) {
+ this.state.siteForm.icon = url;
+ this.setState(this.state);
+ }
+
+ handleIconRemove() {
+ this.state.siteForm.icon = '';
+ this.setState(this.state);
+ }
+
+ handleBannerUpload(url: string) {
+ this.state.siteForm.banner = url;
+ this.setState(this.state);
+ }
+
+ handleBannerRemove() {
+ this.state.siteForm.banner = '';
+ this.setState(this.state);
+ }
}