CringeStudios/IRC_Client
5
0
Fork 0
forked from CringeStudios/gamja
Code Pull Requests Activity

Optimize Buffer

Browse Source 
Convert to classes and implement shouldComponentUpdate to avoid
re-rendering elements unnecessarily.
This commit is contained in:
Simon Ser 2020-07-09 23:33:34 +02:00
parent 0a825547a7
commit 8809fdcd6a
No known key found for this signature in database
GPG Key ID: 0FDE7BE0E88F5E48
1 changed files with 103 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
components/buffer.js
View File

@ -25,8 +25,27 @@ function Nick(props) {
`;
}
function LogLine(props) {
var msg = props.message;
function Timestamp({ date }) {
if (!date) {
return html`<spam class="timestamp">--:--:--</span>`;
}
var hh = date.getHours().toString().padStart(2, "0");
var mm = date.getMinutes().toString().padStart(2, "0");
var ss = date.getSeconds().toString().padStart(2, "0");
var timestamp = `${hh}:${mm}:${ss}`;
return html`
<a href="#" class="timestamp" onClick=${(event) => event.preventDefault()}>${timestamp}</a>
`;
}
class LogLine extends Component {
shouldComponentUpdate(nextProps) {
return this.props.message != nextProps.message;
}
render() {
var msg = this.props.message;
function createNick(nick) {
return html`
@ -34,15 +53,6 @@ function LogLine(props) {
`;
}
var date = new Date(msg.tags["time"]);
var timestamp = date.toLocaleTimeString(undefined, {
timeStyle: "short",
hour12: false,
});
var timestampLink = html`
<a href="#" class="timestamp" onClick=${(event) => event.preventDefault()}>${timestamp}</a>
`;
var lineClass = "";
var content;
switch (msg.command) {
@ -96,9 +106,14 @@ function LogLine(props) {
}
return html`
<div class="logline ${lineClass}">${timestampLink} ${content}</div>
<div class="logline ${lineClass}">
<${Timestamp} date=${new Date(msg.tags.time)}/>
${" "}
${content}
</div>
`;
}
}
class NotificationNagger extends Component {
state = { nag: false };
@ -130,7 +145,7 @@ class NotificationNagger extends Component {
return html`
<div class="logline">
<span class="timestamp">--:--:--</span>
<${Timestamp}/>
${" "}
<a href="#" onClick=${this.handleClick}>Turn on desktop notifications</a> to get notified about new messages
</div>
@ -138,22 +153,28 @@ class NotificationNagger extends Component {
}
}
export default function Buffer(props) {
if (!props.buffer) {
export default class Buffer extends Component {
shouldComponentUpdate(nextProps) {
return this.props.buffer != nextProps.buffer;
}
render() {
if (!this.props.buffer) {
return null;
}
var notifNagger = null;
if (props.buffer.type == BufferType.SERVER) {
if (this.props.buffer.type == BufferType.SERVER) {
notifNagger = html`<${NotificationNagger}/>`;
}
return html`
<div class="logline-list">
${notifNagger}
${props.buffer.messages.map((msg) => html`
<${LogLine} key=${msg.key} message=${msg} onNickClick=${props.onNickClick}/>
${this.props.buffer.messages.map((msg) => html`
<${LogLine} key=${msg.key} message=${msg} onNickClick=${this.props.onNickClick}/>
`)}
</div>
`;
}
}