Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
yoginth.com
1import type { AccountFragment } from "@hey/indexer";
2import { useJoinGroupMutation, useLeaveGroupMutation } from "@hey/indexer";
3import type { ApolloClientError } from "@hey/types/errors";
4import { useCallback, useState } from "react";
5import ToggleWithHelper from "@/components/Shared/ToggleWithHelper";
6import errorToast from "@/helpers/errorToast";
7import useTransactionLifecycle from "@/hooks/useTransactionLifecycle";
8import useWaitForTransactionToComplete from "@/hooks/useWaitForTransactionToComplete";
9import { useAccountStore } from "@/store/persisted/useAccountStore";
10
11interface ProToggleProps {
12 description: string;
13 heading: string;
14 group: string;
15 selectIsOn: (account: AccountFragment) => boolean | null | undefined;
16}
17
18const ProToggle = ({
19 description,
20 group,
21 heading,
22 selectIsOn
23}: ProToggleProps) => {
24 const { currentAccount } = useAccountStore();
25 const [isSubmitting, setIsSubmitting] = useState(false);
26 const handleTransactionLifecycle = useTransactionLifecycle();
27 const waitForTransactionToComplete = useWaitForTransactionToComplete();
28
29 const onCompleted = async (hash: string) => {
30 await waitForTransactionToComplete(hash);
31 location.reload();
32 };
33
34 const onError = useCallback(
35 (error: ApolloClientError) => {
36 setIsSubmitting(false);
37 errorToast(error);
38 },
39 [setIsSubmitting]
40 );
41
42 const [joinGroup] = useJoinGroupMutation({
43 onCompleted: async ({ joinGroup }) => {
44 if (joinGroup.__typename === "JoinGroupResponse") {
45 return await onCompleted(joinGroup.hash);
46 }
47
48 return await handleTransactionLifecycle({
49 onCompleted,
50 onError,
51 transactionData: joinGroup
52 });
53 },
54 onError
55 });
56
57 const [leaveGroup] = useLeaveGroupMutation({
58 onCompleted: async ({ leaveGroup }) => {
59 if (leaveGroup.__typename === "LeaveGroupResponse") {
60 return await onCompleted(leaveGroup.hash);
61 }
62
63 return await handleTransactionLifecycle({
64 onCompleted,
65 onError,
66 transactionData: leaveGroup
67 });
68 },
69 onError
70 });
71
72 if (!currentAccount) {
73 return null;
74 }
75
76 const isOn = Boolean(selectIsOn(currentAccount));
77
78 const toggle = async () => {
79 setIsSubmitting(true);
80
81 const variables = { request: { group } };
82
83 if (isOn) {
84 return await leaveGroup({ variables });
85 }
86
87 return await joinGroup({ variables });
88 };
89
90 return (
91 <ToggleWithHelper
92 description={description}
93 disabled={isSubmitting}
94 heading={heading}
95 on={isOn}
96 setOn={toggle}
97 />
98 );
99};
100
101export default ProToggle;