Skip to content
This repository was archived by the owner on Nov 12, 2019. It is now read-only.

Commit b6ee8f5

Browse files
wangdicoderwangdicoder
committed
discovery page -random list view style
1 parent 1d9afe8 commit b6ee8f5

File tree

4 files changed

+100
-39
lines changed

4 files changed

+100
-39
lines changed

‎js/actions/actionTypes.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export const FETCH_HOME_DATE_REQUEST = 'FETCH_HOME_DATE_REQUEST';
1010
export const FETCH_RANDOM_DATA_SUCCESS = 'FETCH_RANDOM_DATA_SUCCESS';
1111
export const FETCH_RANDOM_DATA_FAILURE = 'FETCH_RANDOM_DATA_FAILURE';
1212
export const FETCH_RANDOM_DATA_REQUEST = 'FETCH_RANDOM_DATA_REQUEST';
13+
export const FETCH_RANDOM_MORE_DATA_SUCCESS = 'FETCH_RANDOM_MORE_DATA_SUCCESS';
1314
export const FETCH_RANDOM_MORE_DATA_REQUEST = 'FETCH_RANDOM_MORE_DATA_REQUEST';
1415
export const FETCH_RANDOM_MORE_DATA_FAILURE = 'FETCH_RANDOM_MORE_DATA_FAILURE';
1516

‎js/actions/requestRandomData.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,25 @@ function fetchRequest() {
2626
};
2727
}
2828

29+
function fetchMoreDataSuccess(json) {
30+
return {
31+
type: TYPES.FETCH_RANDOM_MORE_DATA_SUCCESS,
32+
dataSource: json.results
33+
};
34+
}
35+
36+
function fetchMoreDataRequest() {
37+
return {
38+
type: TYPES.FETCH_RANDOM_MORE_DATA_REQUEST
39+
};
40+
}
41+
42+
function fetchMoreDataFailure() {
43+
return {
44+
type: TYPES.FETCH_RANDOM_MORE_DATA_FAILURE
45+
};
46+
}
47+
2948
export function fetchRandomData() {
3049
var url = fetchUrl.random + 'Android/10';
3150
return (dispatch) => {
@@ -38,4 +57,18 @@ export function fetchRandomData() {
3857
dispatch(fetchFailure());
3958
});
4059
};
60+
}
61+
62+
export function fetchMoreRandomData() {
63+
var url = fetchUrl.random + 'Android/10';
64+
return (dispatch) => {
65+
dispatch(fetchMoreDataRequest());
66+
fetchWithTimeout(5000, fetch(url))
67+
.then((response)=> response.json())
68+
.then((json) => {
69+
dispatch(fetchMoreDataSuccess(json));
70+
}).catch((error) => {
71+
dispatch(fetchMoreDataFailure());
72+
});
73+
};
4174
}

‎js/containers/DiscoveryTab/index.js‎

Lines changed: 53 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
'use strict';
55

66
import React, {Component} from 'react';
7-
import {StyleSheet, View, Text, ListView, Image, Platform, TouchableNativeFeedback, TouchableOpacity, RefreshControl} from 'react-native';
7+
import {StyleSheet, View, Text, ListView, Image, Platform, TouchableNativeFeedback, TouchableOpacity, RefreshControl, ActivityIndicator} from 'react-native';
88
import {connect} from 'react-redux';
99
import {bindActionCreators} from 'redux';
1010
import * as Actions from '../../actions/requestRandomData';
@@ -26,12 +26,21 @@ class DiscoveryFragment extends Component{
2626
this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
2727
}
2828

