Account settlement component, reviewer:yu liang.

@@ -39,6 +39,8 @@ import guideInitialState from './reducers/guide/guideInitialState';
 import homeInitialState from './reducers/home/homeInitialState';
 import homeInitialState from './reducers/home/homeInitialState';
 import messageInitialState from './reducers/message/messageInitialState';
 import messageInitialState from './reducers/message/messageInitialState';
 import userInitialState from './reducers/user/userInitialState';
 import userInitialState from './reducers/user/userInitialState';
+import accountSettlementaInitialState from './reducers/accountSettlement/accountSettlementInitialState';
+
 
 
 import App from './containers/App';
 import App from './containers/App';
 import GuideContainer from './containers/GuideContainer';
 import GuideContainer from './containers/GuideContainer';
@@ -69,6 +71,7 @@ function getInitialState() {
     	home: (new homeInitialState),
     	home: (new homeInitialState),
     	message: (new messageInitialState),
     	message: (new messageInitialState),
     	user: (new userInitialState),
     	user: (new userInitialState),
+		// accountSettlement: (new accountSettlementaInitialState),
 	};
 	};
 	return _initState;
 	return _initState;
 }
 }

+'use strict';
+
+import React, {Component} from 'react';
+
+import {
+    StyleSheet,
+    View,
+    Text,
+    ListView,
+} from 'react-native';
+
+
+let seporatorColor = '#e5e5e5'
+
+
+export default class AccountSettlement extends Component {
+
+    constructor(props) {
+        super (props);
+
+        this.dataSource = new ListView.DataSource({
+            rowHasChanged:(r1,r2)=>r1!==r2,
+            sectionHeaderHasChanged: (s1, s2) => s1 !== s2
+        });
+
+        this.renderRow = this.renderRow.bind(this);
+    }
+
+	renderRow(Data,sectionId) {
+
+		switch (sectionId) {
+
+			case 'SECTION_HEADER':
+				return (
+					<View style={styles.headerContainer}>
+						<Text style={[styles.commonText, styles.headerText]}>
+							{Data.title}
+						</Text>
+						<Text style={[styles.valueText, styles.headerText]}>
+							{Data.content}
+						</Text>
+					</View>
+				);
+			case 'SECTION_SEPORATOR':
+				return(
+					<View style={{
+						height:15,
+						borderBottomWidth:0.5,
+						borderColor:seporatorColor,
+					}}/>
+				);
+			case 'SECTION_TITLE':
+				return(
+					<View style={styles.cellContainer}>
+						<Text style={[styles.inCellText,{flex:0.9}]}>品牌</Text>
+						<View style={{width:1,height:14,backgroundColor:seporatorColor,marginTop:15}}/>
+						<Text style={[styles.inCellText,{flex:1.0}]}>生成日期</Text>
+						<View style={{width:1,height:14,backgroundColor:seporatorColor,marginTop:15}}/>
+						<Text style={[styles.inCellText,{flex:0.8}]}>状态</Text>
+						<View style={{width:1,height:14,backgroundColor:seporatorColor,marginTop:15}}/>
+						<Text style={[styles.inCellText,{flex:1.3}]}>账单金额（元）</Text>
+
+					</View>
+				);
+			case 'SECTION_CONTENT':
+				return (
+					<View style={styles.cellContainer}>
+						<Text style={[styles.inCellText,{flex:0.9}]}>{Data.brand}</Text>
+						<Text style={[styles.inCellText,{flex:1.0}]}>{Data.date}</Text>
+						<Text style={[styles.inCellText,{flex:0.8}]}>{Data.status}</Text>
+						<Text style={[styles.inCellText,{flex:1.3}]}>{Data.bill}</Text>
+					</View>
+				);
+		}
+
+		return (<Text>Error data source</Text>);
+	}
+	render() {
+		return (
+            <ListView
+                style={styles.container}
+                dataSource = {this.dataSource.cloneWithRowsAndSections(this.props.dataBlob)}
+                renderRow = {this.renderRow}
+                onEndReachedThreshold = {-200}
+                onEndReached = {this.props.fetchNextPage}
+            />
+
+		);
+	}
+
+}
+
+const styles = StyleSheet.create({
+
+	cellContainer: {
+		backgroundColor:'white',
+		borderColor:'red',
+		flexDirection: 'row',
+		height: 45,
+		borderBottomWidth:0.5,
+		borderColor:seporatorColor,
+	},
+
+	inCellText:{
+		fontSize: 14,
+		marginTop: 15,
+		color: '#444444',
+		flex:1,
+		borderBottomWidth:0.5,
+		borderColor:seporatorColor,
+		textAlign: 'center',
+	},
+
+    container: {
+        top: 64,
+        flex:1,
+
+    },
+
+    headerContainer: {
+    	flex: 1,
+    	height: 80,
+    	backgroundColor:'white',
+    	flexDirection:'column',
+		borderBottomWidth:0.5,
+		borderColor:seporatorColor,
+    },
+
+	commonText:{
+		fontSize: 14,
+		marginTop: 20,
+		fontWeight:"300",
+		color: '#444444'
+	},
+
+	valueText:{
+		fontSize: 21,
+		marginTop: 10,
+		fontWeight: 'bold',
+		color: '#d0021b'
+	},
+
+	headerText: {
+		left:15,
+	},
+});

