UserContainer.js 13.5 KB
'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';


import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';

import User from '../components/user/User';

import * as userActions from '../reducers/user/userActions';

const {

    USER_POSTS_REQUEST,
    USER_POSTS_SUCCESS,
    USER_POSTS_FAILURE,

    USER_LIKE_REQUEST,
    USER_LIKE_SUCCESS,
    USER_LIKE_FAILURE,

    USER_REPLY_REQUEST,
    USER_REPLY_SUCCESS,
    USER_REPLY_FAILURE,

    GO_TO_SETTING,
    GO_TO_MESSAGE,


} = require('../constants/actionTypes').default;

const {
    StatusBar,
    ScrollView,
    View,
    StyleSheet,
    Dimensions,
    Platform,
    ActionSheetIOS,
} = ReactNative;

const actions = [
    userActions,
];

function mapStateToProps(state) {
    return {
        ...state
    };
}

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

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

class UserContainer extends React.Component {
    constructor(props) {
        super(props);
        this._onPressUserAvatar = this._onPressUserAvatar.bind(this);
        this._onPressGotoSettingState = this._onPressGotoSettingState.bind(this);

    }

    componentDidMount() {
        this._fetchData();
        ReactNative.NativeModules.YH_CommunityHelper.hideTabBar();
    }

    componentWillMount() {

    }


    // private method
    _onPressAvatar(url) {
        console.log('avatar');
    }

    _onPressComment(url) {
        console.log('comment');
    }

    _onPressLike(url) {
        console.log('like');
    }

    _onPressReply() {
        console.log('reply');
    }

    _onPressPosts() {
        console.log('posts');
    }

    _onPressUserAvatar() {

        const BUTTONS = ['拍照', '从相册选择', '编辑个人资料', '取消'];
        ActionSheetIOS.showActionSheetWithOptions({
            options: BUTTONS,
            cancelButtonIndex: 3,
        },

        (buttonIndex) => {
            this._onPressGotoSettingState(buttonIndex);
            // this.setState({ clicked: BUTTONS[buttonIndex] });
            // this.props.actions.goToStatsPage(USER_GO_TO_SETTING_STATS);

        });


    }

    _onPressGotoSettingState(buttonIndex) {
        console.log('go to setting state');
        switch (buttonIndex) {
            case 0:
            {
                console.log('拍照');
                this.props.actions.goToStatsPage(GO_TO_MESSAGE);
            }
            break;
            case 1:
            {
                console.log('从相册中选择');

            }
            break;
            case 2:
            {
                console.log('编辑个人资料');
                console.log('actions = ' + this.actions);
                this.props.actions.goToStatsPage(GO_TO_SETTING);

            }
            break;
            default:
        }
    }

    _onPressBackgroundImg() {
        const BUTTONS = ['拍照', '从相册选择', '取消'];
        ActionSheetIOS.showActionSheetWithOptions({
            options: BUTTONS,
            cancelButtonIndex: 2,
        },
        (buttonIndex) => {
            switch (buttonIndex) {
                case 0:
                {
                    console.log('拍照');
                }
                break;
                case 1:
                {
                    console.log('从相册中选择');
                }
                break;
                default:
            }
        });
    }



    _fetchData() {
        // this.props.actions.userInfo();
        // this.props.actions.posts();
    }

