idx implementation (#67)

* idx implementation

* code clean up

* minor fix

* fix property checktype

* clean proptypes checking

app/components/specific/cards/AthletePerformancesCard.js

@@ -0,0 +1,42 @@
+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 AthletePerformancesCard extends Component {
+  static propTypes = {
+    rendered: PropTypes.bool,
+    performances: PropTypes.arrayOf(
+      PropTypes.shape({
+        name: PropTypes.string,
+        percent: PropTypes.number,
+        value: PropTypes.number,
+        unit: PropTypes.string
+      })
+    ).isRequired
+  };
+
+  static defaultProps = {
+    rendered: true
+  };
+
+  render() {
+    const { performances } = this.props;
+    if (!this.props.rendered) return false;
+
+    const performancesList = performances.map((performance, index) => ({
+      key: index,
+      image: {
+        name: getIconName(performance.name),
+        color: theme.PrimaryColor
+      },
+      text: `${performance.value}  ${performance.unit !== undefined
+        ? performance.unit
+        : ""}`
+    }));
+
+    return <CardList title="DETAILS" list={performancesList} />;
+  }
+}

app/routes/main/athleteDetails/AthleteDetails.js

@@ -8,30 +8,33 @@ import enhanceWithValidEntities from "../../../hocs/enhanceWithValidEntities";
 import selector from "./selector";
 import styles from "./styles";
 import AthleteCard from "../../../components/specific/cards/AthleteCard";
-import AthleteDetailsCard from "../../../components/specific/cards/AthleteDetailsCard";
+import AthletePerformancesCard from "../../../components/specific/cards/AthletePerformancesCard";
 
 class AthleteDetails extends Component {
   static propTypes = {
     athlete: PropTypes.shape({
       firstname: PropTypes.string,
       lastname: PropTypes.string,
       profil: PropTypes.string
-    }).isRequired
+    }).isRequired,
+    performances: PropTypes.arrayOf(
+      PropTypes.shape({
+        name: PropTypes.string,
+        percent: PropTypes.number,
+        value: PropTypes.number,
+        unit: PropTypes.string
+      })
+    ).isRequired
   };
 
   render() {
-    const { athlete } = this.props;
-    // TODO add idx https://github.com/facebookincubator/idx
+    const { athlete, performances } = this.props;
     return (
       <ScrollView style={[styles.scroll]} showsVerticalScrollIndicator={false}>
         <AthleteCard athlete={athlete} />
-        <AthleteDetailsCard
-          rendered={
-            athlete.performance &&
-            athlete.performance.details &&
-            athlete.performance.details.length > 0
-          }
-          athlete={athlete}
+        <AthletePerformancesCard
+          rendered={performances.length > 0}
+          performances={performances}
         />
       </ScrollView>
     );

app/routes/main/athleteDetails/selector.js

@@ -1,10 +1,18 @@
+import idx from "idx";
+
 import { getCurrentUserID } from "../../../store/state/appState/selectors";
 import { getEntity } from "../../../store/state/entities/selectors";
 
+const getAthletePerformances = props => idx(props, _ => _.performance.details);
+
 const athleteDetailsViewSelector = state => {
   const currentUserID = getCurrentUserID(state);
+  const athlete = getEntity(state, "athletes", currentUserID);
+  const performances = getAthletePerformances(athlete);
+
   return {
-    athlete: getEntity(state, "athletes", currentUserID)
+    athlete,
+    performances
   };
 };
 

app/store/services/activities.js

@@ -3,7 +3,6 @@ import { pick } from "lodash";
 
 import { API_ENDPOINT, RESOURCES, METHODS } from "../constants/rest";
 import { callJSONApi } from "./helpers/api";
-import { msToTime } from "./helpers/moment";
 import { references, referencesWeightings } from "../constants/references";
 
 export const getGivenActivity = (token, activityID) => {
@@ -177,7 +176,9 @@ export const computePerformance = (activities = {}) => {
   });
 
   const paceMeterPerSecond = duration > 0 ? distance / duration : 0;
-  const paceKilometerPerHour = (paceMeterPerSecond * 3.6).toFixed(2);
+  const paceKilometerPerHour = parseFloat(
+    (paceMeterPerSecond * 3.6).toFixed(2)
+  );
 
   const distanceHeuristic =
     distance /
@@ -229,7 +230,7 @@ export const computePerformance = (activities = {}) => {
   performanceDetails.push({
     name: "duration",
     percent: Math.trunc(timeHeuristic * 100 / performance),
-    value: msToTime(duration * 1000)
+    value: duration
   });
   performanceDetails.push({
     name: "pace",

package.json

@@ -29,6 +29,7 @@
   "dependencies": {
     "firebase": "^4.2.0",
     "hoist-non-react-statics": "^2.2.2",
+    "idx": "^2.1.0",
     "lodash": "^4.17.4",
     "normalizr": "^3.2.3",
     "prop-types": "^15.5.10",

yarn.lock

@@ -2980,6 +2980,10 @@ [email protected], iconv-lite@^0.4.17, iconv-lite@~0.4.13:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
 
+idx@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/idx/-/idx-2.1.0.tgz#e0c96663ff1bb2778a362bea988531f13889ffba"
+
 ignore@^3.3.3:
   version "3.3.5"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.5.tgz#c4e715455f6073a8d7e5dae72d2fc9d71663dba6"