fix: refacto (#62)

* create basic components

* fix: replace <Text/> by typography components

* fix: move countdown component

* fix typo + android app icon update

* update android application icon

* fea: add Link

* fix: use link

* feat: here are the cards

* feat: maps component + collapsable

* feat: progress + hoc withValidEntities

* feat: progress + hoc withValidEntities

* fix: remove empty useless styles

* update ios icon set.

* rename function parameter

* rename components and directories

* rename selectors

* code clean-up

* move logic to selector

* fix proptypes checking issues

* minor style fix (color)

app/components/common/card/Card.js

@@ -0,0 +1,34 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Card as NativeCard } from "react-native-elements";
+
+import styles from "./styles";
+
+export default class Card extends Component {
+  static propTypes = {
+    title: NativeCard.propTypes.title,
+    children: PropTypes.node,
+    image: NativeCard.propTypes.image
+  };
+
+  static defaultProps = {
+    title: null,
+    list: [],
+    children: null,
+    image: null
+  };
+
+  render() {
+    return (
+      <NativeCard
+        dividerStyle={styles.dividerStyle}
+        containerStyle={styles.containerCardStyle}
+        titleStyle={styles.card}
+        image={this.props.image}
+        title={this.props.title}
+      >
+        {this.props.children}
+      </NativeCard>
+    );
+  }
+}

app/components/common/card/styles.js

@@ -0,0 +1,20 @@
+import { StyleSheet } from "react-native";
+
+import theme from "../../../theme/theme";
+
+export default StyleSheet.create({
+  containerCardStyle: {
+    padding: 15,
+    marginTop: 15,
+    marginLeft: 0,
+    marginRight: 0,
+    borderWidth: 0
+  },
+  dividerStyle: {
+    marginLeft: 0,
+    marginRight: 0
+  },
+  card: {
+    color: theme.PrimaryTextColor
+  }
+});

app/components/cardList/CardList.js → app/components/common/cardList/CardList.js

@@ -1,13 +1,15 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { Card, Icon } from "react-native-elements";
-import { View, Text, Image } from "react-native";
+import { Icon } from "react-native-elements";
+import { View, Image } from "react-native";
 
 import styles from "./styles";
