Skip to content

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

filterrrrrrrrrrr

parent 802e12ca
Expand all Show whitespace changes
Inline Side-by-side
Showing with 520 additions and 79 deletions
App/Components/BaseHeader.js
View file @ a20fb561
......@@ -22,6 +22,9 @@ export default class BaseHeader extends Component {
withBack: PropTypes.bool,
complain: PropTypes.bool,
complainPress: PropTypes.func,
filterText: PropTypes.string,
filter: PropTypes.bool,
filterPress: PropTypes.func,
notification: PropTypes.bool,
notificationPress: PropTypes.func,
onSubmitEditing: PropTypes.func,
......@@ -29,7 +32,7 @@ export default class BaseHeader extends Component {
value: PropTypes.string,
placeholder: PropTypes.string,
onClose: PropTypes.func,
onCancel: PropTypes.func
onCancel: PropTypes.func,
}
// Defaults for props
......@@ -44,7 +47,7 @@ export default class BaseHeader extends Component {
render() {
return (
<View>
{!this.props.typeSearch && !this.props.complain && !this.props.notification && <View style={{ alignItems: 'center', width: '100%', paddingBottom: 10, paddingHorizontal: 20, height: STATUSBAR_HEIGHT + 60, paddingTop: 50, flexDirection: 'row', justifyContent: this.props.rightText == '' ? 'flex-start' : 'space-between', backgroundColor: '#4cc9f0' }}>
{!this.props.typeSearch && !this.props.complain && !this.props.notification && !this.props.filter && <View style={{ alignItems: 'center', width: '100%', paddingBottom: 10, paddingHorizontal: 20, height: STATUSBAR_HEIGHT + 60, paddingTop: 50, flexDirection: 'row', justifyContent: this.props.rightText == '' ? 'flex-start' : 'space-between', backgroundColor: '#4cc9f0' }}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
{this.props.withBack && <TouchableOpacity onPress={this.props.onBackPress} style={{ marginBottom: -3 }}>
<Image source={Images.icon_backwhite} style={{ width: 20, height: 15 }} />
......@@ -92,6 +95,16 @@ export default class BaseHeader extends Component {
<BaseText type={"bold"} text={'Baca Semua'} style={{ fontSize: 12, color: '#fff', textAlign: 'center' }} />
</TouchableOpacity>
</View>}
{this.props.filter && <View style={{ alignItems: 'center', width: '100%', paddingBottom: 10, paddingHorizontal: 20, height: STATUSBAR_HEIGHT + 60, paddingTop: 50, flexDirection: 'row', justifyContent: 'space-between', backgroundColor: '#4cc9f0' }}>
<TouchableOpacity onPress={this.props.onBackPress} style={{ marginBottom: -3, flexDirection: 'row' }}>
<Image source={Images.icon_backwhite} style={{ width: 20, height: 15, alignSelf: 'center' }} />
<BaseText text={this.props.leftText} type={'bold'} style={{ marginLeft: 10, color: 'white', fontSize: 16, alignSelf: 'center' }} />
</TouchableOpacity>
<TouchableOpacity style={{ justifyContent: 'center', alignSelf: 'center', marginBottom: -3, }} onPress={this.props.filterPress}>
<BaseText type={"bold"} text={this.props.filterText} style={{ fontSize: 12, color: '#fff', textAlign: 'center' }} />
</TouchableOpacity>
</View>}
</View>
)
}
......
App/Containers/ChatScreen.js
View file @ a20fb561
......@@ -37,7 +37,8 @@ class ChatScreen extends Component {
],
currency: '',
intent: '',
product: null
product: null,
varient: null
}
}
......@@ -49,7 +50,10 @@ class ChatScreen extends Component {
if (this.props.navigation.state.params.intent == 'chat') {
this.setState({
intent: 'chat',
product: this.props.navigation.state.params.product
product: this.props.navigation.state.params.product,
varient: this.props.navigation.state.params.varient
}, ()=> {
console.log(JSON.stringify(this.state.product))
})
}
}
......@@ -142,10 +146,10 @@ class ChatScreen extends Component {
{this.state.intent == 'chat' ?
<View style={{ alignSelf: 'flex-end', backgroundColor: '#ededed', width: '100%', flexDirection: 'row' }}>
<View style={{ elevation: 3, borderRadius: 10, margin: 5, backgroundColor: '#fff', padding: 10, flexDirection: 'row', width: '60%', }}>
<Image source={{ uri: this.state.product.image }} style={{ height: 64, width: 64, borderRadius: 15, marginRight: 10 }} />
<Image source={{ uri: this.state.product.product_image }} style={{ height: 64, width: 64, borderRadius: 15, marginRight: 10 }} />
<View style={{ flex: 1 }}>
<BaseText text={this.state.product.imageName} type={'regular'} style={{ fontSize: 12, color: 'black' }} ellipsizeMode={'tail'} numberOfLines={2} />
<BaseText text={formatRp(this.state.currency, this.state.product.itemHarga)} type={'bold'} style={{ fontSize: 12, color: 'black' }} />
<BaseText text={this.state.product.product_name} type={'regular'} style={{ fontSize: 12, color: 'black' }} ellipsizeMode={'tail'} numberOfLines={2} />
<BaseText text={formatRp(this.state.currency, this.state.product.price)} type={'bold'} style={{ fontSize: 12, color: 'black' }} />
</View>
</View>
<TouchableOpacity style={{ backgroundColor: 'white', borderRadius: 10, width: 20, height: 20, justifyContent: 'center', marginLeft: -20, elevation: 5 }} onPress={()=> this.setState({ intent: ""})}>
......
App/Containers/DetailProductScreen.js
View file @ a20fb561
......@@ -264,11 +264,8 @@ class DetailProductScreen extends Component {
<View style={{flexDirection: 'row', justifyContent: 'space-between',}}>
<TouchableOpacity style={{width: '10%', alignItems:'center'}}
onPress={()=> this.props.navigation.navigate('ChatScreen', {
product: {
imageName: this.state.dataProduct.product_name,
itemHarga: this.state.dataProduct.price,
image: this.state.varient[0].varient_image
},
product: this.state.dataProduct,
varient: this.state.varient,
intent: 'chat'
})}>
<Image source={Images.icon_chat} style={{width: 50, height: 50}}/>
......
App/Containers/FilterScreen.js 0 → 100644
View file @ a20fb561
This diff is collapsed.
App/Containers/ListSearchScreen.js
View file @ a20fb561
......@@ -14,6 +14,7 @@ import { formatRp, titleCase } from '../Lib/Utils'
import Constant from '../Lib/Constant'
import Modal from 'react-native-modal';
import { BarIndicator } from 'react-native-indicators'
import { NavigationEvents } from 'react-navigation';
class ListSearchScreen extends Component {
constructor(props) {
......@@ -32,13 +33,17 @@ class ListSearchScreen extends Component {
dataSorting: ['termurah', 'termahal'],
dataCategory: [],
categoryId: [],
categoryLabel: [],
currency: '',
offset: 0,
search: '',
urutan: '',
sorting: false,
category: false,
loading: false
loading: false,
min: 0,
max: 0,
option: 0
}
}
......@@ -47,7 +52,7 @@ class ListSearchScreen extends Component {
if (catID != '') {
let categoryId = []
categoryId.push(catID)
this.setState({ categoryId }, ()=> this.getAllProduct())
this.setState({ categoryId }, () => this.getAllProduct())
} else {
this.getAllProduct()
}
......@@ -57,27 +62,31 @@ class ListSearchScreen extends Component {
}
getAllProduct(type) {
if (type != 'scroll') this.setState({loading: true})
if (type != 'scroll') this.setState({ loading: true })
let payload = {
"offset": this.state.offset,
"limit": 10,
"sorting": this.state.urutan,
"category": this.state.categoryId,
"search": this.state.search,
"min": 0,
"max": 0
"min": this.state.min,
"max": this.state.max
}
Api.create().getAllProduct(payload).then((response) => {
console.log(payload)
// console.log(response.data)
console.log('masukkk', response.data.data)
if (response.data.status == 'success') {
this.setState({ listData: this.state.listData.concat(response.data.data), loading: false })
this.setState({ listData: response.data.data, loading: false })
} else {
this.setState({ loading: false })
}
})
}
onSelect = (data) => {
this.setState(data)
}
getCategory() {
Api.create().getCategory().then((response) => {
console.log(response.data)
......@@ -116,13 +125,16 @@ class ListSearchScreen extends Component {
handleCategory(item) {
let categoryId = this.state.categoryId
let categoryLabel = this.state.categoryLabel
let indexId = this.state.categoryId.findIndex((val) => val == item.cat_id)
if (indexId == -1) {
categoryId.push(item.cat_id)
categoryLabel.push(String(item.title).toLocaleLowerCase())
} else {
categoryId.splice(indexId, 1)
categoryLabel.splice(indexId, 1)
}
this.setState({ listData: [], categoryId, category: false }, () => {
this.setState({ listData: [], categoryId, category: false, categoryLabel }, () => {
this.refreshState()
this.getAllProduct()
})
......@@ -131,6 +143,10 @@ class ListSearchScreen extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<NavigationEvents onDidFocus={() => {
this.getAllProduct()
}} />
<StatusBar backgroundColor={'transparent'} translucent={true} barStyle={'light-content'} />
<BaseHeader
// onSubmitEditing={() => {
......@@ -210,8 +226,8 @@ class ListSearchScreen extends Component {
</View>
{!this.state.thumbnail && (
<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}/>
{this.state.loading ? <View style={{ alignSelf: 'center' }}>
<BarIndicator count={5} color='#4cc9f0' size={25} />
</View> :
<FlatList
showsVerticalScrollIndicator={false}
......@@ -222,7 +238,7 @@ class ListSearchScreen extends Component {
}
}}
renderItem={({ item, index }) => (
<TouchableOpacity onPress={() => this.props.navigation.navigate('DetailProductScreen', { productId: item.product_id })} style={{ flex: 1/2, borderRadius: 15 }}>
<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 }}>
......@@ -241,9 +257,9 @@ class ListSearchScreen extends Component {
)}
{this.state.thumbnail && (
<View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%', paddingHorizontal: 20 }}>
{this.state.loading? <View style={{alignSelf: 'center'}}>
<BarIndicator count={5} color='#4cc9f0' size={25}/>
</View> :<FlatList
{this.state.loading ? <View style={{ alignSelf: 'center' }}>
<BarIndicator count={5} color='#4cc9f0' size={25} />
</View> : <FlatList
showsVerticalScrollIndicator={false}
data={this.state.listData}
onScroll={({ nativeEvent }) => {
......@@ -273,17 +289,16 @@ 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 }}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('FilterScreen', { kategori: this.state.dataCategory, onSelect: this.onSelect.bind(this), getAllProduct: this.getAllProduct.bind(this), categoryId: this.state.categoryId, categoryLabel: this.state.categoryLabel, type: 'kategori', dataSorting: this.state.dataSorting, urutan: this.state.urutan, min: this.state.min, max: this.state.max, option: this.state.option })} 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 }}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('FilterScreen', { kategori: this.state.dataCategory, onSelect: this.onSelect.bind(this), getAllProduct: this.getAllProduct.bind(this), categoryId: this.state.categoryId, categoryLabel: this.state.categoryLabel, type: 'sorting', dataSorting: this.state.dataSorting, urutan: this.state.urutan, min: this.state.min, max: this.state.max, option: this.state.option })} 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>
</View>
</View>
)
......
App/Containers/NotificationScreen.js
View file @ a20fb561
......@@ -54,14 +54,17 @@ class NotificationScreen extends Component {
}
readAllNotif(){
Api.create().readAllNotification()
Api.create().readAllNotification().then(response => {
alert(JSON.stringify(response.data))
this.getNotif()
})
}
render() {
return (
<View style={{ flex: 1, backgroundColor: '#4cc9f0' }}>
<BaseHeader leftText={'Notifikasi'} withBack={false} onBackPress={this.backAction} notification={true} notificationPress={()=> this.readAllNotif()}/>
<ScrollView style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, }}>
<ScrollView style={{ flex: 1, backgroundColor: '#fff' }}>
<View style={{ borderTopLeftRadius: 30, borderTopRightRadius: 30, backgroundColor: 'white' }}>
{this.state.listNotif.map((item, index) => {
return (
......
App/Containers/Styles/FilterScreenStyle.js 0 → 100644
View file @ a20fb561
import { StyleSheet } from 'react-native'
import { ApplicationStyles } from '../../Themes/'
export default StyleSheet.create({
...ApplicationStyles.screen,
containerView: {
flex: 1,
backgroundColor: 'white',
borderTopLeftRadius: 32,
borderTopRightRadius: 32,
},
collapseView: {
marginBottom: 20
},
body: {
padding: 10,
paddingTop: 0
},
collapseConatiner: {
backgroundColor: '#fff',
margin:10,
overflow:'hidden'
}
})
App/Navigation/AppNavigation.js
View file @ a20fb561
import { createAppContainer } from 'react-navigation'
import FilterScreen from '../Containers/FilterScreen'
import UseCouponScreen from '../Containers/UseCouponScreen'
import DetailNotificationScreen from '../Containers/DetailNotificationScreen'
import ChatScreen from '../Containers/ChatScreen'
......@@ -47,6 +48,7 @@ import HomeNavigation from './HomeNavigation'
// Manifest of possible screens
const PrimaryNav = createStackNavigator({
FilterScreen: { screen: FilterScreen },
UseCouponScreen: { screen: UseCouponScreen },
DetailNotificationScreen: { screen: DetailNotificationScreen },
ChatScreen: { screen: ChatScreen },
......
App/Themes/Images.js
View file @ a20fb561
......@@ -32,12 +32,15 @@ const images = {
urutan: require('../Images/Icons/urutan.png'),
radioOff: require('../Images/Icons/radiobutton-off.png'),
radioOn: require('../Images/Icons/radiobutton-on.png'),
radioButtonOff: require('../Images/Icons/radio-off.png'),
radioButtonOn: require('../Images/Icons/radio-on.png'),
berhasil: require('../Images/Icons/berhasil.png'),
add: require('../Images/Icons/add.png'),
map: require('../Images/Icons/map.png'),
read: require('../Images/Icons/read.png'),
mapgray: require('../Images/Icons/mapgray.png'),
filter: require('../Images/Icons/filter.png'),
dropdown: require('../Images/Icons/dropdown.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'),
......
package.json
View file @ a20fb561
......@@ -32,6 +32,7 @@
"@react-native-firebase/messaging": "^7.4.2",
"@react-navigation/bottom-tabs": "^5.6.1",
"@react-navigation/native": "^5.6.1",
"accordion-collapse-react-native": "^0.3.1",
"apisauce": "^1.1.1",
"curved-bottom-navigation-bar": "^1.0.5",
"format-json": "^1.0.3",
......@@ -79,6 +80,7 @@
"redux-persist": "^5.10.0",
"redux-saga": "^1.1.3",
"reduxsauce": "^1.1.1",
"rn-range-slider": "1.3.0",
"rn-wave-bottom-bar": "^1.0.2",
"seamless-immutable": "^7.1.4"
},
......
yarn.lock
View file @ a20fb561
......@@ -2360,6 +2360,13 @@ accepts@~1.3.5, accepts@~1.3.7:
mime-types "~2.1.24"
negotiator "0.6.2"
accordion-collapse-react-native@^0.3.1:
version "0.3.1"
resolved "https://registry.yarnpkg.com/accordion-collapse-react-native/-/accordion-collapse-react-native-0.3.1.tgz#64307b77c9fbfc93c4eb3458c187918cee5cda95"
integrity sha512-aZ1VfA4MHmysiutidIejzWsRS7iWgAHV8OCk6hfHrm0DIOVlGyVmsmVJroXjkpjHpFBxVIn8BoAEMDN2ehkATw==
dependencies:
lodash.get "4.4.2"
acorn-globals@^4.1.0:
version "4.3.4"
resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7"
......@@ -8872,6 +8879,11 @@ lodash.cond@^4.3.0:
resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
integrity sha1-9HGh2khr5g9quVXRcRVSPdHSVdU=
lodash.get@4.4.2:
version "4.4.2"
resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
lodash.isequal@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
......@@ -12080,6 +12092,11 @@ rn-host-detect@1.2.0:
resolved "https://registry.yarnpkg.com/rn-host-detect/-/rn-host-detect-1.2.0.tgz#8b0396fc05631ec60c1cb8789e5070cdb04d0da0"
integrity sha512-btNg5kzHcjZZ7t7mvvV/4wNJ9e3MPgrWivkRgWURzXL0JJ0pwWlU4zrbmdlz3HHzHOxhBhHB4D+/dbMFfu4/4A==
rn-range-slider@1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/rn-range-slider/-/rn-range-slider-1.3.0.tgz#8cebcb26645e8c6e6aff602a7d66ab75a687e75d"
integrity sha512-iSrr/jX2igPg7RtU9EbAJ6xklgJ8C+jh58pwwtXqvrGHeO6HUj2QzOTMJDecW9Y6PFI07R9sKKH1oLnh7v7bxA==
rn-wave-bottom-bar@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/rn-wave-bottom-bar/-/rn-wave-bottom-bar-1.0.2.tgz#03acb00a431a7db02be0f1f1cc81e2249c1c90c6"
......
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