Refactor class components to SFC

ui/src/component/ConfirmDialog.tsx

@@ -1,6 +1,6 @@
 import Button from 'material-ui/Button';
 import Dialog, {DialogActions, DialogContent, DialogContentText, DialogTitle} from 'material-ui/Dialog';
-import React, {Component} from 'react';
+import React from 'react';
 
 interface IProps {
     title: string
@@ -9,9 +9,7 @@ interface IProps {
     fOnSubmit: VoidFunction
 }
 
-export default class ConfirmDialog extends Component<IProps> {
-    public render() {
-        const {title, text, fClose, fOnSubmit} = this.props;
+export default function ConfirmDialog({title, text, fClose, fOnSubmit}: IProps) {
     const submitAndClose = () => {
         fOnSubmit();
         fClose();
@@ -29,4 +27,3 @@ export default class ConfirmDialog extends Component<IProps> {
         </Dialog>
     );
 }
-}

ui/src/component/Container.tsx

@@ -13,15 +13,12 @@ interface IProps {
     style?: object,
 }
 
-class Container extends React.Component<IProps & WithStyles<'paper'>, {}> {
-    public render() {
-        const {classes, children, style} = this.props;
+const Container: React.SFC<IProps & WithStyles<'paper'>> = ({classes, children, style}) => {
     return (
         <Paper elevation={6} className={classes.paper} style={style}>
             {children}
         </Paper>
     );
-    }
-}
+};
 
 export default withStyles(styles)<IProps>(Container);

ui/src/component/LoadingSpinner.tsx

@@ -1,10 +1,9 @@
 import Grid from 'material-ui/Grid';
 import {CircularProgress} from 'material-ui/Progress';
-import React, {Component} from 'react';
+import React from 'react';
 import DefaultPage from './DefaultPage';
 
-class LoadingSpinner extends Component {
-    public render() {
+export default function LoadingSpinner() {
     return (
         <DefaultPage title="" maxWidth={250} hideButton={true}>
             <Grid item xs={12} style={{textAlign: 'center'}}>
@@ -12,7 +11,4 @@ class LoadingSpinner extends Component {
             </Grid>
         </DefaultPage>
     );
-    }
-}
-
-export default LoadingSpinner;
+};

ui/src/component/Message.tsx

@@ -3,7 +3,7 @@ import Delete from 'material-ui-icons/Delete';
 import IconButton from 'material-ui/IconButton';
 import {withStyles} from 'material-ui/styles';
 import Typography from 'material-ui/Typography';
-import React, {Component} from 'react';
+import React from 'react';
 import TimeAgo from 'react-timeago';
 import Container from './Container';
 
@@ -42,10 +42,7 @@ interface IProps {
     fDelete: VoidFunction
 }
 
-class Message extends Component<IProps & Style> {
-    public render() {
-        const {fDelete, classes, title, date, content, image} = this.props;
-
+function Message({fDelete, classes, title, date, content, image}: IProps & Style) {
     return (
         <div className={classes.wrapperPadding}>
             <Container style={{display: 'flex'}}>
@@ -68,6 +65,5 @@ class Message extends Component<IProps & Style> {
         </div>
     );
 }
-}
 
 export default withStyles(styles)<IProps>(Message);