yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 🌿
refactor: replace BetaToggle and DefaultToNameToggle components with ProToggle for improved reusability and consistency
+119
-158
+9
-79
apps/web/src/components/Settings/Pro/BetaToggle.tsx
+9
-79
apps/web/src/components/Settings/Pro/BetaToggle.tsx
···
1
1
import { PERMISSIONS } from "@hey/data/constants";
2
-
import { useJoinGroupMutation, useLeaveGroupMutation } from "@hey/indexer";
3
-
import type { ApolloClientError } from "@hey/types/errors";
4
-
import { useCallback, useState } from "react";
5
-
import ToggleWithHelper from "@/components/Shared/ToggleWithHelper";
6
-
import errorToast from "@/helpers/errorToast";
7
-
import useTransactionLifecycle from "@/hooks/useTransactionLifecycle";
8
-
import useWaitForTransactionToComplete from "@/hooks/useWaitForTransactionToComplete";
9
-
import { useAccountStore } from "@/store/persisted/useAccountStore";
10
-
11
-
const BetaToggle = () => {
12
-
const { currentAccount } = useAccountStore();
13
-
const [isSubmitting, setIsSubmitting] = useState(false);
14
-
const handleTransactionLifecycle = useTransactionLifecycle();
15
-
const waitForTransactionToComplete = useWaitForTransactionToComplete();
16
-
17
-
const onCompleted = async (hash: string) => {
18
-
await waitForTransactionToComplete(hash);
19
-
location.reload();
20
-
};
21
-
22
-
const onError = useCallback((error: ApolloClientError) => {
23
-
errorToast(error);
24
-
}, []);
25
-
26
-
const [joinGroup] = useJoinGroupMutation({
27
-
onCompleted: async ({ joinGroup }) => {
28
-
if (joinGroup.__typename === "JoinGroupResponse") {
29
-
return await onCompleted(joinGroup.hash);
30
-
}
31
-
32
-
return await handleTransactionLifecycle({
33
-
onCompleted,
34
-
onError,
35
-
transactionData: joinGroup
36
-
});
37
-
},
38
-
onError
39
-
});
40
-
41
-
const [leaveGroup] = useLeaveGroupMutation({
42
-
onCompleted: async ({ leaveGroup }) => {
43
-
if (leaveGroup.__typename === "LeaveGroupResponse") {
44
-
return await onCompleted(leaveGroup.hash);
45
-
}
46
-
47
-
return await handleTransactionLifecycle({
48
-
onCompleted,
49
-
onError,
50
-
transactionData: leaveGroup
51
-
});
52
-
},
53
-
onError
54
-
});
55
-
56
-
if (!currentAccount) {
57
-
return null;
58
-
}
59
-
60
-
const toggleBeta = async () => {
61
-
setIsSubmitting(true);
62
-
63
-
const variables = { request: { group: PERMISSIONS.BETA } };
64
-
65
-
if (currentAccount?.isBeta) {
66
-
return await leaveGroup({ variables });
67
-
}
68
-
69
-
return await joinGroup({ variables });
70
-
};
2
+
import ProToggle from "./ProToggle";
71
3
72
-
return (
73
-
<ToggleWithHelper
74
-
description="Get early access to new features"
75
-
disabled={isSubmitting}
76
-
heading="Beta"
77
-
on={currentAccount?.isBeta}
78
-
setOn={toggleBeta}
79
-
/>
80
-
);
81
-
};
4
+
const BetaToggle = () => (
5
+
<ProToggle
6
+
description="Get early access to new features"
7
+
group={PERMISSIONS.BETA}
8
+
heading="Beta"
9
+
selectIsOn={(account) => account.isBeta}
10
+
/>
11
+
);
82
12
83
13
export default BetaToggle;
+9
-79
apps/web/src/components/Settings/Pro/DefaultToNameToggle.tsx
+9
-79
apps/web/src/components/Settings/Pro/DefaultToNameToggle.tsx
···
1
1
import { PERMISSIONS } from "@hey/data/constants";
2
-
import { useJoinGroupMutation, useLeaveGroupMutation } from "@hey/indexer";
3
-
import type { ApolloClientError } from "@hey/types/errors";
4
-
import { useCallback, useState } from "react";
5
-
import ToggleWithHelper from "@/components/Shared/ToggleWithHelper";
6
-
import errorToast from "@/helpers/errorToast";
7
-
import useTransactionLifecycle from "@/hooks/useTransactionLifecycle";
8
-
import useWaitForTransactionToComplete from "@/hooks/useWaitForTransactionToComplete";
9
-
import { useAccountStore } from "@/store/persisted/useAccountStore";
10
-
11
-
const DefaultToNameToggle = () => {
12
-
const { currentAccount } = useAccountStore();
13
-
const [isSubmitting, setIsSubmitting] = useState(false);
14
-
const handleTransactionLifecycle = useTransactionLifecycle();
15
-
const waitForTransactionToComplete = useWaitForTransactionToComplete();
16
-
17
-
const onCompleted = async (hash: string) => {
18
-
await waitForTransactionToComplete(hash);
19
-
location.reload();
20
-
};
21
-
22
-
const onError = useCallback((error: ApolloClientError) => {
23
-
errorToast(error);
24
-
}, []);
25
-
26
-
const [joinGroup] = useJoinGroupMutation({
27
-
onCompleted: async ({ joinGroup }) => {
28
-
if (joinGroup.__typename === "JoinGroupResponse") {
29
-
return await onCompleted(joinGroup.hash);
30
-
}
31
-
32
-
return await handleTransactionLifecycle({
33
-
onCompleted,
34
-
onError,
35
-
transactionData: joinGroup
36
-
});
37
-
},
38
-
onError
39
-
});
40
-
41
-
const [leaveGroup] = useLeaveGroupMutation({
42
-
onCompleted: async ({ leaveGroup }) => {
43
-
if (leaveGroup.__typename === "LeaveGroupResponse") {
44
-
return await onCompleted(leaveGroup.hash);
45
-
}
46
-
47
-
return await handleTransactionLifecycle({
48
-
onCompleted,
49
-
onError,
50
-
transactionData: leaveGroup
51
-
});
52
-
},
53
-
onError
54
-
});
55
-
56
-
if (!currentAccount) {
57
-
return null;
58
-
}
59
-
60
-
const togglePreferName = async () => {
61
-
setIsSubmitting(true);
62
-
63
-
const variables = { request: { group: PERMISSIONS.PREFER_NAME_IN_FEED } };
64
-
65
-
if (currentAccount?.preferNameInFeed) {
66
-
return await leaveGroup({ variables });
67
-
}
68
-
69
-
return await joinGroup({ variables });
70
-
};
2
+
import ProToggle from "./ProToggle";
71
3
72
-
return (
73
-
<ToggleWithHelper
74
-
description="Show profile name instead of username across the feeds"
75
-
disabled={isSubmitting}
76
-
heading="Prefer profile name"
77
-
on={currentAccount?.preferNameInFeed}
78
-
setOn={togglePreferName}
79
-
/>
80
-
);
81
-
};
4
+
const DefaultToNameToggle = () => (
5
+
<ProToggle
6
+
description="Show profile name instead of username across the feeds"
7
+
group={PERMISSIONS.PREFER_NAME_IN_FEED}
8
+
heading="Prefer profile name"
9
+
selectIsOn={(account) => account.preferNameInFeed}
10
+
/>
11
+
);
82
12
83
13
export default DefaultToNameToggle;
+101
apps/web/src/components/Settings/Pro/ProToggle.tsx
+101
apps/web/src/components/Settings/Pro/ProToggle.tsx
···
1
+
import type { AccountFragment } from "@hey/indexer";
2
+
import { useJoinGroupMutation, useLeaveGroupMutation } from "@hey/indexer";
3
+
import type { ApolloClientError } from "@hey/types/errors";
4
+
import { useCallback, useState } from "react";
5
+
import ToggleWithHelper from "@/components/Shared/ToggleWithHelper";
6
+
import errorToast from "@/helpers/errorToast";
7
+
import useTransactionLifecycle from "@/hooks/useTransactionLifecycle";
8
+
import useWaitForTransactionToComplete from "@/hooks/useWaitForTransactionToComplete";
9
+
import { useAccountStore } from "@/store/persisted/useAccountStore";
10
+
11
+
interface ProToggleProps {
12
+
description: string;
13
+
heading: string;
14
+
group: string;
15
+
selectIsOn: (account: AccountFragment) => boolean | null | undefined;
16
+
}
17
+
18
+
const 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
+
101
+
export default ProToggle;