import { Component, linkEvent } from "inferno"; import { Prompt } from "inferno-router"; import { CreateSite, EditSite, Site } from "lemmy-js-client"; import { i18n } from "../../i18next"; import { WebSocketService } from "../../services"; import { authField, capitalizeFirstLetter, fetchThemeList, wsClient, } from "../../utils"; import { Spinner } from "../common/icon"; import { ImageUploadForm } from "../common/image-upload-form"; import { MarkdownTextArea } from "../common/markdown-textarea"; interface SiteFormProps { site?: Site; // If a site is given, that means this is an edit onCancel?(): any; onEdit?(): any; } interface SiteFormState { siteForm: EditSite; loading: boolean; themeList: string[]; } export class SiteForm extends Component { private emptyState: SiteFormState = { siteForm: { enable_downvotes: true, open_registration: true, enable_nsfw: true, name: null, icon: null, banner: null, require_email_verification: null, require_application: null, application_question: null, private_instance: null, default_theme: null, auth: authField(false), }, loading: false, themeList: [], }; constructor(props: any, context: any) { super(props, context); this.state = this.emptyState; this.handleSiteSidebarChange = this.handleSiteSidebarChange.bind(this); this.handleSiteApplicationQuestionChange = this.handleSiteApplicationQuestionChange.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) { let site = this.props.site; this.state.siteForm = { name: site.name, sidebar: site.sidebar, description: site.description, enable_downvotes: site.enable_downvotes, open_registration: site.open_registration, enable_nsfw: site.enable_nsfw, community_creation_admin_only: site.community_creation_admin_only, icon: site.icon, banner: site.banner, require_email_verification: site.require_email_verification, require_application: site.require_application, application_question: site.application_question, private_instance: site.private_instance, default_theme: site.default_theme, auth: authField(false), }; } } async componentDidMount() { this.state.themeList = await fetchThemeList(); this.setState(this.state); } // 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.sidebar || this.state.siteForm.application_question || this.state.siteForm.description) ) { window.onbeforeunload = () => true; } else { window.onbeforeunload = undefined; } } componentWillUnmount() { window.onbeforeunload = null; } render() { return ( <>
{`${ this.props.site ? capitalizeFirstLetter(i18n.t("save")) : capitalizeFirstLetter(i18n.t("name")) } ${i18n.t("your_site")}`}
{this.state.siteForm.require_application && (
)}
{this.props.site && ( )}
); } handleCreateSiteSubmit(i: SiteForm, event: any) { event.preventDefault(); i.state.loading = true; if (i.props.site) { WebSocketService.Instance.send(wsClient.editSite(i.state.siteForm)); i.props.onEdit(); } else { let form: CreateSite = { name: i.state.siteForm.name || "My site", ...i.state.siteForm, }; WebSocketService.Instance.send(wsClient.createSite(form)); } i.setState(i.state); } handleSiteNameChange(i: SiteForm, event: any) { i.state.siteForm.name = event.target.value; i.setState(i.state); } handleSiteSidebarChange(val: string) { this.state.siteForm.sidebar = val; this.setState(this.state); } handleSiteApplicationQuestionChange(val: string) { this.state.siteForm.application_question = val; this.setState(this.state); } handleSiteDescChange(i: SiteForm, event: any) { i.state.siteForm.description = event.target.value; i.setState(i.state); } handleSiteEnableNsfwChange(i: SiteForm, event: any) { i.state.siteForm.enable_nsfw = event.target.checked; i.setState(i.state); } handleSiteOpenRegistrationChange(i: SiteForm, event: any) { i.state.siteForm.open_registration = event.target.checked; i.setState(i.state); } handleSiteCommunityCreationAdminOnly(i: SiteForm, event: any) { i.state.siteForm.community_creation_admin_only = event.target.checked; i.setState(i.state); } handleSiteEnableDownvotesChange(i: SiteForm, event: any) { i.state.siteForm.enable_downvotes = event.target.checked; i.setState(i.state); } handleSiteRequireApplication(i: SiteForm, event: any) { i.state.siteForm.require_application = event.target.checked; i.setState(i.state); } handleSiteRequireEmailVerification(i: SiteForm, event: any) { i.state.siteForm.require_email_verification = event.target.checked; i.setState(i.state); } handleSitePrivateInstance(i: SiteForm, event: any) { i.state.siteForm.private_instance = event.target.checked; i.setState(i.state); } handleSiteDefaultTheme(i: SiteForm, event: any) { i.state.siteForm.default_theme = event.target.value; i.setState(i.state); } 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); } }