sv-bootcamp · ochanje210 · Nov 17, 2016 · Nov 16, 2016 · Nov 16, 2016 · Nov 16, 2016
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,13 @@
 {
-  "presets": ["react-native"]
+  "presets": ["react-native"],
+  "plugins": [
+    "transform-object-rest-spread",
+    ["module-resolver", {
+      "root": ["./"],
+      "alias": {
+        "src": "./src",
+        "config": "./config"
+      }
+    }]
+  ]
 }
diff --git a/README.md b/README.md
@@ -1,2 +1,2 @@
-# goober-mobile
+# goober-mobile [![Build Status](https://travis-ci.org/sv-bootcamp/goober-mobile.svg?branch=master)](https://travis-ci.org/sv-bootcamp/goober-mobile)
 Mobile application
diff --git a/__tests__/map-test.js b/__tests__/map-test.js
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -126,6 +126,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-android-location-services-dialog-box')
     compile project(':react-native-facebook-login')
     compile project(':react-native-image-to-base64')
     compile project(':react-native-camera')

diff --git a/android/app/src/main/java/com/goober/MainApplication.java b/android/app/src/main/java/com/goober/MainApplication.java
@@ -5,6 +5,7 @@
 
 import com.airbnb.android.react.maps.MapsPackage;
 import com.facebook.react.ReactApplication;
+import com.showlocationservicesdialogbox.LocationServicesDialogBoxPackage;
 import com.magus.fblogin.FacebookLoginPackage;
 import com.github.xfumihiro.react_native_image_to_base64.ImageToBase64Package;
 import com.lwansbrough.RCTCamera.RCTCameraPackage;
@@ -29,6 +30,7 @@ protected boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new LocationServicesDialogBoxPackage(),
             new FacebookLoginPackage(),
             new ImageToBase64Package(),
             new RCTCameraPackage(),

diff --git a/android/settings.gradle b/android/settings.gradle
@@ -1,6 +1,8 @@
 rootProject.name = 'Goober'
 
 include ':app'
+include ':react-native-android-location-services-dialog-box'
+project(':react-native-android-location-services-dialog-box').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-android-location-services-dialog-box/android')
 include ':react-native-facebook-login'
 project(':react-native-facebook-login').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-facebook-login/android')
 include ':react-native-image-to-base64'

diff --git a/package.json b/package.json
@@ -9,15 +9,20 @@
     "test": "eslint shared/**/*.js && eslint __tests__/**/*.js && jest"
   },
   "jest": {
-    "preset": "jest-react-native"
+    "preset": "jest-react-native",
+    "setupFiles": [
+      "./node_modules/react-native/jestSupport/env.js"
+    ]
   },
   "dependencies": {
     "buffer": "^5.0.0",
     "moment": "^2.15.2",
-    "react": "^15.3.2",
+    "negotiator": "^0.6.1",
+    "react": "~15.3.2",
     "react-addons-shallow-compare": "^15.3.2",
     "react-addons-update": "^15.3.2",
     "react-native": "0.35.0",
+    "react-native-android-location-services-dialog-box": "^1.1.7",
     "react-native-asset-library-to-base64": "^1.0.1",
     "react-native-camera": "git+https://github.com/lwansbrough/react-native-camera.git",
     "react-native-datepicker": "^1.3.2",
@@ -35,6 +40,7 @@
   },
   "devDependencies": {
     "babel-jest": "^15.0.0",
+    "babel-plugin-module-resolver": "^2.3.0",
     "babel-preset-react-native": "^1.9.0",
     "eslint": "^3.6.1",
     "eslint-config-airbnb": "^12.0.0",

diff --git a/shared/components/Card.js b/shared/components/Card.js
@@ -200,11 +200,13 @@ Card.propTypes = {
     endTime: PropTypes.string,
     title: PropTypes.string,
     address: PropTypes.string,
-    imageUrls: PropTypes.array
+    imageUrls: PropTypes.array,
+    key: PropTypes.any
   })),
-  getDetailImage: PropTypes.function,
+  key: PropTypes.string,
+  getDetailImage: PropTypes.func,
   currentScene: PropTypes.string,
-  setCurrentScene: PropTypes.function
+  setCurrentScene: PropTypes.func
 };
 
 export default Card;
