add 瞎推荐 page

Author: wangdicoder

js/App.js

@@ -8,7 +8,7 @@ import React from 'react';
 import {Navigator} from 'react-native';
 import {store} from './store/index';
 import MainPage from './containers/MainPage';
-import Test from './containers/MoreTab/GirlsPage'
+import Test from './containers/DiscoveryTab/GirlsPage'
 
 export default class App extends React.Component{
     render(){

js/actions/requestHomeData.js

@@ -5,6 +5,7 @@
 
 import * as types from './actionTypes';
 import fetchUrl from '../constants/fetchUrl';
+import fetchWithTimeout from '../utils/fetchWithTimeout';
 import {getYesterdayFromDate} from '../utils/getDate';
 import HomeDataDAO from '../dao/HomeDataDAO';
 import Toast from 'react-native-root-toast';
@@ -24,6 +25,12 @@ function receiveData(json, date){
     }
 }
 
+function fetchFailure() {
+    return {
+        type: types.FETCH_HOME_DATA_FAILURE
+    };
+}
+
 function isValidData(responseData) {
     if(responseData.category.length > 0)
         return true;
@@ -33,13 +40,13 @@ function isValidData(responseData) {
 export function fetchData(date) {
     const url = fetchUrl.daily + date;
     return (dispatch) => {
-        //dispatch(requestData());
+        dispatch(requestData());
         var dao = new HomeDataDAO();
         dao.fetchLocalData(date).then((localData) => {
             Toast.show('已是最新数据了', {position: px2dp(-80)});
             dispatch(receiveData(localData, date));
         }, (localData)=>{
-            fetch(url)
+            fetchWithTimeout(5000, fetch(url))
                 .then(response => response.json())
                 .then(json => {
                     if(isValidData(json)){
@@ -57,7 +64,10 @@ export function fetchData(date) {
                             dispatch(receiveData(localData, date));
                         }
                     }
-                });
+                }).catch((error)=>{
+                    Toast.show('获取数据失败', {position: px2dp(-80)});
+                    dispatch(fetchFailure());
+            });
         });
 
     }

js/actions/requestRandomData.js

@@ -6,6 +6,7 @@
 import * as TYPES from './actionTypes';
 import fetchUrl from '../constants/fetchUrl';
 import fetchWithTimeout from '../utils/fetchWithTimeout';
+import RandomDataDAO from '../dao/RandomDataDAO';
 
 function fetchSuccess(json) {
     return {
@@ -45,6 +46,21 @@ function fetchMoreDataFailure() {
     };
 }
 
+/**
+ * for save cellular network data and improve performance,
+ * this random data is only manually refreshed
+ */
+export function fetchLocalRandomData() {
+    return (dispatch) => {
+        let dao = new RandomDataDAO();
+        dao.fetchLocalData().then((result)=>{
+            dispatch(fetchSuccess(result));
+        }, (error)=>{
+            dispatch(fetchRandomData());
+        });
+    };
+}
+
 export function fetchRandomData(isMoreData=false) {
     var results = [];
     const randomCategory = ['Android/1','iOS/1','前端/1','休息视频/1','拓展资源/1','App/1','瞎推荐/1'];
@@ -58,17 +74,20 @@ export function fetchRandomData(isMoreData=false) {
                 results = results.concat(json.results);
 
                 if(index >= 10) {
-                    if (isMoreData)
+                    if (isMoreData) {
                         dispatch(fetchMoreDataSuccess(results));
-                    else
+                    }else {
+                        let dao = new RandomDataDAO();
+                        dao.saveData(results);
                         dispatch(fetchSuccess(results));
+                    }
                 }else
                     fetchCategoryData(dispatch);
             }).catch((error) => {
-            if(isMoreData)
-                dispatch(fetchMoreDataFailure());
-            else
-                dispatch(fetchFailure());
+                if(isMoreData)
+                    dispatch(fetchMoreDataFailure());
+                else
+                    dispatch(fetchFailure());
         });
     }
 

js/components/ListViewForHome.js

@@ -21,8 +21,8 @@ class ListViewForHome extends Component{
     constructor(props){
         super(props);
         this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
-        this.tabIcon = ['logo-android','logo-apple','logo-chrome','ios-film','ios-book','ios-apps'];
-        this.tabColor = ['rgb(141,192,89)','#000','rgb(51,154,237)', 'rgb(154,53,172)','rgb(65,87,175)','rgb(249,89,58)'];
+        this.tabIcon = ['logo-android','logo-apple','logo-chrome','ios-film','ios-book','ios-apps','ios-radio'];
+        this.tabColor = ['rgb(141,192,89)','#000','rgb(51,154,237)', '#9370db','#00ced1','rgb(249,89,58)','#ffa500'];
     }
 
     render(){
@@ -112,6 +112,8 @@ class ListViewForHome extends Component{
                 return 4;
             case 'App':
                 return 5;
+            case '瞎推荐':
+                return 6;
         }
     }
 }

js/containers/MoreTab/GirlsPage.js js/containers/DiscoveryTab/GirlsPage.jsjs/containers/MoreTab/GirlsPage.js renamed to js/containers/DiscoveryTab/GirlsPage.js

@@ -10,6 +10,7 @@ import {bindActionCreators} from 'redux';
 import * as Actions from '../../actions/requestRandomData';
 import Icon from 'react-native-vector-icons/Ionicons';
 import TextListPage from './TextListPage';
+import GirlsPage from './GirlsPage';
 import theme from '../../constants/theme';
 import NavigationBar from '../../components/NavigationBar';
 import px2dp from '../../utils/px2dp';
@@ -20,22 +21,18 @@ import WebViewPage from '../../containers/WebViewPage';
 class DiscoveryFragment extends Component{
     constructor(props){
         super(props);
-        this.tabNames = [['Android','iOS','前端'],['App','休息视频','拓展资源']];
-        this.tabIcon = [['logo-android','logo-apple','logo-chrome'],['ios-apps','ios-film','ios-book']];
-        this.tabColor = [['rgb(141,192,89)','#000','rgb(51,154,237)'],['rgb(249,89,58)','rgb(154,53,172)','rgb(65,87,175)']];
+        this.tabNames = [['Android','iOS','前端','App'],['休息视频','拓展资源','瞎推荐','福利']];
+        this.tabIcon = [['logo-android','logo-apple','logo-chrome','ios-apps'],['ios-film','ios-book','ios-radio','ios-images']];
+        this.tabColor = [['rgb(141,192,89)','#000','rgb(51,154,237)','rgb(249,89,58)'],['#9370db','#00ced1','#ffa500','lightpink']];
         this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
     }
 
-    _fetchData(){
-        this.props.actions.fetchRandomData();
-    }
-
     componentDidMount(){
-        this._fetchData();
+        this.props.actions.fetchLocalRandomData();
     }
 
     _onRefresh(){
-        this._fetchData();
+        this.props.actions.fetchRandomData();
     }
 
     _onEndReached(){
@@ -110,6 +107,14 @@ class DiscoveryFragment extends Component{
         )
     }
 
+    _renderBtnContent(i, index){
+        return(
+            <View style={{width:px2dp(50), height:px2dp(50), alignItems:'center', justifyContent:'center'}}>
+                <Avatar icon={this.tabIcon[i][index]} width={px2dp(50)} backgroundColor={this.tabColor[i][index]}/>
+            </View>
+        );
+    }
+
     _renderFooter(){
         if(this.props.isRenderFooter) {
             return (
@@ -187,16 +192,11 @@ class DiscoveryFragment extends Component{
         return time.substring(0, 10);
     }
 
-    _renderBtnContent(i, index){
-        return(
-            <View style={{width:px2dp(60), height:px2dp(60), alignItems:'center', justifyContent:'center'}}>
-                <Avatar icon={this.tabIcon[i][index]} width={px2dp(60)} backgroundColor={this.tabColor[i][index]}/>
-            </View>
-        );
-    }
-
     _itemPressCallback(title){
-       this._pushScene(TextListPage, title);
+        if(title === '福利')
+            this._pushScene(GirlsPage, title);
+        else
+            this._pushScene(TextListPage, title);
     }
 
     _pushScene(component, title){

js/containers/DiscoveryTab/index.js

@@ -44,38 +44,46 @@ class HomeFragment extends Component{
                             title="玩命加载中..."
                         />}
                     >
-                    {/*prevent the length of data is equal to 0*/}
-                    {this.props.hasData && Info.getCategoryList(dataSource).length > 0 ?
-                        <View>
-                            <View style={{height: this.imageHeight, width: theme.screenWidth}}>
-                                <ImageView
-                                    imgUrl={Info.getFuLiUrl(dataSource)}
-                                    labelTime={this.props.dataTime}/>
-                            </View>
-                            <View style={styles.scrollContents}>
-                                {this.props.displayOrder.map((item, i) => {
-                                    if(item !== '福利' && Info.getTargetList(dataSource, item) != null)
-                                    return(
-                                        <ListViewForHome
-                                            key={i}
-                                            navigator={this.props.navigator}
-                                            dataSource={Info.getTargetList(dataSource, item)}
-                                            headerTitle={item}/>
-                                    );
-                                })}
-                                <View style={[styles.footer, {backgroundColor: rowItemBackgroundColor, borderTopColor: segmentColor}]}>
-                                    <TouchableOpacity
-                                        onPress={this._onPress.bind(this, 1)}
-                                        activeOpacity={theme.touchableOpacityActiveOpacity}>
-                                        <View style={styles.bottomBtn}>
-                                            <Text style={styles.btnLabel}>没看够？试试往期干货吧</Text>
-                                        </View>
-                                    </TouchableOpacity>
-                                </View>
-                            </View>
+                    {(this.props.error && !this.props.hasData) ?
+                        <View style={styles.indicator}>
+                            <Text style={{color: this.props.tabIconColor}}>Ooops, 获取数据失败~ </Text>
                         </View>
                         :
-                        null
+                        ((this.props.hasData && Info.getCategoryList(dataSource).length > 0) ?
+                                <View>
+                                    <View style={{height: this.imageHeight, width: theme.screenWidth}}>
+                                        <ImageView
+                                            imgUrl={Info.getFuLiUrl(dataSource)}
+                                            labelTime={this.props.dataTime}/>
+                                    </View>
+                                    <View style={styles.scrollContents}>
+                                        {this.props.displayOrder.map((item, i) => {
+                                            if (item !== '福利' && Info.getTargetList(dataSource, item) != null)
+                                                return (
+                                                    <ListViewForHome
+                                                        key={i}
+                                                        navigator={this.props.navigator}
+                                                        dataSource={Info.getTargetList(dataSource, item)}
+                                                        headerTitle={item}/>
+                                                );
+                                        })}
+                                        <View style={[styles.footer, {
+                                            backgroundColor: rowItemBackgroundColor,
+                                            borderTopColor: segmentColor
+                                        }]}>
+                                            <TouchableOpacity
+                                                onPress={this._onPress.bind(this, 1)}
+                                                activeOpacity={theme.touchableOpacityActiveOpacity}>
+                                                <View style={styles.bottomBtn}>
+                                                    <Text style={styles.btnLabel}>没看够？试试往期干货吧</Text>
+                                                </View>
+                                            </TouchableOpacity>
+                                        </View>
+                                    </View>
+                                </View>
+                                :
+                                null
+                        )
                     }
                 </ScrollView>
             </View>
@@ -175,6 +183,13 @@ const styles = StyleSheet.create({
     btnLabel: {
         color: '#fff',
         fontSize: px2dp(16)
+    },
+    indicator: {
+        flexDirection: 'row',
+        width: theme.screenWidth,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: px2dp(20)
     }
 });
 
@@ -184,6 +199,7 @@ const mapStateToProps = (state) => {
         hasData: state.homeData.hasData,
         dataSource: state.homeData.dataSource,
         dataTime: state.homeData.dataTime,
+        error: state.homeData.error,
         mainThemeColor: state.settingState.colorScheme.mainThemeColor,
         pageBackgroundColor: state.settingState.colorScheme.pageBackgroundColor,
         rowItemBackgroundColor: state.settingState.colorScheme.rowItemBackgroundColor,

js/containers/HomeTab/index.js

@@ -23,7 +23,6 @@ import ThemeColorPage from './ThemeColorPage';
 import OrderContentPage from './OrderContentPage';
 import AboutGankPage from './AboutGankPage';
 import AboutAuthorPage from './AboutAuthor/index';
-import GirlsPage from './GirlsPage';
 
 class MoreFragment extends Component{
     constructor(props){
@@ -55,15 +54,13 @@ class MoreFragment extends Component{
                             {this._renderTitleContent()}
                         </TouchableHighlight>
                     }
-                    <View style={[styles.block, {borderTopColor: segmentColor, borderBottomColor: segmentColor}]}>
-                        <RowItem title="福利" icon="md-images" iconColor='lightpink' renderSegment={false} onPress={this._itemClickCallback.bind(this, 1)}/>
-                    </View>
                     <View style={[styles.block, {borderTopColor: segmentColor, borderBottomColor: segmentColor}]}>
                         <RowItem title="首页内容展示顺序" icon="md-reorder" iconColor='lightskyblue' onPress={this._itemClickCallback.bind(this, 2)}/>
                         <RowItem title="主题颜色" icon="ios-color-palette" iconColor={colors.orange} onPress={this._itemClickCallback.bind(this, 3)}/>
                         {/*<RowItem title="选择语言 / Language" icon="md-globe" iconColor={colors.purple}  onPress={this._itemClickCallback.bind(this, 3)}/>*/}
                         <RowItemWithSwitcher title="夜间模式" icon="md-moon" iconColor="#7b68ee" switcherValue={isOpenNightMode} onValueChange={(value) => actions.changeNightMode(value)}/>
-                        <RowItemWithSwitcher title="显示列表缩略图" icon="md-browsers" iconColor='plum' switcherValue={isOpenThumbnail} onValueChange={(value) => actions.changeShowThumbnail(value)} renderSegment={false}/>
+                        <RowItemWithSwitcher title="显示列表缩略图" icon="md-browsers" iconColor='plum' switcherValue={isOpenThumbnail} onValueChange={(value) => actions.changeShowThumbnail(value)} />
+                        <RowItemWithSwitcher title="自动刷新首页数据" icon="md-refresh" iconColor='#ffd700' switcherValue={isOpenThumbnail} onValueChange={(value) => actions.changeShowThumbnail(value)} renderSegment={false}/>
                     </View>
                     <View style={[styles.block, {borderTopColor: segmentColor, borderBottomColor: segmentColor}]}>
                         <RowItem title="关于作者" icon="md-happy" iconColor="#9acd32" renderSegment={false} onPress={this._itemClickCallback.bind(this, 4)}/>

js/containers/MoreTab/index.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const FAVOR_DATA = 'favorData';
+const FAVOR_DATA = '@FavorData';
 
 import {AsyncStorage} from 'react-native';
 

js/dao/FavouriteDataDAO.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const HOME_DATA = 'homeData';
+const HOME_DATA = '@HomeData';
 
 import {AsyncStorage} from 'react-native';
 
@@ -54,8 +54,4 @@ export default class HomeDataDAO{
             });
         });
     }
-
-    removeLocalData(){
-        AsyncStorage.removeItem(HOME_DATA, (error)=>{});
-    }
 }