yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import {
2 type AccountFragment,
3 type PostMentionFragment,
4 useAccountsBulkQuery
5} from "@hey/indexer";
6import { useState } from "react";
7import SingleAccount from "@/components/Shared/Account/SingleAccount";
8import SingleAccountShimmer from "@/components/Shared/Shimmer/SingleAccountShimmer";
9import Skeleton from "@/components/Shared/Skeleton";
10import { Card, ErrorMessage, Modal } from "@/components/Shared/UI";
11import { useAccountStore } from "@/store/persisted/useAccountStore";
12import MoreRelevantPeople from "./MoreRelevantPeople";
13
14interface RelevantPeopleProps {
15 mentions: PostMentionFragment[];
16}
17
18const RelevantPeople = ({ mentions }: RelevantPeopleProps) => {
19 const { currentAccount } = useAccountStore();
20 const [showMore, setShowMore] = useState(false);
21
22 const accountAddresses = mentions.map((accountMention) =>
23 accountMention.__typename === "AccountMention"
24 ? accountMention.account
25 : accountMention.replace.from
26 );
27
28 const { data, error, loading } = useAccountsBulkQuery({
29 skip: accountAddresses.length <= 0,
30 variables: { request: { addresses: accountAddresses } }
31 });
32
33 if (accountAddresses.length <= 0) {
34 return null;
35 }
36
37 if (loading) {
38 return (
39 <Card as="aside" className="space-y-4 p-5">
40 <SingleAccountShimmer showFollowUnfollowButton />
41 <SingleAccountShimmer showFollowUnfollowButton />
42 <SingleAccountShimmer showFollowUnfollowButton />
43 <SingleAccountShimmer showFollowUnfollowButton />
44 <SingleAccountShimmer showFollowUnfollowButton />
45 <div className="pt-2 pb-1">
46 <Skeleton className="h-3 w-5/12 rounded-full" />
47 </div>
48 </Card>
49 );
50 }
51
52 if (!data?.accountsBulk?.length) {
53 return null;
54 }
55
56 const firstAccounts = data?.accountsBulk?.slice(0, 5);
57
58 return (
59 <>
60 <Card as="aside" className="space-y-4 p-5">
61 <ErrorMessage error={error} title="Failed to load relevant people" />
62 {firstAccounts?.map((account) => (
63 <div className="truncate" key={account?.address}>
64 <SingleAccount
65 account={account}
66 hideFollowButton={currentAccount?.address === account.address}
67 hideUnfollowButton={currentAccount?.address === account.address}
68 showUserPreview={false}
69 />
70 </div>
71 ))}
72 {(data?.accountsBulk?.length || 0) > 5 && (
73 <button
74 className="font-bold text-gray-500 dark:text-gray-200"
75 onClick={() => setShowMore(true)}
76 type="button"
77 >
78 Show more
79 </button>
80 )}
81 </Card>
82 <Modal
83 onClose={() => setShowMore(false)}
84 show={showMore}
85 title="Relevant people"
86 >
87 <MoreRelevantPeople
88 accounts={data?.accountsBulk as AccountFragment[]}
89 />
90 </Modal>
91 </>
92 );
93};
94
95export default RelevantPeople;