Skip to content

E
eCartPro-Customer
Commit 0b574058 authored by Dida Adams Arizona's avatar Dida Adams Arizona
Browse files
Options

Merge branch 'didam' into 'master' 

push

See merge request !42
parents 68f989c1 3426864e
Hide whitespace changes
Inline Side-by-side
Showing with 205 additions and 45 deletions
App/Containers/AboutAppScreen.js
View file @ 0b574058
...@@ -9,12 +9,14 @@ import HTML from 'react-native-render-html'; ...@@ -9,12 +9,14 @@ import HTML from 'react-native-render-html';
import styles from './Styles/AboutAppScreenStyle' import styles from './Styles/AboutAppScreenStyle'
import BaseHeader from '../Components/BaseHeader'; import BaseHeader from '../Components/BaseHeader';
import Api from '../Services/Api'; import Api from '../Services/Api';
import { BarIndicator } from 'react-native-indicators';
class AboutAppScreen extends Component { class AboutAppScreen extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
data: null data: null,
loading: false
} }
} }
...@@ -34,8 +36,9 @@ class AboutAppScreen extends Component { ...@@ -34,8 +36,9 @@ class AboutAppScreen extends Component {
} }
getView() { getView() {
this.setState({loading: true})
Api.create().aboutUs().then((response) => { Api.create().aboutUs().then((response) => {
this.setState({data: response.data}) this.setState({data: response.data, loading: false})
}) })
} }
...@@ -45,7 +48,10 @@ class AboutAppScreen extends Component { ...@@ -45,7 +48,10 @@ class AboutAppScreen extends Component {
<BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Tentang Kami'}/> <BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Tentang Kami'}/>
{/* <WebView style={{width: '50%', height: '50%'}} source={{ uri: this.state.data }} /> */} {/* <WebView style={{width: '50%', height: '50%'}} source={{ uri: this.state.data }} /> */}
<View style={{borderTopLeftRadius: 32, borderTopRightRadius: 32, backgroundColor: 'white', flex: 1, alignItems: 'center', paddingHorizontal: 25, paddingTop: 20}}> <View style={{borderTopLeftRadius: 32, borderTopRightRadius: 32, backgroundColor: 'white', flex: 1, alignItems: 'center', paddingHorizontal: 25, paddingTop: 20}}>
<HTML html={`${this.state.data}`} imagesMaxWidth={Dimensions.get('window').width} /> {this.state.loading? <View style={{alignSelf: 'center'}}>
<BarIndicator count={5} color='#4cc9f0' size={25}/>
</View> :
<HTML html={`${this.state.data}`} imagesMaxWidth={Dimensions.get('window').width} />}
</View> </View>
</View> </View>
) )
......
App/Containers/AppContactScreen.js
View file @ 0b574058
...@@ -9,12 +9,14 @@ import styles from './Styles/AppContactScreenStyle' ...@@ -9,12 +9,14 @@ import styles from './Styles/AppContactScreenStyle'
import BaseHeader from '../Components/BaseHeader' import BaseHeader from '../Components/BaseHeader'
import HTML from 'react-native-render-html'; import HTML from 'react-native-render-html';
import Api from '../Services/Api' import Api from '../Services/Api'
import { BarIndicator } from 'react-native-indicators'
class AppContactScreen extends Component { class AppContactScreen extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
data: null data: null,
loading: false
} }
} }
...@@ -34,8 +36,9 @@ class AppContactScreen extends Component { ...@@ -34,8 +36,9 @@ class AppContactScreen extends Component {
} }
getView() { getView() {
this.setState({loading: true})
Api.create().contactUs().then((response) => { Api.create().contactUs().then((response) => {
this.setState({data: response.data}) this.setState({data: response.data, loading: false})
}) })
} }
...@@ -45,7 +48,10 @@ class AppContactScreen extends Component { ...@@ -45,7 +48,10 @@ class AppContactScreen extends Component {
<BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Kontak Kami'}/> <BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Kontak Kami'}/>
{/* <WebView style={{width: '50%', height: '50%'}} source={{ uri: this.state.data }} /> */} {/* <WebView style={{width: '50%', height: '50%'}} source={{ uri: this.state.data }} /> */}
<View style={{borderTopLeftRadius: 32, borderTopRightRadius: 32, backgroundColor: 'white', flex: 1, alignItems: 'center', paddingHorizontal: 25, paddingTop: 20}}> <View style={{borderTopLeftRadius: 32, borderTopRightRadius: 32, backgroundColor: 'white', flex: 1, alignItems: 'center', paddingHorizontal: 25, paddingTop: 20}}>
<HTML html={`${this.state.data}`} imagesMaxWidth={Dimensions.get('window').width} /> {this.state.loading? <View style={{alignSelf: 'center'}}>
<BarIndicator count={5} color='#4cc9f0' size={25}/>
</View> :
<HTML html={`${this.state.data}`} imagesMaxWidth={Dimensions.get('window').width} />}
</View> </View>
</View> </View>
) )
......
App/Containers/CartScreen.js
View file @ 0b574058
...@@ -13,9 +13,10 @@ import BaseText from '../Components/BaseText' ...@@ -13,9 +13,10 @@ import BaseText from '../Components/BaseText'
import BaseInput from '../Components/BaseInput'; import BaseInput from '../Components/BaseInput';
import Api from '../Services/Api'; import Api from '../Services/Api';
import BaseButton from '../Components/BaseButton'; import BaseButton from '../Components/BaseButton';
import { formatRp, handlePhone } from '../Lib/Utils'; import { formatRp, handlePhone, titleCase } from '../Lib/Utils';
import Constant from '../Lib/Constant'; import Constant from '../Lib/Constant';
import Toast from 'react-native-toast-message'; import Toast from 'react-native-toast-message';
import { BarIndicator } from 'react-native-indicators';
class CartScreen extends Component { class CartScreen extends Component {
constructor(props) { constructor(props) {
...@@ -27,6 +28,7 @@ class CartScreen extends Component { ...@@ -27,6 +28,7 @@ class CartScreen extends Component {
listCart: [], listCart: [],
arrayDelete: [], arrayDelete: [],
currency: '', currency: '',
loading: false
} }
} }
...@@ -46,6 +48,7 @@ class CartScreen extends Component { ...@@ -46,6 +48,7 @@ class CartScreen extends Component {
} }
getCart() { getCart() {
this.setState({loading: true})
Api.create().getCart().then((response) => { Api.create().getCart().then((response) => {
if (response.data.status == 'success') { if (response.data.status == 'success') {
let dataKosong = [] let dataKosong = []
...@@ -66,10 +69,10 @@ class CartScreen extends Component { ...@@ -66,10 +69,10 @@ class CartScreen extends Component {
}, 500); }, 500);
}) })
setTimeout(() => { setTimeout(() => {
this.setState({listCart: dataKosong}) this.setState({listCart: dataKosong, loading: false})
}, 1000); }, 1000);
} else { } else {
this.setState({listCart: []}) this.setState({listCart: [], loading: false})
// console.log('inikah', response.data) // console.log('inikah', response.data)
} }
...@@ -101,7 +104,6 @@ class CartScreen extends Component { ...@@ -101,7 +104,6 @@ class CartScreen extends Component {
let listCartCopy = Object.assign([] , this.state.listCart) let listCartCopy = Object.assign([] , this.state.listCart)
listCartCopy[indexId].size_id = value listCartCopy[indexId].size_id = value
let payload = { let payload = {
"cart_id": item.cart_id, "cart_id": item.cart_id,
"product_id": item.product_id, "product_id": item.product_id,
...@@ -202,13 +204,19 @@ class CartScreen extends Component { ...@@ -202,13 +204,19 @@ class CartScreen extends Component {
return ( return (
<View style={{flex: 1, backgroundColor: '#4cc9f0'}}> <View style={{flex: 1, backgroundColor: '#4cc9f0'}}>
<BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Keranjang'} /> <BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Keranjang'} />
{this.state.loading? <View style={{flex: 1, backgroundColor: 'white', borderTopLeftRadius: 32, borderTopRightRadius: 32}}>
<BarIndicator count={5} color='#4cc9f0' size={25}/>
</View> :
<ScrollView showsVerticalScrollIndicator={false} style={[styles.scrollContent, {zIndex: 1}]}> <ScrollView showsVerticalScrollIndicator={false} style={[styles.scrollContent, {zIndex: 1}]}>
{this.state.listCart.map((item,index) => { {this.state.listCart.map((item,index) => {
return ( return (
<View key={index}> <View key={index}>
<View style={{flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 20, paddingHorizontal: 25}}> <View style={{flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 20, paddingHorizontal: 20}}>
<View style={{alignItems:'center', justifyContent: 'center',}}> <View style={{flexDirection: 'row' , alignItems:'center'}}>
<Image source={Images.icon_pesanansaya_gray} style={{width: 25, height: 30, resizeMode:'stretch'}}/> <TouchableOpacity onPress={() => alert('asdsa')}>
<Image source={Images.radioOff} style={{width: 15, height: 15, tintColor: 'gray'}}/>
</TouchableOpacity>
<Image source={Images.icon_pesanansaya_gray} style={{width: 25, height: 30, resizeMode:'stretch', marginLeft: 10}}/>
</View> </View>
<View style={{paddingLeft: 10, flexGrow: 1}}> <View style={{paddingLeft: 10, flexGrow: 1}}>
<BaseText text={"Paket 1"} type={"bold"}/> <BaseText text={"Paket 1"} type={"bold"}/>
...@@ -220,13 +228,13 @@ class CartScreen extends Component { ...@@ -220,13 +228,13 @@ class CartScreen extends Component {
</View> </View>
<View style={{padding: 20, borderTopColor: '#ececec', borderTopWidth: 1}}> <View style={{padding: 20, borderTopColor: '#ececec', borderTopWidth: 1}}>
<View style={{flexDirection:'row'}}> <View style={{flexDirection:'row'}}>
<View style={{width: '20%'}}> <View style={{width: '25%', alignItems:'center', justifyContent: 'center'}}>
<Image source={{uri: item.product_image}} style={{width: 75, height: 75, resizeMode: 'cover', borderRadius: 10}}/> <Image source={{uri: item.product_image}} style={{width: 75, height: 75, resizeMode: 'cover', borderRadius: 10}}/>
</View> </View>
<View style={{marginLeft: 15, flexDirection: 'column', justifyContent: 'space-between', flexGrow: 1, width: '70%'}}> <View style={{marginLeft: 5, flexDirection: 'column', justifyContent: 'space-between', flexGrow: 1, width: '70%'}}>
<View style={{flexDirection: 'row', justifyContent: 'space-between', }}> <View style={{flexDirection: 'row', justifyContent: 'space-between', marginLeft: 5 }}>
<View style={{width: '60%'}}> <View style={{width: '60%'}}>
<BaseText text={item.product_name} type={"bold"} style={{opacity: .6}}/> <BaseText text={titleCase(item.product_name)} type={"bold"} style={{opacity: .6}}/>
</View> </View>
<View style={{alignItems: 'flex-end', width: '40%', flexGrow: 1}}> <View style={{alignItems: 'flex-end', width: '40%', flexGrow: 1}}>
<BaseText text={String(formatRp(this.state.currency, item.total_price))} type={"bold"} style={{opacity: .8, color: '#4cc9f0'}}/> <BaseText text={String(formatRp(this.state.currency, item.total_price))} type={"bold"} style={{opacity: .8, color: '#4cc9f0'}}/>
...@@ -286,7 +294,7 @@ class CartScreen extends Component { ...@@ -286,7 +294,7 @@ class CartScreen extends Component {
</View> </View>
) )
})} })}
</ScrollView> </ScrollView>}
<View style={{padding: 20, alignSelf:'flex-end', justifyContent: 'flex-end', backgroundColor: 'white', elevation: 5, width: '100%', borderTopWidth: 1, borderTopColor: '#d8d8d8'}}> <View style={{padding: 20, alignSelf:'flex-end', justifyContent: 'flex-end', backgroundColor: 'white', elevation: 5, width: '100%', borderTopWidth: 1, borderTopColor: '#d8d8d8'}}>
<View style={{flexDirection:'row', justifyContent: 'space-between', alignItems:'center'}}> <View style={{flexDirection:'row', justifyContent: 'space-between', alignItems:'center'}}>
<View style={{width: '60%'}}> <View style={{width: '60%'}}>
...@@ -294,7 +302,7 @@ class CartScreen extends Component { ...@@ -294,7 +302,7 @@ class CartScreen extends Component {
<BaseText text={this.getTotalCart()} type={"bold"} style={{opacity: .8, color: '#4cc9f0'}}/> <BaseText text={this.getTotalCart()} type={"bold"} style={{opacity: .8, color: '#4cc9f0'}}/>
</View> </View>
<View style={{width: '40%'}}> <View style={{width: '40%'}}>
<BaseButton text={'Checkout'} onPress={() => null} fontSizeText={14}/> <BaseButton text={'Checkout'} onPress={() => this.props.navigation.navigate('CheckOutScreen')} fontSizeText={14}/>
</View> </View>
</View> </View>
</View> </View>
......
App/Containers/CheckOutScreen.js
View file @ 0b574058
import React, { Component } from 'react' import React, { Component } from 'react'
import { ScrollView, Text, KeyboardAvoidingView } from 'react-native' import { ScrollView, Text, KeyboardAvoidingView, View, TouchableOpacity, Image } from 'react-native'
import { connect } from 'react-redux' import { connect } from 'react-redux'
// Add Actions - replace 'Your' with whatever your reducer is called :) // Add Actions - replace 'Your' with whatever your reducer is called :)
// import YourActions from '../Redux/YourRedux' // import YourActions from '../Redux/YourRedux'
// Styles // Styles
import styles from './Styles/CheckOutScreenStyle' import styles from './Styles/CheckOutScreenStyle'
import { BarIndicator } from 'react-native-indicators'
import BaseHeader from '../Components/BaseHeader'
import { Images } from '../Themes'
import BaseText from '../Components/BaseText'
import { titleCase, formatRp } from '../Lib/Utils'
import FontAwesome from 'react-native-vector-icons/FontAwesome'
class CheckOutScreen extends Component { class CheckOutScreen extends Component {
constructor(props) {
super(props)
this.state = {
loading: false
}
}
render () { render () {
return ( return (
<ScrollView style={styles.container}> <View style={{flex: 1, backgroundColor: '#4cc9f0'}}>
<KeyboardAvoidingView behavior='position'> <BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Atur Pesanan'} />
<Text>CheckOutScreen</Text> {this.state.loading? <View style={{flex: 1, backgroundColor: 'white', borderTopLeftRadius: 32, borderTopRightRadius: 32}}>
</KeyboardAvoidingView> <BarIndicator count={5} color='#4cc9f0' size={25}/>
</ScrollView> </View> :
<ScrollView showsVerticalScrollIndicator={false} style={[styles.scrollContent, {zIndex: 1}]}>
<View style={{flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 20, paddingHorizontal: 20}}>
<View style={{alignItems:'center', justifyContent: 'center',}}>
<Image source={Images.mapgray} style={{width: 25, height: 30, resizeMode:'stretch', marginLeft: 10}}/>
</View>
<View style={{paddingLeft: 10, flexGrow: 1, justifyContent: 'center',}}>
<BaseText text={"Alamat Pengiriman"} type={"bold"}/>
</View>
</View>
<View>
<View style={{flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 20, paddingHorizontal: 20}}>
<View style={{alignItems:'center', justifyContent: 'center',}}>
<Image source={Images.icon_pesanansaya_gray} style={{width: 25, height: 30, resizeMode:'stretch', marginLeft: 10}}/>
</View>
<View style={{paddingLeft: 10, flexGrow: 1}}>
<BaseText text={"Paket 1"} type={"bold"}/>
<BaseText text={"Dijual oleh e-CartPro"} type={"regular"} style={{opacity: .8}}/>
</View>
</View>
<View style={{padding: 20, borderTopColor: '#ececec', borderTopWidth: 1, backgroundColor: '#f5f5f5'}}>
<View style={{flexDirection:'row'}}>
<View style={{width: '25%', alignItems:'center', justifyContent: 'center'}}>
<Image source={Images.jaket} style={{width: 75, height: 75, resizeMode: 'cover', borderRadius: 10}}/>
</View>
<View style={{marginLeft: 5, flexDirection: 'column', justifyContent: 'space-between', flexGrow: 1, width: '70%'}}>
<View style={{flexDirection: 'row', justifyContent: 'space-between', marginLeft: 5 }}>
<View style={{width: '60%'}}>
<BaseText text={titleCase('Iniiiii')} type={"bold"} style={{opacity: .6}}/>
</View>
<View style={{alignItems: 'flex-end', width: '40%', flexGrow: 1}}>
<BaseText text={"x1"} type={"bold"} style={{opacity: .5, fontSize: 12, color: 'gray'}}/>
</View>
</View>
<View>
<BaseText text={String(formatRp('Rp', 200000))} type={"bold"} style={{opacity: .5, color: 'gray'}}/>
</View>
</View>
</View>
</View>
<View>
<View style={{flexDirection: 'row', justifyContent: 'space-between', padding: 20}}>
<BaseText type={'regular'} text={'Opsi Pengiriman'}/>
<FontAwesome name={'angle-right'} size={25}/>
</View>
<View style={{padding: 20, borderTopColor: '#ececec', borderTopWidth: 1}}>
<View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',}}>
<BaseText text={'Reguler'} type={'regular'}/>
<BaseText text={'Akan diterima pada tanggal 27 Mei - 30 Mei 2020'} type={'italic'} style={{fontSize: 10}}/>
</View>
</View>
</View>
</View>
</ScrollView>}
</View>
) )
} }
} }
......
App/Containers/DetailProductScreen.js
View file @ 0b574058
...@@ -17,6 +17,17 @@ import { formatRp, titleCase } from '../Lib/Utils'; ...@@ -17,6 +17,17 @@ import { formatRp, titleCase } from '../Lib/Utils';
import BaseButton from '../Components/BaseButton'; import BaseButton from '../Components/BaseButton';
import Modal from 'react-native-modal'; import Modal from 'react-native-modal';
import Toast from 'react-native-toast-message'; import Toast from 'react-native-toast-message';
import {
BallIndicator,
BarIndicator,
DotIndicator,
MaterialIndicator,
PacmanIndicator,
PulseIndicator,
SkypeIndicator,
UIActivityIndicator,
WaveIndicator,
} from 'react-native-indicators';
class DetailProductScreen extends Component { class DetailProductScreen extends Component {
constructor(props) { constructor(props) {
...@@ -32,12 +43,13 @@ class DetailProductScreen extends Component { ...@@ -32,12 +43,13 @@ class DetailProductScreen extends Component {
opacity: 0, opacity: 0,
typeCart: '', typeCart: '',
varientModal: false, varientModal: false,
loading: false,
auth: this.props.auth auth: this.props.auth
} }
} }
componentDidMount() { componentDidMount() {
console.log(this.state.productId) // console.log(this.state.productId)
this.getCurrency() this.getCurrency()
this.getProductDetail() this.getProductDetail()
BackHandler.addEventListener("hardwareBackPress", this.backAction); BackHandler.addEventListener("hardwareBackPress", this.backAction);
...@@ -48,10 +60,11 @@ class DetailProductScreen extends Component { ...@@ -48,10 +60,11 @@ class DetailProductScreen extends Component {
} }
getProductDetail() { getProductDetail() {
let payload = {"user_id": this.props.auth != null? this.props.auth.user.data.user_id : 0} this.setState({loading: true})
let payload = {"user_id": this.props.auth.user != null? this.props.auth.user.data.user_id : 0}
Api.create().getProductDetail(this.state.productId, payload).then((response) => { Api.create().getProductDetail(this.state.productId, payload).then((response) => {
if (response.data.status == 'success') { if (response.data.status == 'success') {
this.setState({dataProduct: response.data.data, varient: response.data.data.varient}) this.setState({dataProduct: response.data.data, varient: response.data.data.varient, loading: false})
} }
}) })
} }
...@@ -182,6 +195,9 @@ class DetailProductScreen extends Component { ...@@ -182,6 +195,9 @@ class DetailProductScreen extends Component {
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={{flex: 1}}> <View style={{flex: 1}}>
{this.state.loading? <View style={{alignSelf: 'center'}}>
<BarIndicator count={5} color='#4cc9f0' size={25}/>
</View> :
<ScrollView style={{backgroundColor:'white'}} onScroll={this.handleScroll} showsVerticalScrollIndicator={false}> <ScrollView style={{backgroundColor:'white'}} onScroll={this.handleScroll} showsVerticalScrollIndicator={false}>
<View style={{height: 450, width: '100%', backgroundColor:'white'}}> <View style={{height: 450, width: '100%', backgroundColor:'white'}}>
<Carousel <Carousel
...@@ -243,7 +259,7 @@ class DetailProductScreen extends Component { ...@@ -243,7 +259,7 @@ class DetailProductScreen extends Component {
</View> </View>
<View style={{width: '100%', backgroundColor:'white', marginTop: -25, borderTopLeftRadius: 32, borderTopRightRadius: 32, paddingTop: 20, paddingBottom: 40, paddingHorizontal: 25}}> <View style={{width: '100%', backgroundColor:'white', marginTop: -25, borderTopLeftRadius: 32, borderTopRightRadius: 32, paddingTop: 20, paddingBottom: 40, paddingHorizontal: 25}}>
</View> </View>
</ScrollView> </ScrollView>}
<View style={{padding: 20, alignSelf:'flex-end', justifyContent: 'flex-end', backgroundColor: 'white', elevation: 5, width: '100%', borderTopWidth: .5, borderTopColor: '#d8d8d8'}}> <View style={{padding: 20, alignSelf:'flex-end', justifyContent: 'flex-end', backgroundColor: 'white', elevation: 5, width: '100%', borderTopWidth: .5, borderTopColor: '#d8d8d8'}}>
<View style={{flexDirection: 'row', justifyContent: 'space-between',}}> <View style={{flexDirection: 'row', justifyContent: 'space-between',}}>
<TouchableOpacity style={{width: '10%', alignItems:'center'}}> <TouchableOpacity style={{width: '10%', alignItems:'center'}}>
......
App/Containers/HomePageScreen.js
View file @ 0b574058
...@@ -32,7 +32,8 @@ class HomePageScreen extends Component { ...@@ -32,7 +32,8 @@ class HomePageScreen extends Component {
bannerDummy: [Images.jam, Images.sepatu, Images.jaket, Images.celana], bannerDummy: [Images.jam, Images.sepatu, Images.jaket, Images.celana],
open: false, open: false,
authView: false, authView: false,
user: this.props.user user: this.props.user,
cartLength: 0
} }
} }
...@@ -162,6 +163,7 @@ class HomePageScreen extends Component { ...@@ -162,6 +163,7 @@ class HomePageScreen extends Component {
}; };
componentDidMount() { componentDidMount() {
this.getCart()
this.getAppInfo() this.getAppInfo()
if (this.state.user == null) { if (this.state.user == null) {
this.setState({authView: true}) this.setState({authView: true})
...@@ -180,6 +182,15 @@ class HomePageScreen extends Component { ...@@ -180,6 +182,15 @@ class HomePageScreen extends Component {
}) })
} }
getCart() {
Api.create().getCart().then((response) => {
if (response.data.status == 'success') {
let cart = response.data.data
this.setState({cartLength: cart.length})
}
})
}
render() { render() {
return ( return (
<View style={{flex: 1, backgroundColor: 'red'}}> <View style={{flex: 1, backgroundColor: 'red'}}>
...@@ -208,7 +219,12 @@ class HomePageScreen extends Component { ...@@ -208,7 +219,12 @@ class HomePageScreen extends Component {
</TouchableOpacity> </TouchableOpacity>
<View style={{width: '15%'}}> <View style={{width: '15%'}}>
<TouchableOpacity onPress={() => this.state.user == null? this.handleLogin() : this.props.navigation.navigate('CartScreen')}> <TouchableOpacity onPress={() => this.state.user == null? this.handleLogin() : this.props.navigation.navigate('CartScreen')}>
<Image source={Images.icon_chart} style={{width: 25, height: 20, marginLeft: 20, tintColor: this.state.opacity >= .5? '#e3e3e3' : '#FFF'}}/> <View style={{flexDirection:'row', marginLeft: 20}}>
<Image source={Images.icon_chart} style={{width: 25, height: 20, tintColor: this.state.opacity >= .5? '#e3e3e3' : '#FFF'}}/>
{this.state.cartLength > 0 && <View style={{height: 15, width: 15, borderRadius: 15, backgroundColor: 'red', alignItems:'center', justifyContent: 'center', marginTop: -10, marginLeft: -5}}>
<BaseText text={this.state.cartLength} style={{fontSize: 10, color: 'white'}}/>
</View>}
</View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
......
App/Containers/ListSearchScreen.js
View file @ 0b574058
...@@ -13,6 +13,7 @@ import Api from '../Services/Api' ...@@ -13,6 +13,7 @@ import Api from '../Services/Api'
import { formatRp, titleCase } from '../Lib/Utils' import { formatRp, titleCase } from '../Lib/Utils'
import Constant from '../Lib/Constant' import Constant from '../Lib/Constant'
import Modal from 'react-native-modal'; import Modal from 'react-native-modal';
import { BarIndicator } from 'react-native-indicators'
class ListSearchScreen extends Component { class ListSearchScreen extends Component {
constructor(props) { constructor(props) {
...@@ -36,7 +37,8 @@ class ListSearchScreen extends Component { ...@@ -36,7 +37,8 @@ class ListSearchScreen extends Component {
search: '', search: '',
urutan: '', urutan: '',
sorting: false, sorting: false,
category: false category: false,
loading: false
} }
} }
...@@ -54,7 +56,8 @@ class ListSearchScreen extends Component { ...@@ -54,7 +56,8 @@ class ListSearchScreen extends Component {
BackHandler.addEventListener("hardwareBackPress", this.backAction); BackHandler.addEventListener("hardwareBackPress", this.backAction);
} }
getAllProduct() { getAllProduct(type) {
if (type != 'scroll') this.setState({loading: true})
let payload = { let payload = {
"offset": this.state.offset, "offset": this.state.offset,
"limit": 10, "limit": 10,
...@@ -68,7 +71,9 @@ class ListSearchScreen extends Component { ...@@ -68,7 +71,9 @@ class ListSearchScreen extends Component {
console.log(payload) console.log(payload)
// console.log(response.data) // console.log(response.data)
if (response.data.status == 'success') { if (response.data.status == 'success') {
this.setState({ listData: this.state.listData.concat(response.data.data) }) this.setState({ listData: this.state.listData.concat(response.data.data), loading: false })
} else {
this.setState({ loading: false })
} }
}) })
} }
...@@ -142,6 +147,7 @@ class ListSearchScreen extends Component { ...@@ -142,6 +147,7 @@ class ListSearchScreen extends Component {
// }} // }}
value={this.state.search} onChangeText={(search) => this.setState({ search }, () => this.getAllProduct())} placeholder={'Cari Product'} value={this.state.search} onChangeText={(search) => this.setState({ search }, () => this.getAllProduct())} placeholder={'Cari Product'}
typeSearch={true} onBackPress={() => this.props.navigation.goBack()} /> typeSearch={true} onBackPress={() => this.props.navigation.goBack()} />
<Modal <Modal
animationOut='slideOutDown' animationOut='slideOutDown'
// animationOutTiming={1000} // animationOutTiming={1000}
...@@ -204,12 +210,15 @@ class ListSearchScreen extends Component { ...@@ -204,12 +210,15 @@ class ListSearchScreen extends Component {
</View> </View>
{!this.state.thumbnail && ( {!this.state.thumbnail && (
<View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%', paddingHorizontal: 10 }}> <View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%', paddingHorizontal: 10 }}>
{this.state.loading? <View style={{alignSelf: 'center'}}>
<BarIndicator count={5} color='#4cc9f0' size={25}/>
</View> :
<FlatList <FlatList
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
data={this.state.listData} data={this.state.listData}
onScroll={({ nativeEvent }) => { onScroll={({ nativeEvent }) => {
if (this.isCloseToBottom(nativeEvent)) { if (this.isCloseToBottom(nativeEvent)) {
this.setState({ offset: this.state.offset + 10 }, () => this.getAllProduct()) this.setState({ offset: this.state.offset + 10 }, () => this.getAllProduct('scroll'))
} }
}} }}
renderItem={({ item, index }) => ( renderItem={({ item, index }) => (
...@@ -227,17 +236,19 @@ class ListSearchScreen extends Component { ...@@ -227,17 +236,19 @@ class ListSearchScreen extends Component {
)} )}
numColumns={2} numColumns={2}
keyExtractor={(item, index) => index.toString()} keyExtractor={(item, index) => index.toString()}
/> />}
</View> </View>
)} )}
{this.state.thumbnail && ( {this.state.thumbnail && (
<View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%', paddingHorizontal: 20 }}> <View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%', paddingHorizontal: 20 }}>
<FlatList {this.state.loading? <View style={{alignSelf: 'center'}}>
<BarIndicator count={5} color='#4cc9f0' size={25}/>
</View> :<FlatList
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
data={this.state.listData} data={this.state.listData}
onScroll={({ nativeEvent }) => { onScroll={({ nativeEvent }) => {
if (this.isCloseToBottom(nativeEvent)) { if (this.isCloseToBottom(nativeEvent)) {
this.setState({ offset: this.state.offset + 10 }, () => this.getAllProduct()) this.setState({ offset: this.state.offset + 10 }, () => this.getAllProduct('scroll'))
} }
}} }}
renderItem={({ item, index }) => ( renderItem={({ item, index }) => (
...@@ -257,7 +268,7 @@ class ListSearchScreen extends Component { ...@@ -257,7 +268,7 @@ class ListSearchScreen extends Component {
)} )}
numColumns={1} numColumns={1}
keyExtractor={(item, index) => index.toString()} keyExtractor={(item, index) => index.toString()}
/> />}
</View> </View>
)} )}
......
App/Containers/Styles/CheckOutScreenStyle.js
View file @ 0b574058
...@@ -2,5 +2,13 @@ import { StyleSheet } from 'react-native' ...@@ -2,5 +2,13 @@ import { StyleSheet } from 'react-native'
import { ApplicationStyles } from '../../Themes/' import { ApplicationStyles } from '../../Themes/'
export default StyleSheet.create({ export default StyleSheet.create({
...ApplicationStyles.screen ...ApplicationStyles.screen,
scrollContent: {
flex: 1,
backgroundColor: 'white',
borderTopLeftRadius: 32,
borderTopRightRadius: 32,
// paddingHorizontal: 25,
// paddingTop: 50,
},
}) })
App/Containers/TermsConditionScreen.js
View file @ 0b574058
...@@ -10,6 +10,7 @@ import styles from './Styles/TermsConditionScreenStyle' ...@@ -10,6 +10,7 @@ import styles from './Styles/TermsConditionScreenStyle'
import WebView from 'react-native-webview' import WebView from 'react-native-webview'
import Api from '../Services/Api' import Api from '../Services/Api'
import BaseHeader from '../Components/BaseHeader'; import BaseHeader from '../Components/BaseHeader';
import { BarIndicator } from 'react-native-indicators';
const htmlContent = ` const htmlContent = `
<h1>This HTML snippet is now rendered with native components !</h1> <h1>This HTML snippet is now rendered with native components !</h1>
...@@ -22,7 +23,8 @@ class TermsConditionScreen extends Component { ...@@ -22,7 +23,8 @@ class TermsConditionScreen extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
data: null data: null,
loading: false
} }
} }
...@@ -42,8 +44,9 @@ class TermsConditionScreen extends Component { ...@@ -42,8 +44,9 @@ class TermsConditionScreen extends Component {
} }
getView() { getView() {
this.setState({loading: true})
Api.create().termsCondition().then((response) => { Api.create().termsCondition().then((response) => {
this.setState({data: response.data}) this.setState({data: response.data, loading: false})
}) })
} }
...@@ -53,7 +56,10 @@ class TermsConditionScreen extends Component { ...@@ -53,7 +56,10 @@ class TermsConditionScreen extends Component {
<BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Ketentuan dan Privasi'}/> <BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Ketentuan dan Privasi'}/>
{/* <WebView style={{width: '50%', height: '50%'}} source={{ uri: this.state.data }} /> */} {/* <WebView style={{width: '50%', height: '50%'}} source={{ uri: this.state.data }} /> */}
<View style={{borderTopLeftRadius: 32, borderTopRightRadius: 32, backgroundColor: 'white', flex: 1, alignItems: 'center', paddingHorizontal: 25, paddingTop: 20}}> <View style={{borderTopLeftRadius: 32, borderTopRightRadius: 32, backgroundColor: 'white', flex: 1, alignItems: 'center', paddingHorizontal: 25, paddingTop: 20}}>
<HTML html={`${this.state.data}`} imagesMaxWidth={Dimensions.get('window').width} /> {this.state.loading? <View style={{alignSelf: 'center'}}>
<BarIndicator count={5} color='#4cc9f0' size={25}/>
</View> :
<HTML html={`${this.state.data}`} imagesMaxWidth={Dimensions.get('window').width} />}
</View> </View>
</View> </View>
) )
......
App/Containers/WishlistScreen.js
View file @ 0b574058
...@@ -14,6 +14,7 @@ import BaseText from '../Components/BaseText' ...@@ -14,6 +14,7 @@ import BaseText from '../Components/BaseText'
import Api from '../Services/Api' import Api from '../Services/Api'
import { formatRp } from '../Lib/Utils' import { formatRp } from '../Lib/Utils'
import Constant from '../Lib/Constant' import Constant from '../Lib/Constant'
import { BarIndicator } from 'react-native-indicators'
class WishlistScreen extends Component { class WishlistScreen extends Component {
constructor(props) { constructor(props) {
...@@ -29,7 +30,8 @@ class WishlistScreen extends Component { ...@@ -29,7 +30,8 @@ class WishlistScreen extends Component {
data: [], data: [],
text: "", text: "",
isSecondColumn: false, isSecondColumn: false,
currency: '' currency: '',
loading: false
} }
} }
backAction = () => { backAction = () => {
...@@ -62,6 +64,7 @@ class WishlistScreen extends Component { ...@@ -62,6 +64,7 @@ class WishlistScreen extends Component {
} }
getWhistlist() { getWhistlist() {
this.setState({loading: true})
let body = { let body = {
"offset": 0, "offset": 0,
"limit": 10 "limit": 10
...@@ -73,6 +76,7 @@ class WishlistScreen extends Component { ...@@ -73,6 +76,7 @@ class WishlistScreen extends Component {
data: response.data.data data: response.data.data
}) })
} }
this.setState({loading: false})
}) })
} }
...@@ -120,6 +124,9 @@ class WishlistScreen extends Component { ...@@ -120,6 +124,9 @@ class WishlistScreen extends Component {
<FontAwesome name={'times-circle'} size={20} color={"rgba(75, 75, 75, 0.4)"} style={{ alignSelf: 'center' }} /> <FontAwesome name={'times-circle'} size={20} color={"rgba(75, 75, 75, 0.4)"} style={{ alignSelf: 'center' }} />
</View> </View>
<View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%', marginTop: 20, paddingHorizontal: 20, }}> <View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%', marginTop: 20, paddingHorizontal: 20, }}>
{this.state.loading? <View style={{alignSelf: 'center'}}>
<BarIndicator count={5} color='#4cc9f0' size={25}/>
</View> :
<FlatList <FlatList
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
data={this.state.data} data={this.state.data}
...@@ -142,7 +149,7 @@ class WishlistScreen extends Component { ...@@ -142,7 +149,7 @@ class WishlistScreen extends Component {
//Setting the number of column //Setting the number of column
numColumns={2} numColumns={2}
keyExtractor={(item, index) => index.toString()} keyExtractor={(item, index) => index.toString()}
/> />}
</View> </View>
</View> </View>
) )
......
App/Themes/Images.js
View file @ 0b574058
...@@ -35,6 +35,7 @@ const images = { ...@@ -35,6 +35,7 @@ const images = {
berhasil: require('../Images/Icons/berhasil.png'), berhasil: require('../Images/Icons/berhasil.png'),
add: require('../Images/Icons/add.png'), add: require('../Images/Icons/add.png'),
map: require('../Images/Icons/map.png'), map: require('../Images/Icons/map.png'),
mapgray: require('../Images/Icons/mapgray.png'),
filter: require('../Images/Icons/filter.png'), filter: require('../Images/Icons/filter.png'),
icon_pesanansaya_gray: require('../Images/Icons/icon_pesanansaya_gray.png'), icon_pesanansaya_gray: require('../Images/Icons/icon_pesanansaya_gray.png'),
icon_close: require('../Images/Icons/icon_close.png'), icon_close: require('../Images/Icons/icon_close.png'),
...@@ -45,6 +46,7 @@ const images = { ...@@ -45,6 +46,7 @@ const images = {
icon_wishlistgray: require('../Images/Icons/icon_wishlistgray.png'), icon_wishlistgray: require('../Images/Icons/icon_wishlistgray.png'),
icon_sharegray: require('../Images/Icons/icon_sharegray.png'), icon_sharegray: require('../Images/Icons/icon_sharegray.png'),
icon_chat: require('../Images/Icons/icon_chat.png'), icon_chat: require('../Images/Icons/icon_chat.png'),
// big image // big image
letter: require('../Images/letter.png'), letter: require('../Images/letter.png'),
......
package.json
View file @ 0b574058
...@@ -54,6 +54,7 @@ ...@@ -54,6 +54,7 @@
"react-native-gesture-handler": "1.3.0", "react-native-gesture-handler": "1.3.0",
"react-native-i18n": "2.0.14", "react-native-i18n": "2.0.14",
"react-native-image-crop-picker": "0.32.0", "react-native-image-crop-picker": "0.32.0",
"react-native-indicators": "^0.17.0",
"react-native-maps": "0.27.1", "react-native-maps": "0.27.1",
"react-native-modal": "^11.5.6", "react-native-modal": "^11.5.6",
"react-native-modalbox": "^2.0.0", "react-native-modalbox": "^2.0.0",
......
yarn.lock
View file @ 0b574058
...@@ -11195,6 +11195,13 @@ react-native-image-crop-picker@0.32.0: ...@@ -11195,6 +11195,13 @@ react-native-image-crop-picker@0.32.0:
resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.32.0.tgz#c881d309fb0950d63fec40cfd0a5679b381f9a75" resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.32.0.tgz#c881d309fb0950d63fec40cfd0a5679b381f9a75"
integrity sha512-DRnUB3fsb/Vcg/SguGljx10PuJXaVt8XcmwgNaDZs77G2oLYiufkAlbJmHpdZT/GaYhzlRjF5aw6IPrTYxxMfw== integrity sha512-DRnUB3fsb/Vcg/SguGljx10PuJXaVt8XcmwgNaDZs77G2oLYiufkAlbJmHpdZT/GaYhzlRjF5aw6IPrTYxxMfw==
react-native-indicators@^0.17.0:
version "0.17.0"
resolved "https://registry.yarnpkg.com/react-native-indicators/-/react-native-indicators-0.17.0.tgz#92f95efaf5fb53be576dfe4e1980a25655a93f55"
integrity sha512-s23em477GHGxWeGczWrixScAZD6tQU4mx1fttlrwhEGKOxhBgp55Kh3RoD9Wj4yna4e5W35xQNoPqoJAT6QW5A==
dependencies:
prop-types "^15.5.10"
react-native-iphone-x-helper@^1.0.3, react-native-iphone-x-helper@^1.2.1: react-native-iphone-x-helper@^1.0.3, react-native-iphone-x-helper@^1.2.1:
version "1.2.1" version "1.2.1"
resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz#645e2ffbbb49e80844bb4cbbe34a126fda1e6772" resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz#645e2ffbbb49e80844bb4cbbe34a126fda1e6772"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment