import { Component, linkEvent } from "inferno"; import { Prompt } from "inferno-router"; import { CommunityResponse, CommunityView, CreateCommunity, EditCommunity, UserOperation, } from "lemmy-js-client"; import { Subscription } from "rxjs"; import { i18n } from "../../i18next"; import { WebSocketService } from "../../services"; import { authField, capitalizeFirstLetter, randomStr, toast, wsClient, wsJsonToRes, wsSubscribe, wsUserOp, } from "../../utils"; import { Icon, Spinner } from "../common/icon"; import { ImageUploadForm } from "../common/image-upload-form"; import { MarkdownTextArea } from "../common/markdown-textarea"; interface CommunityFormProps { community_view?: CommunityView; // If a community is given, that means this is an edit 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, 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, 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, community_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); } 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); console.log(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); } } }