311 lines
11 KiB
JavaScript
311 lines
11 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
View,
|
|
Alert,
|
|
Image,
|
|
Linking,
|
|
Text,
|
|
TouchableOpacity,
|
|
AppState,
|
|
Platform,
|
|
} from 'react-native';
|
|
import { saveUserInfo } from "../../redux/actions/AppUserInfoActions";
|
|
import { connect } from 'react-redux';
|
|
import Geolocation from '@react-native-community/geolocation';
|
|
import Theme from '../../components/theme.style.js';
|
|
import NetInfo from "../../components/netstatus";
|
|
import CustomHeader from '../../components/header.js';
|
|
import Elements from '../../components/elements.js';
|
|
import DB from '../../components/storage';
|
|
import REQUEST from '../../components/api';
|
|
import REQUEST_POST_PAY from '../../components/api/postpayapi';
|
|
import Assets from '../../components/assets.manager.js';
|
|
import MapFragment from '../payatpump/fragments/map.js';
|
|
import PanelFragment from '../payatpump/fragments/stationpanel.js';
|
|
import SearchFragment from '../payatpump/fragments/searchbar.js';
|
|
import CustomSafeArea from '../../components/safeArea.component';
|
|
import netstatus from '../../components/netstatus';
|
|
|
|
class Payatpump extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
this.dataLoader = null
|
|
}
|
|
|
|
state = {
|
|
connected: false,
|
|
loading: true,
|
|
error: false,
|
|
session: null,
|
|
map: null,
|
|
stations: [],
|
|
markers: [],
|
|
searchValue: "",
|
|
showpanel: null,
|
|
mylocation: {},
|
|
isSearched: false,
|
|
initialRegion: {
|
|
latitude: 14.599512,
|
|
longitude: 120.984222,
|
|
latitudeDelta: 15,
|
|
longitudeDelta: 11,
|
|
},
|
|
appState: AppState.currentState,
|
|
permissionLocation: false
|
|
}
|
|
watchID = null
|
|
|
|
componentDidMount() {
|
|
this._isMounted = true;
|
|
this.appStateSubscription = AppState.addEventListener(
|
|
'change',
|
|
this._handleAppStateChange
|
|
)
|
|
this.startTrackStation()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.appStateSubscription.remove();
|
|
}
|
|
|
|
refreshProfileToken = async () => {
|
|
const SESSION = await DB.session()
|
|
this.props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number }).then(res => {
|
|
DB.updateProfile(res, function(){}, function(error){})
|
|
})
|
|
}
|
|
|
|
_handleAppStateChange = (nextAppState) => {
|
|
if(this.state.loading) return;
|
|
if(this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
|
|
this.initLocationConfiguration();
|
|
}
|
|
|
|
this.setState({ appState: nextAppState });
|
|
|
|
}
|
|
|
|
fetch = async (location, successCallback, errorCallback) => {
|
|
if(!location) return false
|
|
|
|
const SESSION = await DB.session();
|
|
const USER_PROFILE = await DB.profile();
|
|
|
|
this.setState({ loading: true });
|
|
|
|
REQUEST("getPercentageRadius", 'get', {
|
|
'Authorization': SESSION.token
|
|
}, {}, {}, (res) => {
|
|
if(res.status == 1 && res.data) {
|
|
REQUEST_POST_PAY('getStores', 'post', {
|
|
token: USER_PROFILE.data.auth_p97,
|
|
language: 'en-US'
|
|
}, {
|
|
latitude: location.latitude,
|
|
longitude: location.longitude,
|
|
radiusMeters: res?.data?.radius
|
|
}, {}, async (result) => {
|
|
successCallback(result)
|
|
}, (error) => {
|
|
errorCallback(error)
|
|
})
|
|
}
|
|
}, (err) => {
|
|
this.setState({ loading: false })
|
|
}, "Percentage Radius", "Fetch")
|
|
}
|
|
|
|
renderMarkers = (data) => {
|
|
if(data.length > 0) {
|
|
let datamap = data.map((station, index) => {
|
|
return {
|
|
_id: index,
|
|
latlng: {latitude: station.geoLocation.latitude, longitude: station.geoLocation.longitude},
|
|
station_uuid: station.storeId,
|
|
station_number: station.storeNumber,
|
|
name: station.storeName,
|
|
address: Object.entries(station.address).map(([key, value]) => `${value}`).join(',').toString(),
|
|
longitude: station.geoLocation.longitude,
|
|
latitude: station.geoLocation.latitude,
|
|
store: station
|
|
}
|
|
})
|
|
this.setState({ markers: datamap })
|
|
}
|
|
}
|
|
|
|
goToRegion = (data) => {
|
|
if(!data) return
|
|
let initialRegion = {
|
|
latitude: parseFloat(data.latitude),
|
|
longitude: parseFloat(data.longitude),
|
|
latitudeDelta: 0.0043,
|
|
longitudeDelta: 0.0034
|
|
}
|
|
this.setState({ initialRegion: initialRegion })
|
|
}
|
|
|
|
navigate = (data) => {
|
|
netstatus.netstatus(state => {
|
|
if(!state) {
|
|
Elements.nointernet2();
|
|
} else {
|
|
this.props.navigation.navigate('PayatpumpDetails', {markers: this.state.markers, data: data, theme: this.props.app_theme, onBackPress: () => this.initLocationConfiguration(), location: this.state.mylocation})
|
|
}
|
|
})
|
|
}
|
|
|
|
startTrackStation = () => {
|
|
NetInfo.netstatus(isConnected => {
|
|
if(isConnected){
|
|
this.initLocationConfiguration()
|
|
this.refreshProfileToken()
|
|
} else {
|
|
Elements.nointernet2(this.props)
|
|
}
|
|
})
|
|
}
|
|
|
|
initLocationConfiguration = () => {
|
|
this.setState({ connected: true })
|
|
|
|
Geolocation.setRNConfiguration({
|
|
locationProvider: 'playServices',
|
|
authorizationLevel: 'always'
|
|
});
|
|
|
|
this.init()
|
|
}
|
|
|
|
init = () => {
|
|
this.setState({ permissionLocation: true })
|
|
|
|
this.setState({ loading: true })
|
|
this.setState({ permissionLocation: true });
|
|
|
|
Geolocation.getCurrentPosition(latestLocation => {
|
|
if(latestLocation.coords != undefined) {
|
|
const coords = {latitude: latestLocation.coords.latitude, longitude: latestLocation.coords.longitude}
|
|
this.setState({ mylocation: coords, error: false })
|
|
this.goToRegion(coords)
|
|
this.fetch(coords, response => {
|
|
// if(response.success && response.response.data.length > 0){
|
|
// this.setState({ showpanel: true, stations: response.response.data, loading: false })
|
|
// this.renderMarkers(response.response.data)
|
|
// this.goToRegion({longitude: response.response.data[0].geoLocation.longitude, latitude: response.response.data[0].geoLocation.latitude})
|
|
// } else if(response.success && response.response.data.length === 0) {
|
|
// this.setState({ loading: false })
|
|
// }
|
|
if(response.status && response.data.data.length > 0){
|
|
this.setState({ showpanel: true, stations: response.data.data, loading: false })
|
|
this.renderMarkers(response.data.data)
|
|
this.goToRegion({longitude: response.data.data[0].geoLocation.longitude, latitude: response.data.data[0].geoLocation.latitude})
|
|
} else if(response.status && response.response.data.data.length === 0) {
|
|
this.setState({ loading: false })
|
|
}
|
|
}, err => {
|
|
Alert.alert("Information", `\n${err.message}`);
|
|
this.setState({ error: true, loading: false })
|
|
})
|
|
}
|
|
}, err => {
|
|
return Alert.alert("Information", '\n' + "Location GPS is disabled.", [{text: "OK", onPress: () => this.setState({ loading: false, permissionLocation: false })}])
|
|
})
|
|
}
|
|
|
|
openLink = () => {
|
|
Platform.select({
|
|
ios: Linking.openURL("App-Prefs:Privacy&path=LOCATION"),
|
|
android: Linking.sendIntent("android.settings.LOCATION_SOURCE_SETTINGS")
|
|
})
|
|
}
|
|
|
|
render() {
|
|
if(!this.state.connected && !this.state.loading){
|
|
return (
|
|
<CustomSafeArea>
|
|
<CustomHeader title="Nearest Stations" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
|
|
<Elements.nointernet
|
|
message="No internet found. Please check your internet connection."
|
|
buttonText="Try Again"
|
|
onPress={() => this.startTrackStation()}
|
|
/>
|
|
</CustomSafeArea>
|
|
)
|
|
}
|
|
|
|
if(!this.state.permissionLocation && !this.state.loading){
|
|
return (
|
|
<CustomSafeArea>
|
|
<CustomHeader title="Nearest Stations" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
|
|
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', marginHorizontal: 8 }}>
|
|
<Image source={Assets.icons.no_connection} style={{ width: 150, height: 120 }} />
|
|
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 15, padding: 15, textAlign: 'center' }}>This function needs your permission, please allow access.</Text>
|
|
<TouchableOpacity onPress={this.openLink}
|
|
style={{ padding: 15, backgroundColor: Theme.colors.primary, borderRadius: 5 }}>
|
|
<Text style={{ color: Theme.colors.white, fontSize: 15, textAlign: 'center' }}>Allow on settings</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</CustomSafeArea>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<CustomSafeArea>
|
|
<CustomHeader title="Nearest Stations" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
|
|
<View style={{flex: 1, backgroundColor: 'green'}}>
|
|
<MapFragment
|
|
region={this.state.initialRegion}
|
|
markers={this.state.markers}
|
|
onMapReady={() => this.goToRegion(this.state.stations.length > 0 ? this.state.stations[0] : null)}
|
|
onMarkerClick={(data) => this.navigate(data)}
|
|
/>
|
|
<SearchFragment
|
|
value={this.state.searchValue}
|
|
clear={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={(e) => this.setState({ searchValue: e.target.value })}
|
|
onFocus={() => {
|
|
this.props.navigation.navigate("PayatpumpStationSearch", {
|
|
value: this.state.searchValue,
|
|
stations: this.state.stations,
|
|
navigate: (data) => this.navigate(data)
|
|
})
|
|
}}
|
|
/>
|
|
</View>
|
|
<PanelFragment
|
|
visible={this.state.showpanel}
|
|
data={this.state.stations}
|
|
loading={this.state.loading}
|
|
isSearched={this.state.isSearched}
|
|
onClick={(data) => this.navigate(data)}
|
|
onUpdateFavorite={(index, update) => {
|
|
let updatedStations = this.state.stations
|
|
updatedStations[index].favorite = update
|
|
this.setState({ loading: true, stations: updatedStations })
|
|
}}
|
|
error={this.state.error && this.state.stations.length == 0}
|
|
onError={() => this.initLocationConfiguration()}/>
|
|
</CustomSafeArea>
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
userinfo: state.appUserInfoReducer.userinfo,
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
const mapDispatchToProps = {
|
|
saveUserInfo
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Payatpump) |