HomeContainer.js 11.4 KB
'use strict'

import React, {Component} from 'react';
import ReactNative, {
    StyleSheet,
    Dimensions,
    Platform,
    View,
    Text,
    NativeModules,
    InteractionManager,
    NativeAppEventEmitter,
} from 'react-native'

import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {Map} from 'immutable';
import * as homeActions from '../reducers/home/homeActions';
import * as appActions from '../reducers/app/appActions';
import channelTransfer from '../../common/utils/channelTransfer';

import Home from '../components/home/Home';

const actions = [
    homeActions,
    appActions
];

function mapStateToProps(state) {
    let {app, home} = state;
        let channel = app.channel;
        let channelStr = channelTransfer.number2String(channel);
        let data =  home[channelStr];
    return {
        channel,
        data,
    };
}

function mapDispatchToProps(dispatch) {

    const creators = Map()
        .merge(...actions)
        .filter(value => typeof value === 'function')
        .toObject();

    return {
        actions: bindActionCreators(creators, dispatch),
        dispatch
    };
}

class HomeContainer extends Component {
    constructor(props) {
        super(props);

        this.onRefresh = this.onRefresh.bind(this);
        this.onEndReached = this.onEndReached.bind(this);
        this.onPressAnnounceItem = this.onPressAnnounceItem.bind(this);
        this.onPressShopFavorite = this.onPressShopFavorite.bind(this);
        this.onPressTitleMore = this.onPressTitleMore.bind(this);
        this.onClickSort = this.onClickSort.bind(this);
        this.onClickRecommendProduct = this.onClickRecommendProduct.bind(this);
        this.onLongPressProduct = this.onLongPressProduct.bind(this);
        this.onPressFindSimilar = this.onPressFindSimilar.bind(this);
        this.onPressDislike = this.onPressDislike.bind(this);
        this.onPressProductListProduct = this.onPressProductListProduct.bind(this);
        this.onPressReloadData = this.onPressReloadData.bind(this);
        this.onPressChangeChannel = this.onPressChangeChannel.bind(this);

        //统一回调
        this.onPressFloorItem = this.onPressFloorItem.bind(this);
        this.onPressProductItem = this.onPressProductItem.bind(this);

        this.subscription = NativeAppEventEmitter.addListener(
            'ChannelDidChangeEvent',
            (reminder) => {
                //增加了IOS的判断,Android不需要此方法,因为Android首页的四个频道为四个不同的原生界面,调用此方法会导致重复渲染数据
                if (Platform.OS === 'ios') {
                    this.props.actions.setChannel(reminder.channel);
                    this.home && this.home.trigggePullToRefresh(true);
                }
            }
        );
        this.subscription2 = NativeAppEventEmitter.addListener(
            'UserDidLoginEvent',
            (reminder) => {
                this.home && this.home.trigggePullToRefresh();
            }
        );

        this.subscription3 = NativeAppEventEmitter.addListener(
            'UserDidLogoutEvent',
            (reminder) => {
                this.home && this.home.trigggePullToRefresh();
            }
        );

        this.subscription4 = NativeAppEventEmitter.addListener(
            'ABTestDidChangeEvent',
            (reminder) => {
                this.home && this.home.trigggePullToRefresh();
            }
        );

        this.subscription5 = NativeAppEventEmitter.addListener(
            'UserDidRegisterEvent',
            (reminder) => {
                this.home && this.home.trigggePullToRefresh();
            }
        );
    }

    componentDidMount() {
        this.props.actions.loadChannelCachedData();
        this.home && this.home.trigggePullToRefresh();
        // this.props.actions.setShowSimilarGuider(true);
    }

    componentWillUnmount() {
        this.subscription && this.subscription.remove();
        this.subscription2 && this.subscription2.remove();
        this.subscription3 && this.subscription3.remove();
        this.subscription4 && this.subscription4.remove();
        this.subscription5 && this.subscription5.remove();
    }

    onLongPressProduct(rowID) {
        if (rowID) {
            this.props.actions.setSimilarIndex(rowID);
        }
    }

    onPressFindSimilar(product) {
        if (!product) {
            return;
        }
        ReactNative.NativeModules.YH_CommonHelper.jumpFindSimilar(product.toJS());
        ReactNative.NativeModules.YH_CommonHelper.setSimilarGuiderVisible(false);
        this.props.actions.setSimilarIndex(-1);
        this.props.actions.setShowSimilarGuider(false, false);

    }

    onPressDislike(product, similarIndex) {
        this.props.actions.setSimilarIndex(-1);
        let product_skn = product && product.get('product_skn', 0);
        if (!product_skn || productSkn == 0) {
            return;
        }
        this.props.actions.fetchDislike(similarIndex, product_skn);
    }

    //统一回调
    onPressProductItem(productData, imageUrl, index, floorData, floorIndex) {
        let productSkn = productData && productData.get('product_skn', 0);
        if (!productSkn || productSkn == 0) {
          return;
        }
        let jumpUrl = `http://m.yohobuy.com?openby:yohobuy={"action":"go.productDetail","params":{"product_skn":"${productSkn}"}}`;
        this.jumpWithUrl(jumpUrl, imageUrl, index, floorData, floorIndex);
    }

    onPressFloorItem(jumpUrl, imageUrl, index, floorData, floorIndex) {
        this.jumpWithUrl(jumpUrl, imageUrl, index, floorData, floorIndex);
    }

