108 lines
3.8 KiB
JavaScript
108 lines
3.8 KiB
JavaScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import {ScrollView, SafeAreaView, Text, View, TouchableOpacity, Platform} from 'react-native';
|
|
import {Divider} from 'react-native-elements';
|
|
import Theme from '../../components/theme.style.js';
|
|
import CustomHeader from '../../components/header.js';
|
|
import Icon from '../../components/icons.js';
|
|
import DB from '../../components/storage';
|
|
import REQUEST from '../../components/api';
|
|
|
|
import SearchFragment from './fragments/searchbar.js';
|
|
|
|
class PayatpumpStationSearch extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
searchValue: this.props.route.params.value || "",
|
|
cities: "",
|
|
cityDropDown: []
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.init()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
init = async () => {
|
|
let SESSION = await DB.session()
|
|
REQUEST('station_search', 'post', {
|
|
Authorization: SESSION.token
|
|
}, {}, {}, function(res){
|
|
setcities(res.data)
|
|
},function(error){
|
|
console.log(error)
|
|
})
|
|
}
|
|
|
|
search = (value) => {
|
|
let result = []
|
|
for(var x=0;x<this.state.cities.length;x++){
|
|
let name = this.state.cities[x].name.toLowerCase()
|
|
if(name.includes(value.toLowerCase()) && this.state.cities[x].count > 0) result.push(cities[x])
|
|
}
|
|
this.setState({ searchValue: value, cityDropDown: result })
|
|
}
|
|
|
|
renderDropDown = () => {
|
|
return this.state.cityDropDown.map((city, i) => {
|
|
return (
|
|
<TouchableOpacity onPress={() => {
|
|
this.props.route.params.onBackPress(this.state.searchValue, city, false)
|
|
this.props.navigation.goBack()
|
|
}} key={i} style={{flex: 1}}>
|
|
<Text style={{ padding: 20, color: Theme.colors.textPrimary}}>{city.name.toUpperCase()}</Text>
|
|
<Divider />
|
|
</TouchableOpacity>
|
|
)
|
|
})
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<SafeAreaView>
|
|
<View style={{flex: 1}}>
|
|
<CustomHeader title="" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
|
|
<View style={{flex: 1, flexDirection: 'column', height: Theme.screen.h, width: Theme.screen.w, top: Platform.OS == 'ios' ? 50 : 0}}>
|
|
<SearchFragment
|
|
autofocus={true}
|
|
value={this.state.searchValue}
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
searchBackgroundColor={this.props.app_theme?.theme.colors.border}
|
|
onChangeText={(value) => this.search(value)}
|
|
onClear={() => this.setState({ searchValue: "", cityDropDown: [] })}/>
|
|
<TouchableOpacity onPress={() => {
|
|
this.props.route.params.onBackPress(this.state.searchValue, {}, true)
|
|
this.props.navigation.goBack()
|
|
}}
|
|
style={{ flexDirection: 'row', height: 60, padding: 15, marginTop: 80}}>
|
|
<Icon.Ionicons name={"md-heart"} size={28} color={"red"} />
|
|
<Text style={{fontFamily: 'arial', padding: 5, marginLeft: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontSize: 17}}>My Favorites</Text>
|
|
</TouchableOpacity>
|
|
<Divider />
|
|
<View style={{flex: 0, height: Theme.screen.h / 1.5, width: '100%'}}>
|
|
<ScrollView style={{flex: 0}}>
|
|
{this.state.cityDropDown.length > 0 && this.state.searchValue != "" ? this.renderDropDown() : null}
|
|
</ScrollView>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(PayatpumpStationSearch) |