yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { TRANSFORMS } from "@hey/data/constants";
2import getAccount from "@hey/helpers/getAccount";
3import getAvatar from "@hey/helpers/getAvatar";
4import { useFollowersYouKnowQuery } from "@hey/indexer";
5import { type ReactNode, useEffect, useMemo, useState } from "react";
6import { useLocation } from "react-router";
7import FollowersYouKnow from "@/components/Shared/Modal/FollowersYouKnow";
8import FollowersYouKnowShimmer from "@/components/Shared/Shimmer/FollowersYouKnowShimmer";
9import { Modal, StackedAvatars } from "@/components/Shared/UI";
10import { useAccountStore } from "@/store/persisted/useAccountStore";
11
12interface FollowersYouKnowOverviewProps {
13 username: string;
14 address: string;
15}
16
17const FollowersYouKnowOverview = ({
18 username,
19 address
20}: FollowersYouKnowOverviewProps) => {
21 const location = useLocation();
22 const { currentAccount } = useAccountStore();
23 const [showMutualFollowersModal, setShowMutualFollowersModal] =
24 useState(false);
25
26 useEffect(() => {
27 setShowMutualFollowersModal(false);
28 }, [location.key]);
29
30 const { data, error, loading } = useFollowersYouKnowQuery({
31 skip: !address || !currentAccount?.address,
32 variables: {
33 request: { observer: currentAccount?.address, target: address }
34 }
35 });
36
37 const accounts = data?.followersYouKnow?.items.slice(0, 4) ?? [];
38
39 const accountNames = useMemo(() => {
40 const names = accounts.map((account) => getAccount(account.follower).name);
41 const count = names.length - 3;
42
43 if (!names.length) return null;
44 if (names.length === 1) return names[0];
45 if (names.length === 2) return `${names[0]} and ${names[1]}`;
46 if (names.length === 3)
47 return `${names[0]}, ${names[1]}${count === 0 ? " and " : ", "}${names[2]}${count ? ` and ${count} other${count === 1 ? "" : "s"}` : ""}`;
48
49 return `${names[0]}, ${names[1]}, ${names[2]} and others`;
50 }, [accounts]);
51
52 const Wrapper = ({ children }: { children: ReactNode }) => (
53 <button
54 className="flex cursor-pointer items-center gap-x-2 text-gray-500 text-sm dark:text-gray-200"
55 onClick={() => setShowMutualFollowersModal(true)}
56 type="button"
57 >
58 <StackedAvatars
59 avatars={accounts.map((account) =>
60 getAvatar(account.follower, TRANSFORMS.AVATAR_TINY)
61 )}
62 limit={3}
63 />
64 <div className="text-left">
65 <span>Followed by </span>
66 {children}
67 </div>
68 <Modal
69 onClose={() => setShowMutualFollowersModal(false)}
70 show={showMutualFollowersModal}
71 title="Mutual Followers"
72 >
73 <FollowersYouKnow address={address} username={username} />
74 </Modal>
75 </button>
76 );
77
78 if (loading) {
79 return <FollowersYouKnowShimmer />;
80 }
81
82 if (!accounts.length || error) {
83 return null;
84 }
85
86 return <Wrapper>{accountNames}</Wrapper>;
87};
88
89export default FollowersYouKnowOverview;