X-Git-Url: http://these/git/?a=blobdiff_plain;f=src%2Fshared%2Fcomponents%2Fperson%2Fsettings.tsx;h=a29f61b008102ba4d60e3ab0d4988bd13e8f34d4;hb=2b1af707c3df6126b3e6890106c03c60ad49b1be;hp=40878f37fddc4fa93b3d751bc57e5458306247a9;hpb=f61037f5d89f12818c8100f907a98b74e980112a;p=lemmy-ui.git

diff --git a/src/shared/components/person/settings.tsx b/src/shared/components/person/settings.tsx
index 40878f3..a29f61b 100644
--- a/src/shared/components/person/settings.tsx
+++ b/src/shared/components/person/settings.tsx
@@ -1,26 +1,19 @@
 import { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
 import {
-  BlockCommunity,
   BlockCommunityResponse,
-  BlockPerson,
   BlockPersonResponse,
-  ChangePassword,
   CommunityBlockView,
-  DeleteAccount,
+  DeleteAccountResponse,
   GetSiteResponse,
   ListingType,
   LoginResponse,
   PersonBlockView,
-  SaveUserSettings,
   SortType,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
 } from "lemmy-js-client";
-import { Subscription } from "rxjs";
 import { i18n, languages } from "../../i18next";
-import { UserService, WebSocketService } from "../../services";
+import { UserService } from "../../services";
+import { HttpService, RequestState } from "../../services/HttpService";
 import {
   Choice,
   capitalizeFirstLetter,
@@ -34,6 +27,7 @@ import {
   fetchUsers,
   getLanguages,
   myAuth,
+  myAuthRequired,
   personToChoice,
   relTags,
   setIsoData,
@@ -43,8 +37,6 @@ import {
   toast,
   updateCommunityBlock,
   updatePersonBlock,
-  wsClient,
-  wsSubscribe,
 } from "../../utils";
 import { HtmlTags } from "../common/html-tags";
 import { Icon, Spinner } from "../common/icon";
@@ -59,6 +51,9 @@ import { CommunityLink } from "../community/community-link";
 import { PersonListing } from "./person-listing";
 
 interface SettingsState {
+  saveRes: RequestState<LoginResponse>;
+  changePasswordRes: RequestState<LoginResponse>;
+  deleteAccountRes: RequestState<DeleteAccountResponse>;
   // TODO redo these forms
   saveUserSettingsForm: {
     show_nsfw?: boolean;
@@ -94,9 +89,6 @@ interface SettingsState {
   communityBlocks: CommunityBlockView[];
   currentTab: string;
   themeList: string[];
-  saveUserSettingsLoading: boolean;
-  changePasswordLoading: boolean;
-  deleteAccountLoading: boolean;
   deleteAccountShowConfirm: boolean;
   siteRes: GetSiteResponse;
   searchCommunityLoading: boolean;
@@ -143,13 +135,12 @@ const Filter = ({
 
 export class Settings extends Component<any, SettingsState> {
   private isoData = setIsoData(this.context);
-  private subscription?: Subscription;
   state: SettingsState = {
+    saveRes: { state: "empty" },
+    deleteAccountRes: { state: "empty" },
+    changePasswordRes: { state: "empty" },
     saveUserSettingsForm: {},
     changePasswordForm: {},
-    saveUserSettingsLoading: false,
-    changePasswordLoading: false,
-    deleteAccountLoading: false,
     deleteAccountShowConfirm: false,
     deleteAccountForm: {},
     personBlocks: [],
@@ -180,8 +171,8 @@ export class Settings extends Component<any, SettingsState> {
     this.userSettings = this.userSettings.bind(this);
     this.blockCards = this.blockCards.bind(this);
 
-    this.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
+    this.handleBlockPerson = this.handleBlockPerson.bind(this);
+    this.handleBlockCommunity = this.handleBlockCommunity.bind(this);
 
     const mui = UserService.Instance.myUserInfo;
     if (mui) {
@@ -245,10 +236,6 @@ export class Settings extends Component<any, SettingsState> {
     this.setState({ themeList: await fetchThemeList() });
   }
 
-  componentWillUnmount() {
-    this.subscription?.unsubscribe();
-  }
-
   get documentTitle(): string {
     return i18n.t("settings");
   }
@@ -375,7 +362,7 @@ export class Settings extends Component<any, SettingsState> {
           </div>
           <div className="form-group">
             <button type="submit" className="btn btn-block btn-secondary mr-4">
-              {this.state.changePasswordLoading ? (
+              {this.state.changePasswordRes.state === "loading" ? (
                 <Spinner />
               ) : (
                 capitalizeFirstLetter(i18n.t("save"))
@@ -791,7 +778,7 @@ export class Settings extends Component<any, SettingsState> {
           {this.totpSection()}
           <div className="form-group">
             <button type="submit" className="btn btn-block btn-secondary mr-4">
-              {this.state.saveUserSettingsLoading ? (
+              {this.state.saveRes.state === "loading" ? (
                 <Spinner />
               ) : (
                 capitalizeFirstLetter(i18n.t("save"))
@@ -830,7 +817,7 @@ export class Settings extends Component<any, SettingsState> {
                   disabled={!this.state.deleteAccountForm.password}
                   onClick={linkEvent(this, this.handleDeleteAccount)}
                 >
-                  {this.state.deleteAccountLoading ? (
+                  {this.state.deleteAccountRes.state === "loading" ? (
                     <Spinner />
                   ) : (
                     capitalizeFirstLetter(i18n.t("delete"))
@@ -911,9 +898,7 @@ export class Settings extends Component<any, SettingsState> {
     const searchPersonOptions: Choice[] = [];
 
     if (text.length > 0) {
-      searchPersonOptions.push(
-        ...(await fetchUsers(text)).users.map(personToChoice)
-      );
+      searchPersonOptions.push(...(await fetchUsers(text)).map(personToChoice));
     }
 
     this.setState({
@@ -929,7 +914,7 @@ export class Settings extends Component<any, SettingsState> {
 
     if (text.length > 0) {
       searchCommunityOptions.push(
-        ...(await fetchCommunities(text)).communities.map(communityToChoice)
+        ...(await fetchCommunities(text)).map(communityToChoice)
       );
     }
 
@@ -939,100 +924,107 @@ export class Settings extends Component<any, SettingsState> {
     });
   });
 
-  handleBlockPerson({ value }: Choice) {
-    const auth = myAuth();
-    if (auth && value !== "0") {
-      const blockUserForm: BlockPerson = {
+  async handleBlockPerson({ value }: Choice) {
+    if (value !== "0") {
+      const res = await HttpService.client.blockPerson({
         person_id: Number(value),
         block: true,
-        auth,
-      };
-
-      WebSocketService.Instance.send(wsClient.blockPerson(blockUserForm));
+        auth: myAuthRequired(),
+      });
+      this.personBlock(res);
     }
   }
 
-  handleUnblockPerson(i: { ctx: Settings; recipientId: number }) {
-    const auth = myAuth();
-    if (auth) {
-      const blockUserForm: BlockPerson = {
-        person_id: i.recipientId,
-        block: false,
-        auth,
-      };
-      WebSocketService.Instance.send(wsClient.blockPerson(blockUserForm));
-    }
+  async handleUnblockPerson({
+    ctx,
+    recipientId,
+  }: {
+    ctx: Settings;
+    recipientId: number;
+  }) {
+    const res = await HttpService.client.blockPerson({
+      person_id: recipientId,
+      block: false,
+      auth: myAuthRequired(),
+    });
+    ctx.personBlock(res);
   }
 
-  handleBlockCommunity({ value }: Choice) {
-    const auth = myAuth();
-    if (auth && value !== "0") {
-      const blockCommunityForm: BlockCommunity = {
+  async handleBlockCommunity({ value }: Choice) {
+    if (value !== "0") {
+      const res = await HttpService.client.blockCommunity({
         community_id: Number(value),
         block: true,
-        auth,
-      };
-      WebSocketService.Instance.send(
-        wsClient.blockCommunity(blockCommunityForm)
-      );
+        auth: myAuthRequired(),
+      });
+      this.communityBlock(res);
     }
   }
 
-  handleUnblockCommunity(i: { ctx: Settings; communityId: number }) {
+  async handleUnblockCommunity(i: { ctx: Settings; communityId: number }) {
     const auth = myAuth();
     if (auth) {
-      const blockCommunityForm: BlockCommunity = {
+      const res = await HttpService.client.blockCommunity({
         community_id: i.communityId,
         block: false,
-        auth,
-      };
-      WebSocketService.Instance.send(
-        wsClient.blockCommunity(blockCommunityForm)
-      );
+        auth: myAuthRequired(),
+      });
+      i.ctx.communityBlock(res);
     }
   }
 
   handleShowNsfwChange(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.show_nsfw = event.target.checked;
-    i.setState(i.state);
+    i.setState(
+      s => ((s.saveUserSettingsForm.show_nsfw = event.target.checked), s)
+    );
   }
 
   handleShowAvatarsChange(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.show_avatars = event.target.checked;
     const mui = UserService.Instance.myUserInfo;
     if (mui) {
       mui.local_user_view.local_user.show_avatars = event.target.checked;
     }
-    i.setState(i.state);
+    i.setState(
+      s => ((s.saveUserSettingsForm.show_avatars = event.target.checked), s)
+    );
   }
 
   handleBotAccount(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.bot_account = event.target.checked;
-    i.setState(i.state);
+    i.setState(
+      s => ((s.saveUserSettingsForm.bot_account = event.target.checked), s)
+    );
   }
 
   handleShowBotAccounts(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.show_bot_accounts = event.target.checked;
-    i.setState(i.state);
+    i.setState(
+      s => (
+        (s.saveUserSettingsForm.show_bot_accounts = event.target.checked), s
+      )
+    );
   }
 
   handleReadPosts(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.show_read_posts = event.target.checked;
-    i.setState(i.state);
+    i.setState(
+      s => ((s.saveUserSettingsForm.show_read_posts = event.target.checked), s)
+    );
   }
 
   handleShowNewPostNotifs(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.show_new_post_notifs = event.target.checked;
-    i.setState(i.state);
+    i.setState(
+      s => (
+        (s.saveUserSettingsForm.show_new_post_notifs = event.target.checked), s
+      )
+    );
   }
 
   handleShowScoresChange(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.show_scores = event.target.checked;
     const mui = UserService.Instance.myUserInfo;
     if (mui) {
       mui.local_user_view.local_user.show_scores = event.target.checked;
     }
-    i.setState(i.state);
+    i.setState(
+      s => ((s.saveUserSettingsForm.show_scores = event.target.checked), s)
+    );
   }
 
   handleGenerateTotp(i: Settings, event: any) {
@@ -1041,35 +1033,37 @@ export class Settings extends Component<any, SettingsState> {
     if (checked) {
       toast(i18n.t("two_factor_setup_instructions"));
     }
-    i.state.saveUserSettingsForm.generate_totp_2fa = checked;
-    i.setState(i.state);
+    i.setState(s => ((s.saveUserSettingsForm.generate_totp_2fa = checked), s));
   }
 
   handleRemoveTotp(i: Settings, event: any) {
     // Coerce true to undefined here, so it won't generate it.
     const checked: boolean | undefined = !event.target.checked && undefined;
-    i.state.saveUserSettingsForm.generate_totp_2fa = checked;
-    i.setState(i.state);
+    i.setState(s => ((s.saveUserSettingsForm.generate_totp_2fa = checked), s));
   }
 
   handleSendNotificationsToEmailChange(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.send_notifications_to_email =
-      event.target.checked;
-    i.setState(i.state);
+    i.setState(
+      s => (
+        (s.saveUserSettingsForm.send_notifications_to_email =
+          event.target.checked),
+        s
+      )
+    );
   }
 
   handleThemeChange(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.theme = event.target.value;
+    i.setState(s => ((s.saveUserSettingsForm.theme = event.target.value), s));
     setTheme(event.target.value, true);
-    i.setState(i.state);
   }
 
   handleInterfaceLangChange(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.interface_language = event.target.value;
+    i.setState(
+      s => ((s.saveUserSettingsForm.interface_language = event.target.value), s)
+    );
     i18n.changeLanguage(
       getLanguages(i.state.saveUserSettingsForm.interface_language).at(0)
     );
-    i.setState(i.state);
   }
 
   handleDiscussionLanguageChange(val: number[]) {
@@ -1089,8 +1083,7 @@ export class Settings extends Component<any, SettingsState> {
   }
 
   handleEmailChange(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.email = event.target.value;
-    i.setState(i.state);
+    i.setState(s => ((s.saveUserSettingsForm.email = event.target.value), s));
   }
 
   handleBioChange(val: string) {
@@ -1114,90 +1107,100 @@ export class Settings extends Component<any, SettingsState> {
   }
 
   handleDisplayNameChange(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.display_name = event.target.value;
-    i.setState(i.state);
+    i.setState(
+      s => ((s.saveUserSettingsForm.display_name = event.target.value), s)
+    );
   }
 
   handleMatrixUserIdChange(i: Settings, event: any) {
-    i.state.saveUserSettingsForm.matrix_user_id = event.target.value;
-    i.setState(i.state);
+    i.setState(
+      s => ((s.saveUserSettingsForm.matrix_user_id = event.target.value), s)
+    );
   }
 
   handleNewPasswordChange(i: Settings, event: any) {
-    i.state.changePasswordForm.new_password = event.target.value;
-    if (i.state.changePasswordForm.new_password == "") {
-      i.state.changePasswordForm.new_password = undefined;
-    }
-    i.setState(i.state);
+    const newPass: string | undefined =
+      event.target.value == "" ? undefined : event.target.value;
+    i.setState(s => ((s.changePasswordForm.new_password = newPass), s));
   }
 
   handleNewPasswordVerifyChange(i: Settings, event: any) {
-    i.state.changePasswordForm.new_password_verify = event.target.value;
-    if (i.state.changePasswordForm.new_password_verify == "") {
-      i.state.changePasswordForm.new_password_verify = undefined;
-    }
-    i.setState(i.state);
+    const newPassVerify: string | undefined =
+      event.target.value == "" ? undefined : event.target.value;
+    i.setState(
+      s => ((s.changePasswordForm.new_password_verify = newPassVerify), s)
+    );
   }
 
   handleOldPasswordChange(i: Settings, event: any) {
-    i.state.changePasswordForm.old_password = event.target.value;
-    if (i.state.changePasswordForm.old_password == "") {
-      i.state.changePasswordForm.old_password = undefined;
-    }
-    i.setState(i.state);
+    const oldPass: string | undefined =
+      event.target.value == "" ? undefined : event.target.value;
+    i.setState(s => ((s.changePasswordForm.old_password = oldPass), s));
   }
 
-  handleSaveSettingsSubmit(i: Settings, event: any) {
+  async handleSaveSettingsSubmit(i: Settings, event: any) {
     event.preventDefault();
-    i.setState({ saveUserSettingsLoading: true });
-    const auth = myAuth();
-    if (auth) {
-      const form: SaveUserSettings = { ...i.state.saveUserSettingsForm, auth };
-      WebSocketService.Instance.send(wsClient.saveUserSettings(form));
+    i.setState({ saveRes: { state: "loading" } });
+
+    const saveRes = await HttpService.client.saveUserSettings({
+      ...i.state.saveUserSettingsForm,
+      auth: myAuthRequired(),
+    });
+    if (saveRes.state === "success") {
+      UserService.Instance.login(saveRes.data);
+      location.reload();
+      toast(i18n.t("saved"));
+      window.scrollTo(0, 0);
     }
+
+    i.setState({ saveRes });
   }
 
-  handleChangePasswordSubmit(i: Settings, event: any) {
+  async handleChangePasswordSubmit(i: Settings, event: any) {
     event.preventDefault();
-    i.setState({ changePasswordLoading: true });
-    const auth = myAuth();
-    const pForm = i.state.changePasswordForm;
-    const new_password = pForm.new_password;
-    const new_password_verify = pForm.new_password_verify;
-    const old_password = pForm.old_password;
-    if (auth && new_password && old_password && new_password_verify) {
-      const form: ChangePassword = {
+    const { new_password, new_password_verify, old_password } =
+      i.state.changePasswordForm;
+
+    if (new_password && old_password && new_password_verify) {
+      i.setState({ changePasswordRes: { state: "loading" } });
+      const changePasswordRes = await HttpService.client.changePassword({
         new_password,
         new_password_verify,
         old_password,
-        auth,
-      };
+        auth: myAuthRequired(),
+      });
+      if (changePasswordRes.state === "success") {
+        UserService.Instance.login(changePasswordRes.data);
+        window.scrollTo(0, 0);
+        toast(i18n.t("password_changed"));
+      }
 
-      WebSocketService.Instance.send(wsClient.changePassword(form));
+      i.setState({ changePasswordRes });
     }
   }
 
-  handleDeleteAccountShowConfirmToggle(i: Settings, event: any) {
-    event.preventDefault();
+  handleDeleteAccountShowConfirmToggle(i: Settings) {
     i.setState({ deleteAccountShowConfirm: !i.state.deleteAccountShowConfirm });
   }
 
   handleDeleteAccountPasswordChange(i: Settings, event: any) {
-    i.state.deleteAccountForm.password = event.target.value;
-    i.setState(i.state);
+    i.setState(s => ((s.deleteAccountForm.password = event.target.value), s));
   }
 
-  handleDeleteAccount(i: Settings, event: any) {
-    event.preventDefault();
-    i.setState({ deleteAccountLoading: true });
-    const auth = myAuth();
+  async handleDeleteAccount(i: Settings) {
     const password = i.state.deleteAccountForm.password;
-    if (auth && password) {
-      const form: DeleteAccount = {
+    if (password) {
+      i.setState({ deleteAccountRes: { state: "loading" } });
+      const deleteAccountRes = await HttpService.client.deleteAccount({
         password,
-        auth,
-      };
-      WebSocketService.Instance.send(wsClient.deleteAccount(form));
+        auth: myAuthRequired(),
+      });
+      if (deleteAccountRes.state === "success") {
+        UserService.Instance.logout();
+        this.context.router.history.replace("/");
+      }
+
+      i.setState({ deleteAccountRes });
     }
   }
 
@@ -1205,44 +1208,19 @@ export class Settings extends Component<any, SettingsState> {
     i.ctx.setState({ currentTab: i.tab });
   }
 
-  parseMessage(msg: any) {
-    const op = wsUserOp(msg);
-    console.log(msg);
-    if (msg.error) {
-      this.setState({
-        saveUserSettingsLoading: false,
-        changePasswordLoading: false,
-        deleteAccountLoading: false,
-      });
-      toast(i18n.t(msg.error), "danger");
-      return;
-    } else if (op == UserOperation.SaveUserSettings) {
-      this.setState({ saveUserSettingsLoading: false });
-      toast(i18n.t("saved"));
-      window.scrollTo(0, 0);
-    } else if (op == UserOperation.ChangePassword) {
-      const data = wsJsonToRes<LoginResponse>(msg);
-      UserService.Instance.login(data);
-      this.setState({ changePasswordLoading: false });
-      window.scrollTo(0, 0);
-      toast(i18n.t("password_changed"));
-    } else if (op == UserOperation.DeleteAccount) {
-      this.setState({
-        deleteAccountLoading: false,
-        deleteAccountShowConfirm: false,
-      });
-      UserService.Instance.logout();
-      window.location.href = "/";
-    } else if (op == UserOperation.BlockPerson) {
-      const data = wsJsonToRes<BlockPersonResponse>(msg);
-      updatePersonBlock(data);
+  personBlock(res: RequestState<BlockPersonResponse>) {
+    if (res.state === "success") {
+      updatePersonBlock(res.data);
       const mui = UserService.Instance.myUserInfo;
       if (mui) {
         this.setState({ personBlocks: mui.person_blocks });
       }
-    } else if (op == UserOperation.BlockCommunity) {
-      const data = wsJsonToRes<BlockCommunityResponse>(msg);
-      updateCommunityBlock(data);
+    }
+  }
+
+  communityBlock(res: RequestState<BlockCommunityResponse>) {
+    if (res.state === "success") {
+      updateCommunityBlock(res.data);
       const mui = UserService.Instance.myUserInfo;
       if (mui) {
         this.setState({ communityBlocks: mui.community_blocks });