Skip to content

Commit 74dcdd5

Browse files
breitningbreitning
committed
update question answer comment page
1 parent d65e1f8 commit 74dcdd5

File tree

10 files changed

+261
-149
lines changed

10 files changed

+261
-149
lines changed

‎source/component/router.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,14 @@ class Router {
227227
sceneConfig: RouterSceneConfig.customPushFromRight
228228
}, props);
229229
}
230+
231+
toQuestionAnswerComment(props) {
232+
this.push({
233+
component: View.QuestionAnswerComment,
234+
name: 'questionAnswerComment',
235+
sceneConfig: RouterSceneConfig.customPushFromRight
236+
}, props);
237+
}
230238
}
231239

232240

‎source/config/api.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,10 @@ export default {
2525
update: "api/questions/<%=id%>",
2626
comments: "api/questions/<%=id%>/answers",
2727
comment_add:"api/questions/<%=id%>/answers",
28-
comment_comments: "api/questions/answers/<%=id%>/comments",
29-
comment_comment_add: "api/questions/<%=id%>/answers/<%=id%>/comments"
28+
},
29+
answer: {
30+
comments: "api/questions/answers/<%=id%>/comments",
31+
comment_add: "api/questions/<%=id%>/answers/<%=id%>/comments"
3032
},
3133
blink: {
3234
list:"api/statuses/@all?pageIndex=<%=pageIndex%>&pageSize=<%=pageSize%>",

‎source/config/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ export const postCategory = {
2626
news: "news",
2727
blink: "blink",
2828
question: "question",
29-
favorite: "favorite"
29+
favorite: "favorite",
30+
answer: "answer"
3031
};
3132

3233
export const authData = {

‎source/constant/actiontype.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ export const FETCH_POSTS_BY_CATEGORY_WITHPAGE = 'FETCH_POSTS_BY_CATEGORY_WITHPAG
66
//comment
77
export const FETCH_COMMENTS_BY_POST = 'FETCH_COMMENTS_BY_POST';
88
export const FETCH_COMMENTS_BY_POST_WITHPAGE = 'FETCH_COMMENTS_BY_POST_WITHPAGE';
9-
export const FETCH_COMMENTS_BY_COMMENT = 'FETCH_COMMENTS_BY_COMMENT';
109

1110
//author
1211
export const FETCH_AUTHORS_BY_RANK = 'FETCH_AUTHORS_BY_RANK';

‎source/service/commentService.js

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,6 @@ export function getCommentsByPost(category, id, params = {}){
1515
return requestService.get(fetchApi);
1616
}
1717

18-
export function getCommentsByComment(category, id, params = {}){
19-
params.id = id;
20-
let fetchApi = dataApi[category]["comment_comments"];
21-
let strCompiled = _.template(fetchApi);
22-
fetchApi = strCompiled(params);
23-
24-
return requestService.get(fetchApi);
25-
}
26-
2718
export function addComent(){
2819
//TODO: 添加评论
2920
}

‎source/view/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,5 @@ export { default as BlinkAdd} from './blinkAdd';
1616
export { default as QuestionAdd} from './questionAdd';
1717
export { default as User} from './user';
1818
export { default as Favorite} from './favorite';
19-
export { default as UserAsset} from './userAsset';
19+
export { default as UserAsset} from './userAsset';
20+
export { default as QuestionAnswerComment} from './questionAnswerComment';

‎source/view/postComment.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ class PostCommentPage extends Component {
107107

108108
renderCommentList(){
109109
let { router, comments, ui, category, blogger, id } = this.props;
110-
if (this.state.hasFocus === false || ui.refreshPending !== false) {
110+
if (this.state.hasFocus === false || !ui || ui.refreshPending !== false) {
111111
return (
112112
<Spinner style={ ComponentStyles.message_container }/>
113113
)

‎source/view/question.js

Lines changed: 43 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,15 @@ class QuestionPage extends Component {
5656
});
5757
}
5858

59+
onAnswerCommentsPress(answer){
60+
let { question } = this.props;
61+
this.props.router.toQuestionAnswerComment({
62+
id: answer.AnswerID,
63+
question,
64+
answer
65+
});
66+
}
67+
5968
renderNavbar(){
6069
let { Avatar, Author } = this.props.question;
6170
return (
@@ -125,8 +134,8 @@ class QuestionPage extends Component {
125134
renderQuestionAdditionSeparator(questionDetail){
126135
if(questionDetail.Addition){
127136
return (
128-
<View style={ ComponentStyles.panel_container }>
129-
<Text style={ [ComponentStyles.panel_text ]}>
137+
<View style={[ CommonStyles.flexRow, CommonStyles.flexItemsMiddle, CommonStyles.flexItemsBetween, CommonStyles.p_a_3, ComponentStyles.panel_bg ]}>
138+
<Text style={[CommonStyles.text_danger, CommonStyles.font_xs]}>
130139
问题补充
131140
</Text>
132141
</View>
@@ -193,9 +202,40 @@ class QuestionPage extends Component {
193202
)
194203
}
195204

205+
renderAnswerItemMeta(answer){
206+
if(answer.CommentCounts){
207+
return (
208+
<View style = { [CommonStyles.flexRow, CommonStyles.flexItemsMiddle, CommonStyles.p_b_3] } >
209+
<Icon
210+
name={ 'ios-return-right' }
211+
size= { StyleConfig.icon_size - 4 }
212+
color={ StyleConfig.color_primary }
213+
style= {[CommonStyles.m_r_1]}/>
214+
<Text style={[CommonStyles.font_xs, CommonStyles.text_primary]}>
215+
有{answer.CommentCounts}条追问
216+
</Text>
217+
</View>
218+
)
219+
}
220+
}
221+
196222
renderAnswerItem(answer, index){
223+
if(answer.CommentCounts){
224+
return (
225+
<TouchableOpacity
226+
key = {index}
227+
activeOpacity={ StyleConfig.touchable_press_opacity }
228+
onPress={ (e)=>this.onAnswerCommentsPress(answer) }
229+
style={[ ComponentStyles.list, CommonStyles.p_b_0 ]} key={ index }>
230+
{ this.renderAnswerItemHeader(answer) }
231+
{ this.renderAnswerItemContent(answer) }
232+
{ this.renderAnswerItemMeta(answer) }
233+
</TouchableOpacity>
234+
)
235+
}
197236
return (
198-
<View style={[ ComponentStyles.list, CommonStyles.p_b_0 ]} key={ index }>
237+
<View key = {index}
238+
style={[ ComponentStyles.list, CommonStyles.p_b_0 ]} key={ index }>
199239
{ this.renderAnswerItemHeader(answer) }
200240
{ this.renderAnswerItemContent(answer) }
201241
</View>

‎source/view/questionAnswerComment.js

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
import React, { Component } from 'react';
2+
import {
3+
View,
4+
Text,
5+
Image,
6+
StyleSheet,
7+
ScrollView,
8+
TouchableOpacity
9+
} from 'react-native';
10+
11+
import moment from 'moment';
12+
import { bindActionCreators } from 'redux';
13+
import { connect } from 'react-redux';
14+
import Icon from 'react-native-vector-icons/Ionicons';
15+
import PureRenderMixin from 'react-addons-pure-render-mixin';
16+
import * as CommentAction from '../action/comment';
17+
import Spinner from '../component/spinner';
18+
import EndTag from '../component/endtag';
19+
import Navbar from '../component/navbar';
20+
import SingleButton from '../component/button/single';
21+
import HtmlConvertor from '../component/htmlConvertor';
22+
import HintMessage from '../component/hintMessage';
23+
import { storageKey, postCategory } from '../config';
24+
import { decodeHTML, getBloggerAvatar } from '../common';
25+
import { StyleConfig, ComponentStyles, CommonStyles } from '../style';
26+
27+
const category = postCategory.answer;
28+
29+
class QuestionAnswerCommentPage extends Component {
30+
31+
constructor(props) {
32+
super(props);
33+
this.state = {
34+
hasFocus: false
35+
};
36+
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
37+
}
38+
39+
componentDidMount() {
40+
const { commentAction, question, answer, id } = this.props;
41+
if(answer.CommentCounts){
42+
commentAction.getCommentsByPost(category, id);
43+
}
44+
}
45+
46+
componentDidFocus() {
47+
this.setState({
48+
hasFocus: true
49+
});
50+
}
51+
52+
renderNavbar(){
53+
let { Avatar, Author } = this.props.question;
54+
return (
55+
<Navbar
56+
leftIconName = { Avatar }
57+
leftIconOnPress={ ()=>this.props.router.pop() }
58+
title={ Author }/>
59+
)
60+
}
61+
62+
renderAnswerHeader(answer){
63+
let userAvatar = getBloggerAvatar(answer.AnswerUserInfo.IconName);
64+
let dateAdded = moment(answer.DateAdded).startOf('minute').fromNow();
65+
return (
66+
<View style={[CommonStyles.flexRow, CommonStyles.flexItemsMiddle, CommonStyles.flexItemsBetween, CommonStyles.m_b_2]}>
67+
<View style={[CommonStyles.flexRow, CommonStyles.flexItemsMiddle]}>
68+
<Image ref={view => this.imgView=view}
69+
style={ [ ComponentStyles.avatar_mini, CommonStyles.m_r_2] }
70+
source={ userAvatar }>
71+
</Image>
72+
<Text style={ [ CommonStyles.text_danger, CommonStyles.font_xs ] }>
73+
{ decodeHTML(answer.UserName) }
74+
</Text>
75+
</View>
76+
<Text style={[CommonStyles.text_gray, CommonStyles.font_ms]}>
77+
{ dateAdded }
78+
</Text>
79+
</View>
80+
)
81+
}
82+
83+
renderAnswerContent(answer){
84+
let answerContent = answer.ConvertedContent || answer.Answer;
85+
return (
86+
<HtmlConvertor
87+
content={ answerContent }>
88+
</HtmlConvertor>
89+
)
90+
}
91+
92+
renderAnswer(){
93+
let { answer } = this.props;
94+
return (
95+
<View style={[ ComponentStyles.list, CommonStyles.p_b_0 ]}>
96+
{ this.renderAnswerHeader(answer) }
97+
{ this.renderAnswerContent(answer) }
98+
</View>
99+
)
100+
}
101+
102+
103+
renderCommentHeader(comment){
104+
let dateAdded = moment(comment.DateAdded).startOf('minute').fromNow();
105+
return (
106+
<View style={[CommonStyles.flexRow, CommonStyles.flexItemsMiddle, CommonStyles.flexItemsBetween, CommonStyles.m_b_2]}>
107+
<View style={[CommonStyles.flexRow, CommonStyles.flexItemsMiddle]}>
108+
<Icon
109+
name={ 'ios-return-right' }
110+
size= { StyleConfig.icon_size }
111+
color={ StyleConfig.color_danger }
112+
style= {[CommonStyles.m_r_2]}/>
113+
<Text style={[ CommonStyles.font_xs, CommonStyles.text_danger ]}>
114+
{ comment.PostUserName }
115+
</Text>
116+
</View>
117+
<Text style={[CommonStyles.text_gray, CommonStyles.font_ms]}>
118+
{ dateAdded }
119+
</Text>
120+
</View>
121+
)
122+
}
123+
124+
renderCommentContent(comment){
125+
let commentContent = comment.ConvertedContent || comment.Content;
126+
return (
127+
<View style={[ styles.comment_content ]}>
128+
<HtmlConvertor
129+
content={ commentContent }>
130+
</HtmlConvertor>
131+
</View>
132+
)
133+
}
134+
135+
renderComment(comment, index){
136+
return (
137+
<View key = { index }
138+
style={[ ComponentStyles.list, CommonStyles.p_b_0 ]}>
139+
{ this.renderCommentHeader(comment) }
140+
{ this.renderCommentContent(comment) }
141+
</View>
142+
)
143+
}
144+
145+
renderComments() {
146+
let { id, comments, ui } = this.props;
147+
if (this.state.hasFocus === false || ui.refreshPending !== false) {
148+
return (
149+
<Spinner style={ ComponentStyles.message_container }/>
150+
)
151+
}
152+
if (comments && comments.length) {
153+
return (
154+
<View>
155+
{
156+
comments.map((comment, index)=>{
157+
return this.renderComment(comment, index);
158+
})
159+
}
160+
<EndTag/>
161+
</View>
162+
)
163+
}
164+
return(
165+
<HintMessage />
166+
);
167+
}
168+
169+
render() {
170+
return (
171+
<View style={ ComponentStyles.container }>
172+
{ this.renderNavbar() }
173+
<ScrollView
174+
showsVerticalScrollIndicator = {false}
175+
showsHorizontalScrollIndicator = {false} >
176+
{ this.renderAnswer() }
177+
{ this.renderComments() }
178+
</ScrollView>
179+
180+
<SingleButton
181+
position="left"
182+
onPress = { ()=>this.props.router.pop() }/>
183+
</View>
184+
)
185+
}
186+
}
187+
188+
const styles = StyleSheet.create({
189+
comment_content:{
190+
paddingLeft: StyleConfig.icon_size + 5
191+
}
192+
})
193+
194+
export default connect((state, props) => ({
195+
comments : state.comment[props.id],
196+
ui: state.commentListUI[props.id]
197+
}), dispatch => ({
198+
commentAction : bindActionCreators(CommentAction, dispatch)
199+
}), null, {
200+
withRef: true
201+
})(QuestionAnswerCommentPage);

0 commit comments

Comments
 (0)