/
MembersList.tsx
55 lines (48 loc) · 1.5 KB
/
MembersList.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import graphql from 'babel-plugin-relay/macro';
import React, { unstable_useTransition as useTransition, useCallback } from 'react';
import { FCProps } from 'src/shared/types/FCProps';
import { List } from '@material-ui/core';
import { getUserLabel } from 'src/shared/utils/getUserLabel';
import { useFragment } from 'react-relay/hooks';
import { MembersListItem } from './MembersListItem';
import { MembersList_user$key } from './__generated__/MembersList_user.graphql';
import { useMemberListContext } from './MemberListContext';
const fragment = graphql`
fragment MembersList_user on UserNode @relay(plural: true) {
id
...getUserLabel_user
}
`;
interface OwnProps {
members: MembersList_user$key;
onClick?: (id: string | null) => void;
}
type Props = FCProps<OwnProps>;
export function MembersList(props: Props) {
const { onClick } = props;
const members = useFragment(fragment, props.members);
const { userId, setUserId } = useMemberListContext();
const [startTransition] = useTransition();
const handleClick = useCallback(
(id: string | null) => {
onClick && onClick(id);
startTransition(() => {
setUserId(id);
});
},
[setUserId, onClick, startTransition],
);
return (
<List component="nav">
{members.map((member) => (
<MembersListItem
key={member.id}
id={member.id}
label={getUserLabel(member)}
onChange={handleClick}
selected={member.id === userId}
/>
))}
</List>
);
}