112 lines
3.9 KiB
JavaScript
112 lines
3.9 KiB
JavaScript
import React, {Component} from 'react';
|
|
import Grid from 'material-ui/Grid';
|
|
import Typography from 'material-ui/Typography';
|
|
import Message from '../component/Message';
|
|
import MessageStore from '../stores/MessageStore';
|
|
import AppStore from '../stores/AppStore';
|
|
import * as MessageAction from '../actions/MessageAction';
|
|
import DefaultPage from '../component/DefaultPage';
|
|
import ReactList from '../component/FixedReactList';
|
|
import {CircularProgress} from 'material-ui/Progress';
|
|
|
|
class Messages extends Component {
|
|
state = {appId: -1, messages: [], name: 'unknown', hasMore: true, list: null};
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
this.updateAllWithProps(nextProps);
|
|
}
|
|
|
|
componentWillMount() {
|
|
MessageStore.on('change', this.updateAll);
|
|
AppStore.on('change', this.updateAll);
|
|
this.updateAll();
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
MessageStore.removeListener('change', this.updateAll);
|
|
AppStore.removeListener('change', this.updateAll);
|
|
}
|
|
|
|
updateAllWithProps = (props) => {
|
|
const appId = Messages.appId(props);
|
|
|
|
const reset = MessageStore.shouldReset(appId);
|
|
if (reset !== false && this.list) {
|
|
this.list.clearCacheFromIndex(reset);
|
|
}
|
|
|
|
this.setState({...MessageStore.get(appId), appId, name: AppStore.getName(appId)});
|
|
if (!MessageStore.exists(appId)) {
|
|
MessageStore.loadNext(appId);
|
|
}
|
|
};
|
|
|
|
updateAll = () => this.updateAllWithProps(this.props);
|
|
|
|
static appId(props) {
|
|
if (props === undefined) {
|
|
return -1;
|
|
}
|
|
const {match} = props;
|
|
return match.params.id !== undefined ? parseInt(match.params.id, 10) : -1;
|
|
}
|
|
|
|
renderMessage = (index, key) => {
|
|
this.checkIfLoadMore();
|
|
const message = this.state.messages[index];
|
|
return (
|
|
<Message key={key}
|
|
fDelete={() => MessageAction.deleteMessage(message)}
|
|
title={message.title}
|
|
date={message.date}
|
|
content={message.message}
|
|
image={message.image}/>
|
|
);
|
|
};
|
|
|
|
checkIfLoadMore() {
|
|
const {hasMore, messages, appId} = this.state;
|
|
if (hasMore) {
|
|
const [, maxRenderedIndex] = (this.list && this.list.getVisibleRange()) || [0, 0];
|
|
if (maxRenderedIndex > (messages.length - 30)) {
|
|
MessageStore.loadNext(appId);
|
|
}
|
|
}
|
|
}
|
|
|
|
label = (text) => (
|
|
<Grid item xs={12}><Typography variant="caption" gutterBottom align="center">{text}</Typography></Grid>
|
|
);
|
|
|
|
render() {
|
|
const {name, messages, hasMore, appId} = this.state;
|
|
const hasMessages = messages.length !== 0;
|
|
const deleteMessages = () => MessageAction.deleteMessagesByApp(appId);
|
|
|
|
return (
|
|
<DefaultPage title={name} buttonTitle="Delete All" fButton={deleteMessages} buttonDisabled={!hasMessages}>
|
|
{hasMessages
|
|
? (
|
|
<div style={{width: '100%'}}>
|
|
<ReactList key={appId}
|
|
ref={(el) => this.list = el}
|
|
itemRenderer={this.renderMessage}
|
|
length={messages.length}
|
|
threshold={1000}
|
|
pageSize={30}
|
|
type='variable'
|
|
/>
|
|
{hasMore
|
|
? <Grid item xs={12} style={{textAlign: 'center'}}><CircularProgress size={100}/></Grid>
|
|
: this.label('You\'ve reached the end')}
|
|
</div>
|
|
)
|
|
: this.label('No messages')
|
|
}
|
|
</DefaultPage>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Messages;
|