const HorizontalSeparatorLine = styled.div` background-color: "#BF4F74"; width: 317px; height: 1px; background-color: #282933; margin-top: 1rem; margin-bottom: 1rem; `; const SideMenu = styled.div` background-color: #0e0e10; padding-top: 1rem; width: 317px; `; const [users, channels] = useMemo(() => { const users = props.usersList.map((u) => ({ ...u, unreadMessages: props.unreadMessages.chats[u.id] || 0, })); const channels = props.channelList.map((c) => ({ ...c, unreadMessages: props.unreadMessages.channels[c.name] || 0, })); return [users, channels]; }, [props.usersList, props.channelList, props.unreadMessages]); const handleCreateChannel = useCallback(() => { console.log("handleCreateChannel"); props.onChangeChannelDialog(!props.openCreateChannel); }, [props.openCreateChannel]); return ( <SideMenu> <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.SideSelector.ChannelsHeader`} props={{ title: "Channel", onChange: handleCreateChannel, componentOwnerId: props.componentOwnerId, }} /> <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.SideSelector.ChannelList`} props={{ channels, selectChannel: props.onChannelSelected, selectedChannelId: props.selectedChannel, componentOwnerId: props.componentOwnerId, }} /> <HorizontalSeparatorLine /> <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.SideSelector.DMSideSelector`} props={{ componentOwnerId: props.componentOwnerId, onToggleDMs: props.onToggleDMs, directMessagesOpen: props.directMessagesOpen, users, onDMSelected: props.onDMSelected, selectedDM: props.selectedDM, }} /> </SideMenu> );