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

Refactor class components to SFC

This commit is contained in:
Jannis Mattheis 2018-04-21 11:26:48 +02:00 committed by Jannis Mattheis
parent 72f9d435fb
commit 79fd6a2512
4 changed files with 58 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
ui/src/component/ConfirmDialog.tsx
View File

@ -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,24 +9,21 @@ interface IProps {
fOnSubmit: VoidFunction
}
export default class ConfirmDialog extends Component<IProps> {
public render() {
const {title, text, fClose, fOnSubmit} = this.props;
const submitAndClose = () => {
fOnSubmit();
fClose();
};
return (
<Dialog open={true} onClose={fClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">{title}</DialogTitle>
<DialogContent>
<DialogContentText>{text}</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={fClose}>No</Button>
<Button onClick={submitAndClose} color="primary" variant="raised">Yes</Button>
</DialogActions>
</Dialog>
);
}
}
export default function ConfirmDialog({title, text, fClose, fOnSubmit}: IProps) {
const submitAndClose = () => {
fOnSubmit();
fClose();
};
return (
<Dialog open={true} onClose={fClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">{title}</DialogTitle>
<DialogContent>
<DialogContentText>{text}</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={fClose}>No</Button>
<Button onClick={submitAndClose} color="primary" variant="raised">Yes</Button>
</DialogActions>
</Dialog>
);
}

17
ui/src/component/Container.tsx
View File

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

24
ui/src/component/LoadingSpinner.tsx
View File

@ -1,18 +1,14 @@
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() {
return (
<DefaultPage title="" maxWidth={250} hideButton={true}>
<Grid item xs={12} style={{textAlign: 'center'}}>
<CircularProgress size={150}/>
</Grid>
</DefaultPage>
);
}
}
export default LoadingSpinner;
export default function LoadingSpinner() {
return (
<DefaultPage title="" maxWidth={250} hideButton={true}>
<Grid item xs={12} style={{textAlign: 'center'}}>
<CircularProgress size={150}/>
</Grid>
</DefaultPage>
);
};

48
ui/src/component/Message.tsx
View File

@ -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,32 +42,28 @@ interface IProps {
fDelete: VoidFunction
}
class Message extends Component<IProps & Style> {
public render() {
const {fDelete, classes, title, date, content, image} = this.props;
return (
<div className={classes.wrapperPadding}>
<Container style={{display: 'flex'}}>
<div className={classes.imageWrapper}>
<img src={image} alt="app logo" width="70" height="70" className={classes.image}/>
function Message({fDelete, classes, title, date, content, image}: IProps & Style) {
return (
<div className={classes.wrapperPadding}>
<Container style={{display: 'flex'}}>
<div className={classes.imageWrapper}>
<img src={image} alt="app logo" width="70" height="70" className={classes.image}/>
</div>
<div className={classes.messageContentWrapper}>
<div className={classes.header}>
<Typography className={classes.headerTitle} variant="headline">
{title}
</Typography>
<Typography variant="body1">
<TimeAgo date={date}/>
</Typography>
<IconButton onClick={fDelete} className={classes.trash}><Delete/></IconButton>
</div>
<div className={classes.messageContentWrapper}>
<div className={classes.header}>
<Typography className={classes.headerTitle} variant="headline">
{title}
</Typography>
<Typography variant="body1">
<TimeAgo date={date}/>
</Typography>
<IconButton onClick={fDelete} className={classes.trash}><Delete/></IconButton>
</div>
<Typography component="p">{content}</Typography>
</div>
</Container>
</div>
);
}
<Typography component="p">{content}</Typography>
</div>
</Container>
</div>
);
}
export default withStyles(styles)<IProps>(Message);