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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
import React from 'react';
import axios from 'axios';
import {
ScrollView,
Image,
View,
RefreshControl,
} from 'react-native';
import {
RkCard,
RkText,
RkStyleSheet,
} from 'react-native-ui-kitten';
import {
Avatar,
SocialBar,
} from '../../components';
import NavigationType from '../../config/navigation/propTypes';
import {HOST} from '../../constants'
export class Article extends React.Component {
state = {
article: {},
mounted: false,
refreshing: false,
};
static propTypes = {
navigation: NavigationType.isRequired,
};
static navigationOptions = {
title: 'Current problem'.toUpperCase(),
};
componentWillMount() {
this.makeRemoteRequest()
}
makeRemoteRequest = () => {
const articleId = this.props.navigation.getParam('id', 1);
console.log(articleId);
axios.get(`${HOST}/api/articles/${articleId}`)
.then(res => {
this.setState({
article: res.data,
mounted: true,
refreshing: false,
});
console.log(this.state.article);
});
};
handleRefresh = () => {
this.setState({
refreshing: true,
}, () => {
setTimeout(() => {
this.makeRemoteRequest()
}, 500)
})
};
render() {
if (this.state.mounted) {
return (
<ScrollView style={styles.root} refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this.handleRefresh}
/>}>
<RkCard rkType='article'>
<Image
rkCardImg
source={{
uri: `${this.state.article.image.toString()
.replace('http://127.0.0.1:8000/', '')}`,
}}
/>
<View rkCardHeader>
<View>
<RkText style={styles.title} rkType='header4'>{this.state.article.title}</RkText>
</View>
</View>
<View rkCardContent>
<View>
<RkText rkType='primary3 bigLine'>{this.state.article.text}</RkText>
</View>
</View>
<View rkCardFooter>
<SocialBar comments={this.state.article.n_comments}
is_solved={this.state.article.is_solved ? 'Solved' : "Doesn't solved"}/>
</View>
</RkCard>
</ScrollView>
);
}
return null;
}
}
const styles = RkStyleSheet.create(theme => ({
root: {
backgroundColor: theme.colors.screen.base,
},
title: {
marginBottom: 5,
},
}));
|
