delete address + select status address

App/Containers/ListAddressScreen.js

@@ -10,13 +10,17 @@ import BaseHeader from '../Components/BaseHeader'
 import { Images } from '../Themes'
 import BaseText from '../Components/BaseText'
 import Api from '../Services/Api'
+import Modal from 'react-native-modal';
 import { NavigationEvents } from 'react-navigation'
-
+import ModalBox from 'react-native-modalbox'
+import Icon from 'react-native-vector-icons/Entypo'
 class ListAddressScreen extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      data: []
+      data: [],
+      addressId: 0,
+      other: false
     }
   }
 
@@ -48,9 +52,58 @@ class ListAddressScreen extends Component {
     })
   }
 
+  deleteAddress() {
+    Api.create().deleteAddress(this.state.addressId).then(response => {
+      console.log(JSON.stringify(response.data))
+      if (response.data.status == "success") {
+        this.getAddress()
+      }
+    })
+  }
+
+  changeStatus() {
+    let body = {
+      "address_id": this.state.addressId
+    }
+    Api.create().selectAddress(body).then(response => {
+      console.log(JSON.stringify(response.data))
+      if (response.data.status == "success") {
+        this.getAddress()
+      }
+    })
+  }
+
   render() {
     return (
       <View style={{ flex: 1, backgroundColor: '#4cc9f0' }}>
+        <Modal isVisible={this.state.modalDelete} onBackButtonPress={() => this.setState({ modalDelete: false })} style={{ paddingHorizontal: 10 }}>
+          <View style={{ backgroundColor: 'white', width: '100%' }}>
+            <View style={{ padding: 20, paddingTop: 30, paddingBottom: 30, justifyContent: 'center' }}>
+              <Image source={Images.failed} style={{ width: 80, height: 80, alignSelf: 'center', marginTop: 20 }} />
+              <BaseText type={"bold"} text={'Anda Yakin Ingin Menghapus Alamat Tersebut?'} style={{ fontSize: 16, textAlign: 'center', marginTop: 20 }} />
+              <View style={{ flexDirection: 'row', justifyContent: 'space-around', marginTop: 30 }}>
+                <TouchableOpacity style={{ backgroundColor: '#fff', height: 45, borderRadius: 30, width: '40%', borderColor: '#4cc9f0', borderWidth: 1 }} onPress={() => this.setState({ modalDelete: false })}>
+                  <BaseText type={"regular"} text={'Batal'} style={{ fontSize: 16, textAlign: 'center', marginTop: 10, color: '#4cc9f0' }} />
+                </TouchableOpacity>
+                <TouchableOpacity style={{ backgroundColor: '#4cc9f0', height: 45, borderRadius: 30, width: '40%' }} onPress={() => this.setState({ modalDelete: false }, () => this.deleteAddress())}>
+                  <BaseText type={"regular"} text={'Hapus'} style={{ fontSize: 16, textAlign: 'center', marginTop: 10, color: 'white' }} />
+                </TouchableOpacity>
+              </View>
+            </View>
+          </View>
+        </Modal>
+        <ModalBox
+          backButtonClose={() => this.setState({ other: false })}
+          position="bottom"
+          isOpen={this.state.other}
+          style={{ height: 60 }}
+          coverScreen={true}>
+          <View style={{ flex: 1, backgroundColor: 'white', width: '100%', paddingVertical: 10, paddingHorizontal: 20, justifyContent: 'center' }}>
+            <TouchableOpacity onPress={() => this.setState({ other: false }, () => this.changeStatus())}>
+              <BaseText type={"regular"} text={'Jadikan Alamat Utama'} style={{ fontSize: 16, color: 'black' }} />
+            </TouchableOpacity>
+          </View>
+        </ModalBox>
         <NavigationEvents onDidFocus={() => { this.getAddress() }} />
         <BaseHeader leftText={'Pilih Alamat'} onBackPress={() => this.props.navigation.goBack()} />
         <ScrollView style={[styles.scrollContent]}>
@@ -63,7 +116,12 @@ 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} (${item.type_address})`} style={{ fontSize: 10, color: 'black' }} />
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                  <BaseText type={"bold"} text={`${item.receiver_name} (${item.type_address})`} style={{ fontSize: 10, color: 'black' }} />
+                  <TouchableOpacity onPress={() => item.select_status == 1 ? null : this.setState({ other: true, addressId: item.address_id })}>
+                    <Icon name={'dots-three-vertical'} size={16} />
+                  </TouchableOpacity>
+                </View>
                 <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, height: 20 }}>
@@ -78,7 +136,9 @@ class ListAddressScreen extends Component {
                     <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' }} />
+                    <TouchableOpacity onPress={() => this.setState({ modalDelete: true, addressId: item.address_id })}>
+                      <BaseText type={"bold"} text={'Hapus'} style={{ fontSize: 12, color: '#4cc9f0', textDecorationLine: 'underline' }} />
+                    </TouchableOpacity>
                   </View>
                 </View>
               </View>

App/Services/Api.js

@@ -87,6 +87,8 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
   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)
+  const deleteAddress = (body) => api.post('delete_address/' + body)
+  const selectAddress = (body) => api.post('select_address', body)
 
   // Cart
   const getCart = () => api.get('get_cart')
@@ -160,7 +162,9 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
     getPriceRange,
     addWishlist,
     deleteWishlist,
-    getDealOfTheDay
+    getDealOfTheDay,
+    deleteAddress,
+    selectAddress,
   }
 }
 

package.json

@@ -56,6 +56,7 @@
     "react-native-image-crop-picker": "0.32.0",
     "react-native-maps": "0.27.1",
     "react-native-modal": "^11.5.6",
+    "react-native-modalbox": "^2.0.0",
     "react-native-progress": "^4.1.2",
     "react-native-reanimated": "^1.9.0",
     "react-native-render-html": "^4.2.1",

yarn.lock

@@ -11221,6 +11221,13 @@ react-native-modal@^11.5.6:
     prop-types "^15.6.2"
     react-native-animatable "1.3.3"
 
+react-native-modalbox@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-native-modalbox/-/react-native-modalbox-2.0.0.tgz#ff3cddfb73a740e7669c2d2cc80d03cbd4890731"
+  integrity sha512-j0gJTgSGaP+VbOIWPzrHPVNEEaB/TpuY6+KlEZNtdTDEFGp8BNbsZMTr4NPMkioRgZXUvT8bClqaeD63N/BF0g==
+  dependencies:
+    prop-types "^15.5.10"
+
 react-native-progress@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/react-native-progress/-/react-native-progress-4.1.2.tgz#ffb2264ddfeba409c730e36a9791bb7bbe07a00d"