Skip to content

E
eCartPro-Customer
Commit 39d50581 authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

Merge branch 'deni(lptp)' into 'master' 

Deni(lptp)

See merge request !40
parents 9bf7eae5 14cc2ca9
Hide whitespace changes
Inline Side-by-side
Showing with 100 additions and 69 deletions
App/Containers/CategoryScreen.js
View file @ 39d50581
......@@ -8,6 +8,8 @@ import { connect } from 'react-redux'
import styles from './Styles/CategoryScreenStyle'
import BaseHeader from '../Components/BaseHeader';
import { Images } from '../Themes';
import Api from '../Services/Api';
import BaseText from '../Components/BaseText';
class CategoryScreen extends Component {
constructor(props) {
......@@ -21,7 +23,8 @@ class CategoryScreen extends Component {
Images.categoryAksesoris,
Images.categoryTas,
Images.categorySale,
]
],
data: []
}
}
backAction = () => {
......@@ -32,21 +35,39 @@ class CategoryScreen extends Component {
componentDidMount() {
// alert(JSON.stringify(this.props))
BackHandler.addEventListener("hardwareBackPress", this.backAction);
this.getCategory()
}
componentWillUnmount() {
BackHandler.removeEventListener("hardwareBackPress", this.backAction);
}
render () {
getCategory() {
Api.create().getCategory().then(response => {
console.log(JSON.stringify(response.data))
if (response.data.status == "success") {
this.setState({ data: response.data.data })
} else {
this.setState({ data: [] })
}
})
}
render() {
return (
<View style={{flex: 1, backgroundColor: '#4cc9f0'}}>
<BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Kategori'}/>
<ScrollView showsVerticalScrollIndicator={false} style={[styles.scrollContent, {paddingHorizontal: 25, paddingTop: 25}]}>
{this.state.listCategory.map((item, index) => {
<View style={{ flex: 1, backgroundColor: '#4cc9f0' }}>
<BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Kategori'} />
<ScrollView showsVerticalScrollIndicator={false} style={{ paddingHorizontal: 25, backgroundColor: '#fff', borderTopLeftRadius: 32, borderTopRightRadius: 32 }}>
{this.state.data.map((item, index) => {
return (
<TouchableOpacity onPress={() => this.props.navigation.navigate('ListSearchScreen')} style={{marginTop: index == 0? 0 : 15, marginBottom: index == this.state.listCategory.length -1? 50 : 0, elevation: 2, borderRadius: 15}} key={index}>
<Image source={item} style={{width: '100%', height: 100, borderRadius: 10, resizeMode: 'stretch'}}/>
<TouchableOpacity
style={{ backgroundColor: index % 2 == 0 ? '#b89469' : index % 3 == 0 ? '#7a7a7d' : '#636066', borderRadius: 16, height: 90, width: '100%', marginBottom: 15, marginTop: index == 0 ? 20 : 0, justifyContent: 'space-between', paddingHorizontal: 20, flexDirection: 'row' }}
onPress={() => this.props.navigation.navigate('ListSearchScreen', { catID: item.cat_id })}
>
<BaseText type={"bold"} text={item.title} style={{ fontSize: 16, color: 'white', marginTop: 5, alignSelf: 'center' }} />
<View style={{}}>
<Image source={{ uri: item.category_image }} style={{ height: 90, width: 90 }} />
</View>
</TouchableOpacity>
)
})}
......
App/Containers/ListSearchScreen.js
View file @ 39d50581
......@@ -41,8 +41,18 @@ class ListSearchScreen extends Component {
}
componentDidMount() {
if (this.props.navigation.state) {
if (this.props.navigation.state.params.catID) {
let categoryId = []
categoryId.push(this.props.navigation.state.params.catID)
this.setState({ categoryId }, ()=> this.getAllProduct())
} else {
this.getAllProduct()
}
} else {
this.getAllProduct()
}
this.getCurrency()
this.getAllProduct()
this.getCategory()
BackHandler.addEventListener("hardwareBackPress", this.backAction);
}
......@@ -60,9 +70,9 @@ class ListSearchScreen extends Component {
Api.create().getAllProduct(payload).then((response) => {
console.log(payload)
console.log(response.data)
if(response.data.status == 'success') {
this.setState({listData: this.state.listData.concat(response.data.data)})
}
if (response.data.status == 'success') {
this.setState({ listData: this.state.listData.concat(response.data.data) })
}
})
}
......@@ -70,7 +80,7 @@ class ListSearchScreen extends Component {
Api.create().getCategory().then((response) => {
console.log(response.data)
if (response.data.status == 'success') {
this.setState({dataCategory: response.data.data})
this.setState({ dataCategory: response.data.data })
}
})
}
......@@ -86,11 +96,11 @@ class ListSearchScreen extends Component {
async getCurrency() {
let currency = await AsyncStorage.getItem(Constant.GLOBAL_CURRENCY)
this.setState({currency})
this.setState({ currency })
// console.log('yeeeeeeeee', currency)
}
isCloseToBottom = ({layoutMeasurement, contentOffset, contentSize}) => {
isCloseToBottom = ({ layoutMeasurement, contentOffset, contentSize }) => {
const paddingToBottom = 0;
return layoutMeasurement.height + contentOffset.y >=
contentSize.height - paddingToBottom;
......@@ -110,7 +120,7 @@ class ListSearchScreen extends Component {
} else {
categoryId.splice(indexId, 1)
}
this.setState({listData: [], categoryId, category: false}, () => {
this.setState({ listData: [], categoryId, category: false }, () => {
this.refreshState()
this.getAllProduct()
})
......@@ -120,63 +130,63 @@ class ListSearchScreen extends Component {
return (
<View style={{ flex: 1 }}>
<StatusBar backgroundColor={'transparent'} translucent={true} barStyle={'light-content'} />
<BaseHeader
<BaseHeader
onSubmitEditing={() => {
this.setState({listData: []}, () => {
this.setState({ listData: [] }, () => {
this.refreshState()
this.getAllProduct()
})
}}
onClose={() => {
this.setState({listData: [], search: ''}, () => {
this.setState({ listData: [], search: '' }, () => {
this.refreshState()
this.getAllProduct()
})
}}
value={this.state.search} onChangeText={(search) => this.setState({search})} placeholder={'Cari Product'}
typeSearch={true} onBackPress={() => this.props.navigation.goBack()} />
<Modal
animationOut='slideOutDown'
}}
value={this.state.search} onChangeText={(search) => this.setState({ search })} placeholder={'Cari Product'}
typeSearch={true} onBackPress={() => this.props.navigation.goBack()} />
<Modal
animationOut='slideOutDown'
// animationOutTiming={1000}
isVisible={this.state.sorting} onBackButtonPress={() => this.setState({ sorting: false })} onBackdropPress={() => this.setState({sorting: false})} style={{ paddingHorizontal: 10 }}>
<View style={{ backgroundColor: 'white', width: '90%', alignSelf: 'center', borderRadius: 5}}>
isVisible={this.state.sorting} onBackButtonPress={() => this.setState({ sorting: false })} onBackdropPress={() => this.setState({ sorting: false })} style={{ paddingHorizontal: 10 }}>
<View style={{ backgroundColor: 'white', width: '90%', alignSelf: 'center', borderRadius: 5 }}>
<View style={{ height: 50, borderBottomColor: '#4cc9f0', borderBottomWidth: 1, justifyContent: 'center', paddingHorizontal: 20 }}>
<BaseText type={"bold"} text={'Urutan By'} style={{ fontSize: 16, color: '#4cc9f0' }} />
</View>
{this.state.dataSorting.map((item, index) => {
return (
<TouchableOpacity
key={index}
style={{ flexDirection: 'row', justifyContent: this.state.urutan == item? 'space-between' : 'flex-start', alignItems:'center', backgroundColor: this.state.urutan == item? 'rgba(76, 201, 240, .1)' : 'transparent', paddingHorizontal: 20, paddingVertical: 15, borderBottomColor: 'black', borderBottomWidth: this.state.dataSorting.length -1 == index? 0 : .4, }}
onPress={() => {
this.setState({listData: [], urutan: item, sorting: false}, () => {
this.refreshState()
this.getAllProduct()
})
}}>
<BaseText type={"regular"} text={titleCase(item)} style={{ fontSize: 16, color: 'black' }} />
{this.state.urutan == item && <Image source={Images.radioOn} style={{width: 20, height: 20,}}/>}
</TouchableOpacity>)
<TouchableOpacity
key={index}
style={{ flexDirection: 'row', justifyContent: this.state.urutan == item ? 'space-between' : 'flex-start', alignItems: 'center', backgroundColor: this.state.urutan == item ? 'rgba(76, 201, 240, .1)' : 'transparent', paddingHorizontal: 20, paddingVertical: 15, borderBottomColor: 'black', borderBottomWidth: this.state.dataSorting.length - 1 == index ? 0 : .4, }}
onPress={() => {
this.setState({ listData: [], urutan: item, sorting: false }, () => {
this.refreshState()
this.getAllProduct()
})
}}>
<BaseText type={"regular"} text={titleCase(item)} style={{ fontSize: 16, color: 'black' }} />
{this.state.urutan == item && <Image source={Images.radioOn} style={{ width: 20, height: 20, }} />}
</TouchableOpacity>)
})}
</View>
</Modal>
<Modal
animationOut='slideOutDown'
<Modal
animationOut='slideOutDown'
// animationOutTiming={1000}
isVisible={this.state.category} onBackButtonPress={() => this.setState({ category: false })} onBackdropPress={() => this.setState({category: false})} style={{ paddingHorizontal: 10 }}>
<View style={{ backgroundColor: 'white', width: '90%', alignSelf: 'center', borderRadius: 5}}>
isVisible={this.state.category} onBackButtonPress={() => this.setState({ category: false })} onBackdropPress={() => this.setState({ category: false })} style={{ paddingHorizontal: 10 }}>
<View style={{ backgroundColor: 'white', width: '90%', alignSelf: 'center', borderRadius: 5 }}>
<View style={{ height: 50, borderBottomColor: '#4cc9f0', borderBottomWidth: 1, justifyContent: 'center', paddingHorizontal: 20 }}>
<BaseText type={"bold"} text={'Kategori By'} style={{ fontSize: 16, color: '#4cc9f0' }} />
</View>
{this.state.dataCategory.map((item, index) => {
return (
<TouchableOpacity
key={index}
style={{ flexDirection: 'row', justifyContent: this.state.categoryId.includes(item.cat_id)? 'space-between' : 'flex-start', alignItems:'center', backgroundColor: this.state.categoryId.includes(item.cat_id)? 'rgba(76, 201, 240, .1)' : 'transparent', paddingHorizontal: 20, paddingVertical: 15, borderBottomColor: 'black', borderBottomWidth: this.state.dataCategory.length -1 == index? 0 : .4, }}
onPress={() => this.handleCategory(item)}>
<BaseText type={"regular"} text={titleCase(String(item.title).toLocaleLowerCase())} style={{ fontSize: 16, color: 'black' }} />
{this.state.categoryId.includes(item.cat_id) && <Image source={Images.radioOn} style={{width: 20, height: 20,}}/>}
</TouchableOpacity>)
<TouchableOpacity
key={index}
style={{ flexDirection: 'row', justifyContent: this.state.categoryId.includes(item.cat_id) ? 'space-between' : 'flex-start', alignItems: 'center', backgroundColor: this.state.categoryId.includes(item.cat_id) ? 'rgba(76, 201, 240, .1)' : 'transparent', paddingHorizontal: 20, paddingVertical: 15, borderBottomColor: 'black', borderBottomWidth: this.state.dataCategory.length - 1 == index ? 0 : .4, }}
onPress={() => this.handleCategory(item)}>
<BaseText type={"regular"} text={titleCase(String(item.title).toLocaleLowerCase())} style={{ fontSize: 16, color: 'black' }} />
{this.state.categoryId.includes(item.cat_id) && <Image source={Images.radioOn} style={{ width: 20, height: 20, }} />}
</TouchableOpacity>)
})}
</View>
</Modal>
......@@ -200,23 +210,23 @@ class ListSearchScreen extends Component {
<FlatList
showsVerticalScrollIndicator={false}
data={this.state.listData}
onScroll={({nativeEvent}) => {
onScroll={({ nativeEvent }) => {
if (this.isCloseToBottom(nativeEvent)) {
this.setState({offset: this.state.offset + 10}, () => this.getAllProduct())
this.setState({ offset: this.state.offset + 10 }, () => this.getAllProduct())
}
}}
renderItem={({ item, index }) => (
<TouchableOpacity onPress={() => this.props.navigation.navigate('DetailProductScreen', {productId: item.product_id})} style={{ flex: 1, borderRadius: 15 }}>
<ImageBackground source={{uri: item.product_image}} imageStyle={{resizeMode: 'cover', borderRadius: 15}} style={{ flex: 1, flexDirection: 'column', margin: 10, borderRadius: 15, marginTop: index == 0 ? 20 : index == 1 ? 20 : 0 }}>
<View style={{ width: '100%', height: 270, justifyContent: 'flex-end'}}>
<View style={{backgroundColor:'rgba(255,255,255,.5)', padding: 20}}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('DetailProductScreen', { productId: item.product_id })} style={{ flex: 1/2, borderRadius: 15 }}>
<ImageBackground source={{ uri: item.product_image }} imageStyle={{ resizeMode: 'cover', borderRadius: 15 }} style={{ flex: 1, flexDirection: 'column', margin: 10, borderRadius: 15, marginTop: index == 0 ? 20 : index == 1 ? 20 : 0 }}>
<View style={{ width: '100%', height: 270, justifyContent: 'flex-end' }}>
<View style={{ backgroundColor: 'rgba(255,255,255,.5)', padding: 20 }}>
<BaseText type={"bold"} text={titleCase(item.product_name)} style={{ fontSize: 14, color: 'black', textAlign: 'left', }} ellipsizeMode={"tail"} numberOfLines={2} />
<BaseText type={"regular"} text={formatRp(this.state.currency, item.price)} style={{ fontSize: 10, color: 'black', textAlign: 'left', marginTop: 5 }} />
</View>
</View>
</ImageBackground>
</TouchableOpacity>
)}
numColumns={2}
keyExtractor={(item, index) => index.toString()}
......@@ -228,20 +238,20 @@ class ListSearchScreen extends Component {
<FlatList
showsVerticalScrollIndicator={false}
data={this.state.listData}
onScroll={({nativeEvent}) => {
onScroll={({ nativeEvent }) => {
if (this.isCloseToBottom(nativeEvent)) {
this.setState({offset: this.state.offset + 10}, () => this.getAllProduct())
this.setState({ offset: this.state.offset + 10 }, () => this.getAllProduct())
}
}}
renderItem={({ item, index }) => (
<TouchableOpacity onPress={() => this.props.navigation.navigate('DetailProductScreen', {productId: item.product_id})} style={{ flex: 1, flexDirection: 'row', marginTop: index == 0 ? 20 : 10, borderRadius: 15, elevation: 2, margin: 5 }}>
<Image
<TouchableOpacity onPress={() => this.props.navigation.navigate('DetailProductScreen', { productId: item.product_id })} style={{ flex: 1, flexDirection: 'row', marginTop: index == 0 ? 20 : 10, borderRadius: 15, elevation: 2, margin: 5 }}>
<Image
onError={(e) => {
console.log('boooz', e.nativeEvent.error);
// this.setState({thumbnail: thumbnailDefaultImage});
}
}
source={{uri: item.product_image}} style={{ width: '40%', borderTopLeftRadius: 15, borderBottomLeftRadius: 15 }} />
}
}
source={{ uri: item.product_image }} style={{ width: '40%', borderTopLeftRadius: 15, borderBottomLeftRadius: 15 }} />
<View style={{ width: '60%', height: 140, justifyContent: 'flex-start', padding: 20, backgroundColor: 'white', borderTopRightRadius: 15, borderBottomRightRadius: 15 }}>
<BaseText type={"regular"} text={item.product_name} style={{ fontSize: 12, color: 'black', textAlign: 'left', }} ellipsizeMode={"tail"} numberOfLines={2} />
<BaseText type={"bold"} text={formatRp(this.state.currency, item.price)} style={{ fontSize: 14, color: 'black', textAlign: 'left', marginTop: 5 }} />
......@@ -255,13 +265,13 @@ class ListSearchScreen extends Component {
)}
<View style={{ width: '60%', backgroundColor: 'white', position: 'absolute', bottom: 25, alignSelf: 'center', borderRadius: 20, justifyContent: 'space-between', flexDirection: 'row', elevation: 5 }}>
<TouchableOpacity onPress={() => this.setState({category: true})} style={{ height: '100%', flexDirection: 'row', alignItems: 'center', width: '50%', paddingHorizontal: 20, backgroundColor: this.state.categoryId.length > 0 ? '#4cc9f0' : 'transparent', paddingVertical: 10, borderTopLeftRadius: 20, borderBottomLeftRadius: 20}}>
<Image source={Images.kategori} style={{ height: 16, width: 16, tintColor: this.state.categoryId.length > 0 ? 'white' : null}} />
<TouchableOpacity onPress={() => this.setState({ category: true })} style={{ height: '100%', flexDirection: 'row', alignItems: 'center', width: '50%', paddingHorizontal: 20, backgroundColor: this.state.categoryId.length > 0 ? '#4cc9f0' : 'transparent', paddingVertical: 10, borderTopLeftRadius: 20, borderBottomLeftRadius: 20 }}>
<Image source={Images.kategori} style={{ height: 16, width: 16, tintColor: this.state.categoryId.length > 0 ? 'white' : null }} />
<BaseText type={"bold"} text={'Kategori'} style={{ fontSize: 12, color: this.state.categoryId.length > 0 ? 'white' : '#4cc9f0', marginLeft: 10 }} />
</TouchableOpacity>
<View style={{ borderWidth: .4, borderColor: this.state.categoryId.length > 0 && this.state.urutan != ''? 'white' : '#4cc9f0' }} />
<TouchableOpacity onPress={() => this.setState({sorting: true})} style={{ height: '100%', flexDirection: 'row', alignItems: 'center', width: '50%', paddingHorizontal: 20, backgroundColor: this.state.urutan != '' ? '#4cc9f0' : 'transparent', paddingVertical: 10, borderTopRightRadius: 20, borderBottomRightRadius: 20}}>
<Image source={Images.urutan} style={{ height: 16, width: 16, tintColor: this.state.urutan != '' ? 'white' : null}} />
<View style={{ borderWidth: .4, borderColor: this.state.categoryId.length > 0 && this.state.urutan != '' ? 'white' : '#4cc9f0' }} />
<TouchableOpacity onPress={() => this.setState({ sorting: true })} style={{ height: '100%', flexDirection: 'row', alignItems: 'center', width: '50%', paddingHorizontal: 20, backgroundColor: this.state.urutan != '' ? '#4cc9f0' : 'transparent', paddingVertical: 10, borderTopRightRadius: 20, borderBottomRightRadius: 20 }}>
<Image source={Images.urutan} style={{ height: 16, width: 16, tintColor: this.state.urutan != '' ? 'white' : null }} />
<BaseText type={"regular"} text={'Urutan'} style={{ fontSize: 12, color: this.state.urutan != '' ? 'white' : '#4cc9f0', marginLeft: 10 }} />
</TouchableOpacity>
</View>
......
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