Timeline.js

 1import { withStyles } from '@material-ui/core/styles'
 2import React from 'react'
 3import LabelChange from './LabelChange'
 4import Message from './Message'
 5import SetStatus from './SetStatus'
 6import SetTitle from './SetTitle'
 7
 8const styles = theme => ({
 9  main: {
10    '& > *:not(:last-child)': {
11      marginBottom: 10
12    }
13  }
14})
15
16class Timeline extends React.Component {
17
18  props: {
19    ops: Array,
20    fetchMore: (any) => any,
21    classes: any,
22  }
23
24  render() {
25    const {ops, classes} = this.props
26
27    return (
28      <div className={classes.main}>
29        { ops.map((op, index) => {
30          switch (op.__typename) {
31            case 'CreateOperation':
32              return <Message key={index} op={op}/>
33            case 'AddCommentOperation':
34              return <Message key={index} op={op}/>
35            case 'LabelChangeOperation':
36              return <LabelChange key={index} op={op}/>
37            case 'SetTitleOperation':
38              return <SetTitle key={index} op={op}/>
39            case 'SetStatusOperation':
40              return <SetStatus key={index} op={op}/>
41
42            default:
43              console.log('unsupported operation type ' + op.__typename)
44              return null
45          }
46        })}
47      </div>
48    )
49  }
50}
51
52export default withStyles(styles)(Timeline)