feat: Finish making block instance setting

src/shared/components/person/settings.tsx

@@ -10,6 +10,7 @@ import {
   setTheme,
   showLocal,
   updateCommunityBlock,
+  updateInstanceBlock,
   updatePersonBlock,
 } from "@utils/app";
 import { capitalizeFirstLetter, debounce } from "@utils/helpers";
@@ -19,6 +20,7 @@ import { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
 import {
   BlockCommunityResponse,
+  BlockInstanceResponse,
   BlockPersonResponse,
   CommunityBlockView,
   DeleteAccountResponse,
@@ -187,6 +189,7 @@ export class Settings extends Component<any, SettingsState> {
 
     this.handleBlockPerson = this.handleBlockPerson.bind(this);
     this.handleBlockCommunity = this.handleBlockCommunity.bind(this);
+    this.handleBlockInstance = this.handleBlockInstance.bind(this);
 
     const mui = UserService.Instance.myUserInfo;
     if (mui) {
@@ -340,7 +343,7 @@ export class Settings extends Component<any, SettingsState> {
           </div>
           <div className="col-12 col-md-6">
             <div className="card border-secondary mb-3">
-              <div className="card-body">{this.blockCommunityCard()}</div>
+              <div className="card-body">{this.blockInstanceCard()}</div>
             </div>
           </div>
         </div>
@@ -494,15 +497,43 @@ export class Settings extends Component<any, SettingsState> {
       <div>
         <Filter
           filterType="instance"
-          onChange={this.handleBlockPerson}
-          onSearch={this.handlePersonSearch}
+          onChange={this.handleBlockInstance}
+          onSearch={this.handleInstanceSearch}
           options={searchInstanceOptions}
         />
-        {this.blockedUsersList()}
+        {this.blockedInstancesList()}
       </div>
     );
   }
 
+  blockedInstancesList() {
+    // TODO: Make translations
+    return (
+      <>
+        <h2 className="h5">{I18NextService.i18n.t("blocked_users")}</h2>
+        <ul className="list-unstyled mb-0">
+          {this.state.instanceBlocks.map(ib => (
+            <li key={ib.instance.id}>
+              <span>
+                {ib.instance.domain}
+                <button
+                  className="btn btn-sm"
+                  onClick={linkEvent(
+                    { ctx: this, instanceId: ib.instance.id },
+                    this.handleUnblockInstance,
+                  )}
+                  data-tippy-content={I18NextService.i18n.t("unblock_user")}
+                >
+                  <Icon icon="x" classes="icon-inline" />
+                </button>
+              </span>
+            </li>
+          ))}
+        </ul>
+      </>
+    );
+  }
+
   saveUserSettingsHtmlForm() {
     const selectedLangs = this.state.saveUserSettingsForm.discussion_languages;
 
@@ -1096,6 +1127,31 @@ export class Settings extends Component<any, SettingsState> {
     }
   }
 
+  async handleBlockInstance({ value }: Choice) {
+    if (value !== "0") {
+      const id = Number(value);
+      const res = await HttpService.client.blockInstance({
+        block: true,
+        instance_id: id,
+      });
+      this.instanceBlock(id, res);
+    }
+  }
+
+  async handleUnblockInstance({
+    ctx,
+    instanceId,
+  }: {
+    ctx: Settings;
+    instanceId: number;
+  }) {
+    const res = await HttpService.client.blockInstance({
+      block: false,
+      instance_id: instanceId,
+    });
+    ctx.instanceBlock(instanceId, res);
+  }
+
   handleShowNsfwChange(i: Settings, event: any) {
     i.setState(
       s => ((s.saveUserSettingsForm.show_nsfw = event.target.checked), s),
@@ -1380,4 +1436,19 @@ export class Settings extends Component<any, SettingsState> {
       }
     }
   }
+
+  instanceBlock(id: number, res: RequestState<BlockInstanceResponse>) {
+    if (
+      res.state === "success" &&
+      this.state.instancesRes.state === "success"
+    ) {
+      const linkedInstances =
+        this.state.instancesRes.data.federated_instances?.linked ?? [];
+      updateInstanceBlock(res.data, id, linkedInstances);
+      const mui = UserService.Instance.myUserInfo;
+      if (mui) {
+        this.setState({ instanceBlocks: mui.instance_blocks });
+      }
+    }
+  }
 }

src/shared/utils/app/index.ts

@@ -53,6 +53,7 @@ import siteBannerCss from "./site-banner-css";
 import updateCommunityBlock from "./update-community-block";
 import updatePersonBlock from "./update-person-block";
 import instanceToChoice from "./instance-to-choice";
+import updateInstanceBlock from "./update-instance-block";
 
 export {
   buildCommentsTree,
@@ -110,4 +111,5 @@ export {
   updateCommunityBlock,
   updatePersonBlock,
   instanceToChoice,
+  updateInstanceBlock,
 };

src/shared/utils/app/update-instance-block.ts

@@ -0,0 +1,27 @@
+import { BlockInstanceResponse, Instance, MyUserInfo } from "lemmy-js-client";
+import { I18NextService, UserService } from "../../services";
+import { toast } from "../../toast";
+
+export default function updateInstanceBlock(
+  data: BlockInstanceResponse,
+  id: number,
+  linkedInstances: Instance[],
+  myUserInfo: MyUserInfo | undefined = UserService.Instance.myUserInfo,
+) {
+  if (myUserInfo) {
+    const instance = linkedInstances.find(i => i.id === id)!;
+
+    if (data.blocked) {
+      myUserInfo.instance_blocks.push({
+        person: myUserInfo.local_user_view.person,
+        instance,
+      });
+      toast(`${I18NextService.i18n.t("blocked")} ${instance.domain}`);
+    } else {
+      myUserInfo.instance_blocks = myUserInfo.instance_blocks.filter(
+        i => i.instance.id !== id,
+      );
+      toast(`${I18NextService.i18n.t("unblocked")} ${instance.domain}`);
+    }
+  }
+}