Skip to content

Commit 78dce65

Browse files
alvarombalvaromb
authored
Merge pull request #7 from APSL/iss_6
closes #6 Added pull to refresh to news list and comments
2 parents f7a986c + 90ca709 commit 78dce65

3 files changed

Lines changed: 351 additions & 321 deletions

File tree

‎app/MnmComments.js‎

Lines changed: 170 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,109 @@
11
/*jshint esnext: true*/
22
/*global require, module, fetch*/
33

4-
'use strict';
5-
6-
import React, { Component } from 'react'
4+
import React from 'react'
75
import {
8-
StyleSheet,
9-
Platform,
10-
PixelRatio,
11-
View,
12-
Text,
13-
ActivityIndicatorIOS,
14-
ProgressBarAndroid,
15-
ListView
6+
StyleSheet,
7+
Platform,
8+
PixelRatio,
9+
View,
10+
Text,
11+
ActivityIndicatorIOS,
12+
ProgressBarAndroid,
13+
ListView,
14+
RefreshControl,
15+
InteractionManager
1616
} from 'react-native'
17-
1817
import HTMLView from 'react-native-htmlview'
18+
var moment = require('moment')
19+
var Icon = require('react-native-vector-icons/EvilIcons')
1920

20-
var moment = require('moment');
21-
var Icon = require('react-native-vector-icons/EvilIcons');
21+
class MnmComments extends React.Component {
22+
getComments: Function;
2223

23-
24-
class MnmComments extends Component {
25-
constructor(props) {
26-
super(props);
27-
var dataSource = new ListView.DataSource({
28-
rowHasChanged: (r1, r2) => r1.id !== r2.id
29-
});
30-
this.state = {
31-
dataSource: dataSource.cloneWithRows([]),
32-
rows: []
33-
};
34-
this._getComments();
24+
constructor (props) {
25+
super(props)
26+
const dataSource = new ListView.DataSource({
27+
rowHasChanged: (r1, r2) => r1.id !== r2.id
28+
})
29+
this.state = {
30+
dataSource: dataSource.cloneWithRows([]),
31+
rows: [],
32+
isFetching: false,
3533
}
34+
this.getComments = this._getComments.bind(this)
35+
}
3636

37-
_getComments() {
38-
fetch('https://www.meneame.net/api/list?id=' + this.props.entryId)
39-
.then(response => response.json())
40-
.then(response => {
41-
var comments = [];
42-
response.objects.forEach((comment) => {
43-
comment.date = moment.unix(comment.date);
44-
comment.fromNow = comment.date.fromNow();
45-
comments.push(comment);
46-
});
47-
var sortedComments = comments.sort((c1, c2) => {
48-
if (c1.order < c2.order) {
49-
return -1;
50-
} else {
51-
return 1;
52-
}
53-
});
54-
this.setState({
55-
dataSource: this.state.dataSource.cloneWithRows(sortedComments),
56-
rows: sortedComments
57-
});
58-
});
59-
}
37+
componentDidMount () {
38+
this.getComments()
39+
}
6040

61-
renderRow(rowData) {
62-
return (
63-
<View style={styles.cellContainer}>
64-
<View style={styles.infoContainer}>
65-
<Text style={styles.username}>{rowData.user}</Text>
66-
<View style={styles.commentData}>
67-
<Icon style={styles.icon} name="like" size={20} />
68-
<Text style={styles.counter}>{rowData.votes}</Text>
69-
<Icon style={styles.icon} name="heart" size={20} />
70-
<Text style={styles.counter}>{rowData.karma}</Text>
71-
<Text style={styles.date}>{rowData.fromNow}</Text>
72-
</View>
73-
</View>
74-
<View style={styles.textContainer}>
75-
<Text style={styles.commentNumber}>#{rowData.order}</Text>
76-
<Text style={styles.comment}>
77-
<HTMLView value={rowData.content} stylesheet={htmlStyles} />
78-
</Text>
41+
_getComments () {
42+
InteractionManager.runAfterInteractions(() => {
43+
this.setState({isFetching: true})
44+
fetch('https://www.meneame.net/api/list?id=' + this.props.entryId)
45+
.then(response => response.json())
46+
.then(response => {
47+
const comments = response.objects.map((comment) => {
48+
comment.date = moment.unix(comment.date)
49+
comment.fromNow = comment.date.fromNow()
50+
return comment
51+
})
52+
.sort((c1, c2) => {
53+
if (c1.order < c2.order) {
54+
return -1;
55+
} else {
56+
return 1;
57+
}
58+
})
59+
this.setState({
60+
dataSource: this.state.dataSource.cloneWithRows(comments),
61+
rows: comments,
62+
isFetching: false,
63+
})
64+
})
65+
.catch(() => this.setState({isFetching: false}))
66+
})
67+
}
68+
69+
renderRow(rowData) {
70+
return (
71+
<View style={styles.cellContainer}>
72+
<View style={styles.infoContainer}>
73+
<Text style={styles.username}>{rowData.user}</Text>
74+
<View style={styles.commentData}>
75+
<Icon style={styles.icon} name="like" size={20} />
76+
<Text style={styles.counter}>{rowData.votes}</Text>
77+
<Icon style={styles.icon} name="heart" size={20} />
78+
<Text style={styles.counter}>{rowData.karma}</Text>
79+
<Text style={styles.date}>{rowData.fromNow}</Text>
7980
</View>
8081
</View>
81-
);
82-
}
82+
<View style={styles.textContainer}>
83+
<Text style={styles.commentNumber}>#{rowData.order}</Text>
84+
<Text style={styles.comment}>
85+
<HTMLView value={rowData.content} stylesheet={htmlStyles} />
86+
</Text>
87+
</View>
88+
</View>
89+
)
90+
}
8391

84-
_renderList() {
92+
_renderList () {
8593
if (this.state.rows.length > 0) {
8694
return (
87-
<ListView style={styles.navcomments}
95+
<ListView
96+
style={styles.navcomments}
8897
contentInset={{bottom: 49}}
8998
dataSource={this.state.dataSource}
9099
renderRow={this.renderRow.bind(this)}
91100
automaticallyAdjustContentInsets={false}
101+
refreshControl={
102+
<RefreshControl
103+
refreshing={this.state.isFetching}
104+
onRefresh={this.getComments}
105+
/>
106+
}
92107
/>
93108
)
94109
} else {
@@ -109,97 +124,97 @@ class MnmComments extends Component {
109124
}
110125
}
111126

112-
render() {
113-
return (
114-
<View style={styles.container}>
115-
{this._renderList()}
116-
</View>
117-
);
127+
render () {
128+
return (
129+
<View style={styles.container}>
130+
{this._renderList()}
131+
</View>
132+
)
118133
}
119134
}
120135

121-
var styles = StyleSheet.create({
122-
container: {
123-
flex: 1,
124-
backgroundColor: '#FAFAFA',
125-
},
126-
navcomments: {
127-
flex: 1,
128-
backgroundColor: '#FAFAFA',
129-
},
130-
cellContainer: {
131-
flex: 1,
132-
backgroundColor: '#FAFAFA',
133-
marginLeft: 20,
134-
marginRight: 20,
135-
marginBottom: 10,
136-
paddingBottom: 15,
137-
paddingTop: 5,
138-
borderBottomWidth: 1 / PixelRatio.get(),
139-
borderBottomColor: '#CDCDCD',
140-
},
141-
infoContainer: {
142-
flexDirection: 'row',
143-
flex: 1,
144-
alignItems: 'stretch',
145-
marginBottom: 10,
146-
},
147-
username: {
148-
flex: 1,
149-
flexDirection: 'row',
150-
fontWeight: 'bold',
151-
fontSize: 14,
152-
color: '#262626',
153-
},
154-
commentData: {
155-
flex: 2,
156-
flexDirection: 'row',
157-
justifyContent: 'flex-end',
158-
},
159-
icon: {
160-
width: 20,
161-
color: '#95a5a6',
162-
},
163-
counter: {
164-
color: '#95a5a6',
165-
marginRight: 10,
166-
},
167-
date: {
168-
fontSize: 14,
169-
fontWeight: '300',
170-
color: '#95a5a6',
171-
},
172-
textContainer: {
173-
flexDirection: 'row',
174-
},
175-
commentNumber: {
176-
color: '#d35400',
177-
fontWeight: '300',
178-
fontSize: 14,
179-
},
180-
comment: {
181-
marginLeft: 3,
182-
flex: 1,
183-
color: '#7f8c8d',
184-
fontWeight: '300',
185-
fontSize: 14,
186-
},
187-
centering: {
188-
flex: 1,
189-
alignSelf: 'center',
190-
justifyContent: 'center',
191-
backgroundColor: '#FAFAFA',
192-
},
193-
progressBar: {
194-
width: 50,
195-
height: 50,
196-
},
197-
});
136+
const styles = StyleSheet.create({
137+
container: {
138+
flex: 1,
139+
backgroundColor: '#FAFAFA',
140+
},
141+
navcomments: {
142+
flex: 1,
143+
backgroundColor: '#FAFAFA',
144+
},
145+
cellContainer: {
146+
flex: 1,
147+
backgroundColor: '#FAFAFA',
148+
marginLeft: 20,
149+
marginRight: 20,
150+
marginBottom: 10,
151+
paddingBottom: 15,
152+
paddingTop: 5,
153+
borderBottomWidth: 1 / PixelRatio.get(),
154+
borderBottomColor: '#CDCDCD',
155+
},
156+
infoContainer: {
157+
flexDirection: 'row',
158+
flex: 1,
159+
alignItems: 'stretch',
160+
marginBottom: 10,
161+
},
162+
username: {
163+
flex: 1,
164+
flexDirection: 'row',
165+
fontWeight: 'bold',
166+
fontSize: 14,
167+
color: '#262626',
168+
},
169+
commentData: {
170+
flex: 2,
171+
flexDirection: 'row',
172+
justifyContent: 'flex-end',
173+
},
174+
icon: {
175+
width: 20,
176+
color: '#95a5a6',
177+
},
178+
counter: {
179+
color: '#95a5a6',
180+
marginRight: 10,
181+
},
182+
date: {
183+
fontSize: 14,
184+
fontWeight: '300',
185+
color: '#95a5a6',
186+
},
187+
textContainer: {
188+
flexDirection: 'row',
189+
},
190+
commentNumber: {
191+
color: '#d35400',
192+
fontWeight: '300',
193+
fontSize: 14,
194+
},
195+
comment: {
196+
marginLeft: 3,
197+
flex: 1,
198+
color: '#7f8c8d',
199+
fontWeight: '300',
200+
fontSize: 14,
201+
},
202+
centering: {
203+
flex: 1,
204+
alignSelf: 'center',
205+
justifyContent: 'center',
206+
backgroundColor: '#FAFAFA',
207+
},
208+
progressBar: {
209+
width: 50,
210+
height: 50,
211+
},
212+
})
198213

199214
const htmlStyles = StyleSheet.create({
200215
b: {
201216
fontWeight: '600',
202217
}
203218
})
204219

205-
module.exports = MnmComments;
220+
module.exports = MnmComments

0 commit comments

Comments
 (0)