+import Paragraph from "../../typography/paragraph/Paragraph";
+import Card from "../card/Card";
 
 export default class CardList extends Component {
   static propTypes = {
-    title: Card.propTypes.title.isRequired,
+    title: Card.propTypes.title,
     list: PropTypes.arrayOf(
       PropTypes.shape({
         key: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
@@ -25,31 +27,28 @@ export default class CardList extends Component {
   };
 
   static defaultProps = {
-    list: null
+    title: null,
+    list: []
   };
 
   render() {
-    // FIXME may be we should display something anyway
-    if (!this.props.list) return null;
-
     return (
-      <Card
-        dividerStyle={styles.dividerStyle}
-        containerStyle={styles.containerCardStyle}
-        titleStyle={styles.card}
-        title={this.props.title}
-      >
+      <Card title={this.props.title}>
         {this.props.list.map(item =>
           <View key={item.key} style={styles.item}>
             {typeof item.image === "string"
               ? <Image
                   style={styles.image}
                   source={{ uri: item.image.toString() }}
                 />
-              : <Icon color={item.image.color} name={item.image.name} />}
-            <Text style={styles.text}>
+              : <Icon
+                  style={styles.image}
+                  color={item.image.color}
+                  name={item.image.name}
+                />}
+            <Paragraph>
               {item.text}
-            </Text>
+            </Paragraph>
           </View>
         )}
       </Card>

app/components/cardList/styles.js → app/components/common/cardList/styles.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from "react-native";
 
-import theme from "../../theme/theme";
+import theme from "../../../theme/theme";
 
 export default StyleSheet.create({
   containerCardStyle: {
@@ -15,20 +15,16 @@ export default StyleSheet.create({
     marginRight: 0
   },
   card: {
-    color: theme.paperColorText
+    color: theme.PrimaryTextColor
   },
   item: {
     flex: 1,
     flexDirection: "row",
-    alignItems: "flex-start"
+    paddingVertical: 10
   },
   image: {
     width: 20,
-    height: 20
-  },
-  text: {
-    color: theme.paperColorText,
-    marginBottom: 10,
-    marginLeft: 10
+    height: 20,
+    marginRight: 20
   }
 });

app/components/common/progress/Progress.js

@@ -0,0 +1,30 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Circle } from "react-native-progress";
+
+import theme from "../../../theme/theme";
+
+export default class Progress extends Component {
+  static propTypes = {
+    progress: PropTypes.number
+  };
+
+  static defaultProps = {
+    progress: NaN
+  };
+
+  render() {
+    return (
+      <Circle
+        animated
+        progress={this.props.progress || 0}
+        indeterminate={isNaN(this.props.progress)}
+        showsText
+        size={200}
+        color={theme.BackgroundTextColor}
+        borderColor={theme.BackgroundTextColor}
+        unifiledColor="#559988"
+      />
+    );
+  }
+}

app/components/common/readme.md

@@ -0,0 +1,24 @@
+here you will find component reusable in others projects
+
+# Components we may need
+* Paper
+* Alerts
+* Badge
+* Buttons
+* Button group
+* Card
+* Carousel
+* Dropdowns
+* Forms
+** radio
+** checkbox
+** input,
+** combo/picker  
+* Modal
+* Menu
+* Progress
+
+### Common Props to consider
+* mode [primary,secondary,danger,....]
+* size [small, normal, big, ...]
+* elevation [0,1,2, more???..;]

app/components/layout/readme.md

@@ -0,0 +1,9 @@
+here you will find component reusable to positione component 
+
+# Components we may need
+todo
+
+### Common Props to consider
+* mode [primary,secondary,danger,....]
+* size [small, normal, big, ...]
+* elevation [0,1,2, more???..;]

app/components/specific/cards/AthleteCard.js

@@ -0,0 +1,27 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import Paragraph from "../../../components/typography/paragraph/Paragraph";
+import Card from "../../common/card/Card";
+
+export default class AthleteCard extends Component {
+  static propTypes = {
+    athlete: PropTypes.shape({
+      firstname: PropTypes.string,
+      lastname: PropTypes.string,
+      profil: PropTypes.string
+    }).isRequired
+  };
+
+  render() {
+    const { athlete } = this.props;
+    return (
+      <Card title="ATHLETE" image={{ uri: athlete.profile }}>
+        <Paragraph>
+          Anything you need to know about {athlete.firstname} {athlete.lastname}.
+          performance, data, predictions and much more!
+        </Paragraph>
+      </Card>
+    );
+  }
+}

app/components/specific/cards/AthleteDetailsCard.js

@@ -0,0 +1,43 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import CardList from "../../common/cardList/CardList";
+import { getIconName } from "../../../routes/main/clubFeed/helper";
+import theme from "../../../theme/theme";
+
+export default class AthleteDetailsCard extends Component {
+  // ToDO fix shape
+  static propTypes = {
+    rendered: PropTypes.bool,
+    athlete: PropTypes.shape({
+      firstname: PropTypes.string,
+      lastname: PropTypes.string,
+      profil: PropTypes.string
+    }).isRequired
+  };
+
+  static defaultProps = {
+    rendered: true
+  };
+
+  render() {
+    const { athlete } = this.props;
+    if (!this.props.rendered) return false;
+
+    return (
+      <CardList
+        title={"DETAILS"}
+        list={athlete.performance.details.map((detail, index) => ({
+          key: index,
+          image: {
+            name: getIconName(detail.name),
+            color: theme.PrimaryColor
+          },
+          text: `${detail.value}  ${detail.unit !== undefined
+            ? detail.unit
+            : ""}`
+        }))}
+      />
+    );
+  }
+}

app/components/specific/cards/ClubActivitiesCard.js

@@ -0,0 +1,28 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import CardList from "../../common/cardList/CardList";
+
+export default class ClubActivitiesCard extends Component {
+  static propTypes = {
+    activities: PropTypes.arrayOf(
+      PropTypes.shape({
+        type: PropTypes.string
+      })
+    ).isRequired
+  };
+
+  render() {
+    const { activities } = this.props;
+    return (
+      <CardList
+        title={"ACTIVITIES"}
+        list={activities.map((activity, index) => ({
+          key: index,
+          image: activity.athlete.profile,
+          text: activity.name
+        }))}
+      />
+    );
+  }
+}

app/components/specific/cards/ClubAwardsCard.js

@@ -0,0 +1,33 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import CardList from "../../common/cardList/CardList";
+import { getIconName } from "../../../routes/main/clubFeed/helper";
+import theme from "../../../theme/theme";
+
+export default class ClubAwardsCard extends Component {
+  static propTypes = {
+    club: PropTypes.shape({
+      id: PropTypes.number,
+      name: PropTypes.string,
+      city: PropTypes.string,
+      members: PropTypes.array,
+      cover_photo: PropTypes.string,
+      url: PropTypes.string
+    }).isRequired
+  };
+
+  render() {
+    const { club } = this.props;
+    return (
+      <CardList
+        title={"AWARDS"}
+        list={Object.entries(club.ranking).map(([key, value]) => ({
+          key,
+          image: { name: getIconName(key), color: theme.PrimaryColor },
+          text: value.athlete
+        }))}
+      />
+    );
+  }
+}

app/components/specific/cards/ClubCard.js

@@ -0,0 +1,30 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import Paragraph from "../../../components/typography/paragraph/Paragraph";
+import Card from "../../common/card/Card";
+
+export default class ClubCard extends Component {
+  static propTypes = {
+    club: PropTypes.shape({
+      id: PropTypes.number,
+      name: PropTypes.string,
+      city: PropTypes.string,
+      members: PropTypes.array,
+      cover_photo: PropTypes.string,
+      url: PropTypes.string
+    }).isRequired
+  };
+
+  render() {
+    const { club } = this.props;
+    return (
+      <Card title="LYBITOS" image={{ uri: club.cover_photo }}>
+        <Paragraph>
+          Please find below anything related to Lybitos club: leaks, gossips and
+          much more!
+        </Paragraph>
+      </Card>
+    );
+  }
+}