add sidebar and infinite scroll

src/Flows.js

@@ -25,7 +25,23 @@ function ReplyPlaceholder(props) {
     );
 }
 
-class FlowChunkItem extends Component {
+function FlowItem(props) {
+    return (
+        <div className="flow-item box">
+            <div className="box-header">
+                {parseInt(props.info.likenum, 10) && <span className="box-header-badge">{props.info.likenum}★</span>}
+                {parseInt(props.info.reply, 10) && <span className="box-header-badge">{props.info.reply} 回复</span>}
+                <span className="box-id">#{props.info.pid}</span>&nbsp;
+                <Time stamp={props.info.timestamp} />
+            </div>
+            <pre>{props.info.text}</pre>
+            {props.info.type==='image' ? <img src={IMAGE_BASE+props.info.url} /> : null}
+            {props.info.type==='audio' ? <audio src={AUDIO_BASE+props.info.url} /> : null}
+        </div>
+    );
+}
+
+class FlowItemRow extends Component {
     constructor(props) {
         super(props);
         this.state={
@@ -33,20 +49,21 @@ class FlowChunkItem extends Component {
             reply_loading: false,
         };
         this.info=props.info;
-        if(props.info.reply) {
+        if(parseInt(props.info.reply,10)) {
             this.state.reply_loading=true;
             this.load_replies();
         }
     }
 
     load_replies() {
+        console.log('fetching reply',this.info.pid);
         fetch('http://www.pkuhelper.com:10301/pkuhelper/../services/pkuhole/api.php?action=getcomment&pid='+this.info.pid)
             .then((res)=>res.json())
             .then((json)=>{
                 if(json.code!==0)
                     throw new Error(json.code);
                 this.setState({
-                    replies: json.data,
+                    replies: json.data.slice(0,10),
                     reply_loading: false,
                 });
             });
@@ -55,18 +72,14 @@ class FlowChunkItem extends Component {
     render() {
         // props.do_show_details
         return (
-            <div className="flow-item-row">
-                <div className="flow-item box">
-                    <div className="box-header">
-                        <span className="box-header-badge">{this.info.likenum} 赞</span>
-                        <span className="box-header-badge">{this.info.reply} 回复</span>
-                        <span className="box-id">#{this.info.pid}</span>&nbsp;
-                        <Time stamp={this.info.timestamp} />
-                    </div>
-                    <pre>{this.info.text}</pre>
-                    {this.info.type==='image' ? <img src={IMAGE_BASE+this.info.url} /> : null}
-                    {this.info.type==='audio' ? <audio src={AUDIO_BASE+this.info.url} /> : null}
+            <div className="flow-item-row" onClick={()=>{this.props.callback(
+                '帖子详情',
+                <div className="flow-item-row sidebar-flow-item">
+                    <FlowItem info={this.info} />
+                    {this.state.replies.map((reply)=><Reply info={reply} key={reply.cid} />)}
                 </div>
+            )}}>
+                <FlowItem info={this.info} />
                 {this.state.reply_loading && <ReplyPlaceholder count={this.info.reply} />}
                 {this.state.replies.map((reply)=><Reply info={reply} key={reply.cid} />)}
             </div>
@@ -78,7 +91,7 @@ function FlowChunk(props) {
     return (
         <div className="flow-chunk">
             <CenteredLine text={props.title} />
-            {props.list.map((info)=><FlowChunkItem key={info.pid} info={info} callback={props.callback} />)}
+            {props.list.map((info)=><FlowItemRow key={info.pid} info={info} callback={props.callback} />)}
         </div>
     );
 }
@@ -89,9 +102,10 @@ export class Flow extends Component {
         this.state={
             mode: props.mode,
             loaded_pages: 0,
-            chunks: []
+            chunks: [],
+            loading: false,
         };
-        this.load_page(1);
+        setTimeout(this.load_page.bind(this,1), 0);
     }
 
     load_page(page) {
@@ -100,7 +114,8 @@ export class Flow extends Component {
         if(page===this.state.loaded_pages+1) {
             console.log('fetching page',page);
             this.setState((prev,props)=>({
-                loaded_pages: prev.loaded_pages+1
+                loaded_pages: prev.loaded_pages+1,
+                loading: true,
             }));
             fetch('http://www.pkuhelper.com:10301/pkuhelper/../services/pkuhole/api.php?action=getlist&p='+page)
                 .then((res)=>res.json())
@@ -111,7 +126,8 @@ export class Flow extends Component {
                         chunks: prev.chunks.concat([{
                             title: 'Page '+page,
                             data: json.data,
-                        }])
+                        }]),
+                        loading: false,
                     }));
                 })
                 .catch((err)=>{
@@ -121,12 +137,31 @@ export class Flow extends Component {
         }
     }
 
+    on_scroll(event) {
+        if(event.target===document) {
+            //console.log(event);
+            const avail=document.body.scrollHeight-window.scrollY-window.innerHeight;
+            if(avail<window.innerHeight && this.state.loading===false)
+                this.load_page(this.state.loaded_pages+1);
+        }
+    }
+
+    componentDidMount() {
+        window.addEventListener('scroll',this.on_scroll.bind(this));
+        window.addEventListener('resize',this.on_scroll.bind(this));
+    }
+    componentWillUnmount() {
+        window.removeEventListener('scroll',this.on_scroll.bind(this));
+        window.removeEventListener('resize',this.on_scroll.bind(this));
+    }
+
     render() {
         return (
             <div className="flow-container">
                 {this.state.chunks.map((chunk)=>(
                     <FlowChunk title={chunk.title} list={chunk.data} key={chunk.title} callback={this.props.callback} />
                 ))}
+                <CenteredLine text={this.state.loading ? 'Loading More...' : '© xmcp'} />
             </div>
         );
     }