// react
import React, { Component, PropTypes } from "react";

// react-native
import { View, Text, Image } from "react-native";

// redux
import { connect } from "react-redux";

import styles from "./styles";

// styles
class Home extends Component {
  static propTypes = {
    athlete: PropTypes.shape({
      firstname: PropTypes.string,
      lastname: PropTypes.lastname
    }).isRequired
  };

  render() {
    const { athlete } = this.props;
    // return (
    //   <View style={styles.home}>
    //     {
    //       athlete !== undefined ?
    //         <text>toto</text> :
    //         null
    //     }
    //   </View>
    // );

    return (
      <View style={styles.home}>
        <Image
          source={{ uri: athlete.profile }}
          style={{ width: 50, height: 50 }}
        />
        {Object.keys(athlete).length > 0
          ? Object.keys(athlete).map((item, key) => (
              <Text key={key}>{athlete[item]}</Text>
            ))
          : null}
      </View>
    );
  }
}

// TODO: return array first item. Add parameter to return given athlete.
const getCurrentAthlete = athletes => {
  if (athletes !== undefined) {
    return Object.values(athletes)[0];
  }
  return { firstname: "", lastname: "", profile: "" };
  // return undefined;
};

const mapStateToProps = state => ({
  athlete: getCurrentAthlete(state.entities.athletes)
});

export default connect(mapStateToProps)(Home);

@@ -445,205 +445,8 @@
 ops;
-%0A    // return (%0A    //   %3CView style=%7Bstyles.home%7D%3E%0A    //     %7B%0A    //       athlete !== undefined ?%0A    //         %3Ctext%3Etoto%3C/text%3E :%0A    //         null%0A    //     %7D%0A    //   %3C/View%3E%0A    // );
 %0A%0A  
@@ -503,26 +503,16 @@
   %3CImage
-%0A         
  source=
@@ -541,60 +541,29 @@
 e %7D%7D
-%0A          style=%7B%7B width: 50, height: 50 %7D%7D%0A       
+ style=%7Bstyles.image%7D
  /%3E%0A
@@ -644,19 +644,12 @@
 map(
-(
 item
-, key)
  =%3E 
@@ -675,19 +675,20 @@
 xt key=%7B
-key
+item
 %7D%3E%7Bathle

update render function