yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import getAvatar from "@hey/helpers/getAvatar";
2import {
3 type GroupFragment,
4 GroupsOrderBy,
5 type GroupsRequest,
6 PageSize,
7 useGroupsQuery
8} from "@hey/indexer";
9import { useMemo } from "react";
10import { Select } from "@/components/Shared/UI";
11import { useAccountStore } from "@/store/persisted/useAccountStore";
12
13interface GroupSelectorProps {
14 selected?: string;
15 onChange: (groupFeed: string) => void;
16}
17
18const GroupSelector = ({ selected, onChange }: GroupSelectorProps) => {
19 const { currentAccount } = useAccountStore();
20
21 const request: GroupsRequest = {
22 filter: { member: currentAccount?.address },
23 orderBy: GroupsOrderBy.LatestFirst,
24 pageSize: PageSize.Fifty
25 };
26
27 const { data } = useGroupsQuery({
28 skip: !currentAccount,
29 variables: { request }
30 });
31
32 const options = useMemo(() => {
33 const groups = data?.groups?.items ?? [];
34 return groups.map((group: GroupFragment) => ({
35 icon: getAvatar(group),
36 label: group.metadata?.name ?? group.address,
37 selected: group.feed?.address === selected,
38 value: group.feed?.address ?? ""
39 }));
40 }, [data?.groups?.items, selected]);
41
42 if (!options.length) {
43 return null;
44 }
45
46 return (
47 <Select
48 className="w-full"
49 iconClassName="size-5 rounded-md"
50 onChange={(value) => onChange(value as string)}
51 options={options as any}
52 showSearch
53 />
54 );
55};
56
57export default GroupSelector;