    render() {

        let userInfo = {
            avatar: '',
            name:'Arthur',
            sign:'Hello, Bro',
            backgroundImage: '',
        };

        let posts = [
            {
                author:{
                    avatar: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                    name: '余文乐',
                    uid: '213',
                },

                timeago: '2小时前',
                isOwner: false,
                isTop: true,
                isLike: true,
                title: 'Yoho!Buy特邀摄影师大赛开始报名啦!',
                desc: 'MADNESS作为“六叔”余文乐的个人品牌,经过几个季度的产品表现,相信大家都知道这并不是玩票性质,而是余文乐在做心中的街头品牌。此番MADNESS正式迎来2016春夏的开季,以Los Angeles作为拍摄地点,延续余文乐一直喜欢的简约风格',
                thumbs: [
                    {
                        url: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                    },
                    {
                        url: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                    },
                    {
                        url: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                    }
                ],
                section: '永恒的潮流',
                commentCount: 123,
                likeCount: 45678,
                url: 'https://www.baidu.com'
            },
            {
                author:{
                    avatar: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                    name: '余文乐',
                    uid: '213',
                },
                timeago: '2小时前',
                isOwner: true,
                isTop: false,
                isLike: false,
                title: 'Yoho!Buy特邀摄影师大赛开始报名啦!',
                desc: 'MADNESS作为“六叔”余文乐的个人品牌,经过几个季度的产品表现,相信大家都知道这并不是玩票性质,而是余文乐在做心中的街头品牌。此番MADNESS正式迎来2016春夏的开季,以Los Angeles作为拍摄地点,延续余文乐一直喜欢的简约风格',
                thumbs: [
                    {
                        url: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                    },
                    {
                        url: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                    },
                    {
                        url: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                    }
                ],
                section: '永恒的潮流',
                commentCount: 123,
                likeCount: 45678,
                url: 'https://www.baidu.com'
            },
            {
                author:{
                    avatar: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                    name: '余文乐',
                    uid: '213',
                },
                timeago: '2小时前',
                isOwner: false,
                isTop: false,
                isLike: true,
                title: 'Yoho!Buy特邀摄影师大赛开始报名啦!',
                desc: 'MADNESS作为“六叔”余文乐的个人品牌,经过几个季度的产品表现,相信大家都知道这并不是玩票性质,而是余文乐在做心中的街头品牌。此番MADNESS正式迎来2016春夏的开季,以Los Angeles作为拍摄地点,延续余文乐一直喜欢的简约风格',
                thumbs: [
                    {
                        url: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                    },
                    {
                        url: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                    },
                    {
                        url: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                    }
                ],
                section: '永恒的潮流',
                commentCount: 123,
                likeCount: 45678,
                url: 'https://www.baidu.com'
            },
        ];

        let like = [
            {
                author:{
                    avatar: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                    name: '余文乐',
                    uid: '213',
                },
                timeago: '2小时前',
                isOwner: false,
                isTop: true,
                isLike: true,
                title: 'Yoho!Buy特邀摄影师大赛开始报名啦!',
                desc: 'MADNESS作为“六叔”余文乐的个人品牌,经过几个季度的产品表现,相信大家都知道这并不是玩票性质,而是余文乐在做心中的街头品牌。此番MADNESS正式迎来2016春夏的开季,以Los Angeles作为拍摄地点,延续余文乐一直喜欢的简约风格',
                thumbs: [
                    {
                        url: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                    },
                    {
                        url: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                    },
                    {
                        url: 'https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240',
                    }
                ],
                section: '永恒的潮流',
                commentCount: 123,
                likeCount: 45678,
                url: 'https://www.baidu.com'
            }];

            let reply = [
                {
                    "postInfo": {
                        "title": "害怕抢不到NMD?别担心,至少他们都不是你的对手!",
                        "type": "text"
                    },
                    "createTime": 1467189316,
                    "authorUid": 0,
                    "blocks": [
                        {
                            "commentId": 52,
                            "orderBy": 0,
                            "content": "永远的18岁!!!",
                            "templateKey": "text"
                        },
                        {
                            "commentId": 52,
                            "orderBy": 0,
                            "content": "http://img12.static.yhbimg.com/goodsimg/2016/06/06/05/02e8b4a63c0101b1a1a8f04b53d817b9d4.png",
                            "templateKey": "image"
                        },
                        {
                            "commentId": 52,
                            "orderBy": 1,
                            "content": "http://img12.static.yhbimg.com/goodsimg/2016/06/06/05/02e8b4a63c0101b1a1a8f04b53d817b9d5.png",
                            "templateKey": "image"
                        }
                    ],
                    "replyTo": {
                        "headIcon": "https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240",
                        "uid": 8050829,
                        "name": "petch"
                    },
                    "id": 52,
                    "postId": 80,
                    "reply": {
                        "headIcon": "https://img11.static.yhbimg.com/yhb-img01/2016/06/28/11/01f429fffdff555ed0c141a5ec2b4fd421.jpg?imageView2/2/w/640/h/240",
                        "uid": 8050829,
                        "name": "petch"
                    },
                    "status": 0
                }
            ];



        let dataBlob = {
            userInfo: Immutable.fromJS(userInfo).toObject(),
            // notice: Immutable.fromJS(notice).toObject(),
            // section: Immutable.fromJS(section).toObject(),
            posts: Immutable.fromJS(posts).toArray(),
            like: Immutable.fromJS(like).toArray(),
            reply: Immutable.fromJS(reply).toArray(),
        };

        return (
            <View style={styles.container}>
                <User
                    dataBlob={dataBlob}
                    onPressAvatar={this._onPressAvatar}
                    onPressComment={this._onPressComment}
                    onPressLike={this._onPressLike}
                    onPressReply={this._onPressReply}
                    onPressPosts={this._onPressPosts}
                    onPressUserAvatar={this._onPressUserAvatar}
                    onPressBackgroundImg={this._onPressBackgroundImg}
                />
            </View>
        );
    }

}

let {width, height} = Dimensions.get('window');
let navbarHeight = (Platform.OS === 'android') ? 50 : 64;

let styles = StyleSheet.create({
    container: {
        // top: 0,
        height: height,
        backgroundColor: 'transparent'
    },

});

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