GithubBrowser/PushPayload.js at master · tjkang/GithubBrowser · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
'use strict';

var React = require('react-native');

var {
  View,
  ListView,
  Component,
  Text,
  Image,
  StyleSheet,
} = React;

var moment = require('moment');

class PushPayload extends Component {
  constructor(props) {
    super(props);

    var ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 != r2
    });

    this.state = {
      dataSource: ds.cloneWithRows(props.pushEvent.payload.commits),
      pushEvent: props.pushEvent
    }

  }

  renderRow(rowData) {
    return (
      <View style={{
          flex: 1,
          justifyContent: 'center',
          borderColor: '#D7D7D7',
          borderBottomWidth: 1,
          paddingTop: 20,
          paddingBottom: 20,
          padding: 10,
      }}>
        <Text><Text style={styles.bold}>{rowData.sha.substring(0,6)}</Text> - {rowData.message}</Text>
      </View>
    );
  }

  render() {
    return (
      <View style={{
          flex: 1,
          paddingTop: 80,
          justifyContent: 'flex-start',
          alignItems: 'center'
      }}>
        <Image
          source={{uri: this.state.pushEvent.actor.avatar_url}}
          style={{
            height: 120,
            width: 120,
            borderRadius: 60
          }}
        />

        <Text style={{
            paddingTop: 20,
            paddingBottom: 20,
            fontSize: 20
        }}>
          {moment(this.state.pushEvent.created_at).fromNow()}
        </Text>
        <Text><Text style={styles.bold}>{this.state.pushEvent.actor.login}</Text> pushed to</Text>
        <Text style={styles.bold}>{this.state.pushEvent.payload.ref.replace('refs/heads/', '')}</Text>
        <Text>at <Text style={styles.bold}>{this.state.pushEvent.repo.name}</Text></Text>

        <Text style={{
            paddingTop: 40,
            fontSize: 20
          }}>
          {this.state.pushEvent.payload.commits.length} Comments
        </Text>

        <ListView
          contentInset={{
            top: -50,
          }}
          dataSource={this.state.dataSource}
          renderRow={this.renderRow.bind(this)} />

      </View>
    );
  }
}

var styles = StyleSheet.create({
  bold: {
    fontWeight: '800',
    fontSize: 16
  }
})

module.exports = PushPayload;