Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
yoginth.com
refactor: replace usernameWithPrefix with username in account-related components for consistency
1import { useApolloClient } from "@apollo/client";
2import { ERRORS } from "@hey/data/errors";
3import getAccount from "@hey/helpers/getAccount";
4import { useBlockMutation, useUnblockMutation } from "@hey/indexer";
5import type { ApolloClientError } from "@hey/types/errors";
6import { useCallback, useState } from "react";
7import { toast } from "sonner";
8import { Alert } from "@/components/Shared/UI";
9import errorToast from "@/helpers/errorToast";
10import useTransactionLifecycle from "@/hooks/useTransactionLifecycle";
11import { useBlockAlertStore } from "@/store/non-persisted/alert/useBlockAlertStore";
12import { useAccountStore } from "@/store/persisted/useAccountStore";
13
14const BlockOrUnblockAccount = () => {
15 const { currentAccount } = useAccountStore();
16 const {
17 blockingOrUnblockingAccount,
18 setShowBlockOrUnblockAlert,
19 showBlockOrUnblockAlert
20 } = useBlockAlertStore();
21
22 const [isSubmitting, setIsSubmitting] = useState(false);
23 const [hasBlocked, setHasBlocked] = useState(
24 blockingOrUnblockingAccount?.operations?.isBlockedByMe
25 );
26 const { cache } = useApolloClient();
27 const handleTransactionLifecycle = useTransactionLifecycle();
28
29 const updateCache = () => {
30 if (!blockingOrUnblockingAccount?.operations) {
31 return;
32 }
33
34 cache.modify({
35 fields: { isBlockedByMe: () => !hasBlocked },
36 id: cache.identify(blockingOrUnblockingAccount?.operations)
37 });
38 cache.evict({ id: cache.identify(blockingOrUnblockingAccount) });
39 };
40
41 const onCompleted = () => {
42 updateCache();
43 setIsSubmitting(false);
44 setHasBlocked(!hasBlocked);
45 setShowBlockOrUnblockAlert(false);
46 toast.success(
47 hasBlocked ? "Unblocked successfully" : "Blocked successfully"
48 );
49 };
50
51 const onError = useCallback((error: ApolloClientError) => {
52 setIsSubmitting(false);
53 errorToast(error);
54 }, []);
55
56 const [block] = useBlockMutation({
57 onCompleted: async ({ block }) => {
58 if (block.__typename === "AccountBlockedResponse") {
59 return onCompleted();
60 }
61
62 return await handleTransactionLifecycle({
63 onCompleted,
64 onError,
65 transactionData: block
66 });
67 },
68 onError
69 });
70
71 const [unblock] = useUnblockMutation({
72 onCompleted: async ({ unblock }) => {
73 if (unblock.__typename === "AccountUnblockedResponse") {
74 return onCompleted();
75 }
76
77 return await handleTransactionLifecycle({
78 onCompleted,
79 onError,
80 transactionData: unblock
81 });
82 },
83 onError
84 });
85
86 const blockOrUnblock = async () => {
87 if (!currentAccount) {
88 return toast.error(ERRORS.SignWallet);
89 }
90
91 setIsSubmitting(true);
92
93 // Unblock
94 if (hasBlocked) {
95 return await unblock({
96 variables: {
97 request: { account: blockingOrUnblockingAccount?.address }
98 }
99 });
100 }
101
102 // Block
103 return await block({
104 variables: {
105 request: { account: blockingOrUnblockingAccount?.address }
106 }
107 });
108 };
109
110 return (
111 <Alert
112 confirmText={hasBlocked ? "Unblock" : "Block"}
113 description={`Are you sure you want to ${
114 hasBlocked ? "unblock" : "block"
115 } ${getAccount(blockingOrUnblockingAccount).username}?`}
116 isPerformingAction={isSubmitting}
117 onClose={() => setShowBlockOrUnblockAlert(false)}
118 onConfirm={blockOrUnblock}
119 show={showBlockOrUnblockAlert}
120 title="Block Account"
121 />
122 );
123};
124
125export default BlockOrUnblockAccount;