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) { function Timestamp({ date }) {
var msg = props.message; 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) { function createNick(nick) {
return html` 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 lineClass = "";
var content; var content;
switch (msg.command) { switch (msg.command) {
@ -96,9 +106,14 @@ function LogLine(props) {
} }
return html` 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 { class NotificationNagger extends Component {
state = { nag: false }; state = { nag: false };
@ -130,7 +145,7 @@ class NotificationNagger extends Component {
return html` return html`
<div class="logline"> <div class="logline">
<span class="timestamp">--:--:--</span> <${Timestamp}/>
${" "} ${" "}
<a href="#" onClick=${this.handleClick}>Turn on desktop notifications</a> to get notified about new messages <a href="#" onClick=${this.handleClick}>Turn on desktop notifications</a> to get notified about new messages
</div> </div>
@ -138,22 +153,28 @@ class NotificationNagger extends Component {
} }
} }
export default function Buffer(props) { export default class Buffer extends Component {
if (!props.buffer) { shouldComponentUpdate(nextProps) {
return this.props.buffer != nextProps.buffer;
}
render() {
if (!this.props.buffer) {
return null; return null;
} }
var notifNagger = null; var notifNagger = null;
if (props.buffer.type == BufferType.SERVER) { if (this.props.buffer.type == BufferType.SERVER) {
notifNagger = html`<${NotificationNagger}/>`; notifNagger = html`<${NotificationNagger}/>`;
} }
return html` return html`
<div class="logline-list"> <div class="logline-list">
${notifNagger} ${notifNagger}
${props.buffer.messages.map((msg) => html` ${this.props.buffer.messages.map((msg) => html`
<${LogLine} key=${msg.key} message=${msg} onNickClick=${props.onNickClick}/> <${LogLine} key=${msg.key} message=${msg} onNickClick=${this.props.onNickClick}/>
`)} `)}
</div> </div>
`; `;
} }
}