yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import getAccount from "@hey/helpers/getAccount";
2import { type AccountFragment, useAccountStatsQuery } from "@hey/indexer";
3import plur from "plur";
4import { type FC, useEffect, useState } from "react";
5import { useLocation } from "react-router";
6import Followers from "@/components/Shared/Modal/Followers";
7import Following from "@/components/Shared/Modal/Following";
8import GraphStatsShimmer from "@/components/Shared/Shimmer/GraphStatsShimmer";
9import { Modal } from "@/components/Shared/UI";
10import humanize from "@/helpers/humanize";
11
12interface FolloweringsProps {
13 account: AccountFragment;
14}
15
16const Followerings = ({ account }: FolloweringsProps) => {
17 const location = useLocation();
18 const [showFollowingModal, setShowFollowingModal] = useState(false);
19 const [showFollowersModal, setShowFollowersModal] = useState(false);
20
21 useEffect(() => {
22 setShowFollowersModal(false);
23 setShowFollowingModal(false);
24 }, [location.key]);
25
26 const { data, loading } = useAccountStatsQuery({
27 variables: { request: { account: account.address } }
28 });
29
30 if (loading) {
31 return (
32 <div className="pt-1">
33 <GraphStatsShimmer count={2} />
34 </div>
35 );
36 }
37
38 if (!data) {
39 return null;
40 }
41
42 const stats = data.accountStats.graphFollowStats;
43
44 type ModalContentProps = {
45 username: string;
46 address: string;
47 };
48
49 const renderModal = (
50 show: boolean,
51 setShow: (value: boolean) => void,
52 title: string,
53 Content: FC<ModalContentProps>
54 ) => (
55 <Modal onClose={() => setShow(false)} show={show} title={title}>
56 <Content
57 address={String(account.address)}
58 username={getAccount(account).username}
59 />
60 </Modal>
61 );
62
63 return (
64 <div className="flex gap-8">
65 <button
66 className="flex gap-x-1"
67 onClick={() => setShowFollowingModal(true)}
68 type="button"
69 >
70 <b>{humanize(stats?.following)}</b>
71 <span className="text-gray-500 dark:text-gray-200">Following</span>
72 </button>
73 <button
74 className="flex gap-x-1"
75 onClick={() => setShowFollowersModal(true)}
76 type="button"
77 >
78 <b>{humanize(stats?.followers)}</b>
79 <span className="text-gray-500 dark:text-gray-200">
80 {plur("Follower", stats?.followers)}
81 </span>
82 </button>
83 {renderModal(
84 showFollowingModal,
85 setShowFollowingModal,
86 "Following",
87 Following
88 )}
89 {renderModal(
90 showFollowersModal,
91 setShowFollowersModal,
92 "Followers",
93 Followers
94 )}
95 </div>
96 );
97};
98
99export default Followerings;