improve performance

public/_headers

@@ -5,7 +5,7 @@
   Cache-Control: public, max-age=86400
 
 /
-    Cache-Control: public, max-age=120
+  Cache-Control: public, max-age=120
 
 /?src=pwa
-    Cache-Control: public, max-age=120
+  Cache-Control: public, max-age=120

src/App.js

@@ -12,6 +12,8 @@ class App extends Component {
             search_text: null,
             flow_render_key: +new Date(),
         };
+        this.show_sidebar_bound=this.show_sidebar.bind(this);
+        this.set_search_text_bound=this.set_search_text.bind(this);
     }
 
     show_sidebar(title,content) {
@@ -34,10 +36,10 @@ class App extends Component {
                 <div className="bg-img" style={{
                     backgroundImage: 'url('+(localStorage['REPLACE_ERIRI_WITH_URL'] || 'static/eriri_bg.jpg')+')'
                 }} />
-                <Title callback={this.show_sidebar.bind(this)} set_search_text={this.set_search_text.bind(this)} />
+                <Title callback={this.show_sidebar_bound} set_search_text={this.set_search_text_bound} />
                 <div className="left-container">
                     <Flow key={this.state.flow_render_key}
-                        callback={this.show_sidebar.bind(this)} search_text={this.state.search_text}
+                        callback={this.show_sidebar_bound} search_text={this.state.search_text}
                     />
                     <br />
                 </div>

src/Common.js

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {Component, PureComponent} from 'react';
 
 import TimeAgo from 'react-timeago';
 import Linkify from 'react-linkify';
@@ -36,19 +36,21 @@ export function TitleLine(props) {
     )
 }
 
-export function HighlightedText(props) {
+export class HighlightedText extends PureComponent {
-    let parts=[].concat.apply([], props.text.split(PID_RE).map((p)=>p.split(NICKNAME_RE)));
+    render() {
-    return (
+        let parts=[].concat.apply([], props.text.split(PID_RE).map((p)=>p.split(NICKNAME_RE)));
-        <Linkify properties={{target: '_blank'}}>
+        return (
-            <pre>
+            <Linkify properties={{target: '_blank'}}>
-                {parts.map((p,idx)=>(
+                <pre>
-                    <span key={idx}>{
+                    {parts.map((p,idx)=>(
-                        PID_RE.test(p) ? <a href={'##'+p} target="_blank">{p}</a> :
+                        <span key={idx}>{
-                        NICKNAME_RE.test(p) ? <span style={{backgroundColor: props.color_picker.get(p)}}>{p}</span> :
+                            PID_RE.test(p) ? <a href={'##'+p} target="_blank">{p}</a> :
-                        p
+                            NICKNAME_RE.test(p) ? <span style={{backgroundColor: props.color_picker.get(p)}}>{p}</span> :
-                    }</span>
+                            p
-                ))}
+                        }</span>
-            </pre>
+                    ))}
-        </Linkify>
+                </pre>
-    )
+            </Linkify>
+        )
+    }
 }

src/Flows.js

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {Component, PureComponent} from 'react';
 import {ColorPicker} from './color_picker';
 import {Time, TitleLine, HighlightedText} from './Common.js';
 import './Flows.css';
@@ -46,7 +46,7 @@ function FlowItem(props) {
     );
 }
 
-class FlowItemRow extends Component {
+class FlowItemRow extends PureComponent {
     constructor(props) {
         super(props);
         this.state={
@@ -156,7 +156,7 @@ function FlowChunk(props) {
     );
 }
 
-export class Flow extends Component {
+export class Flow extends PureComponent {
     constructor(props) {
         super(props);
         this.state={
@@ -222,8 +222,8 @@ export class Flow extends Component {
                             chunks: [{
                                 title: 'Result for "'+this.state.search_param+'"',
                                 data: json.data,
-                                mode: finished ? 'search_finished' : 'search',
                             }],
+                            mode: finished ? 'search_finished' : 'search',
                             loading_status: 'done',
                         });
                     })

src/Title.js

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {Component, PureComponent} from 'react';
 import './Title.css';
 
 const HELP_TEXT=(
@@ -39,7 +39,7 @@ const HELP_TEXT=(
     </div>
 );
 
-class ControlBar extends Component {
+class ControlBar extends PureComponent {
     constructor(props) {
         super(props);
         this.state={