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

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

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

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

@ -13,15 +13,12 @@ interface IProps {
style?: object, style?: object,
} }
class Container extends React.Component<IProps & WithStyles<'paper'>, {}> { const Container: React.SFC<IProps & WithStyles<'paper'>> = ({classes, children, style}) => {
public render() { return (
const {classes, children, style} = this.props; <Paper elevation={6} className={classes.paper} style={style}>
return ( {children}
<Paper elevation={6} className={classes.paper} style={style}> </Paper>
{children} );
</Paper> };
);
}
}
export default withStyles(styles)<IProps>(Container); 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 Grid from 'material-ui/Grid';
import {CircularProgress} from 'material-ui/Progress'; import {CircularProgress} from 'material-ui/Progress';
import React, {Component} from 'react'; import React from 'react';
import DefaultPage from './DefaultPage'; import DefaultPage from './DefaultPage';
class LoadingSpinner extends Component { export default function LoadingSpinner() {
public render() { return (
return ( <DefaultPage title="" maxWidth={250} hideButton={true}>
<DefaultPage title="" maxWidth={250} hideButton={true}> <Grid item xs={12} style={{textAlign: 'center'}}>
<Grid item xs={12} style={{textAlign: 'center'}}> <CircularProgress size={150}/>
<CircularProgress size={150}/> </Grid>
</Grid> </DefaultPage>
</DefaultPage> );
); };
}
}
export default LoadingSpinner;

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