@@ -38,7 +38,9 @@ export default keyMirror({
     PHONE_CALL: null,
     PHONE_CALL: null,
     ABOUT_US: null,
     ABOUT_US: null,
 
 
-
+    ACCOUNT_LIST_REQUEST:null,
+    ACCOUNT_LIST_SUCCESS:null,
+    ACCOUNT_LIST_FAILURE:null,
     /*
     /*
     GET_PROFILE_REQUEST: null,
     GET_PROFILE_REQUEST: null,
     GET_PROFILE_SUCCESS: null,
     GET_PROFILE_SUCCESS: null,

@@ -2,6 +2,9 @@
 'use strict';
 'use strict';
 
 
 import React, { Component } from 'react';
 import React, { Component } from 'react';
+
+import AccountSettlement from '../components/AccountSettlement'
+
 import {
 import {
     StyleSheet,
     StyleSheet,
     View,
     View,
@@ -12,7 +15,7 @@ from 'react-native';
 
 
 export default class AccountSettlementContainer extends Component {
 export default class AccountSettlementContainer extends Component {
 
 
-	constructor(props){
+	constructor(props) {
 		super(props);
 		super(props);
 		this.dataSource = new ListView.DataSource({
 		this.dataSource = new ListView.DataSource({
 			rowHasChanged:(r1,r2)=>r1!==r2,
 			rowHasChanged:(r1,r2)=>r1!==r2,
@@ -106,7 +109,6 @@ export default class AccountSettlementContainer extends Component {
 			],
 			],
 		};
 		};
 
 
-		this.renderRow = this.renderRow.bind(this);
 		this.fetchNextPage = this.fetchNextPage.bind(this);
 		this.fetchNextPage = this.fetchNextPage.bind(this);
 		this.state = {dataBlob:this.dataBlob};
 		this.state = {dataBlob:this.dataBlob};
 	}
 	}
@@ -122,7 +124,8 @@ export default class AccountSettlementContainer extends Component {
 					date: '2016-01-23',
 					date: '2016-01-23',
 					status: '已出账单',
 					status: '已出账单',
 					bill:'923.00'
 					bill:'923.00'
-				},{
+				},
+                {
 					brand:'vans',
 					brand:'vans',
 					date: '2016-01-23',
 					date: '2016-01-23',
 					status: '已出账单',
 					status: '已出账单',
@@ -132,71 +135,13 @@ export default class AccountSettlementContainer extends Component {
 		console.log(this.dataBlob.SECTION_CONTENT);
 		console.log(this.dataBlob.SECTION_CONTENT);
 		this.setState({dataBlob:this.dataBlob});
 		this.setState({dataBlob:this.dataBlob});
 	}
 	}
-
-	renderRow(Data,sectionId) {
-
-		switch (sectionId) {
-
-			case 'SECTION_HEADER':
-				return (
-					<View style={styles.headerContainer}>
-						<Text style={[styles.commonText, styles.headerText]}>
-							{Data.title}
-						</Text>
-						<Text style={[styles.valueText, styles.headerText]}>
-							{Data.content}
-						</Text>
-					</View>
-				);
-			case 'SECTION_SEPORATOR':
-				return(
-					<View style=
-					{{
-						height:15,
-						borderBottomWidth:0.5,
-						borderColor:seporatorColor,
-					}}/>
-				);
-			case 'SECTION_TITLE':
-				return(
-					<View style={styles.cellContainer}>
-						<Text style={[styles.inCellText,{flex:0.9}]}>品牌</Text>
-						<View style={{width:1,height:14,backgroundColor:seporatorColor,marginTop:15}}/>
-						<Text style={[styles.inCellText,{flex:1.0}]}>生成日期</Text>
-						<View style={{width:1,height:14,backgroundColor:seporatorColor,marginTop:15}}/>
-						<Text style={[styles.inCellText,{flex:0.8}]}>状态</Text>
-						<View style={{width:1,height:14,backgroundColor:seporatorColor,marginTop:15}}/>
-						<Text style={[styles.inCellText,{flex:1.3}]}>账单金额（元）</Text>
-
-					</View>
-				);
-			case 'SECTION_CONTENT':
-				return (
-					<View style={styles.cellContainer}>
-						<Text style={[styles.inCellText,{flex:0.9}]}>{Data.brand}</Text>
-						<Text style={[styles.inCellText,{flex:1.0}]}>{Data.date}</Text>
-						<Text style={[styles.inCellText,{flex:0.8}]}>{Data.status}</Text>
-						<Text style={[styles.inCellText,{flex:1.3}]}>{Data.bill}</Text>
-					</View>
-				);
-		}
-
-		return (<Text>Error data source</Text>);
-	}
 	render() {
 	render() {
 		return (
 		return (
-			<View style={{flex:1}}>
-				<ListView
-					style={styles.container}
-					dataSource = {this.dataSource.cloneWithRowsAndSections(this.state.dataBlob)}
-					renderRow = {this.renderRow}
-					onEndReachedThreshold = {100}
-					onEndReached = {this.fetchNextPage}
-				>
-
-				</ListView>
+            <AccountSettlement
+                dataBlob={this.state.dataBlob}
+                fetchNextPage={this.fetchNextPage}
+            />
 
 
-			</View>
 		);
 		);
 	}
 	}
 }
 }

+'use strict';
+import Request from '../services/Request';
+
+const {
+    ACCOUNT_LIST_REQUEST,
+    ACCOUNT_LIST_SUCCESS,
+    ACCOUNT_LIST_FAILURE,
+
+} = require('../../constants/actionTypes').default;
+
+/**
+ * Request next page of account settlement data list...
+ * @method nextPageOfDataRequest
+ * @return {JS Objecrt}
+ */
+export function nextPageOfDataRequest() {
+
+
+    return {
+        type: ACCOUNT_LIST_REQUEST,
+    }
+}
+
+/**
+ * Success to fetch data..
+ * @method nextPageOfDataSuccess
+ * @param  {Maybe array}              json remote data
+ * @return {[type]}                   [description]
+ */
+export function nextPageOfDataSuccess(json) {
+    return {
+        type: ACCOUNT_LIST_SUCCESS,
+        playload: json,
+    }
+}
+
+export function nextPageOfDataFailure(error) {
+    return {
+        type: ACCOUNT_LIST_FAILURE,
+        playload: error,
+    }
+}

+'use strict';
+
+import {List, Record} from 'immutable';
+
+let InitialState = Record({
+	error: null,
+  	isValid: false,
+  	isFetching: false,
+
+});
+
+export default InitialState;

+'use strict';