https://github.com/ecency/vision-next/issues/230

Fixed mute user profile statement
ecency · Feb 1, 2025 · df24b1d · df24b1d
1 parent 67cc5d3
commit df24b1d
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 16 deletions.
diff --git a/src/api/mutations/account-following.ts b/src/api/mutations/account-following.ts
@@ -1,9 +1,10 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { broadcastPostingJSON, formatError } from "@/api/operations";
-import { error } from "@/features/shared";
+import { error, success } from "@/features/shared";
 import { AccountRelationship } from "@/api/bridge";
 import { QueryIdentifiers } from "@/core/react-query";
-import * as ls from "@/utils/local-storage";
+import i18next from "i18next";
+import { useGetRelationshipBtwAccounts } from "../queries";
 
 export function useFollow(follower: string, following: string) {
   const queryClient = useQueryClient();
@@ -26,12 +27,6 @@ export function useFollow(follower: string, following: string) {
       error(...formatError(err));
     },
     onSuccess: ([_, isFollow]) => {
-      let mutedList = ls.get("muted-list");
-      if (mutedList) {
-        mutedList = mutedList.filter((item: string) => item !== following);
-      }
-      ls.set("muted-list", mutedList);
-
       queryClient.setQueryData<AccountRelationship | null>(
         [QueryIdentifiers.GET_RELATIONSHIP_BETWEEN_ACCOUNTS, follower, following],
         (data) => {
@@ -54,6 +49,8 @@ export function useFollow(follower: string, following: string) {
 export function useIgnore(follower?: string, following?: string) {
   const queryClient = useQueryClient();
 
+  const { data } = useGetRelationshipBtwAccounts(follower, following);
+
   return useMutation({
     mutationKey: ["follow-account", "ignore", follower, following],
     mutationFn: () => {
@@ -73,9 +70,10 @@ export function useIgnore(follower?: string, following?: string) {
       error(...formatError(err));
     },
     onSuccess: () => {
-      const mutedList = ls.get("muted-list");
-      if (mutedList) {
-        ls.set("muted-list", mutedList.concat([following]));
+      if (data?.ignores === true) {
+        success(i18next.t("events.unmuted"));
+      } else {
+        success(i18next.t("events.muted"));
       }
 
       queryClient.setQueryData<AccountRelationship | null>(
@@ -87,7 +85,7 @@ export function useIgnore(follower?: string, following?: string) {
 
           return {
             follows: data.follows,
-            ignores: true,
+            ignores: !data?.ignores,
             is_blacklisted: data.is_blacklisted,
             follows_blacklists: data.follows_blacklists
           };

diff --git a/src/features/i18n/locales/en-US.json b/src/features/i18n/locales/en-US.json
@@ -2547,5 +2547,9 @@
     "edit-wave": "Edit wave",
     "reply": "Reply",
     "replying": "Replying..."
+  },
+  "events": {
+    "muted": "User has muted",
+    "unmuted": "User has unmuted"
   }
 }
diff --git a/src/features/shared/follow-controls/index.tsx b/src/features/shared/follow-controls/index.tsx
@@ -7,6 +7,8 @@ import { useGlobalStore } from "@/core/global-store";
 import { useFollow, useIgnore } from "@/api/mutations";
 import i18next from "i18next";
 import { LoginRequired } from "@/features/shared";
+import { UilBell, UilBellSlash } from "@tooni/iconscout-unicons-react";
+import { StyledTooltip } from "@ui/tooltip";
 
 interface Props {
   targetUsername: string;
@@ -20,13 +22,28 @@ interface ButtonProps {
 
 function MuteButton({ disabled, following }: ButtonProps) {
   const activeUser = useGlobalStore((state) => state.activeUser);
-  const { mutateAsync: ignore } = useIgnore(activeUser?.username, following);
+
+  const { data } = useGetRelationshipBtwAccounts(activeUser?.username, following);
+  const { mutateAsync: ignore, isPending } = useIgnore(activeUser?.username, following);
 
   return activeUser?.username !== following ? (
     <LoginRequired>
-      <Button size="sm" style={{ marginRight: "5px" }} disabled={disabled} onClick={() => ignore()}>
-        {i18next.t("follow-controls.mute")}
-      </Button>
+      <StyledTooltip
+        content={
+          data?.ignores === true ? i18next.t("entry-menu.unmute") : i18next.t("entry-menu.mute")
+        }
+      >
+        <Button
+          isLoading={isPending}
+          size="sm"
+          noPadding={true}
+          className="w-[32px] mr-1"
+          disabled={disabled}
+          onClick={() => ignore()}
+          appearance={data?.ignores === true ? "secondary" : "primary"}
+          icon={data?.ignores === true ? <UilBell /> : <UilBellSlash />}
+        />
+      </StyledTooltip>
     </LoginRequired>
   ) : (
     <></>