Add member list

This commit is contained in:
Simon Ser 2020-06-26 14:32:56 +02:00
parent 0bd2e10631
commit 806686bd49
No known key found for this signature in database
GPG key ID: 0FDE7BE0E88F5E48
3 changed files with 71 additions and 6 deletions

View file

@ -3,6 +3,7 @@ import Client from "/lib/client.js";
import Buffer from "/components/buffer.js";
import BufferList from "/components/buffer-list.js";
import BufferHeader from "/components/buffer-header.js";
import MemberList from "/components/member-list.js";
import Connect from "/components/connect.js";
import Composer from "/components/composer.js";
import ScrollManager from "/components/scroll-manager.js";
@ -513,6 +514,18 @@ export default class App extends Component {
`;
}
var memberList = null;
if (activeBuffer && activeBuffer.type == BufferType.CHANNEL) {
memberList = html`
<section id="member-list-header">
${activeBuffer.members.size} users
</section>
<section id="member-list">
<${MemberList} members=${activeBuffer.members} onNickClick=${this.handleNickClick}/>
</section>
`;
}
return html`
<section id="sidebar">
<${BufferList} buffers=${this.state.buffers} activeBuffer=${this.state.activeBuffer} onBufferClick=${this.handleBufferListClick}/>
@ -523,6 +536,7 @@ export default class App extends Component {
<${Buffer} buffer=${activeBuffer} onNickClick=${this.handleNickClick}/>
</section>
</>
${memberList}
<${Composer} ref=${this.composer} readOnly=${this.state.activeBuffer == SERVER_BUFFER} onSubmit=${this.handleComposerSubmit}/>
`;
}

25
components/member-list.js Normal file
View file

@ -0,0 +1,25 @@
import { html, Component } from "/lib/index.js";
function MemberItem(props) {
function handleClick(event) {
event.preventDefault();
props.onClick();
}
var url = "irc:///" + encodeURIComponent(props.nick) + ",isnick";
return html`
<li>
<a href=${url} class="nick" onClick=${handleClick}>${props.nick}</a>
</li>
`;
}
export default function MemberList(props) {
return html`
<ul id="buffer-list">
${Array.from(this.props.members.entries()).map(([nick, membership]) => html`
<${MemberItem} key=${nick} nick=${nick} membership=${membership} onClick=${() => props.onNickClick(nick)}/>
`)}
</ul>
`;
}