diff --git a/web/chat/member-list-sidebar/member-list-sidebar.css b/web/chat/member-list-sidebar/member-list-sidebar.css new file mode 100644 --- /dev/null +++ b/web/chat/member-list-sidebar/member-list-sidebar.css @@ -0,0 +1,8 @@ +.container { + padding: 0 8px 16px; + overflow-y: scroll; +} + +div.noScroll { + overflow: hidden; +} diff --git a/web/chat/member-list-sidebar/member-list-sidebar.react.js b/web/chat/member-list-sidebar/member-list-sidebar.react.js new file mode 100644 --- /dev/null +++ b/web/chat/member-list-sidebar/member-list-sidebar.react.js @@ -0,0 +1,52 @@ +// @flow + +import classNames from 'classnames'; +import * as React from 'react'; + +import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; +import { useMembersGroupedByRole } from 'lib/utils/role-utils.js'; + +import css from './member-list-sidebar.css'; +import RoleGroupMemberList from './role-group-member-list.react.js'; +import { useSelector } from '../../redux/redux-utils.js'; + +type Props = { + +threadID: string, +}; + +function MembersListSidebar(props: Props): React.Node { + const { threadID } = props; + + const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]); + + const membersGroupedByRole = useMembersGroupedByRole(threadInfo); + + const [openMenu, setOpenMenu] = React.useState(null); + + const groupedMemberList = React.useMemo( + () => + Array.from(membersGroupedByRole).map(([roleName, memberInfos], index) => ( + + )), + [membersGroupedByRole, threadInfo], + ); + + const containerClassName = classNames(css.container, { + [css.noScroll]: !!openMenu, + }); + + const memberListSidebar = React.useMemo( + () =>
{groupedMemberList}
, + [containerClassName, groupedMemberList], + ); + + return memberListSidebar; +} + +export default MembersListSidebar;