colin
/
sharded-gotify
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Typescriptify Messages-Component

This commit is contained in:
Jannis Mattheis 2018-04-19 21:12:49 +02:00 committed by Jannis Mattheis
parent 6152f74ab1
commit c4ef531e80
1 changed files with 80 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
ui/src/pages/Messages.js → ui/src/pages/Messages.tsx
View File

@ -1,49 +1,30 @@
import React, {Component} from 'react';
import Grid from 'material-ui/Grid';
import {CircularProgress} from 'material-ui/Progress';
import Typography from 'material-ui/Typography';
import Message from '../component/Message';
import MessageStore from '../stores/MessageStore';
import AppStore from '../stores/AppStore';
import React, {Component} from 'react';
import {RouteComponentProps} from "react-router";
import * as MessageAction from '../actions/MessageAction';
import DefaultPage from '../component/DefaultPage';
import ReactList from '../component/FixedReactList';
import {CircularProgress} from 'material-ui/Progress';
import Message from '../component/Message';
import AppStore from '../stores/AppStore';
import MessageStore from '../stores/MessageStore';
class Messages extends Component {
state = {appId: -1, messages: [], name: 'unknown', hasMore: true, list: null};
componentWillReceiveProps(nextProps) {
this.updateAllWithProps(nextProps);
interface IProps extends RouteComponentProps<any> {
}
componentWillMount() {
MessageStore.on('change', this.updateAll);
AppStore.on('change', this.updateAll);
this.updateAll();
interface IState {
appId: number
messages: IMessage[]
name: string
hasMore: boolean
nextSince?: number
id?: number
}
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) {
class Messages extends Component<IProps , IState> {
private static appId(props: IProps) {
if (props === undefined) {
return -1;
}
@ -51,34 +32,26 @@ class Messages extends Component {
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}/>
);
};
public state = {appId: -1, messages: [], name: 'unknown', hasMore: true};
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);
}
}
private list: ReactList | null = null;
public componentWillReceiveProps(nextProps: IProps) {
this.updateAllWithProps(nextProps);
}
label = (text) => (
<Grid item xs={12}><Typography variant="caption" gutterBottom align="center">{text}</Typography></Grid>
);
public componentWillMount() {
MessageStore.on('change', this.updateAll);
AppStore.on('change', this.updateAll);
this.updateAll();
}
render() {
public componentWillUnmount() {
MessageStore.removeListener('change', this.updateAll);
AppStore.removeListener('change', this.updateAll);
}
public render() {
const {name, messages, hasMore, appId} = this.state;
const hasMessages = messages.length !== 0;
const deleteMessages = () => MessageAction.deleteMessagesByApp(appId);
@ -89,7 +62,7 @@ class Messages extends Component {
? (
<div style={{width: '100%'}}>
<ReactList key={appId}
ref={(el) => this.list = el}
ref={(el: ReactList) => this.list = el}
itemRenderer={this.renderMessage}
length={messages.length}
threshold={1000}
@ -106,6 +79,51 @@ class Messages extends Component {
</DefaultPage>
);
}
private updateAllWithProps = (props: IProps) => {
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);
}
};
private updateAll = () => this.updateAllWithProps(this.props);
private deleteMessage = (message: IMessage) => () => MessageAction.deleteMessage(message);
private renderMessage = (index: number, key: string) => {
this.checkIfLoadMore();
const message: IMessage = this.state.messages[index];
return (
<Message key={key}
fDelete={this.deleteMessage(message)}
title={message.title}
date={message.date}
content={message.message}
image={message.image}/>
);
};
private 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);
}
}
}
private label = (text: string) => (
<Grid item xs={12}><Typography variant="caption" gutterBottom align="center">{text}</Typography></Grid>
);
}
export default Messages;