yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { PERMISSIONS } from "@hey/data/constants";
2import { type GroupFragment, useGroupStatsQuery } from "@hey/indexer";
3import { useState } from "react";
4import Members from "@/components/Shared/Modal/Members";
5import GraphStatsShimmer from "@/components/Shared/Shimmer/GraphStatsShimmer";
6import { Modal } from "@/components/Shared/UI";
7import humanize from "@/helpers/humanize";
8import { useAccountStore } from "@/store/persisted/useAccountStore";
9
10interface MembersCountProps {
11 group: GroupFragment;
12}
13
14const MembersCount = ({ group }: MembersCountProps) => {
15 const { currentAccount } = useAccountStore();
16 const [showMembersModal, setShowMembersModal] = useState(false);
17 const hideCount = Object.values(
18 currentAccount?.isStaff ? [] : PERMISSIONS
19 ).includes(group.address);
20
21 const { data, loading } = useGroupStatsQuery({
22 skip: hideCount,
23 variables: { request: { group: group.address } }
24 });
25
26 if (hideCount) {
27 return null;
28 }
29
30 if (loading) {
31 return <GraphStatsShimmer count={1} />;
32 }
33
34 if (!data) {
35 return null;
36 }
37
38 const stats = data.groupStats;
39
40 return (
41 <div className="flex gap-8">
42 <button
43 className="flex gap-x-1"
44 onClick={() => setShowMembersModal(true)}
45 type="button"
46 >
47 <b>{humanize(stats?.totalMembers)}</b>
48 <span className="text-gray-500 dark:text-gray-200">Members</span>
49 </button>
50 <Modal
51 onClose={() => setShowMembersModal(false)}
52 show={showMembersModal}
53 title="Members"
54 >
55 <Members group={group} />
56 </Modal>
57 </div>
58 );
59};
60
61export default MembersCount;