yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { useApolloClient } from "@apollo/client";
2import { type AccountFragment, useUnfollowMutation } from "@hey/indexer";
3import type { ApolloClientError } from "@hey/types/errors";
4import { useCallback, useState } from "react";
5import { Button } from "@/components/Shared/UI";
6import errorToast from "@/helpers/errorToast";
7import useTransactionLifecycle from "@/hooks/useTransactionLifecycle";
8import { useAuthModalStore } from "@/store/non-persisted/modal/useAuthModalStore";
9import { useAccountStore } from "@/store/persisted/useAccountStore";
10
11interface UnfollowProps {
12 buttonClassName: string;
13 account: AccountFragment;
14 small: boolean;
15 title: string;
16}
17
18const Unfollow = ({
19 buttonClassName,
20 account,
21 small,
22 title
23}: UnfollowProps) => {
24 const { currentAccount } = useAccountStore();
25 const { setShowAuthModal } = useAuthModalStore();
26 const [isSubmitting, setIsSubmitting] = useState(false);
27 const { cache } = useApolloClient();
28 const handleTransactionLifecycle = useTransactionLifecycle();
29
30 const updateCache = () => {
31 if (!account.operations) {
32 return;
33 }
34
35 cache.modify({
36 fields: { isFollowedByMe: () => false },
37 id: cache.identify(account.operations)
38 });
39 };
40
41 const onCompleted = () => {
42 updateCache();
43 setIsSubmitting(false);
44 };
45
46 const onError = useCallback((error: ApolloClientError) => {
47 setIsSubmitting(false);
48 errorToast(error);
49 }, []);
50
51 const [unfollow] = useUnfollowMutation({
52 onCompleted: async ({ unfollow }) => {
53 if (unfollow.__typename === "UnfollowResponse") {
54 return onCompleted();
55 }
56
57 if (unfollow.__typename === "AccountFollowOperationValidationFailed") {
58 return onError({ message: unfollow.reason });
59 }
60
61 return await handleTransactionLifecycle({
62 onCompleted,
63 onError,
64 transactionData: unfollow
65 });
66 },
67 onError
68 });
69
70 const handleCreateUnfollow = async () => {
71 if (!currentAccount) {
72 return setShowAuthModal(true);
73 }
74
75 setIsSubmitting(true);
76 return await unfollow({
77 variables: { request: { account: account.address } }
78 });
79 };
80
81 return (
82 <Button
83 aria-label={title}
84 className={buttonClassName}
85 disabled={isSubmitting}
86 loading={isSubmitting}
87 onClick={handleCreateUnfollow}
88 size={small ? "sm" : "md"}
89 >
90 {title}
91 </Button>
92 );
93};
94
95export default Unfollow;