Merge branch 'deni15' into 'master'

Deni15

See merge request !29

App/Containers/ComplainScreen.js

 import React, { Component } from 'react'
-import { ScrollView, Image, View, Text, TouchableOpacity } from 'react-native'
+import { ScrollView, Image, View, Text, TouchableOpacity, BackHandler } from 'react-native'
 import { connect } from 'react-redux'
 // Add Actions - replace 'Your' with whatever your reducer is called :)
 // import YourActions from '../Redux/YourRedux'
@@ -33,6 +33,19 @@ class ComplainScreen extends Component {
     }
   }
 
+  backAction = () => {
+    this.props.navigation.goBack()
+    return true;
+  };
+
+  componentDidMount() {
+    BackHandler.addEventListener("hardwareBackPress", this.backAction); 
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener("hardwareBackPress", this.backAction);
+  }
+
   handleImagePicker(type) {
     if (type == 'Galeri') {
       ImagePicker.openPicker({
@@ -58,12 +71,15 @@ class ComplainScreen extends Component {
     } else {
       ImagePicker.openCamera({
         width: 480,
-        height: 296,
+        height: 480,
         cropping: true,
         compressImageQuality: 0.7,
-        mediaType: 'photo'
+        mediaType: 'photo',
+        includeBase64: true,
       }).then(image => {
-        // console.log(image)
+        let imageBukti = this.state.imageBukti
+        imageBukti.push(image.data)
+        this.setState({ imageBukti });
       });
     }
   }
@@ -78,7 +94,7 @@ class ComplainScreen extends Component {
             <TouchableOpacity style={{ paddingHorizontal: 20, paddingVertical: 10, borderBottomColor: 'black', borderBottomWidth: .4, }} onPress={() => this.setState({ modalPhoto: false }, () => this.handleImagePicker('Galeri'))}>
               <BaseText type={"regular"} text={'Galeri'} style={{ fontSize: 16, color: 'black' }} />
             </TouchableOpacity>
-            <TouchableOpacity style={{ paddingHorizontal: 20, paddingVertical: 10 }}>
+            <TouchableOpacity style={{ paddingHorizontal: 20, paddingVertical: 10 }} onPress={() => this.setState({ modalPhoto: false }, () => this.handleImagePicker('Camera'))}>
               <BaseText type={"regular"} text={'Kamera'} style={{ fontSize: 16, color: 'black' }} />
             </TouchableOpacity>
           </View>
@@ -105,13 +121,13 @@ class ComplainScreen extends Component {
               searchablePlaceholderTextColor="#4cc9f0"
               defaultValue={this.state.pickComplain}
               containerStyle={{ height: 40 }}
-              style={{ backgroundColor: '#fafafa', elevation: 2, zIndex: 2 }}
+              style={{ backgroundColor: '#fff', elevation: 2, zIndex: 2 }}
               itemStyle={{
                 justifyContent: 'flex-start'
               }}
               labelStyle={{ color: 'grey'}}
               activeLabelStyle={{ color: '#4cc9f0'}}
-              dropDownStyle={{ backgroundColor: '#fafafa', elevation: 2, zIndex: 2, height: 200 }}
+              dropDownStyle={{ backgroundColor: '#fff', elevation: 2, zIndex: 2, height: 200 }}
               onChangeItem={item => this.setState({
                 pickComplain: item.value
               })}

App/Containers/ListAddressScreen.js

@@ -10,6 +10,7 @@ import BaseHeader from '../Components/BaseHeader'
 import { Images } from '../Themes'
 import BaseText from '../Components/BaseText'
 import Api from '../Services/Api'
+import { NavigationEvents } from 'react-navigation'
 
 class ListAddressScreen extends Component {
   constructor(props) {
@@ -35,7 +36,7 @@ class ListAddressScreen extends Component {
 
   getAddress() {
     Api.create().getAddress().then((response) => {
-      console.log('address', JSON.stringify(response.data))
+      // console.log('address', JSON.stringify(response.data))
       if (response.data.status == "success") {
         this.setState({
           data: response.data.data
@@ -50,10 +51,11 @@ class ListAddressScreen extends Component {
   render() {
     return (
       <View style={{ flex: 1, backgroundColor: '#4cc9f0' }}>
+        <NavigationEvents onDidFocus={() => { this.getAddress() }} />
         <BaseHeader leftText={'Pilih Alamat'} onBackPress={() => this.props.navigation.goBack()} />
         <ScrollView style={[styles.scrollContent]}>
           <View style={{ flexDirection: 'row', marginTop: 20 }}>
-            <TouchableOpacity onPress={()=> this.props.navigation.navigate('CreateAddressScreen')}>
+            <TouchableOpacity onPress={() => this.props.navigation.navigate('CreateAddressScreen')}>
               <Image source={Images.add} style={{ height: 24, width: 24 }} />
             </TouchableOpacity>
             <BaseText type={"regular"} text={'Tambah Alamat'} style={{ fontSize: 12, color: 'black', marginLeft: 10, alignSelf: 'center' }} />
@@ -61,19 +63,21 @@ class ListAddressScreen extends Component {
           {this.state.data.map((item, index) => {
             return (
               <View style={{ borderRadius: 4, padding: 10, marginTop: 20, elevation: 4, backgroundColor: 'white', margin: 5 }} key={index}>
-                <BaseText type={"bold"} text={`${item.receiver_name}`} style={{ fontSize: 10, color: 'black' }} />
+                <BaseText type={"bold"} text={`${item.receiver_name} (${item.type_address})`} style={{ fontSize: 10, color: 'black' }} />
                 <BaseText type={"bold"} text={`${item.receiver_phone}`} style={{ fontSize: 10, color: 'black', marginTop: 5 }} />
                 <BaseText type={"regular"} text={`${item.address}, ${item.kelurahan_name}, ${item.kecamatan_name}, ${item.kabupaten_kota_name}, ${item.provinsi_name} ${item.kode_pos}`} style={{ fontSize: 10, color: '#4b4b4b', marginTop: 5 }} />
-                <View style={{ flexDirection: 'row', marginTop: 10 }}>
+                <View style={{ flexDirection: 'row', marginTop: 10, height: 20 }}>
                   <Image source={Images.map} style={{ height: 16, width: 12 }} />
-                  <BaseText type={"regular"} text={'Sudah Pin Point'} style={{ fontSize: 10, color: '#4b4b4b', alignSelf: 'center', marginLeft: 10 }} />
+                  <BaseText type={"regular"} text={item.lat == "" ? "Belum Pin point" : 'Sudah Pin Point'} style={{ fontSize: 10, color: '#4b4b4b', alignSelf: 'center', marginLeft: 10 }} />
                 </View>
                 <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
-                  <View>
+                  {item.select_status == 0 ? <View /> : <View>
                     <BaseText type={"bold"} text={'Alamat Utama'} style={{ fontSize: 12, color: '#4cc9f0', textDecorationLine: 'underline' }} />
-                  </View>
+                  </View>}
                   <View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
-                    <BaseText type={"bold"} text={'Ubah'} style={{ fontSize: 12, color: '#4cc9f0', textDecorationLine: 'underline', marginRight: 35 }} />
+                    <TouchableOpacity style={{ marginRight: 35 }} onPress={() => this.props.navigation.navigate('CreateAddressScreen', { item, type: 'edit' })}>
+                      <BaseText type={"bold"} text={'Ubah'} style={{ fontSize: 12, color: '#4cc9f0', textDecorationLine: 'underline' }} />
+                    </TouchableOpacity>
                     <BaseText type={"bold"} text={'Hapus'} style={{ fontSize: 12, color: '#4cc9f0', textDecorationLine: 'underline' }} />
                   </View>
                 </View>

App/Containers/MapViewScreen.js

 import React, { Component } from 'react'
-import { ScrollView, Text, KeyboardAvoidingView, View } from 'react-native'
+import { ScrollView, Text, TouchableOpacity, View, Platform, PermissionsAndroid, Image, BackHandler } from 'react-native'
 import { connect } from 'react-redux'
-import MapView, { Marker } from 'react-native-maps';
+import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
+import Icon from 'react-native-vector-icons/MaterialIcons'
+import Geolocation from 'react-native-geolocation-service';
+import Geocoder from 'react-native-geocoder';
 // Add Actions - replace 'Your' with whatever your reducer is called :)
 // import YourActions from '../Redux/YourRedux'
 
 // Styles
 import styles from './Styles/MapViewScreenStyle'
 import BaseHeader from '../Components/BaseHeader';
+import { Images } from '../Themes';
+import BaseText from '../Components/BaseText';
 
 class MapViewScreen extends Component {
   constructor(props) {
@@ -19,20 +24,151 @@ class MapViewScreen extends Component {
         latitudeDelta: 0.1,
         longitudeDelta: 0.1
       },
-      long: 24.92009056750823,
-      lat: 67.1012272143364
+      center: "",
+      street: ""
     }
   }
+
+  backAction = () => {
+    this.props.navigation.goBack()
+    return true;
+  };
+
+  componentDidMount() {
+    BackHandler.addEventListener("hardwareBackPress", this.backAction);
+    if (this.props.navigation.state.params.long == "") {
+      if (Platform.OS == 'android') {
+        this._askAccessLocationPermission().then((res) => {
+          if (res == true) this._focusToUserLocation()
+        })
+      } else { this._focusToUserLocation() }
+    } else {
+      this.setState({
+        region: {
+          ...this.state.region,
+          longitude: Number(this.props.navigation.state.params.long),
+          latitude: Number(this.props.navigation.state.params.lat),
+        }
+      })
+    }
+
+
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener("hardwareBackPress", this.backAction);
+  }
+
+
+  async _askAccessLocationPermission() {
+    try {
+      var result = false
+      const resultPermission = await PermissionsAndroid.requestMultiple([
+        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
+        PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION])
+
+      Object.values(resultPermission).forEach(element => {
+        var bool = false
+        element === PermissionsAndroid.RESULTS.GRANTED ? bool = true : bool = false
+        // console.tron.log(bool)
+        result = bool
+      })
+      return result
+    } catch (err) {
+      // console.tron.log(err)
+    }
+  }
+
+  _focusToUserLocation() {
+    Geolocation.getCurrentPosition(
+      (position) => {
+        var region = {
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+          latitudeDelta: 0.1,
+          longitudeDelta: 0.1,
+        }
+        this.setState({ region })
+        console.log('posisi', position)
+      }, (error) => {
+        // console.tron.log(error.code)
+      },
+      { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
+    )
+  }
+
+  getLocation() {
+    console.log('masuk')
+    this.props.navigation.state.params.onSelect({
+      long: this.state.region.longitude,
+      lat: this.state.region.latitude,
+      street: this.state.street
+    })
+    this.backAction()
+  }
+
+  getAddress(){
+    Geocoder.geocodePosition({
+      lng: Number(this.state.region.longitude),
+      lat: Number(this.state.region.latitude)
+    }).then(res => {
+      console.log(JSON.stringify(res))
+      this.setState({ street: res[0].formattedAddress})
+    })
+  }
+
   render() {
     return (
       <View style={{ flex: 1 }}>
         <BaseHeader leftText={'Pilih Lokasi'} onBackPress={() => this.props.navigation.goBack()} />
-        <MapView style={{ flex: 1, }} region={this.state.region}
-          onPress={(e) => this.setState({ long: e.nativeEvent.coordinate.longitude, lat: e.nativeEvent.coordinate.latitude })}>
-            <Marker 
-              coordinate={{ latitude: this.state.lat, longitude: this.state.long}}
-            />
+        <MapView
+          style={{ flex: 1, }}
+          region={this.state.region}
+          provider={PROVIDER_GOOGLE}
+          // showsUserLocation={true}
+          followsUserLocation={true}
+          showsMyLocationButton={false}
+          showsPointsOfInterest={true}
+          showsCompass={true}
+          onRegionChangeComplete={e =>
+            this.setState({ region: e }, ()=> this.getAddress())
+          }
+        // onPress={(e) => this.setState({ long: e.nativeEvent.coordinate.longitude, lat: e.nativeEvent.coordinate.latitude })}
+        >
         </MapView>
+        <View style={{
+          position: 'absolute',
+          top: '39%',
+          width: '100%'
+        }}>
+          <View style={{ backgroundColor: 'white', width: '80%', alignSelf: "center", marginBottom: 10, borderRadius: 5 }}>
+            <View style={{ padding: 10 }}>
+              <BaseText type={"regular"} text={this.state.street} style={{ fontSize: 12, color: 'black', opacity: .7 }} ellipsizeMode={"tail"} numberOfLines={2} />
+            </View>
+            <TouchableOpacity style={{ backgroundColor: '#4cc9f0', width: "100%", paddingVertical: 10, borderBottomLeftRadius: 5, borderBottomRightRadius: 5 }} onPress={() => this.getLocation()}>
+              <BaseText type={"bold"} text={"Tetapkan"} style={{ fontSize: 12, color: 'white', opacity: .7, alignSelf: 'center' }} />
+            </TouchableOpacity>
+          </View>
+          <Image style={{
+            left: '50%', marginLeft: -18, height: 40, width: 29,
+          }} source={Images.map_addpin} />
+        </View>
+
+        <View style={{ position: "absolute", top: 100, paddingRight: 5, flexDirection: 'column', alignSelf: 'flex-end', flex: 1 }}>
+          <TouchableOpacity activeOpacity={.7}
+            style={{
+              backgroundColor: 'white',
+              borderRadius: 30,
+              padding: 10,
+              justifyContent: 'flex-end',
+              elevation: 10,
+              marginHorizontal: 5
+            }}
+            onPress={() => this._focusToUserLocation()}
+          >
+            <Icon name="my-location" size={25} style={{ alignSelf: 'center' }} color={'#0072bc'} />
+          </TouchableOpacity>
+        </View>
       </View>
 
     )

App/Services/Api.js

@@ -81,6 +81,7 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
   const getKelurahan = (body) => api.get('get_kelurahan/' + body)
   const getKodePos = (body) => api.get('get_kode_pos/' + body)
   const addAddress = (body) => api.post('add_address/', body)
+  const editAddress = (body) => api.post('edit_address/', body)
 
   // About App
   const appInfo = () => api.get('app_info')
@@ -126,7 +127,8 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
     getKecamatan,
     getKelurahan,
     getKodePos,
-    addAddress
+    addAddress,
+    editAddress
   }
 }
 

App/Themes/Images.js

@@ -37,6 +37,7 @@ const images = {
   map: require('../Images/Icons/map.png'),
   icon_pesanansaya_gray: require('../Images/Icons/icon_pesanansaya_gray.png'),
   icon_close: require('../Images/Icons/icon_close.png'),
+  map_addpin: require('../Images/Icons/map_addpin.png'),
 
   // big image
   letter: require('../Images/letter.png'),

android/app/build.gradle

@@ -188,6 +188,7 @@ dependencies {
     implementation project(':react-native-i18n')
     implementation project(':react-native-vector-icons')
     implementation project(':react-native-gesture-handler')
+    implementation project(':react-native-geocoder')
     implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
     implementation 'com.android.support:support-annotations:28.0.0'
     implementation "com.facebook.react:react-native:+" // From node_modules
@@ -196,6 +197,7 @@ dependencies {
     implementation "com.facebook.react:react-native:+"  // From node_modules
     implementation 'com.android.support:multidex:1.0.3'
     implementation "com.google.firebase:firebase-analytics:17.2.2"
+    implementation "com.google.android.gms:play-services-location:16.0.0"
     if (enableHermes) {
         def hermesPath = "../../node_modules/hermes-engine/android/";
         debugImplementation files(hermesPath + "hermes-debug.aar")

android/app/src/main/AndroidManifest.xml

@@ -5,6 +5,8 @@
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
     <uses-permission android:name="android.permission.CAMERA"/>
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
     
     <application
       android:name=".MainApplication"

android/build.gradle

@@ -9,6 +9,7 @@ buildscript {
         supportLibVersion = "28.0.0"
         playServicesVersion = "17.0.0"
         androidMapsUtilsVersion = "1.3.1"
+        googlePlayServicesVersion = '16.0.0'
     }
     repositories {
         google()
@@ -33,7 +34,12 @@ allprojects {
             // Android JSC is installed from npm
             url("$rootDir/../node_modules/jsc-android/dist")
         }
-
+        configurations.all {
+            resolutionStrategy {
+                force "com.google.android.gms:play-services-ads:$googlePlayServicesVersion"
+                force "com.google.android.gms:play-services-location:$googlePlayServicesVersion"
+            }
+        }
         google()
         jcenter()
         maven { url 'https://jitpack.io' }

android/settings.gradle

@@ -11,3 +11,5 @@ apply from: file("../node_modules/@react-native-community/cli-platform-android/n
 include ':app'
 include ':react-native-maps'
 project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')
+include ':react-native-geocoder', ':app'
+project(':react-native-geocoder').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-geocoder/android')
\ No newline at end of file

package.json

@@ -49,6 +49,8 @@
     "react-native-countdown-component": "^2.7.1",
     "react-native-device-info": "^1.6.1",
     "react-native-dropdown-picker": "^3.1.11",
+    "react-native-geocoder": "^0.5.0",
+    "react-native-geolocation-service": "^5.0.0",
     "react-native-gesture-handler": "1.3.0",
     "react-native-i18n": "2.0.14",
     "react-native-image-crop-picker": "0.32.0",

yarn.lock

@@ -11164,6 +11164,16 @@ react-native-flipper@^0.34.0:
   resolved "https://registry.yarnpkg.com/react-native-flipper/-/react-native-flipper-0.34.0.tgz#7df1f38ba5d97a9321125fe0fccbe47d99e6fa1d"
   integrity sha512-48wgm29HJTOlZ0DibBsvXueEOY0EPIVL0wWKbwRfgrk86+luSEuLW3aZC50oJa95zSFb9qYShTV/6dWqh4Jamg==
 
+react-native-geocoder@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/react-native-geocoder/-/react-native-geocoder-0.5.0.tgz#ff4b9c55d5768a4784eefccb411761c82e067579"
+  integrity sha1-/0ucVdV2ikeE7vzLQRdhyC4GdXk=
+
+react-native-geolocation-service@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/react-native-geolocation-service/-/react-native-geolocation-service-5.0.0.tgz#eaf0541c99db9cbed5af5e2ad2822d166e3a7543"
+  integrity sha512-y0uTtt/wT78i/7QestJJrZea9ZoYOzCP4fBgGbINWXU4f+OV3D8ndH7+nEOtnDKDhQc6YtJUeV7VqNxRI+hwBQ==
+
 react-native-gesture-handler@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.3.0.tgz#d0386f565928ccc1849537f03f2e37fd5f6ad43f"