Merge pull request febobo#17 from febobo/develop

febobo · web-flow · commit 335f6c90c60b · 2016-06-16T19:53:12.000+08:00
add user reply
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "react-native-vector-icons": "^2.0.2",
     "react-redux": "^4.4.5",
     "redux": "^3.5.2",
+    "redux-actions": "^0.10.0",
     "redux-logger": "^2.6.1",
     "redux-promise": "^0.5.3",
     "redux-thunk": "^2.1.0"
diff --git a/src/actions/ActionTypes.js b/src/actions/ActionTypes.js
@@ -6,3 +6,5 @@ export const CHECK_TOKEN = 'CHECK_TOKEN' // 检查token
 export const TOAST = 'TOAST'; // 吐司
 export const REPLY_TOPIC = 'REPLY_TOPIC'; // 评论
 export const UPS_TOPIC = 'UPS_TOPIC'; // topic 点赞
+export const GET_TOPIC_DETAIL = 'GET_TOPIC_DETAIL'; // 获取文章详情
+export const UP_REPLY = 'UP_REPLY'; // 评论点赞
diff --git a/src/actions/CommentActions.js b/src/actions/CommentActions.js
@@ -9,8 +9,23 @@ export const replyTopicById = createAction(types.REPLY_TOPIC , topicService.repl
   replyId,
   user
 } , resolved , rejected) => {
-  console.log(resolved)
   resolved();
   return {
+    topicId,
+    content : markdown.parse(content),
+    replyId,
+    user
+  }
+})
+
+export const getTopicDetail = createAction(types.GET_TOPIC_DETAIL , topicService.getReply ,(id) =>{
+  return {
+    id
+  }
+})
+
+export const upReply = createAction(types.UP_REPLY , topicService.upReply ,(id) =>{
+  return {
+    id
   }
 })
diff --git a/src/page/Comment.js b/src/page/Comment.js
@@ -22,6 +22,8 @@ import { connect } from 'react-redux';
 import TabShow from '../components/TabShow';
 import connectComponent from '../utils/connectComponent';
 import config from '../config';
+import * as QrCodeComponent from './QrCode';
+const QrCode = connectComponent(QrCodeComponent);
 
 let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
 
@@ -33,6 +35,14 @@ class Comment extends Component {
 		this.keyboardWillHideEvent = DeviceEventEmitter.addListener('keyboardWillHide', this.keyboardWillHide.bind(this));
   }
 
