Timeline.js

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