Typescriptify Messages-Component

ui/src/pages/Messages.tsx

@@ -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 React, {Component} from 'react';
-import MessageStore from '../stores/MessageStore';
+import {RouteComponentProps} from "react-router";
-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';
+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) {
+interface IProps extends RouteComponentProps<any> {
-        this.updateAllWithProps(nextProps);
 }
 
-    componentWillMount() {
+interface IState {
-        MessageStore.on('change', this.updateAll);
+    appId: number
-        AppStore.on('change', this.updateAll);
+    messages: IMessage[]
-        this.updateAll();
+    name: string
+    hasMore: boolean
+    nextSince?: number
+    id?: number
 }
 
-    componentWillUnmount() {
+class Messages extends Component<IProps , IState> {
-        MessageStore.removeListener('change', this.updateAll);
+    private static appId(props: IProps) {
-        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;
         }
@@ -51,34 +32,26 @@ class Messages extends Component {
         return match.params.id !== undefined ? parseInt(match.params.id, 10) : -1;
     }
 
-    renderMessage = (index, key) => {
+    public state = {appId: -1, messages: [], name: 'unknown', hasMore: true};
-        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() {
+    private list: ReactList | null = null;
-        const {hasMore, messages, appId} = this.state;
+
-        if (hasMore) {
+    public componentWillReceiveProps(nextProps: IProps) {
-            const [, maxRenderedIndex] = (this.list && this.list.getVisibleRange()) || [0, 0];
+        this.updateAllWithProps(nextProps);
-            if (maxRenderedIndex > (messages.length - 30)) {
-                MessageStore.loadNext(appId);
-            }
-        }
     }
 
-    label = (text) => (
+    public componentWillMount() {
-        <Grid item xs={12}><Typography variant="caption" gutterBottom align="center">{text}</Typography></Grid>
+        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;