+  componentWillMount(){
+    const { data } = this.props.Detail;
+    if(data && data.id){
+      const { actions } = this.props;
+      actions.getTopicDetail(data.id)
+    }
+  }
+
   keyboardWillShow (e){
     this.commentView && this.commentView.setNativeProps({
 			style: {
@@ -49,39 +59,80 @@ class Comment extends Component {
 		})
   }
 
-  reply (){
-    const { actions ,Detail } = this.props;
+  reply (name){
+    const { actions ,Detail , User , navigator} = this.props;
+    if(!User.data){
+      return actions.toast('登陆后评论！',2000)
+    }
+
     if(!this.textInputValue){
       return actions.toast('评论不能为空')
     }
-    console.log(this)
+
     actions.replyTopicById({
       topicId: Detail.data.id,
 			content: this.textInputValue + config.replySuffix,
 			// replyId: this.replyId,
 			user: {
-				loginname: '212',
-				avatar_url: '2212'
+				loginname: 'test',
+				avatar_url: 'http://test.imgs.wn518.com/upimages/ys-sales/2016-05-05/fc37e0ae1cdc0282019f3d7d25d6fcdf_1_0_0_480_480_0.jpg'
 			}
     },()=>{
       this._resetReplyForm()
     })
   }
 
+  _onAuthorTextPress(authorName) {
+		// if (!this.props.user) return;
+    const { actions ,User} = this.props;
+    if(!User.data){
+      return actions.toast('登陆后评论！',2000)
+    }
+
+		let text = (this.textInputValue || '') + ` @${authorName} `;
+		this.textInput.setNativeProps({
+			text: text
+		});
+		this.textInputValue = text;
+	}
+
+  _scrollToTop() {
+		this._listView.scrollTo({
+			x: 0,
+			y: 0
+		});
+	}
+
   _resetReplyForm() {
 		this.replyId = null;
 		this.textInput.setNativeProps({
 			text: ''
 		});
 		this.textInputValue = '';
 		this.textInput.blur();
+    this._scrollToTop()
 	}
 
+  _upreply (id){
+    const { actions } = this.props;
+    actions.upReply(id);
+  }
+
+  goLogin(){
+    const { navigator } = this.props;
+    navigator.push({
+      component : QrCode
+    })
+  }
+
   componentUnMount(){
     this.keyboardWillHideEvent.remove()
     this.keyboardWillShowEvent.remove()
   }
+
+
   render (){
+
     const pointContent = (()=>{
       return (
         <Icon
@@ -92,7 +143,8 @@ class Comment extends Component {
       )
     })();
 
-    const { Detail , navigator} = this.props;
+    const { Comment , navigator , User} = this.props;
+    console.log(this)
     return (
       <View style={[styles.container]}>
         <View style={[styles.commentHeader]}>
@@ -104,7 +156,7 @@ class Comment extends Component {
           <View>
             <TouchableOpacity>
               <Text style={{fontSize:16,color:'#fff'}}>
-                评论({Detail && Detail.data && Detail.data.reply_count})
+                评论({Comment.topics.data && Comment.topics.data.replies && Comment.topics.data.replies.length})
               </Text>
             </TouchableOpacity>
           </View>
@@ -114,9 +166,10 @@ class Comment extends Component {
           ref={(view) => this.commentView = view}
         >
           {
-            Detail && Detail.data && Detail.data.reply_count !=0 ?
+            Comment.topics.data && Comment.topics.data.replies && Comment.topics.data.replies.length !=0 ?
             <ListView
-              dataSource={ds.cloneWithRows(Detail.data.replies)}
+              ref={(view) => this._listView = view}
+              dataSource={ds.cloneWithRows(Comment.topics.data.replies.reverse())}
               renderRow={this._renderRow.bind(this)}
               initialListSize={10}
               onEndReachedThreshold={0}
@@ -128,45 +181,54 @@ class Comment extends Component {
               renderFooter={null}
             /> :
             <View style={{flexDirection:'row',paddingTop:30,alignItems : 'center',justifyContent : 'center'}}>
-              <Text style={{fontSize:20,color:'#red'}}>暂无评论</Text>
+              <Text style={{fontSize:20}}>暂无评论</Text>
             </View>
           }
         </View>
-        <View style={[styles.commentBox]}>
-          <Image
-            style={[styles.article,styles.authorHeader]}
-            source={{uri : 'http://test.imgs.wn518.com/upimages/ys-sales/2016-05-05/fc37e0ae1cdc0282019f3d7d25d6fcdf_1_0_0_480_480_0.jpg'}}
-          />
-          <View style={{flex:1}}>
-            <TextInput
-               ref={(view) => this.textInput = view}
-               value={this.state && this.state.textInput}
-               onChangeText={(text) => {
-                               this.textInput.setNativeProps({
-                                   text: text
-                               });
-                               this.textInputValue = text;
-                               this.setState({textInput:text})
-                           }}
-               style={{height: 40, borderWidth:1,borderColor:'#eee'}}
-               placeholder="说说我的看法"
-               placeholderTextColor="#ccc"
-               keyboardType={"default"}
-             />
-          </View>
-          <View>
-            <TouchableOpacity
-              style={[styles.replyBtn]}
-              onPress={()=>this.reply()}
-            >
-              <Icon
-                name='ios-undo'
-                size={ 30 }
-                color='#333'
-              />
+        {
+          User.data ?
+          <View style={[styles.commentBox]}>
+            <Image
+              style={[styles.article,styles.authorHeader]}
+              source={{uri : User.data.avatar_url}}
+            />
+            <View style={{flex:1}}>
+              <TextInput
+                 ref={(view) => this.textInput = view}
+
+                 onChangeText={(text) => {
+                                 this.textInput.setNativeProps({
+                                     text: text
+                                 });
+                                 this.textInputValue = text;
+                             }}
+                 style={{height: 40, borderWidth:1,borderColor:'#eee'}}
+                 placeholder="说说我的看法"
+                 placeholderTextColor="#ccc"
+                 keyboardType={"default"}
+
+               />
+            </View>
+            <View>
+              <TouchableOpacity
+                style={[styles.replyBtn]}
+                onPress={()=>this.reply()}
+              >
+                <Icon
+                  name='ios-undo'
+                  size={ 30 }
+                  color='#ccc'
+                />
+              </TouchableOpacity>
+            </View>
+          </View> :
+          <View style={[styles.commentBox,{flexDirection:'row',alignItems:'center',justifyContent:"center"}]}>
+            <TouchableOpacity onPress={()=>this.goLogin()}>
+            <Text style={{fontSize:20,color:'#ccc',flex : 1,textAlign:'center'}}>登录后评论</Text>
             </TouchableOpacity>
           </View>
-        </View>
+        }
+
       </View>
     )
   }
@@ -197,6 +259,30 @@ class Comment extends Component {
             content={rowData.content}
             style={htmlStyles}
           />
+          <View style={styles.undo}>
+            <TouchableOpacity
+              onPress={()=>this._upreply(rowData)}
+            >
+              <View>
+                <Icon
+                  name='md-thumbs-up'
+                  size={ 20 }
+                  color='#ccc'
+                />
+              </View>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={()=>this._onAuthorTextPress(rowData.author.loginname)}
+            >
+              <View>
+                <Icon
+                  name='ios-undo'
+                  size={ 20 }
+                  color='#ccc'
+                />
+              </View>
+            </TouchableOpacity>
+          </View>
         </View>
       </View>
     )
@@ -227,6 +313,10 @@ const styles = StyleSheet.create({
     paddingTop : 5,
     marginLeft:5
   },
+  undo : {
+    flexDirection : 'row',
+    justifyContent : 'space-between'
+  },
   commentHeader : {
     height : headerHeight,
     paddingTop:20,
@@ -440,15 +530,3 @@ export function mapStateToProps(state){
     Detail : state.Detail
   }
 }
-// const mapActionCreators = (dispatch) => ({
-//   comment : bindActionCreators(CommentActions , dispatch),
-//   detail : bindActionCreators(DetailActions , dispatch),
-// })
-//
-// const mapStateToProps = (state)=>
-// ({
-//   Comment : state.Comment,
-//   Detail : state.Detail
-// })
-//
-// export default connect (mapStateToProps , mapActionCreators)(Comment)
diff --git a/src/page/Essence.js b/src/page/Essence.js
@@ -59,6 +59,8 @@ class Essence extends Component {
 
   _getList(params){
     const { getList } = this.props.actions;
+    const { data } = this.props.Essence
+    if(data && data.length && page == 1) return;
     getList(params)
   }
 
diff --git a/src/reducers/Comment.js b/src/reducers/Comment.js
@@ -1,17 +1,46 @@
 import * as types from '../actions/actionTypes';
 
-const tabInitState = {
-  selectedTab : 'essence'
+const initialState = {
+	topics: {}
+};
+
+function reply(topicId , replyId , content , user , state , payload){
+
+  let topic = state.topics.data;
+
+  topic.replies = topic.replies.reverse().concat([{
+    topicId,
+    replyId,
+    content,
+    author : user,
+    create_at : new Date(),
+    ups : []
+  }])
+
+  return {
+    ...state,
+    topics : { data : topic}
+  }
+
 }
-export default function Comment (state=tabInitState , action={}){
+
+export default function Comment (state=initialState , action={}){
+  const { payload , meta={} } = action;
+  const { topicId, content, replyId , user  } = meta;
   switch (action.type) {
-    case types.TAB_CHANGE:
+    case types.REPLY_TOPIC:
+      return reply(topicId , replyId , content , user , state , payload)
+      break;
+    case types.GET_TOPIC_DETAIL:
       return Object.assign(
         {} , state , {
-          selectedTab : action.selectedTab
+          topics : payload
         }
       )
       break;
+    case types.UP_REPLY:
+      return upReply(topicId , replyId , content , user , state , payload)
+      break;
     default:
       return state;
   }
diff --git a/src/reducers/User.js b/src/reducers/User.js
@@ -1,7 +1,6 @@
 import * as types from '../actions/actionTypes';
 
 export default function User (state={} , action={}){
-  console.log(action,111)
   const {payload, error, meta = {}, type} = action;
   switch (action.type) {
     case types.CHECK_TOKEN:
diff --git a/src/service/topicService.js b/src/service/topicService.js

Original file line number	Diff line number	Diff line change
`@@ -59,6 +59,8 @@ class Essence extends Component {`
`59`	`59`
`60`	`60`	`_getList(params){`
`61`	`61`	`const { getList } = this.props.actions;`
	`62`	`+ const { data } = this.props.Essence`
	`63`	`+ if(data && data.length && page == 1) return;`
`62`	`64`	`getList(params)`
`63`	`65`	`}`
`64`	`66`