X-Git-Url: http://these/git/?a=blobdiff_plain;f=src%2Fshared%2Fcomponents%2Fcommunity%2Fcommunity-form.tsx;h=e44675c91c608256aad56729ef91fb0de0f118cf;hb=9f2289d46600385354d3673b0ef2ba921a1fbe49;hp=805e49638c457f0adf73759d85a3a6d82e711504;hpb=afeb64009b1f5b44e831d35cc67c3c79e21292b7;p=lemmy-ui.git

diff --git a/src/shared/components/community/community-form.tsx b/src/shared/components/community/community-form.tsx
index 805e496..e44675c 100644
--- a/src/shared/components/community/community-form.tsx
+++ b/src/shared/components/community/community-form.tsx
@@ -1,46 +1,42 @@
-import { None, Option, Some } from "@sniptt/monads";
+import { myAuthRequired } from "@utils/app";
+import { capitalizeFirstLetter, randomStr } from "@utils/helpers";
 import { Component, linkEvent } from "inferno";
 import { Prompt } from "inferno-router";
 import {
-  CommunityResponse,
   CommunityView,
   CreateCommunity,
   EditCommunity,
   Language,
-  toUndefined,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
 } from "lemmy-js-client";
-import { Subscription } from "rxjs";
-import { i18n } from "../../i18next";
-import { UserService, WebSocketService } from "../../services";
-import {
-  auth,
-  capitalizeFirstLetter,
-  randomStr,
-  wsClient,
-  wsSubscribe,
-} from "../../utils";
+import { I18NextService } from "../../services";
 import { Icon, Spinner } from "../common/icon";
 import { ImageUploadForm } from "../common/image-upload-form";
 import { LanguageSelect } from "../common/language-select";
 import { MarkdownTextArea } from "../common/markdown-textarea";
 
 interface CommunityFormProps {
-  community_view: Option<CommunityView>; // If a community is given, that means this is an edit
+  community_view?: CommunityView; // If a community is given, that means this is an edit
   allLanguages: Language[];
   siteLanguages: number[];
-  communityLanguages: Option<number[]>;
+  communityLanguages?: number[];
   onCancel?(): any;
-  onCreate?(community: CommunityView): any;
-  onEdit?(community: CommunityView): any;
+  onUpsertCommunity(form: CreateCommunity | EditCommunity): void;
   enableNsfw?: boolean;
+  loading?: boolean;
 }
 
 interface CommunityFormState {
-  communityForm: CreateCommunity;
-  loading: boolean;
+  form: {
+    name?: string;
+    title?: string;
+    description?: string;
+    icon?: string;
+    banner?: string;
+    nsfw?: boolean;
+    posting_restricted_to_mods?: boolean;
+    discussion_languages?: number[];
+  };
+  submitted: boolean;
 }
 
 export class CommunityForm extends Component<
