aboutsummaryrefslogtreecommitdiffstats
path: root/webui/src/bug/Timeline.js
diff options
context:
space:
mode:
authorQuentin Gliech <quentingliech@gmail.com>2019-04-10 21:19:45 +0200
committerQuentin Gliech <quentingliech@gmail.com>2019-05-22 19:52:01 +0200
commitd79ef7a7945ba82caeec62cad44dad134c9edfbc (patch)
tree392d9ceaead2a5780862ecf89cf1cc2a0c550ed7 /webui/src/bug/Timeline.js
parent1a7ccd594adc6f185115ce12a4368c55ff418678 (diff)
downloadgit-bug-d79ef7a7945ba82caeec62cad44dad134c9edfbc.tar.gz
webui: Migrate to Material-UI's new style API
Diffstat (limited to 'webui/src/bug/Timeline.js')
-rw-r--r--webui/src/bug/Timeline.js60
1 files changed, 26 insertions, 34 deletions
diff --git a/webui/src/bug/Timeline.js b/webui/src/bug/Timeline.js
index 3123f45f..d77e0d4b 100644
--- a/webui/src/bug/Timeline.js
+++ b/webui/src/bug/Timeline.js
@@ -1,51 +1,43 @@
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
import React from 'react';
import LabelChange from './LabelChange';
import Message from './Message';
import SetStatus from './SetStatus';
import SetTitle from './SetTitle';
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
main: {
'& > *:not(:last-child)': {
marginBottom: theme.spacing.unit * 2,
},
},
-});
+}));
-class Timeline extends React.Component {
- props: {
- ops: Array,
- fetchMore: any => any,
- classes: any,
- };
+const componentMap = {
+ CreateTimelineItem: Message,
+ AddCommentTimelineItem: Message,
+ LabelChangeTimelineItem: LabelChange,
+ SetTitleTimelineItem: SetTitle,
+ SetStatusTimelineItem: SetStatus,
+};
- render() {
- const { ops, classes } = this.props;
+function Timeline({ ops }) {
+ const classes = useStyles();
- return (
- <div className={classes.main}>
- {ops.map((op, index) => {
- switch (op.__typename) {
- case 'CreateTimelineItem':
- return <Message key={index} op={op} />;
- case 'AddCommentTimelineItem':
- return <Message key={index} op={op} />;
- case 'LabelChangeTimelineItem':
- return <LabelChange key={index} op={op} />;
- case 'SetTitleTimelineItem':
- return <SetTitle key={index} op={op} />;
- case 'SetStatusTimelineItem':
- return <SetStatus key={index} op={op} />;
+ return (
+ <div className={classes.main}>
+ {ops.map((op, index) => {
+ const Component = componentMap[op.__typename];
- default:
- console.log('unsupported operation type ' + op.__typename);
- return null;
- }
- })}
- </div>
- );
- }
+ if (!Component) {
+ console.warn('unsupported operation type ' + op.__typename);
+ return null;
+ }
+
+ return <Component key={index} op={op} />;
+ })}
+ </div>
+ );
}
-export default withStyles(styles)(Timeline);
+export default Timeline;