Search tiles redirect to country when clicked

RNApp/app/components/Map/Map.js

@@ -139,7 +139,7 @@ class Map extends Component {
                 <Tile key={indic}
                   titleText={this.state.indicatorInfo[indic]['title']}
                   percentage={Number(dataPoint.value.toPrecision(3))}
-                  tileType='country'
+                  tileType='data'
                   imageDir={this.getCountryIcon(this.state.iso3Code)}
                   containsPercentage={true}
                   detailText={dateText}/>
@@ -151,7 +151,7 @@ class Map extends Component {
             tiles.push(
                 <Tile key={indic}
                   titleText={this.state.indicatorInfo[indic]['title']}
-                  tileType='world'
+                  tileType='data'
                   imageDir={this.getCountryIcon(this.state.iso3Code)}
                   figureText={dataPoint.value.toString()}
                   detailText={dateText}/>
@@ -161,8 +161,8 @@ class Map extends Component {
     }
     return (
       <View style={styles.container}>
-      <TopBar title={this.state.title.toUpperCase()} back={this.props.back} />
-      <ScrollView>
+      <TopBar title={this.state.title.toUpperCase()} back={this.props.back} navigator={this.props.navigator}/>
+      <ScrollView >
         <View style={styles.scrollview}>
           <View style={styles.map}>
              <Image style ={styles.mapImg}
@@ -184,6 +184,7 @@ Map.propTypes = {
   country: React.PropTypes.string,
   iso2Code: React.PropTypes.string,
   back: React.PropTypes.bool,
+  navigator: React.PropTypes.object,
 };
 
 export default Map;

RNApp/app/components/Tile/Tile.js

@@ -4,12 +4,20 @@ import LineGraph from './../LineGraph';
 import { tileTypes, tileColors } from './styles';
 import styles from './styles';
 import images from './../../config/images';
+import Routes from '../../config/routes';
 
 const Tile = (props) => {
   const { titleText, figureText, detailText, image, tileType,
-    onPress, containsGraph, data, containsPercentage, percentage } = props;
+         onPress, navigator, containsGraph, data, containsPercentage, percentage } = props;
+
+  var navigate = () => {
+    if (tileType == 'country') {
+      props.navigator.push(Routes.getCountryRoute(props.titleText));
+    }
+  }
+
   return (
-    <TouchableOpacity style={styles.tileWrapper} onPress={onPress}>
+    <TouchableOpacity style={styles.tileWrapper} onPress={navigate}>
       {/* Main tile view */}
       <View style={[styles.tile, containsGraph ? styles.withGraph : styles.noGraph]}>
         <View style={styles.titleTextView}>
@@ -41,6 +49,7 @@ const Tile = (props) => {
               </Text>
             </View>
           </View>
+
         }
         {/* If there is graph data, display the graph */}
         {containsGraph && <LineGraph data={data} />}
@@ -83,6 +92,7 @@ Tile.propTypes = {
   image: React.PropTypes.number,
   tileType: React.PropTypes.string,
   onPress: React.PropTypes.func,
+  navigator: React.PropTypes.object,
   containsGraph: React.PropTypes.bool,
   data: React.PropTypes.array,
   containsPercentage: React.PropTypes.bool,

RNApp/app/components/TopBar/TopBar.js

@@ -1,31 +1,49 @@
 import React from 'react';
-import { Text, TouchableOpacity, View } from 'react-native';
+import { Text, TouchableOpacity, View, Image} from 'react-native';
 import styles from './styles';
+import Routes from '../../config/routes';
+import images from '../../config/images';
 
 const TopBar = (props) => {
+	const onPress = () => {
+		props.navigator.pop();
+	};
+
 	const getBackButton = () => {
 		if (props.back) {
 			return (
-				<TouchableOpacity style={styles.back} />
+				<View>
+				<TouchableOpacity style={styles.back} onPress={onPress} >
+					<Image 
+						style={styles.backArrow}
+						source={images.backArrow}
+					/>
+				</ TouchableOpacity >
+				<View style={[styles.topbarTextWrapper, styles.topbarTextWithBack]}> 
+       		 		<Text style={styles.topbarText}>{props.title}</Text>
+      			</View>
+      			</View>
 			);
 		} else {
-			return;
+			return (
+				<View style={styles.topbarTextWrapper}> 
+       		 		<Text style={styles.topbarText}>{props.title}</Text>
+      			</View>
+			);
 		}
 	};
 
   return (
-   <View style={styles.topbar}>
+   	<View style={styles.topbar}>
       {getBackButton()}
-      <View style={styles.topbarTextWrapper}> 
-        <Text style={styles.topbarText}>{props.title}</Text>
-      </View>
     </View>
-
   );
 };
 
 TopBar.propTypes = {
   title: React.PropTypes.string,
+  back: React.PropTypes.bool,
+  navigator: React.PropTypes.object,
 };
 
 

RNApp/app/components/TopBar/styles.js

@@ -11,23 +11,34 @@ export default StyleSheet.create({
   	height: 50,
   },
   topbarText: {
-	fontSize: 25,
+	  fontSize: 25,
   	fontWeight:'bold',
   	color:'white',
   	textAlign:'center',
   },
+  topbarTextWithBack: {
+    marginLeft: 10,
+  },
   topbarTextWrapper: {
   	flex:0,
   	width:Dimensions.get('window').width,
-  	alignItems:'center'
+  	alignItems:'center',
   },
   back: {
-  	position:'absolute',
-  	backgroundColor: colors.countryArrow,
+    position:'absolute',
+  	backgroundColor: colors.countryMain,
   	alignSelf:'flex-start',
   	width:50,
   	height:50,
+    alignItems: 'center',
+    top: -10,
+    justifyContent:'center',
   },
-
-
+  backArrow: {
+    tintColor: 'white',
+    width:40,
+    height:40,
+    top:0,
+    left:0,
+  }
 });

RNApp/app/config/images.js

@@ -11,6 +11,7 @@ const images = {
   profileHeader: require('../images/header-image.png'),
   avatarPlaceholder: require('../images/avatar-placeholder.png'),
   worldMap: require('../images/world-map.png'),
+  backArrow: require('../images/back.png'),
   countryIcons: {
   	afg: require('../images/country-icons/afg.png'),
 	ago: require('../images/country-icons/ago.png'),

RNApp/app/config/routes.js

@@ -3,6 +3,9 @@ import MapView from '../routes/MapView';
 import Geolocator from '../routes/Geolocator';
 import Search from '../routes/Search';
 import About from '../routes/About';
+import Map from '../components/Map';
+import CountryToId from './countryToId';
+import CountryCodes from './countryCodes';
 
 export const routes = {
    getSearchRoute() {
@@ -44,16 +47,37 @@ export const routes = {
       showNavigationBar: false,
     };
   },
-  getGeolocationRoute() {
+  getGeolocationRoute(countryName) {
     return {
       renderScene(navigator) {
-        return <Geolocator navigator={navigator} />;
+        return <Geolocator navigator={navigator} currentCountry={"Iran"} countryCode={"IR"}/>;
       },
 
       getTitle() {
         return 'Geolocator';
       },
 
+      showNavigationBar: false,
+    };
+  },
+  getCountryRoute(countryName) {
+    countryIso3Code = CountryToId[countryName].toUpperCase();
+    var countryIso2Code = "";
+
+    for (code in CountryCodes) {
+      if (CountryCodes[code] == countryIso3Code) {
+        countryIso2Code = code;
+      }
+    }
+    return {
+      renderScene(navigator) {
+        return <MapView navigator={navigator} country={countryName} iso2Code={countryIso2Code} back={true}/>;
+      },
+
+      getTitle() {
+        return 'Country';
+      },
+
       showNavigationBar: false,
     };
   },

RNApp/app/routes/MapView/MapView.js

@@ -8,14 +8,15 @@ const MapView = (props) => {
   return (
     <View style={styles.container}>
       <Header/>
-      <Map {...props}/>
+      <Map {...props} navigator={props.navigator}/>
     </View>
   );
 };
 
 MapView.propTypes = {
   country: React.PropTypes.string,  
   back: React.PropTypes.bool,
+  navigator: React.PropTypes.object,
 };
 
 export default MapView;

RNApp/app/routes/MapView/MapViewContainer.js

@@ -4,7 +4,7 @@ import Routes from '../../config/routes';
 
 const MapViewContainer = (props) => {
   return (
-    <MapView {...props}/>
+    <MapView {...props} />
   );
 };
 

RNApp/app/routes/Search/Search.js

@@ -9,6 +9,7 @@ import CountryCodes from './../../config/countryCodes';
 import Countries from './../../config/countries';
 import CountryToId from './../../config/countryToId';
 import images from './../../config/images';
+import Routes from '../../config/routes';
 
 
 class Search extends React.Component {
@@ -33,10 +34,10 @@ componentDidMount() {
       for (var countryName in CountryToId){
         var countryCode = CountryToId[countryName];
         i = i + 1;
-        newArr.push(
-          <View key = {i}>
-          <Tile titleText= {countryName} figureText= ' ' detailText= ' ' imageDir = {images.countryIcons[countryCode]} tileType= 'country'/>
-          </View>
+
+        var tile = this.makeTile(countryName, images.countryIcons[countryCode], i);
+
+        newArr.push(tile
         );
       }
       this.setState({allTilesArr: newArr});
@@ -46,10 +47,10 @@ componentDidMount() {
         if (countryName.includes(searchTermVal)) {
             var countryCode = CountryToId[countryName];
             i = i + 1;
-            newArr.push(
-              <View key = {i}>
-              <Tile titleText= {countryName} figureText= ' ' detailText= ' ' imageDir = {images.countryIcons[countryCode]} tileType= 'country'/>
-              </View>
+
+            var tile = this.makeTile(countryName, images.countryIcons[countryCode], i);
+
+            newArr.push(tile
             );
         }
       }
@@ -62,6 +63,12 @@ componentDidMount() {
     this.populateTiles(searchTermVal);
   }
 
+  makeTile(countryName, imageDir, i) {
+    return <View key = {i}>
+            <Tile titleText= {countryName} figureText= ' ' detailText= ' ' imageDir = {imageDir} tileType= 'country' navigator={this.props.navigator}/>
+            </View>
+  }
+
 render() {
   return (
     <View style={styles.container}>
@@ -81,4 +88,6 @@ Search.propTypes = {
   handleSearchTermUpdateHa: React.PropTypes.func,
 };
 
+
+
 export default Search;

RNApp/app/routes/Search/SearchContainer.js

@@ -5,6 +5,7 @@ import Routes from '../../config/routes';
 const SearchContainer = (props) => {
   return (
     <Search
+      navigator = {props.navigator} 
       onDetailsPress={() => props.navigator.push(Routes.getDetailsRoute())}
     />
   );