import { None, Option, Some } from "@sniptt/monads"; import { Component, linkEvent } from "inferno"; import { Prompt } from "inferno-router"; import { CreateSite, EditSite, ListingType, Site, toUndefined, } from "lemmy-js-client"; import { i18n } from "../../i18next"; import { WebSocketService } from "../../services"; import { auth, capitalizeFirstLetter, fetchThemeList, wsClient, } from "../../utils"; import { Spinner } from "../common/icon"; import { ImageUploadForm } from "../common/image-upload-form"; import { ListingTypeSelect } from "../common/listing-type-select"; import { MarkdownTextArea } from "../common/markdown-textarea"; interface SiteFormProps { site: Option; // If a site is given, that means this is an edit showLocal?: boolean; onCancel?(): void; onEdit?(): void; } interface SiteFormState { siteForm: EditSite; loading: boolean; themeList: Option; } export class SiteForm extends Component { private emptyState: SiteFormState = { siteForm: new EditSite({ enable_downvotes: Some(true), open_registration: Some(true), enable_nsfw: Some(true), name: None, icon: None, banner: None, require_email_verification: None, require_application: None, application_question: None, private_instance: None, default_theme: None, sidebar: None, default_post_listing_type: None, legal_information: None, description: None, community_creation_admin_only: None, auth: undefined, hide_modlog_mod_names: Some(true), }), loading: false, themeList: None, }; constructor(props: any, context: any) { super(props, context); this.state = this.emptyState; this.handleSiteSidebarChange = this.handleSiteSidebarChange.bind(this); this.handleSiteLegalInfoChange = this.handleSiteLegalInfoChange.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); this.handleDefaultPostListingTypeChange = this.handleDefaultPostListingTypeChange.bind(this); if (this.props.site.isSome()) { let site = this.props.site.unwrap(); this.state = { ...this.state, siteForm: new EditSite({ name: Some(site.name), sidebar: site.sidebar, description: site.description, enable_downvotes: Some(site.enable_downvotes), open_registration: Some(site.open_registration), enable_nsfw: Some(site.enable_nsfw), community_creation_admin_only: Some( site.community_creation_admin_only ), icon: site.icon, banner: site.banner, require_email_verification: Some(site.require_email_verification), require_application: Some(site.require_application), application_question: site.application_question, private_instance: Some(site.private_instance), default_theme: Some(site.default_theme), default_post_listing_type: Some(site.default_post_listing_type), legal_information: site.legal_information, hide_modlog_mod_names: site.hide_modlog_mod_names, auth: undefined, }), }; } } async componentDidMount() { this.setState({ themeList: Some(await fetchThemeList()) }); } // Necessary to stop the loading componentWillReceiveProps() { this.setState({ loading: false }); } componentDidUpdate() { if ( !this.state.loading && this.props.site.isNone() && (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.isSome() ? capitalizeFirstLetter(i18n.t("save")) : capitalizeFirstLetter(i18n.t("name")) } ${i18n.t("your_site")}`}
{this.state.siteForm.require_application.unwrapOr(false) && (
)}
{this.props.showLocal && (
)}
{this.props.site.isSome() && ( )}
); } handleCreateSiteSubmit(i: SiteForm, event: any) { event.preventDefault(); i.setState({ loading: true }); i.setState(s => ((s.siteForm.auth = auth().unwrap()), s)); if (i.props.site.isSome()) { WebSocketService.Instance.send(wsClient.editSite(i.state.siteForm)); i.props.onEdit(); } else { let sForm = i.state.siteForm; let form = new CreateSite({ name: sForm.name.unwrapOr("My site"), sidebar: sForm.sidebar, description: sForm.description, icon: sForm.icon, banner: sForm.banner, community_creation_admin_only: sForm.community_creation_admin_only, enable_nsfw: sForm.enable_nsfw, enable_downvotes: sForm.enable_downvotes, require_application: sForm.require_application, application_question: sForm.application_question, open_registration: sForm.open_registration, require_email_verification: sForm.require_email_verification, private_instance: sForm.private_instance, default_theme: sForm.default_theme, default_post_listing_type: sForm.default_post_listing_type, auth: auth().unwrap(), hide_modlog_mod_names: sForm.hide_modlog_mod_names, }); WebSocketService.Instance.send(wsClient.createSite(form)); } i.setState(i.state); } handleSiteNameChange(i: SiteForm, event: any) { i.state.siteForm.name = Some(event.target.value); i.setState(i.state); } handleSiteSidebarChange(val: string) { this.setState(s => ((s.siteForm.sidebar = Some(val)), s)); } handleSiteLegalInfoChange(val: string) { this.setState(s => ((s.siteForm.legal_information = Some(val)), s)); } handleSiteApplicationQuestionChange(val: string) { this.setState(s => ((s.siteForm.application_question = Some(val)), s)); } handleSiteDescChange(i: SiteForm, event: any) { i.state.siteForm.description = Some(event.target.value); i.setState(i.state); } handleSiteEnableNsfwChange(i: SiteForm, event: any) { i.state.siteForm.enable_nsfw = Some(event.target.checked); i.setState(i.state); } handleSiteOpenRegistrationChange(i: SiteForm, event: any) { i.state.siteForm.open_registration = Some(event.target.checked); i.setState(i.state); } handleSiteCommunityCreationAdminOnly(i: SiteForm, event: any) { i.state.siteForm.community_creation_admin_only = Some(event.target.checked); i.setState(i.state); } handleSiteEnableDownvotesChange(i: SiteForm, event: any) { i.state.siteForm.enable_downvotes = Some(event.target.checked); i.setState(i.state); } handleSiteRequireApplication(i: SiteForm, event: any) { i.state.siteForm.require_application = Some(event.target.checked); i.setState(i.state); } handleSiteRequireEmailVerification(i: SiteForm, event: any) { i.state.siteForm.require_email_verification = Some(event.target.checked); i.setState(i.state); } handleSitePrivateInstance(i: SiteForm, event: any) { i.state.siteForm.private_instance = Some(event.target.checked); i.setState(i.state); } handleSiteHideModlogModNames(i: SiteForm, event: any) { i.state.siteForm.hide_modlog_mod_names = Some(event.target.checked); i.setState(i.state); } handleSiteDefaultTheme(i: SiteForm, event: any) { i.state.siteForm.default_theme = Some(event.target.value); i.setState(i.state); } handleCancel(i: SiteForm) { i.props.onCancel(); } handleIconUpload(url: string) { this.setState(s => ((s.siteForm.icon = Some(url)), s)); } handleIconRemove() { this.setState(s => ((s.siteForm.icon = Some("")), s)); } handleBannerUpload(url: string) { this.setState(s => ((s.siteForm.banner = Some(url)), s)); } handleBannerRemove() { this.setState(s => ((s.siteForm.banner = Some("")), s)); } handleDefaultPostListingTypeChange(val: ListingType) { this.setState( s => ( (s.siteForm.default_post_listing_type = Some( ListingType[ListingType[val]] )), s ) ); } }