@@ -48,28 +44,15 @@ export class CommunityForm extends Component<
   CommunityFormState
 > {
   private id = `community-form-${randomStr()}`;
-  private subscription: Subscription;
 
-  private emptyState: CommunityFormState = {
-    communityForm: new CreateCommunity({
-      name: undefined,
-      title: undefined,
-      description: None,
-      discussion_languages: this.props.communityLanguages,
-      nsfw: None,
-      icon: None,
-      banner: None,
-      posting_restricted_to_mods: None,
-      auth: undefined,
-    }),
-    loading: false,
+  state: CommunityFormState = {
+    form: {},
+    submitted: false,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
 
-    this.state = this.emptyState;
-
     this.handleCommunityDescriptionChange =
       this.handleCommunityDescriptionChange.bind(this);
 
@@ -82,99 +65,53 @@ export class CommunityForm extends Component<
     this.handleDiscussionLanguageChange =
       this.handleDiscussionLanguageChange.bind(this);
 
-    this.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
+    const cv = this.props.community_view;
 
-    if (this.props.community_view.isSome()) {
-      let cv = this.props.community_view.unwrap();
+    if (cv) {
       this.state = {
         ...this.state,
-        communityForm: new CreateCommunity({
+        form: {
           name: cv.community.name,
           title: cv.community.title,
           description: cv.community.description,
-          nsfw: Some(cv.community.nsfw),
+          nsfw: cv.community.nsfw,
           icon: cv.community.icon,
           banner: cv.community.banner,
-          posting_restricted_to_mods: Some(
-            cv.community.posting_restricted_to_mods
-          ),
+          posting_restricted_to_mods: cv.community.posting_restricted_to_mods,
           discussion_languages: this.props.communityLanguages,
-          auth: undefined,
-        }),
+        },
       };
     }
   }
 
-  componentDidUpdate() {
-    if (
-      !this.state.loading &&
-      (this.state.communityForm.name ||
-        this.state.communityForm.title ||
-        this.state.communityForm.description.isSome())
-    ) {
-      window.onbeforeunload = () => true;
-    } else {
-      window.onbeforeunload = undefined;
-    }
-  }
-
-  componentWillUnmount() {
-    this.subscription.unsubscribe();
-    window.onbeforeunload = null;
-  }
-
   render() {
     return (
-      <>
+      <form
+        className="community-form"
+        onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}
+      >
         <Prompt
+          message={I18NextService.i18n.t("block_leaving")}
           when={
-            !this.state.loading &&
-            (this.state.communityForm.name ||
-              this.state.communityForm.title ||
-              this.state.communityForm.description.isSome())
+            !this.props.loading &&
+            !!(
+              this.state.form.name ||
+              this.state.form.title ||
+              this.state.form.description
+            ) &&
+            !this.state.submitted
           }
-          message={i18n.t("block_leaving")}
         />
-        <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
-          {this.props.community_view.isNone() && (
-            <div className="form-group row">
-              <label
-                className="col-12 col-sm-2 col-form-label"
-                htmlFor="community-name"
-              >
-                {i18n.t("name")}
-                <span
-                  className="position-absolute pointer unselectable ml-2 text-muted"
-                  data-tippy-content={i18n.t("name_explain")}
-                >
-                  <Icon icon="help-circle" classes="icon-inline" />
-                </span>
-              </label>
-              <div className="col-12 col-sm-10">
-                <input
-                  type="text"
-                  id="community-name"
-                  className="form-control"
-                  value={this.state.communityForm.name}
-                  onInput={linkEvent(this, this.handleCommunityNameChange)}
-                  required
-                  minLength={3}
-                  pattern="[a-z0-9_]+"
-                  title={i18n.t("community_reqs")}
-                />
-              </div>
-            </div>
-          )}
-          <div className="form-group row">
+        {!this.props.community_view && (
+          <div className="mb-3 row">
             <label
               className="col-12 col-sm-2 col-form-label"
-              htmlFor="community-title"
+              htmlFor="community-name"
             >
-              {i18n.t("display_name")}
+              {I18NextService.i18n.t("name")}
               <span
-                className="position-absolute pointer unselectable ml-2 text-muted"
-                data-tippy-content={i18n.t("display_name_explain")}
+                className="position-absolute pointer unselectable ms-2 text-muted"
+                data-tippy-content={I18NextService.i18n.t("name_explain")}
               >
                 <Icon icon="help-circle" classes="icon-inline" />
               </span>
@@ -182,269 +119,242 @@ export class CommunityForm extends Component<
             <div className="col-12 col-sm-10">
               <input
                 type="text"
-                id="community-title"
-                value={this.state.communityForm.title}
-                onInput={linkEvent(this, this.handleCommunityTitleChange)}
+                id="community-name"
                 className="form-control"
+                value={this.state.form.name}
+                onInput={linkEvent(this, this.handleCommunityNameChange)}
                 required
                 minLength={3}
-                maxLength={100}
+                pattern="[a-z0-9_]+"
+                title={I18NextService.i18n.t("community_reqs")}
               />
             </div>
           </div>
-          <div className="form-group row">
-            <label className="col-12 col-sm-2">{i18n.t("icon")}</label>
-            <div className="col-12 col-sm-10">
-              <ImageUploadForm
-                uploadTitle={i18n.t("upload_icon")}
-                imageSrc={this.state.communityForm.icon}
-                onUpload={this.handleIconUpload}
-                onRemove={this.handleIconRemove}
-                rounded
-              />
-            </div>
+        )}
+        <div className="mb-3 row">
+          <label
+            className="col-12 col-sm-2 col-form-label"
+            htmlFor="community-title"
+          >
+            {I18NextService.i18n.t("display_name")}
+            <span
+              className="position-absolute pointer unselectable ms-2 text-muted"
+              data-tippy-content={I18NextService.i18n.t("display_name_explain")}
+            >
+              <Icon icon="help-circle" classes="icon-inline" />
+            </span>
+          </label>
+          <div className="col-12 col-sm-10">
+            <input
+              type="text"
+              id="community-title"
+              value={this.state.form.title}
+              onInput={linkEvent(this, this.handleCommunityTitleChange)}
+              className="form-control"
+              required
+              minLength={3}
+              maxLength={100}
+            />
           </div>
-          <div className="form-group row">
-            <label className="col-12 col-sm-2">{i18n.t("banner")}</label>
-            <div className="col-12 col-sm-10">
-              <ImageUploadForm
-                uploadTitle={i18n.t("upload_banner")}
-                imageSrc={this.state.communityForm.banner}
-                onUpload={this.handleBannerUpload}
-                onRemove={this.handleBannerRemove}
-              />
-            </div>
+        </div>
+        <div className="mb-3 row">
+          <label className="col-12 col-sm-2 col-form-label">
+            {I18NextService.i18n.t("icon")}
+          </label>
+          <div className="col-12 col-sm-10">
+            <ImageUploadForm
+              uploadTitle={I18NextService.i18n.t("upload_icon")}
+              imageSrc={this.state.form.icon}
+              onUpload={this.handleIconUpload}
+              onRemove={this.handleIconRemove}
+              rounded
+            />
           </div>
-          <div className="form-group row">
-            <label className="col-12 col-sm-2 col-form-label" htmlFor={this.id}>
-              {i18n.t("sidebar")}
-            </label>
-            <div className="col-12 col-sm-10">
-              <MarkdownTextArea
-                initialContent={this.state.communityForm.description}
-                initialLanguageId={None}
-                placeholder={Some("description")}
-                buttonTitle={None}
-                maxLength={None}
-                onContentChange={this.handleCommunityDescriptionChange}
-                allLanguages={[]}
-                siteLanguages={[]}
-              />
-            </div>
+        </div>
+        <div className="mb-3 row">
+          <label className="col-12 col-sm-2 col-form-label">
+            {I18NextService.i18n.t("banner")}
+          </label>
+          <div className="col-12 col-sm-10">
+            <ImageUploadForm
+              uploadTitle={I18NextService.i18n.t("upload_banner")}
+              imageSrc={this.state.form.banner}
+              onUpload={this.handleBannerUpload}
+              onRemove={this.handleBannerRemove}
+            />
           </div>
+        </div>
+        <div className="mb-3 row">
+          <label className="col-12 col-sm-2 col-form-label" htmlFor={this.id}>
+            {I18NextService.i18n.t("sidebar")}
+          </label>
+          <div className="col-12 col-sm-10">
+            <MarkdownTextArea
+              initialContent={this.state.form.description}
+              placeholder={I18NextService.i18n.t("description") ?? undefined}
+              onContentChange={this.handleCommunityDescriptionChange}
+              hideNavigationWarnings
+              allLanguages={[]}
+              siteLanguages={[]}
+            />
+          </div>
+        </div>
 
-          {this.props.enableNsfw && (
-            <div className="form-group row">
-              <legend className="col-form-label col-sm-2 pt-0">
-                {i18n.t("nsfw")}
-              </legend>
-              <div className="col-10">
-                <div className="form-check">
-                  <input
-                    className="form-check-input position-static"
-                    id="community-nsfw"
-                    type="checkbox"
-                    checked={toUndefined(this.state.communityForm.nsfw)}
-                    onChange={linkEvent(this, this.handleCommunityNsfwChange)}
-                  />
-                </div>
-              </div>
-            </div>
-          )}
-          <div className="form-group row">
-            <legend className="col-form-label col-6 pt-0">
-              {i18n.t("only_mods_can_post_in_community")}
+        {this.props.enableNsfw && (
+          <div className="mb-3 row">
+            <legend className="col-form-label col-sm-2 pt-0">
+              {I18NextService.i18n.t("nsfw")}
             </legend>
-            <div className="col-6">
+            <div className="col-10">
               <div className="form-check">
                 <input
                   className="form-check-input position-static"
-                  id="community-only-mods-can-post"
+                  id="community-nsfw"
                   type="checkbox"
-                  checked={toUndefined(
-                    this.state.communityForm.posting_restricted_to_mods
-                  )}
-                  onChange={linkEvent(
-                    this,
-                    this.handleCommunityPostingRestrictedToMods
-                  )}
+                  checked={this.state.form.nsfw}
+                  onChange={linkEvent(this, this.handleCommunityNsfwChange)}
                 />
               </div>
             </div>
           </div>
-          <LanguageSelect
-            allLanguages={this.props.allLanguages}
-            siteLanguages={this.props.siteLanguages}
-            showSite
-            selectedLanguageIds={this.state.communityForm.discussion_languages}
-            multiple={true}
-            onChange={this.handleDiscussionLanguageChange}
-          />
-          <div className="form-group row">
-            <div className="col-12">
+        )}
+        <div className="mb-3 row">
+          <legend className="col-form-label col-6 pt-0">
+            {I18NextService.i18n.t("only_mods_can_post_in_community")}
+          </legend>
+          <div className="col-6">
+            <div className="form-check">
+              <input
+                className="form-check-input position-static"
+                id="community-only-mods-can-post"
+                type="checkbox"
+                checked={this.state.form.posting_restricted_to_mods}
+                onChange={linkEvent(
+                  this,
+                  this.handleCommunityPostingRestrictedToMods,
+                )}
+              />
+            </div>
+          </div>
+        </div>
+        <LanguageSelect
+          allLanguages={this.props.allLanguages}
+          siteLanguages={this.props.siteLanguages}
+          showSite
+          selectedLanguageIds={this.state.form.discussion_languages}
+          multiple={true}
+          onChange={this.handleDiscussionLanguageChange}
+        />
+        <div className="mb-3 row">
+          <div className="col-12">
+            <button
+              type="submit"
+              className="btn btn-secondary me-2"
+              disabled={this.props.loading}
+            >
+              {this.props.loading ? (
+                <Spinner />
+              ) : this.props.community_view ? (
+                capitalizeFirstLetter(I18NextService.i18n.t("save"))
+              ) : (
+                capitalizeFirstLetter(I18NextService.i18n.t("create"))
+              )}
+            </button>
+            {this.props.community_view && (
               <button
-                type="submit"
-                className="btn btn-secondary mr-2"
-                disabled={this.state.loading}
+                type="button"
+                className="btn btn-secondary"
+                onClick={linkEvent(this, this.handleCancel)}
               >
-                {this.state.loading ? (
-                  <Spinner />
-                ) : this.props.community_view.isSome() ? (
-                  capitalizeFirstLetter(i18n.t("save"))
-                ) : (
-                  capitalizeFirstLetter(i18n.t("create"))
-                )}
+                {I18NextService.i18n.t("cancel")}
               </button>
-              {this.props.community_view.isSome() && (
-                <button
-                  type="button"
-                  className="btn btn-secondary"
-                  onClick={linkEvent(this, this.handleCancel)}
-                >
-                  {i18n.t("cancel")}
-                </button>
-              )}
-            </div>
+            )}
           </div>
-        </form>
-      </>
+        </div>
+      </form>
     );
   }
 
   handleCreateCommunitySubmit(i: CommunityForm, event: any) {
     event.preventDefault();
-    i.setState({ loading: true });
-    let cForm = i.state.communityForm;
-    cForm.auth = auth().unwrap();
-
-    i.props.community_view.match({
-      some: cv => {
-        let form = new EditCommunity({
-          community_id: cv.community.id,
-          title: Some(cForm.title),
+    i.setState({ submitted: true });
+    const cForm = i.state.form;
+    const auth = myAuthRequired();
+
+    const cv = i.props.community_view;
+
+    if (cv) {
+      i.props.onUpsertCommunity({
+        community_id: cv.community.id,
+        title: cForm.title,
+        description: cForm.description,
+        icon: cForm.icon,
+        banner: cForm.banner,
+        nsfw: cForm.nsfw,
+        posting_restricted_to_mods: cForm.posting_restricted_to_mods,
+        discussion_languages: cForm.discussion_languages,
+        auth,
+      });
+    } else {
+      if (cForm.title && cForm.name) {
+        i.props.onUpsertCommunity({
+          name: cForm.name,
+          title: cForm.title,
           description: cForm.description,
           icon: cForm.icon,
           banner: cForm.banner,
           nsfw: cForm.nsfw,
           posting_restricted_to_mods: cForm.posting_restricted_to_mods,
           discussion_languages: cForm.discussion_languages,
-          auth: cForm.auth,
+          auth,
         });
-
-        WebSocketService.Instance.send(wsClient.editCommunity(form));
-      },
-      none: () => {
-        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);
+    i.setState(s => ((s.form.name = event.target.value), s));
   }
 
   handleCommunityTitleChange(i: CommunityForm, event: any) {
-    i.state.communityForm.title = event.target.value;
-    i.setState(i.state);
+    i.setState(s => ((s.form.title = event.target.value), s));
   }
 
   handleCommunityDescriptionChange(val: string) {
-    this.setState(s => ((s.communityForm.description = Some(val)), s));
+    this.setState(s => ((s.form.description = val), s));
   }
 
   handleCommunityNsfwChange(i: CommunityForm, event: any) {
-    i.state.communityForm.nsfw = Some(event.target.checked);
-    i.setState(i.state);
+    i.setState(s => ((s.form.nsfw = event.target.checked), s));
   }
 
   handleCommunityPostingRestrictedToMods(i: CommunityForm, event: any) {
-    i.state.communityForm.posting_restricted_to_mods = Some(
-      event.target.checked
+    i.setState(
+      s => ((s.form.posting_restricted_to_mods = event.target.checked), s),
     );
-    i.setState(i.state);
   }
 
   handleCancel(i: CommunityForm) {
-    i.props.onCancel();
+    i.props.onCancel?.();
   }
 
   handleIconUpload(url: string) {
-    this.setState(s => ((s.communityForm.icon = Some(url)), s));
+    this.setState(s => ((s.form.icon = url), s));
   }
 
   handleIconRemove() {
-    this.setState(s => ((s.communityForm.icon = Some("")), s));
+    this.setState(s => ((s.form.icon = ""), s));
   }
 
   handleBannerUpload(url: string) {
-    this.setState(s => ((s.communityForm.banner = Some(url)), s));
+    this.setState(s => ((s.form.banner = url), s));
   }
 
   handleBannerRemove() {
-    this.setState(s => ((s.communityForm.banner = Some("")), s));
+    this.setState(s => ((s.form.banner = ""), s));
   }
 
   handleDiscussionLanguageChange(val: number[]) {
-    this.setState(s => ((s.communityForm.discussion_languages = Some(val)), s));
-  }
-
-  parseMessage(msg: any) {
-    let op = wsUserOp(msg);
-    console.log(msg);
-    if (msg.error) {
-      // Errors handled by top level pages
-      // toast(i18n.t(msg.error), "danger");
-      this.setState({ loading: false });
-      return;
-    } else if (op == UserOperation.CreateCommunity) {
-      let data = wsJsonToRes<CommunityResponse>(msg, CommunityResponse);
-      this.props.onCreate(data.community_view);
-
-      // Update myUserInfo
-      let community = data.community_view.community;
-
-      UserService.Instance.myUserInfo.match({
-        some: mui => {
-          let person = mui.local_user_view.person;
-          mui.follows.push({
-            community,
-            follower: person,
-          });
-          mui.moderates.push({
-            community,
-            moderator: person,
-          });
-        },
-        none: void 0,
-      });
-    } else if (op == UserOperation.EditCommunity) {
-      let data = wsJsonToRes<CommunityResponse>(msg, CommunityResponse);
-      this.setState({ loading: false });
-      this.props.onEdit(data.community_view);
-      let community = data.community_view.community;
-
-      UserService.Instance.myUserInfo.match({
-        some: mui => {
-          let followFound = mui.follows.findIndex(
-            f => f.community.id == community.id
-          );
-          if (followFound) {
-            mui.follows[followFound].community = community;
-          }
-
-          let moderatesFound = mui.moderates.findIndex(
-            f => f.community.id == community.id
-          );
-          if (moderatesFound) {
-            mui.moderates[moderatesFound].community = community;
-          }
-        },
-        none: void 0,
-      });
-    }
+    this.setState(s => ((s.form.discussion_languages = val), s));
   }
 }