    onPressProductListProduct(productData, imgUrl, index) {
      let productSkn = productData && productData.get('product_skn', 0);
      let productId = productData && productData.get('product_id', 0);
      if (productSkn == 0 || !productSkn) {
          return;
      }
      let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.productDetail","params":{"product_skn":"${productSkn}"}}`;
      ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);

      let {channel ,data} = this.props;

      let rec_id = '';
      let rec_pose = '';
      if (channel == 1) {
          rec_pose = '100001';
      } else if (channel == 2) {
          rec_pose = '100002';
      } else if (channel == 3) {
          rec_pose = '100006';
      } else if (channel == 4) {
          rec_pose = '100011';
      }

      if (channel == 1 || channel == 2) {
          rec_id = data.favorite.get('rec_id','');

          let chooseForYouParam = {
              'PRD_ID': productId,
              'PRD_NUM': parseInt(index)+1,
              'ACTION_ID': 1,
              'REC_ID': rec_id,
              'REC_POSE': rec_pose
          };

          NativeModules.YH_CommonHelper.logEvent('YB_CHOOSE_FOR_YOU', chooseForYouParam);
      }

      let param = {
                      'PRD_ID': productId,
                      'NAV_NUM': parseInt(index)+1,
                      'REC_ID': rec_id
                  };

      NativeModules.YH_CommonHelper.logEvent('YB_MAIN_CAT_NAV_RECPRD', param);
    }
    onRefresh() {
        // InteractionManager.runAfterInteractions(() => {
            this.props.actions.resetStateWhenRefresh();
            this.props.actions.fetchFloor();
        // });
    }

    onClickRecommendProduct() {
        this.props.actions.selectedRecommendProduct();
    }

    onEndReached() {
        let {channel ,data} = this.props;
        if (channel == 1 || channel == 2) {
            this.props.actions.fetchBoyGirlFavoriteList();
        } else if (channel == 3) {
            this.props.actions.fetchKidsFavoriteList();
        } else if (channel == 4) {
            this.props.actions.fetchLifeStyleFavoriteList();
        }
    }

    jumpWithUrl(jumpUrl, imageUrl, index, floorData, floorIndex) {
        if (!jumpUrl) {
            return;
        }
        ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(jumpUrl);

        let floorID = floorData.get('template_id','');
        let floorName = floorData.get('template_name','');
        let param = {
                        'F_ID': floorID,
                        'F_NAME': floorName,
                        'F_URL': jumpUrl,
                        'F_INDEX': parseInt(floorIndex)+1,
                        'I_INDEX': parseInt(index)+1
                    };

        NativeModules.YH_CommonHelper.logEvent('YB_MAIN_EVENT', param);
    }

    onPressAnnounceItem(jumpUrl, imageUrl, index, floorData, floorIndex) {
        this.jumpWithUrl(jumpUrl, imageUrl, index, floorData, floorIndex);
        NativeModules.YH_CommonHelper.logEvent('YB_MY_NOTICE_C', {'POS_ID': '2'});
    }

    onPressShopFavorite(shopId, index) {
        this.props.actions.favoriteOperation(shopId);
    }

    onPressTitleMore(jumpUrl, imageUrl, index, floorData, floorIndex) {
        this.jumpWithUrl(jumpUrl, imageUrl, index, floorData, floorIndex);
    }

    onClickSort(index) {
        this.props.actions.selecLifeStyleProductIndex(index);
    }

    onPressReloadData() {
        this.props.actions.fetchFloor();
    }

    onPressChangeChannel(url) {
        if (Platform.OS === 'ios') {
            let {channel} = this.props;
            if (channel == 1) {
                ReactNative.NativeModules.YH_CommonHelper.switchChannelByTheme(0);
                this.props.actions.setChannel('2');
                this.home && this.home.trigggePullToRefresh(true);
            } else if (channel == 2) {
                ReactNative.NativeModules.YH_CommonHelper.switchChannelByTheme(1);
                this.props.actions.setChannel('1');
                this.home && this.home.trigggePullToRefresh(true);
            }
        } else {
            ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
        }

        NativeModules.YH_CommonHelper.logEvent('YB_MAIN_BO', {'TOURL': url});
    }

    onExposureScroll(){
        if (Platform.OS === 'android'){
            NativeModules.YH_CommonHelper.exposeView();
        }
    }

    render() {
        let {channel, data} = this.props;
        return (
            <View style={styles.container}>
                <Home
                    ref={(c) => {
                        this.home = c;
                    }}
                    channel={channel}
                    data={data}
                    onRefresh={this.onRefresh}
                    onEndReached={this.onEndReached}
                    onPressAnnounceItem={this.onPressAnnounceItem}
                    onPressShopFavorite={this.onPressShopFavorite}
                    onPressTitleMore={this.onPressTitleMore}
                    onClickSort={this.onClickSort}
                    onLongPressProduct={this.onLongPressProduct}
                    onPressFindSimilar={this.onPressFindSimilar}
                    onPressDislike={this.onPressDislike}
                    onPressProductListProduct={this.onPressProductListProduct}
                    onClickRecommendProduct={this.onClickRecommendProduct}
                    onPressReloadData={this.onPressReloadData}
                    onPressChangeChannel={this.onPressChangeChannel}
                    onPressFloorItem={this.onPressFloorItem}
                    onPressProductItem={this.onPressProductItem}
                    onExposureScroll={this.onExposureScroll}
                />
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');

let styles = StyleSheet.create({
    container: {
        width,
        height: height - 64 - 49,
        flex: 1,
    },
});

export default connect(mapStateToProps, mapDispatchToProps)(HomeContainer);