29-
componentDidMount(){
29+
_fetchData(){
3030
this.props.actions.fetchRandomData();
3131
}
3232

33+
componentDidMount(){
34+
this._fetchData();
35+
}
36+
3337
_onRefresh(){
34-
this.props.actions.fetchRandomData();
38+
this._fetchData();
39+
}
40+
41+
_onEndReached(){
42+
if(!this.props.isRenderFooter)
43+
this.props.actions.fetchMoreRandomData();
3544
}
3645

3746
render(){
@@ -47,8 +56,8 @@ class DiscoveryFragment extends Component{
4756
renderFooter={this._renderFooter.bind(this)}
4857
initialListSize={10}
4958
pageSize={10}
50-
//onEndReached={this.props.onEndReached}
51-
//onEndReachedThreshold={5}
59+
onEndReached={this._onEndReached.bind(this)}
60+
onEndReachedThreshold={5}
5261
refreshControl={
5362
<RefreshControl
5463
refreshing={this.props.loading}
@@ -62,26 +71,26 @@ class DiscoveryFragment extends Component{
6271

6372
_renderHeader(){
6473
return(
65-
<View style={styles.btnPanel}>
66-
{this.tabNames.map((item, i)=>{
67-
return(
68-
<View style={styles.btnRow} key={i}>
69-
{this.tabNames[i].map((subItem, index) => {
70-
return(
71-
<View style={styles.btnCell} key={subItem}>
72-
<TouchableOpacity
73-
onPress={this._itemPressCallback.bind(this, subItem)}
74-
activeOpacity={theme.touchableOpacityActiveOpacity}>
75-
{this._renderBtnContent(i,index)}
76-
</TouchableOpacity>
77-
<Text style={styles.btnCellLabel}>{subItem}</Text>
78-
</View>
79-
);
80-
})}
81-
</View>
82-
);
83-
})}
84-
</View>
74+
<View style={styles.btnPanel}>
75+
{this.tabNames.map((item, i)=>{
76+
return(
77+
<View style={styles.btnRow} key={i}>
78+
{this.tabNames[i].map((subItem, index) => {
79+
return(
80+
<View style={styles.btnCell} key={subItem}>
81+
<TouchableOpacity
82+
onPress={this._itemPressCallback.bind(this, subItem)}
83+
activeOpacity={theme.touchableOpacityActiveOpacity}>
84+
{this._renderBtnContent(i,index)}
85+
</TouchableOpacity>
86+
<Text style={styles.btnCellLabel}>{subItem}</Text>
87+
</View>
88+
);
89+
})}
90+
</View>
91+
);
92+
})}
93+
</View>
8594
)
8695
}
8796

@@ -124,13 +133,6 @@ class DiscoveryFragment extends Component{
124133
_renderRowContent(rowData){
125134
return(
126135
<View style={styles.itemContainer}>
127-
<View style={styles.imgPart}>
128-
{rowData.images ?
129-
<Image style={styles.image} source={{uri: getCorrectImageSizeUrl(rowData.images[0])}} />
130-
:
131-
<Image style={styles.image} source={require('../../assets/user_article_no_data.png')}/>
132-
}
133-
</View>
134136
<View style={styles.txtPart}>
135137
<View style={styles.titlePart}>
136138
<Text style={styles.title} numberOfLines={2}>{rowData.desc}</Text>
@@ -144,13 +146,23 @@ class DiscoveryFragment extends Component{
144146
<Text style={styles.detailsTxt}>{this._handleCreateTime(rowData.publishedAt)}</Text>
145147
</View>
146148
</View>
149+
<View style={styles.imgPart}>
150+
{rowData.images ?
151+
<Image style={styles.image} source={{uri: getCorrectImageSizeUrl(rowData.images[0])}} />
152+
:
153+
<Image style={styles.image} source={require('../../assets/user_article_no_data.png')}/>
154+
}
155+
</View>
147156
</View>
148157
);
149158
}
150159

151160
_renderSeparator(sectionID, rowID, adjacentRowHighlighted){
152161
return(
153-
<View key={rowID} style={{height: theme.segment.width, backgroundColor: theme.segment.color}}/>
162+
<View key={rowID} style={{height: theme.segment.width, width: theme.screenWidth, flexDirection: 'row'}}>
163+
<View style={{flex: 77, backgroundColor: theme.segment.color}}/>
164+
<View style={{flex: 23, backgroundColor: '#fff'}}/>
165+
</View>
154166
);
155167
}
156168

@@ -195,6 +207,7 @@ const styles = StyleSheet.create({
195207
height: px2dp(215),
196208
width: theme.screenWidth,
197209
marginTop: px2dp(12),
210+
marginBottom: px2dp(15),
198211
borderBottomColor: theme.segment.color,
199212
borderBottomWidth: theme.segment.width,
200213
borderTopColor: theme.segment.color,
@@ -219,23 +232,25 @@ const styles = StyleSheet.create({
219232
backgroundColor: '#fff',
220233
flexDirection: 'row',
221234
width: theme.screenWidth,
222-
height: px2dp(75)
235+
height: px2dp(73)
223236
},
224237
imgPart: {
225238
flex: 20,
226239
alignItems: 'center',
227-
justifyContent: 'center'
240+
justifyContent: 'center',
241+
paddingRight: px2dp(5)
228242
},
229243
image: {
230-
width: px2dp(52),
231-
height: px2dp(52),
244+
width: px2dp(60),
245+
height: px2dp(60),
232246
resizeMode: 'cover',
233247
backgroundColor: '#f1f1f1',
234248
},
235249
txtPart: {
236250
flex: 80,
237251
paddingTop: px2dp(10),
238-
paddingRight: px2dp(10),
252+
paddingLeft: px2dp(12),
253+
paddingRight: px2dp(5),
239254
paddingBottom: px2dp(10)
240255
},
241256
titlePart: {

‎js/reducers/randomData.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,21 +17,33 @@ export default function randomData(state=initialState, action) {
1717
case TYPES.FETCH_RANDOM_DATA_REQUEST:
1818
return Object.assign({}, state, {
1919
...state,
20-
loading: true
20+
loading: true,
21+
isRenderFooter: false,
2122
});
2223

2324
case TYPES.FETCH_RANDOM_MORE_DATA_REQUEST:
2425
return Object.assign({}, state, {
2526
...state,
27+
loading: false,
28+
isRenderFooter: true
2629
});
2730

2831
case TYPES.FETCH_RANDOM_DATA_SUCCESS:
2932
return Object.assign({}, state, {
3033
...state,
3134
loading: false,
35+
isRenderFooter: false,
3236
dataSource: action.dataSource
3337
});
3438

39+
case TYPES.FETCH_RANDOM_MORE_DATA_SUCCESS:
40+
return Object.assign({}, state, {
41+
...state,
42+
loading: false,
43+
isRenderFooter: false,
44+
dataSource: state.dataSource.concat(action.dataSource)
45+
});
46+
3547
case TYPES.FETCH_RANDOM_DATA_FAILURE:
3648
return Object.assign({}, state, {
3749
...state,

0 commit comments

Comments
 (0)