refactor

src/App.js

@@ -9,11 +9,12 @@ class App extends Component {
         this.state={
             sidebar_title: null,
             sidebar_content: null,
+            mode: 'list', // list, single, search
             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);
+        this.set_mode_bound=this.set_mode.bind(this);
     }
 
     show_sidebar(title,content) {
@@ -23,9 +24,10 @@ class App extends Component {
         });
     }
 
-    set_search_text(text) {
+    set_mode(mode,search_text) {
         this.setState({
-            search_text: text,
+            mode: mode,
+            search_text: search_text,
             flow_render_key: +new Date(),
         });
     }
@@ -36,10 +38,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_bound} set_search_text={this.set_search_text_bound} />
+                <Title show_sidebar={this.show_sidebar_bound} set_mode={this.set_mode_bound} />
                 <div className="left-container">
-                    <Flow key={this.state.flow_render_key}
-                        callback={this.show_sidebar_bound} search_text={this.state.search_text}
+                    <Flow key={this.state.flow_render_key} show_sidebar={this.show_sidebar_bound}
+                        mode={this.state.mode} search_text={this.state.search_text}
                     />
                     <br />
                 </div>

src/Common.js

@@ -38,14 +38,14 @@ export function TitleLine(props) {
 
 export class HighlightedText extends PureComponent {
     render() {
-        let parts=[].concat.apply([], props.text.split(PID_RE).map((p)=>p.split(NICKNAME_RE)));
+        let parts=[].concat.apply([], this.props.text.split(PID_RE).map((p)=>p.split(NICKNAME_RE)));
         return (
             <Linkify properties={{target: '_blank'}}>
                 <pre>
                     {parts.map((p,idx)=>(
                         <span key={idx}>{
                             PID_RE.test(p) ? <a href={'##'+p} target="_blank">{p}</a> :
-                            NICKNAME_RE.test(p) ? <span style={{backgroundColor: props.color_picker.get(p)}}>{p}</span> :
+                            NICKNAME_RE.test(p) ? <span style={{backgroundColor: this.props.color_picker.get(p)}}>{p}</span> :
                             p
                         }</span>
                     ))}

src/Flows.js

@@ -99,12 +99,12 @@ class FlowItemRow extends PureComponent {
     }
 
     show_sidebar() {
-        this.props.callback(
+        this.props.show_sidebar(
             '帖子详情',
             <div className="flow-item-row sidebar-flow-item">
                 <div className="box box-tip">
                     <a onClick={()=>{
-                        this.props.callback('帖子详情',<p className="box box-tip">加载中……</p>);
+                        this.props.show_sidebar('帖子详情',<p className="box box-tip">加载中……</p>);
                         this.load_replies(this.show_sidebar);
                     }}>更新回复</a>
                 </div>
@@ -149,7 +149,7 @@ function FlowChunk(props) {
             <TitleLine text={props.title} />
             {props.list.map((info)=>(
                 <LazyLoad key={info.pid} offset={500} height="15em" once={true} >
-                    <FlowItemRow info={info} callback={props.callback} />
+                    <FlowItemRow info={info} show_sidebar={props.show_sidebar} />
                 </LazyLoad>
             ))}
         </div>
@@ -160,11 +160,7 @@ export class Flow extends PureComponent {
     constructor(props) {
         super(props);
         this.state={
-            mode: (
-                props.search_text===null ? 'list' :
-                props.search_text.charAt(0)==='#' ? 'single' :
-                'search'
-            ),
+            mode: props.mode,
             search_param: props.search_text,
             loaded_pages: 0,
             chunks: [],
@@ -294,7 +290,7 @@ export class Flow extends PureComponent {
         return (
             <div className="flow-container">
                 {this.state.chunks.map((chunk)=>(
-                    <FlowChunk title={chunk.title} list={chunk.data} key={chunk.title} callback={this.props.callback} />
+                    <FlowChunk title={chunk.title} list={chunk.data} key={chunk.title} show_sidebar={this.props.show_sidebar} />
                 ))}
                 {this.state.loading_status==='failed' &&
                     <div className="box box-tip">

src/Title.js

@@ -45,7 +45,11 @@ class ControlBar extends PureComponent {
         this.state={
             search_text: '',
         };
-        this.set_search_text=props.set_search_text;
+        this.set_mode=props.set_mode;
+
+        this.on_change_bound=this.on_change.bind(this);
+        this.on_keypress_bound=this.on_keypress.bind(this);
+        this.do_refresh_bound=this.do_refresh.bind(this);
     }
 
     componentDidMount() {
@@ -54,7 +58,7 @@ class ControlBar extends PureComponent {
             this.setState({
                 search_text: text,
             });
-            this.set_search_text(text);
+            this.set_mode(text);
         }
     }
 
@@ -66,7 +70,7 @@ class ControlBar extends PureComponent {
 
     on_keypress(event) {
         if(event.key==='Enter')
-            this.set_search_text(this.state.search_text||null);
+            this.set_mode('search',this.state.search_text||null);
     }
 
     do_refresh() {
@@ -74,20 +78,19 @@ class ControlBar extends PureComponent {
         this.setState({
             search_text: '',
         });
-        this.set_search_text(null);
-
+        this.set_mode('list',null);
     }
 
     render() {
         return (
             <div className="control-bar">
-                <a className="refresh-btn" onClick={this.do_refresh.bind(this)}>最新树洞</a>
+                <a className="refresh-btn" onClick={this.do_refresh_bound}>最新树洞</a>
                 &nbsp;
                 <input value={this.state.search_text} placeholder="搜索 或 #PID"
-                       onChange={this.on_change.bind(this)} onKeyPress={this.on_keypress.bind(this)}
+                       onChange={this.on_change_bound} onKeyPress={this.on_keypress_bound}
                 />
                 &nbsp;
-                <a onClick={()=>{this.props.callback(
+                <a onClick={()=>{this.props.show_sidebar(
                     '关于 P大树洞（非官方） 网页版',
                     HELP_TEXT
                 )}}>Help</a>
@@ -101,7 +104,7 @@ export function Title(props) {
         <div className="title-bar">
             <div className="aux-margin">
                 <p className="title centered-line">P大树洞</p>
-                <ControlBar callback={props.callback} set_search_text={props.set_search_text} />
+                <ControlBar show_sidebar={props.show_sidebar} set_mode={props.set_mode} />
             </div>
         </div>
     )