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'; 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'; 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; enableNsfw: boolean; } interface CommunityFormState { communityForm: CreateCommunity; loading: boolean; } export class CommunityForm extends Component< CommunityFormProps, CommunityFormState > { private id = `community-form-${randomStr()}`; private subscription: Subscription; private emptyState: CommunityFormState = { communityForm: { name: null, title: null, category_id: this.props.categories[0].id, nsfw: false, icon: null, banner: null, auth: authField(false), }, loading: false, }; constructor(props: any, context: any) { super(props, context); this.state = this.emptyState; this.handleCommunityDescriptionChange = this.handleCommunityDescriptionChange.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); let cv = this.props.community_view; if (cv) { 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, banner: cv.community.banner, auth: authField(), }; } 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.name || this.state.communityForm.title || this.state.communityForm.description) ) { window.onbeforeunload = () => true; } else { window.onbeforeunload = undefined; } } componentWillUnmount() { this.subscription.unsubscribe(); window.onbeforeunload = null; } render() { return ( <>
{!this.props.community_view && (
)}
{this.props.enableNsfw && (
)}
{this.props.community_view && ( )}
); } handleCreateCommunitySubmit(i: CommunityForm, event: any) { event.preventDefault(); i.state.loading = true; if (i.props.community_view) { let form: EditCommunity = { ...i.state.communityForm, edit_id: i.props.community_view.community.id, }; WebSocketService.Instance.send(wsClient.editCommunity(form)); } else { WebSocketService.Instance.send( wsClient.createCommunity(i.state.communityForm) ); } i.setState(i.state); } handleCommunityNameChange(i: CommunityForm, event: any) { i.state.communityForm.name = event.target.value; i.setState(i.state); } handleCommunityTitleChange(i: CommunityForm, event: any) { i.state.communityForm.title = event.target.value; i.setState(i.state); } handleCommunityDescriptionChange(val: string) { this.state.communityForm.description = val; 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); } handleCancel(i: CommunityForm) { i.props.onCancel(); } handleIconUpload(url: string) { this.state.communityForm.icon = url; this.setState(this.state); } handleIconRemove() { this.state.communityForm.icon = ''; this.setState(this.state); } handleBannerUpload(url: string) { this.state.communityForm.banner = url; this.setState(this.state); } handleBannerRemove() { this.state.communityForm.banner = ''; this.setState(this.state); } parseMessage(msg: any) { let op = wsUserOp(msg); if (msg.error) { toast(i18n.t(msg.error), 'danger'); this.state.loading = false; this.setState(this.state); return; } else if (op == UserOperation.CreateCommunity) { let data = wsJsonToRes(msg).data; this.state.loading = false; this.props.onCreate(data.community_view); } else if (op == UserOperation.EditCommunity) { let data = wsJsonToRes(msg).data; this.state.loading = false; this.props.onEdit(data.community_view); } } }