forked from newthuhole/hole_thu_frontend
update
add search and refresh add lazyload fix ui
This commit is contained in:
xmcp
88
src/Flows.js
88
src/Flows.js
@@ -1,9 +1,11 @@
|
||||
import React, {Component} from 'react';
|
||||
import {Time, CenteredLine} from './Common.js';
|
||||
import './Flows.css';
|
||||
import LazyLoad from 'react-lazyload';
|
||||
|
||||
const IMAGE_BASE='http://www.pkuhelper.com/services/pkuhole/images/';
|
||||
const AUDIO_BASE='http://www.pkuhelper.com/services/pkuhole/audios/';
|
||||
const SEARCH_PAGESIZE=50;
|
||||
|
||||
function Reply(props) {
|
||||
return (
|
||||
@@ -20,7 +22,7 @@ function Reply(props) {
|
||||
function ReplyPlaceholder(props) {
|
||||
return (
|
||||
<div className="box">
|
||||
正在加载 {props.count} 条回复
|
||||
加载中
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -29,8 +31,8 @@ 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>}
|
||||
{!!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>
|
||||
<Time stamp={props.info.timestamp} />
|
||||
</div>
|
||||
@@ -49,15 +51,20 @@ class FlowItemRow extends Component {
|
||||
reply_loading: false,
|
||||
};
|
||||
this.info=props.info;
|
||||
if(parseInt(props.info.reply,10)) {
|
||||
this.state.reply_loading=true;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if(parseInt(this.info.reply,10)) {
|
||||
this.setState({
|
||||
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)
|
||||
fetch('http://www.pkuhelper.com:10301/services/pkuhole/api.php?action=getcomment&pid='+this.info.pid)
|
||||
.then((res)=>res.json())
|
||||
.then((json)=>{
|
||||
if(json.code!==0)
|
||||
@@ -80,7 +87,7 @@ class FlowItemRow extends Component {
|
||||
</div>
|
||||
)}}>
|
||||
<FlowItem info={this.info} />
|
||||
{this.state.reply_loading && <ReplyPlaceholder count={this.info.reply} />}
|
||||
{!!this.state.reply_loading && <ReplyPlaceholder count={this.info.reply} />}
|
||||
{this.state.replies.map((reply)=><Reply info={reply} key={reply.cid} />)}
|
||||
</div>
|
||||
);
|
||||
@@ -91,7 +98,11 @@ function FlowChunk(props) {
|
||||
return (
|
||||
<div className="flow-chunk">
|
||||
<CenteredLine text={props.title} />
|
||||
{props.list.map((info)=><FlowItemRow key={info.pid} info={info} callback={props.callback} />)}
|
||||
{props.list.map((info)=>(
|
||||
<LazyLoad key={info.pid} offset={500} height="15em">
|
||||
<FlowItemRow info={info} callback={props.callback} />
|
||||
</LazyLoad>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -100,7 +111,8 @@ export class Flow extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state={
|
||||
mode: props.mode,
|
||||
mode: props.search_text===null ? 'list' : 'search',
|
||||
search_param: props.search_text,
|
||||
loaded_pages: 0,
|
||||
chunks: [],
|
||||
loading: false,
|
||||
@@ -113,27 +125,49 @@ export class Flow extends Component {
|
||||
throw new Error('bad page');
|
||||
if(page===this.state.loaded_pages+1) {
|
||||
console.log('fetching page',page);
|
||||
if(this.state.mode==='list') {
|
||||
fetch('http://www.pkuhelper.com:10301/services/pkuhole/api.php?action=getlist&p='+page)
|
||||
.then((res)=>res.json())
|
||||
.then((json)=>{
|
||||
if(json.code!==0)
|
||||
throw new Error(json.code);
|
||||
this.setState((prev,props)=>({
|
||||
chunks: prev.chunks.concat([{
|
||||
title: 'Page '+page,
|
||||
data: json.data,
|
||||
}]),
|
||||
loading: false,
|
||||
}));
|
||||
})
|
||||
.catch((err)=>{
|
||||
console.trace(err);
|
||||
alert('load failed');
|
||||
});
|
||||
} else if(this.state.mode==='search') {
|
||||
fetch(
|
||||
'http://www.pkuhelper.com:10301/services/pkuhole/api.php?action=search'+
|
||||
'&pagesize='+SEARCH_PAGESIZE*page+
|
||||
'&keywords='+encodeURIComponent(this.state.search_param)
|
||||
)
|
||||
.then((res)=>res.json())
|
||||
.then((json)=>{
|
||||
if(json.code!==0)
|
||||
throw new Error(json.code);
|
||||
const finished=json.data.length<SEARCH_PAGESIZE;
|
||||
this.setState((prev,props)=>({
|
||||
chunks: [{
|
||||
title: 'Result for "'+this.state.search_param+'"',
|
||||
data: json.data,
|
||||
mode: finished ? 'search_finished' : 'search',
|
||||
}],
|
||||
loading: false,
|
||||
}));
|
||||
})
|
||||
}
|
||||
this.setState((prev,props)=>({
|
||||
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())
|
||||
.then((json)=>{
|
||||
if(json.code!==0)
|
||||
throw new Error(json.code);
|
||||
this.setState((prev,props)=>({
|
||||
chunks: prev.chunks.concat([{
|
||||
title: 'Page '+page,
|
||||
data: json.data,
|
||||
}]),
|
||||
loading: false,
|
||||
}));
|
||||
})
|
||||
.catch((err)=>{
|
||||
console.trace(err);
|
||||
alert('load failed');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -161,7 +195,7 @@ export class Flow extends Component {
|
||||
{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'} />
|
||||
<CenteredLine text={this.state.loading ? 'Loading...' : '© xmcp'} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user