Fix/cleaning (#68)

* feat: progress + hoc withValidEntities

* fix: eslint

* fix: remove what can be

* fix progress circle positioning.

* temporary rollback - android settings!

android/app/build.gradle

@@ -93,10 +93,10 @@ def enableSeparateBuildPerCPUArchitecture = false
 /**
  * Run Proguard to shrink the Java bytecode in release builds.
  */
-def enableProguardInReleaseBuilds = false
-def keystorePropertiesFile = rootProject.file("keystore.properties")
-def keystoreProperties = new Properties()
-keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
+ def enableProguardInReleaseBuilds = false
+ def keystorePropertiesFile = rootProject.file("keystore.properties")
+ def keystoreProperties = new Properties()
+ keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
 
 android {
     compileSdkVersion 23
@@ -113,12 +113,12 @@ android {
         }
     }
     signingConfigs {
-         release {
-             keyAlias keystoreProperties['keyAlias']
-             keyPassword keystoreProperties['keyPassword']
-             storeFile file(keystoreProperties['storeFile'])
-             storePassword keystoreProperties['storePassword']
-         }
+            release {
+                keyAlias keystoreProperties['keyAlias']
+                keyPassword keystoreProperties['keyPassword']
+                storeFile file(keystoreProperties['storeFile'])
+                storePassword keystoreProperties['storePassword']
+            }
     }
     splits {
         abi {
@@ -129,11 +129,11 @@ android {
         }
     }
     buildTypes {
-        release {
-            minifyEnabled enableProguardInReleaseBuilds
-            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
-            signingConfig signingConfigs.release
-        }
+         release {
+             minifyEnabled enableProguardInReleaseBuilds
+             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+             signingConfig signingConfigs.release
+          }
     }
     // applicationVariants are e.g. debug, release
     applicationVariants.all { variant ->

app/components/common/card/styles.js

@@ -4,10 +4,6 @@ import theme from "../../../theme/theme";
 
 export default StyleSheet.create({
   containerCardStyle: {
-    padding: 15,
-    marginTop: 15,
-    marginLeft: 0,
-    marginRight: 0,
     borderWidth: 0
   },
   dividerStyle: {

app/components/layout/scrollableList/ScrollableList.js

@@ -0,0 +1,41 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { ScrollView, View } from "react-native";
+
+import styles from "./styles";
+
+// https://pawelgrzybek.com/return-multiple-elements-from-a-component-with-react-16/
+const Aux = props => props.children;
+
+const Separator = () => <View style={styles.separator} />;
+
+export default class ScrollableList extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    alignItems: PropTypes.oneOf(["center", "top", "full"])
+  };
+
+  static defaultProps = {
+    children: [],
+    alignItems: "top"
+  };
+
+  render() {
+    return (
+      <ScrollView
+        style={styles.container}
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={styles[this.props.alignItems]}
+      >
+        {this.props.children.length > 0
+          ? this.props.children.map((item, index) => (
+              <Aux key={index.toString()}>
+                {item}
+                {this.props.children.length - 1 !== index && <Separator />}
+              </Aux>
+            ))
+          : this.props.children}
+      </ScrollView>
+    );
+  }
+}

app/components/layout/scrollableList/styles.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from "react-native";
+
+export default StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  separator: {
+    height: 10,
+    flex: 1
+  },
+  center: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  top: {},
+  full: {
+    flex: 1,
+    alignItems: "stretch"
+  }
+});

app/components/specific/map/RaceMap.js

@@ -75,15 +75,15 @@ export default class RaceMap extends Component {
           fillColor={theme.PrimaryColor}
           strokeWidth={3}
         />
-        {race.checkPoints.map(marker =>
+        {race.checkPoints.map(marker => (
           <MapView.Marker
             key={marker.title + marker.description}
             coordinate={marker.coordinates}
             title={marker.title}
             description={marker.description}
             pinColor={theme.PrimaryColor}
           />
-        )}
+        ))}
         {race.locations &&
           Object.entries(race.locations).map(([id, location]) => {
             const coordinate = {

app/routes/main/athleteDetails/AthleteDetails.js

@@ -1,14 +1,13 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { ScrollView } from "react-native";
 import { connect } from "react-redux";
 import { compose } from "redux";
 
 import enhanceWithValidEntities from "../../../hocs/enhanceWithValidEntities";
 import selector from "./selector";
-import styles from "./styles";
 import AthleteCard from "../../../components/specific/cards/AthleteCard";
 import AthletePerformancesCard from "../../../components/specific/cards/AthletePerformancesCard";
+import ScrollableList from "../../../components/layout/scrollableList/ScrollableList";
 
 class AthleteDetails extends Component {
   static propTypes = {
@@ -30,13 +29,13 @@ class AthleteDetails extends Component {
   render() {
     const { athlete, performances } = this.props;
     return (
-      <ScrollView style={[styles.scroll]} showsVerticalScrollIndicator={false}>
+      <ScrollableList>
         <AthleteCard athlete={athlete} />
         <AthletePerformancesCard
           rendered={performances.length > 0}
           performances={performances}
         />
-      </ScrollView>
+      </ScrollableList>
     );
   }
 }

app/routes/main/athletePerformanceLevel/AthletePerformanceLevel.js

@@ -1,13 +1,12 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { View } from "react-native";
 import { compose } from "redux";
 
 import enhanceWithValidEntities from "../../../hocs/enhanceWithValidEntities";
 import selector from "./selector";
-import styles from "./styles";
 import Progress from "../../../components/common/progress/Progress";
+import ScrollableList from "../../../components/layout/scrollableList/ScrollableList";
 
 class AthletePerformanceLevel extends Component {
   static propTypes = {
@@ -26,9 +25,9 @@ class AthletePerformanceLevel extends Component {
 
   render() {
     return (
-      <View style={styles.container}>
+      <ScrollableList alignItems="center">
         <Progress progress={this.props.performance.value} />
-      </View>
+      </ScrollableList>
     );
   }
 }

app/routes/main/clubEvents/ClubEvents.js

@@ -1,18 +1,31 @@
+/* eslint-disable react-native/no-color-literals */
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { View } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { connect } from "react-redux";
 import { compose } from "redux";
 
 import enhanceWithValidEntities from "../../../hocs/enhanceWithValidEntities";
 import CountDown from "../../../components/specific/countdown/Countdown";
-import styles from "./styles";
 import selector from "./selector";
 import mapDispatchToProps from "./mapDispatchToProps";
 import Link from "../../../components/typography/link/Link";
 import RaceMap from "../../../components/specific/map/RaceMap";
 import CollapsableDrawer from "../../../components/specific/collapsableDrawer/CollapsableDrawer";
 
+// fix me -> remove
+const styles = StyleSheet.create({
+  bubble: {
+    // todo handle transparency theme
+    backgroundColor: "rgba(255,255,255,0.7)",
+    paddingHorizontal: 18,
+    paddingVertical: 12,
+    position: "absolute",
+    bottom: 20,
+    alignSelf: "center"
+  }
+});
+
 class ClubEvents extends Component {
   static propTypes = {
     race: PropTypes.shape({
@@ -52,17 +65,15 @@ class ClubEvents extends Component {
   render() {
     const { race, clubMembers, shareLocation } = this.props;
 
-    return (
-      <View style={styles.container}>
-        <RaceMap race={race} clubMembers={clubMembers} />
-        <CollapsableDrawer>
-          <CountDown date={race.date} />
-        </CollapsableDrawer>
-        <View style={[styles.buttonContainer, styles.bubble]}>
-          <Link onPress={shareLocation}>Spot me!</Link>
-        </View>
+    return [
+      <RaceMap key="1" race={race} clubMembers={clubMembers} />,
+      <CollapsableDrawer key="2">
+        <CountDown date={race.date} />
+      </CollapsableDrawer>,
+      <View style={styles.bubble} key="3">
+        <Link onPress={shareLocation}>Spot me!</Link>
       </View>
-    );
+    ];
   }
 }
 

app/routes/main/clubEvents/styles.js

@@ -1,15 +0,0 @@
-import { StyleSheet } from "react-native";
-
-export default StyleSheet.create({
-  container: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: "flex-end",
-    alignItems: "center"
-  },
-  bubble: {
-    // todo handle transparency theme
-    backgroundColor: "rgba(255,255,255,0.7)",
-    paddingHorizontal: 18,
-    paddingVertical: 12
-  }
-});

app/routes/main/clubFeed/ClubFeed.js

@@ -1,18 +1,16 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { ScrollView } from "react-native";
 import { compose } from "redux";
 
 import enhanceWithValidEntities from "../../../hocs/enhanceWithValidEntities";
 import selector from "./selector";
-import styles from "./styles";
 import ClubCard from "../../../components/specific/cards/ClubCard";
 import ClubAwardsCard from "../../../components/specific/cards/ClubAwardsCard";
 import ClubMembersCard from "../../../components/specific/cards/ClubMembersCard";
 import ClubActivitiesCard from "../../../components/specific/cards/ClubActivitiesCard";
+import ScrollableList from "../../../components/layout/scrollableList/ScrollableList";
 
-// styles
 class ClubFeed extends Component {
   static propTypes = {
     club: PropTypes.shape({
@@ -42,12 +40,12 @@ class ClubFeed extends Component {
     const { club, clubMembers, activities } = this.props;
 
     return (
-      <ScrollView style={styles.scroll} showsVerticalScrollIndicator={false}>
+      <ScrollableList>
         <ClubCard club={club} />
         <ClubMembersCard clubMembers={clubMembers} />
         <ClubAwardsCard club={club} />
         <ClubActivitiesCard activities={activities} />
-      </ScrollView>
+      </ScrollableList>
     );
   }
 }

app/routes/main/clubFeed/helper.js

@@ -1,15 +1,13 @@
-export const getIconName = (value = "") => {
-  const mapping = {
-    distance: "drive-eta",
-    total_elevation_gain: "landscape",
-    elapsed_time: "timer",
-    max_speed: "motorcycle",
-    achievement_count: "star",
-    elevation: "landscape",
-    duration: "timer",
-    pace: "flash-on",
-    "runs count": "plus-one"
-  };
-
-  return mapping[value] || "error";
+const mapping = {
+  distance: "drive-eta",
+  total_elevation_gain: "landscape",
+  elapsed_time: "timer",
+  max_speed: "motorcycle",
+  achievement_count: "star",
+  elevation: "landscape",
+  duration: "timer",
+  pace: "flash-on",
+  "runs count": "plus-one"
 };
+
+export const getIconName = (value = "") => mapping[value] || "error";