diff --git a/shared/components/Create.js b/shared/components/Create.js
@@ -157,6 +157,7 @@ class Create extends Component {
 
     this.state = {
       addingNewLocation: false,
+      addingExistingLocation: false,
       category: {
         colorEvent: 'white',
         colorFacility: 'white',
@@ -179,7 +180,9 @@ class Create extends Component {
       onFocusTitle: false,
       onFocusDateStart: false,
       onFocusDateEnd: false,
-      busyPosting: false
+      busyPosting: false,
+      selectItemKey: '',
+      selectUserKey: ''
     };
 
     this.getAddressData();
@@ -268,7 +271,9 @@ class Create extends Component {
 
   handleAddNewLocation() {
     this.setState({
-      addingNewLocation: true
+      addingNewLocation: true,
+      addingExistingLocation: false,
+      selectItemKey: ''
     });
   }
 
@@ -476,19 +481,22 @@ class Create extends Component {
         </View>
         <Text style={styles.textCaption}> Location </Text>
         <TouchableOpacity
-          style={[styles.btnLocation, {borderColor: (this.state.Done === true) ? '#8e8e8e' : '#e7e7e7'}]}
+          style={[styles.btnLocation, {
+            borderColor: (this.state.Done === true && !this.state.addingExistingLocation) ? '#8e8e8e' : '#e7e7e7'}]}
           onPress={this.handleAddNewLocation.bind(this)}>
           <View style={{flexDirection: 'row', flex: 1}}>
             <View style={{flex: 3, flexDirection: 'column', justifyContent: 'center'}}>
-              <Text style={[styles.textItemAddress, {color: (this.state.Done === true) ? '#2b2b2b' : '#8e8e8e'}]}>
+              <Text style={[styles.textItemAddress, {
+                color: (this.state.Done === true && !this.state.addingExistingLocation) ? '#2b2b2b' : '#8e8e8e'}]}>
                 {this.state.streetNumber} {this.state.streetName}
               </Text>
-              <Text style={[styles.textItemTitle, {color: (this.state.Done === true) ? '#2b2b2b' : '#8e8e8e'}]}>
-                {(this.state.Done === true) ? this.state.inputTextTitle : 'Add New Location'}
+              <Text style={[styles.textItemTitle, {
+                color: (this.state.Done === true && !this.state.addingExistingLocation) ? '#2b2b2b' : '#8e8e8e'}]}>
+                {(this.state.Done === true && !this.state.addingExistingLocation) ? this.state.inputTextTitle : 'Add New Location'}
               </Text>
             </View>
             <View style={{flex: 1, justifyContent: 'center'}}>
-              {(this.state.Done === true) ?
+              {(this.state.Done === true && !this.state.addingExistingLocation) ?
                 <Image source={ImgBtnCheck} style={styles.btnCheck}/> :
                 <Text style={styles.textItemUnit}>0 km</Text>
               }
@@ -513,24 +521,41 @@ class Create extends Component {
     return (R * c).toFixed(2);
   }
 
+  handleDoneOnAddingExistingLocation() {
+    this.handleAddExistingLocation(this.state.key, this.state.userKey, this.state.inputTextCaption, this.state.img);
+  }
+
   // todo: should limit item.title length if it is too long
   renderAroundLocations() {
     return (
       this.props.dataSource.map(item => (
         <TouchableOpacity
-          style={[styles.btnLocation, {borderColor: '#e7e7e7'}]}
+          style={[styles.btnLocation, {borderColor: (this.state.selectItemKey === item.key) ? '#8e8e8e' : '#e7e7e7'}]}
           onPress={() => {
-            this.handleAddExistingLocation(item.key, item.userKey, this.state.inputTextCaption, this.state.img);
+            this.setState({
+              Done: true,
+              addingExistingLocation: true,
+              selectItemKey: item.key,
+              selectUserKey: item.userKey
+            });
           }}>
           <View style={{flexDirection: 'row', flex: 1}}>
             <View style={{flex: 3, flexDirection: 'column', justifyContent: 'center'}}>
-              <Text style={styles.textItemAddress}>{item.address.substring(0, 18)}</Text>
-              <Text style={styles.textItemTitle}>{item.title}</Text>
+              <Text style={[styles.textItemAddress, {
+                color: (this.state.selectItemKey === item.key) ? '#2b2b2b' : '#8e8e8e'
+              }]}>{item.address.substring(0, 18)}</Text>
+              <Text style={[styles.textItemTitle, {
+                color: (this.state.selectItemKey === item.key) ? '#2b2b2b' : '#8e8e8e'
+              }]}>{item.title}</Text>
             </View>
             <View style={{flex: 1, justifyContent: 'center'}}>
-              <Text style={styles.textItemUnit}>
-                {this.getDistanceFromLatLonInKm(item.lat, item.lng)} km
-              </Text>
+              {this.state.selectItemKey === item.key ?
+                <Image source={ImgBtnCheck} style={styles.btnCheck}/>
+                :
+                <Text style={styles.textItemUnit}>
+                  {this.getDistanceFromLatLonInKm(item.lat, item.lng)} km
+                </Text>
+              }
             </View>
           </View>
         </TouchableOpacity>
@@ -661,7 +686,8 @@ class Create extends Component {
           addingNewLocation={this.state.addingNewLocation}
           Done={this.state.Done}
           handleBtnLeft={this.handleBefore.bind(this)}
-          handleBtnRight={this.handleDone.bind(this)}
+          handleBtnRight={(this.state.addingExistingLocation === true) ?
+            this.handleDoneOnAddingExistingLocation.bind(this) : this.handleDone.bind(this)}
           btnRight={
             <Text style={[styles.textDone, {color: (this.state.Done === true) ? '#2c8cff' : '#8e8e8e'}]}> Done </Text>
           }

diff --git a/shared/components/detailHeader.js b/shared/components/detailHeader.js
@@ -94,8 +94,8 @@ export default class DetailHeader extends Component {
 DetailHeader.propTypes = {
   title: PropTypes.string,
   date: PropTypes.string,
-  setCurrentScene: PropTypes.function,
+  setCurrentScene: PropTypes.func,
   lastScene: PropTypes.string,
-  messageUnvisible: PropTypes.function,
-  setModalVisible: PropTypes.function
+  messageUnvisible: PropTypes.func,
+  setModalVisible: PropTypes.func
 };
diff --git a/shared/components/detailView.js b/shared/components/detailView.js
@@ -255,7 +255,6 @@ export default class DetailView extends Component {
   }
 
   render() {
-    console.log(JSON.stringify(this.props));
     let currentLocation = {
       latitude: this.props.lat,
       longitude: this.props.lng,
@@ -286,7 +285,8 @@ export default class DetailView extends Component {
               {this.state.data.map((value, i)=>{
                 if (i === 0) {
                   return (
-                    <View style = {{flexDirection: 'row', flex: 1}}>
+                    <View style = {{flexDirection: 'row', flex: 1}}
+                          key = {i.toString()}>
                       <View style = {{flex: 16}}/>
                       <View style = {{flex: 328}}>
                         <View style = {{flex: 64}}/>
@@ -327,7 +327,8 @@ export default class DetailView extends Component {
                   );
                 }
                 return (
-                  <View style = {{flex: 1}}>
+                  <View style = {{flex: 1}}
+                        key = {i.toString()}>
                     {
                       (this.state.isClicked) ? <View style = {{flex: 68, backgroundColor: 'black'}}/> :
                       <View style = {{flex: 68, flexDirection: 'row'}}>

diff --git a/shared/components/map.js b/shared/components/map.js
@@ -11,6 +11,7 @@ import eventClickPng from '../resources/marker/event_big.png';
 import facilityClickPng from '../resources/marker/facility_big.png';
 import warningClickPng from '../resources/marker/warning_big.png';
 import {API_GEODATA, API_KEY} from '../utils';
+import LocationServicesDialogBox from 'react-native-android-location-services-dialog-box';
 
 const styles = StyleSheet.create({
   container: {
@@ -61,11 +62,24 @@ export default class Map extends Component {
   }
 
   componentWillMount() {
-    this.setCurrentPosition();
-    this.props.getZoomLevel(this.props.currentLocation.latitudeDelta);
-    this.props.getMapItems(this.props.zoomLevel,
-      this.props.currentLocation.latitude,
-      this.props.currentLocation.longitude);
+    LocationServicesDialogBox.checkLocationServicesIsEnabled({
+      message: "<h2>Use Location ?</h2>" +
+      "This app wants to change your device settings:<br/><br/>" +
+      "Use GPS, Wi-Fi, and cell network for location<br/><br/>",
+      ok: 'YES',
+      cancel: 'NO'
+    })
+    .then((success) => {
+      console.log(success);
+      this.setCurrentPosition();
+      this.props.getZoomLevel(this.props.currentLocation.latitudeDelta);
+      this.props.getMapItems(this.props.zoomLevel,
+        this.props.currentLocation.latitude,
+        this.props.currentLocation.longitude);
+    })
+    .catch((error) => {
+      console.log(error.message);
+    });
   }
 
   // todo: this is duplicate from Create.js. refactoring required
@@ -192,6 +206,7 @@ export default class Map extends Component {
         >
           {this.props.items.map(item => (
             <MapView.Marker
+              key={item.key}
               style={{zIndex: (this.state.markerSelect === item.key) ? 10 : 0}}
               coordinate={{latitude: item.lat, longitude: item.lng}}
               anchor={(this.state.markerSelect === item.key) ? {x: 0.5, y: 0.8} : null}
@@ -254,7 +269,8 @@ Map.propTypes = {
   getZoomLevel: PropTypes.func,
   items: PropTypes.arrayOf(PropTypes.shape({
     coordinate: PropTypes.object,
-    description: PropTypes.string
+    description: PropTypes.string,
+    key: PropTypes.string
   })),
   category: PropTypes.arrayOf(PropTypes.string),
   zoomLevel: PropTypes.any,