unioil-loyalty-rn-app/app/screens/main/home.js

1345 lines
46 KiB
JavaScript

import * as React from 'react';
import { SafeAreaView, View, Text, ScrollView, RefreshControl, Platform, AppState } from 'react-native';
import { BackHandler, ToastAndroid } from 'react-native';
import { connect } from "react-redux";
import { saveUserInfo } from "../../redux/actions/AppUserInfoActions";
import { saveWhatshot, savePromos, saveGuestWhatshot, saveGuestPromos } from "../../redux/actions/AppWhatshotAndPromosActions";
import NetInfo from "../../components/netstatus"
import CustomHeader from '../../components/header.js';
import EmptyHeader from '../../components/header/empty';
import GuestHeader from '../../components/header/guest';
import Theme from '../../components/theme.style.js';
import Elements from '../../components/elements.js';
import REQUEST from '../../components/api/';
import DB from '../../components/storage/';
import RNLocation from 'react-native-location';
import messaging from '@react-native-firebase/messaging';
import { SliderBox } from "react-native-image-slider-box";
import CustomSafeArea from '../../components/safeArea.component';
var PushNotification = require("react-native-push-notification");
class Home extends React.PureComponent {
constructor(props) {
super(props)
this.navigate = (screen, params) => { props.navigation.navigate(screen, params) }
this.displayBanner = false
}
state = {
loading: true,
refresh: false,
connected: false,
infodialog: true,
promogps: [],
showpromogps: false,
promogpsindex: 0,
_carousel: "",
promos: (this.props.whats_hot != undefined && this.props.whats_hot.length > 0) ? this.props.whats_hot : [],
whatsHot: (this.props.promos != undefined && this.props.promos.length > 0) ? this.props.promos : [],
activeSlide: 0,
session: null,
userProfile: {},
notifications: [],
notificationindex: 0,
isGuest: false,
coordinates: undefined,
appState: AppState.currentState
}
componentDidMount() {
AppState.addEventListener('change', this._handleAppStateChange)
this.initLocationConfiguration()
this.init()
}
componentWillUnmount() {
AppState.removeEventListener('change', this._handleAppStateChange)
}
_handleAppStateChange = (nextAppState) => {
if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
// this.getPromoDiscountNotifications()
}
this.setState({ appState: nextAppState })
}
initLocationConfiguration = () => {
RNLocation.configure({
// iOS Only
activityType: "other",
allowsBackgroundLocationUpdates: false,
headingFilter: 1, // Degrees
headingOrientation: "portrait",
pausesLocationUpdatesAutomatically: false,
showsBackgroundLocationIndicator: false,
})
RNLocation.requestPermission({
ios: "whenInUse", // or 'always'
}).then(granted => {
if(granted) {
this.locationUpdate()
}
})
}
locationUpdate = () => {
RNLocation.getLatestLocation({ timeout: 20000 }).then(latestLocation => {
if(latestLocation != undefined) {
this.setState({ coordinates: { longitude: latestLocation.longitude, latitude: latestLocation.latitude } })
}
})
}
registerToken = async () => {
NetInfo.netstatus(async isConnected => {
if(isConnected) {
const USERPROFILE = await DB.profile()
const fcmToken = await DB.get('fcmToken')
const isTokenRegister = await DB.get('is_token_register')
if(fcmToken == undefined || fcmToken == null) return
if(isTokenRegister == 'true') return;
REQUEST("fcm_register", "post", {}, {}, {
token: fcmToken,
c_number: USERPROFILE.data.card_number
}, function(res){
console.log(res)
let isRegister = res.newFcmToken.c_number != undefined && res.newFcmToken.token != undefined ? 'true' : 'false'
DB.set('is_token_register', isRegister, onSuccess => {}, onError => {})
}, function(error){
DB.set('is_token_register', 'false', onSuccess => {}, onError => {})
console.log(error)
})
}
})
}
init = () => {
NetInfo.netstatus(async isConnected => {
if(isConnected) {
this.registerToken()
const isGuest = await DB.get('is_guest')
if(isGuest == 'true') {
this.loadIsGuest()
return
}
if(this.state.refresh) {
this.loadMainDetails()
this.setState({ refresh: false })
} else {
if(this.props.userinfo == undefined && this.props.userinfo == null) {
this.loadUserProfile()
} else {
this.setState({ userProfile: this.props.userinfo })
}
if(this.props.whats_hot == undefined && this.props.promos == undefined) {
this.loadMainDetails()
} else {
this.setState({ whatsHot: this.props.whats_hot, promos: this.props.promos, loading: false })
}
}
this.loadNotifications()
} else {
this.setState({ loading: false })
Elements.nointernet2()
}
})
this.initNotifications()
}
initNotifications = () => {
this.unsubscribe = messaging().onMessage(async remoteMessage => {
setTimeout(async () => {
if(Platform.OS == 'ios'){
let allnotifs = await DB.get("notifications")
let notifs = allnotifs ? JSON.parse(allnotifs) : notifications
this.setState({ notifications: notifs, notificationindex: 0 })
console.log("A new notification has recieved on home page", notifications, allnotifs)
}else{
let allnotifs = await DB.get("notifications")
let notifs = allnotifs ? JSON.parse(allnotifs) : notifications
this.setState({ notifications: notifs, notificationindex: 0 })
console.log("A new notification has recieved on home page", notifications)
}
}, 300);
})
}
loadUserProfile = async () => {
const SESSION = await DB.session()
this.props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number }).then(res => {
this.setState({ userProfile: res })
DB.updateProfile(res, function(){}, function(error){})
})
}
loadGetCurrentLocationPromo = (SESSION, successCallback, errorCallback) => {
if(this.state.coordinates == undefined) return
const { longitude, latitude } = this.state.coordinates
REQUEST("promo_gps", "post", {
Authorization: SESSION.token
}, {}, {
lcard_uuid: SESSION.user.lcard_uuid,
longitude: longitude,
latitude: latitude
}, function(res){
successCallback(res.data)
}, function(error){
errorCallback(error)
})
}
loadMainDetails = async () => {
const SESSION = await DB.session()
const USERPROFILE = await DB.profile()
try{
this.props.saveWhatshot({ token: SESSION.token, lcard_uuid: `lcard_uuid=${SESSION.user.lcard_uuid}` }).then(res => {
this.setState({ whatsHot: res })
})
.catch(error => {})
this.props.savePromos({ token: SESSION.token, lcard_uuid: `lcard_uuid=${SESSION.user.lcard_uuid}` }).then(res => {
this.setState({ promos: res })
})
.catch(error => {})
this.setState({ session: SESSION, userProfile: USERPROFILE, loading: false })
} catch(error) {
this.setState({ loading: false })
}
}
loadIsGuest = async () => {
this.setState({ isGuest: true, loading: false })
this.props.saveGuestWhatshot().then(res => {
this.setState({ whatsHot: res })
})
.catch(error => {})
this.props.saveGuestPromos().then(res => {
this.setState({ promos: res })
})
.catch(error => {})
this.setState({ userProfile: {} })
}
onBackPress = () => {
let listener = setInterval(() => {
backPressDuration += 1
if(backPressDuration >= 15){
backPressCount = 0
backPressDuration = 0
clearInterval(listener)
}
}, 100)
backPressCount += 1
console.log("Back Press Count", backPressCount, typeof backPressCount)
if(backPressCount == 2){
backPressCount = 0
backPressDuration = 0
BackHandler.exitApp()
return false
}else{
ToastAndroid.show("Press back again to exit.", ToastAndroid.SHORT)
return true
}
}
softLoad = async () => {
NetInfo.netstatus(async isConnected => {
if(isConnected){
this.setState({ loading: true })
if(this.state.isGuest == 'true'){
this.loadIsGuest()
return
}
const SESSION = await DB.session()
this.props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number }).then(res => {
this.setState({ userProfile: res, loading: false })
DB.updateProfile(res, function(){}, function(error){})
})
.catch(error => {})
}else{
this.setState({ loading: false })
Elements.nointernet2()
}
})
}
loadNotifications = async () => {
if(!this.displayBanner) {
const SESSION = await DB.session()
this.loadGetCurrentLocationPromo(SESSION, success => {
this.setState({ promogps: success, showpromogps: true, promogpsindex: 0 })
this.displayBanner = true
}, error => {
console.log(error)
this.setState({ showpromogps: false })
this.displayBanner = false
})
}
// let timeout = setTimeout(() => {
// this.getNotifications()
// clearTimeout(timeout)
// }, 3000);
}
getNotifications = async () => {
let allnotifs = await DB.get("notifications")
let notifs = allnotifs ? JSON.parse(allnotifs) : this.state.notifications
this.setState({ notifications: notifs })
}
getPromoDiscountNotifications = async () => {
const USERPROFILE = await DB.profile()
const fcmToken = await DB.get('fcmToken')
this.setState({ notifications: [], notificationindex: 0 })
REQUEST("account_fcm", "get",
{}, {
noID: true,
value: `${USERPROFILE.data.card_number}/${fcmToken}`
}, {},
async (res) => {
let notifications = JSON.parse(res.notifs)
if(notifications.length > 0) {
let newNotifications = notifications.map((notif,index) => {
notif.visible = true
return notif
})
let jsonNotifs = JSON.stringify(newNotifications)
await DB.set('notifications', jsonNotifs, onSuccess => console.log(onSuccess), onError => console.log(onError))
}
this.setState({ notifications: notifications, notificationindex: 0 })
}, function(error){
console.log(error)
})
}
clearNotificationPromotionBanner = async (notificationID, lastFcmToken) => {
const USERPROFILE = await DB.profile()
REQUEST("account_fcm", "put",
{}, {}, {
notif_id: notificationID,
c_number: USERPROFILE.data.card_number,
token: lastFcmToken
},
function(res){
console.log(res)
}, function(error){
console.log(error)
})
}
renderPromos() {
return this.state.promos.map((promo, index) => {
return (
<Elements.card
key={index}
disabled={0}
title={promo.title || 'Unioil'}
onPress={() => {
this.navigate('PromoDetails', {data: promo, type: "promo", onBackPress: this.softLoad});
}}
image={{uri: promo.image}} />)
})
}
renderPromoGPS() {
if(!this.state.promogps || this.state.promogps.length == 0) return null
return this.state.promogps.map((promo, i) => {
return <Elements.promoGPS
key={i}
visible={this.state.showpromogps}
title={promo.title}
image={{uri: promo.image}}
onDismiss={() => {
this.setState({ promogpsindex: this.state.promogpsindex + 1, showpromogps: false })
// this.getNotifications()
}}
onOpen={() => {
this.setState({ showpromogps: false })
this.navigate('PromoDetails', {data: promo, type: "promogps", onBackPress: this.softLoad});
}}
/>
})
}
updateNotifications = async (index) => {
let nfcopy = this.state.notifications
nfcopy[index].visible = false
this.setState({ notifications: nfcopy, notificationindex: this.state.notificationindex + 1 })
await DB.set("notifications", JSON.stringify(nfcopy), (res) => console.log(res), (e) => console.log(e))
const fcmToken = await DB.get('fcmToken')
this.clearNotificationPromotionBanner(nfcopy[index].id, fcmToken)
}
renderNotifications() {
if(!this.state.notifications || this.state.notifications.length == 0) return null
return this.state.notifications.map((notif, index) => this.state.notificationindex === index &&
<Elements.notification
key={index}
visible={notif.visible}
title={notif.subject}
message={notif.content}
onClose={async () => {
this.updateNotifications(index)
}}
onDismiss={async () => {
this.updateNotifications(index)
}}
/>
)
}
render() {
return (
<View style={{flex: 1, height: '100%'}}>
<CustomSafeArea>
{this.renderNotifications()}
<Elements.loader visible={this.state.loading} />
{this.state.isGuest ? <GuestHeader
navigation={this.props.navigation}
reload={this.loadIsGuest}
/> : null}
{this.state.loading && !this.state.isGuest ? <EmptyHeader
navigation={this.props.navigation}
reload={this.softLoad}
/> : !this.state.isGuest ?
<CustomHeader
title=""
banner={true}
menu={true}
navigation={this.props.navigation}
reload={this.softLoad}
/> : null }
<ScrollView
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
contentContainerStyle={{
flexGrow: 1,
padding: 15
}}
refreshControl={
<RefreshControl refreshing={this.state.loading} onRefresh={() => {
this.setState({ refresh: true })
this.init()
}} />
}>
{this.state.whatsHot.length > 0 && (<Text style={{color: 'gray', fontFamily: 'Arial', fontWeight: 'bold', marginBottom: 0}}>WHAT'S HOT?</Text>)}
<View style={{width: '100%', height: Theme.screen.h / 3.29, padding: 20, paddingHorizontal: 15, justifyContent: 'center', alignItems: 'center'}}>
<SliderBox
images={this.state.whatsHot}
autoplay={true}
circleLoop={true}
resizeMode={"stretch"}
dotColor={Theme.colors.primary}
inactiveDotColor={Theme.colors.gray}
paginationBoxVerticalPadding={0}
paginationBoxStyle={{bottom: -15}}
parentWidth={Theme.screen.w - 40}
ImageComponentStyle={{borderRadius: 10}}
/>
</View>
{this.state.promos.length > 0 && (<Text style={{color: 'gray', fontFamily: 'Arial', fontWeight: 'bold', marginBottom: 0}}>PROMOS</Text>)}
<View style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap', width: '100%', padding: 0, marginTop: 15, marginBottom: 15, justifyContent: 'center'}}>
{this.renderPromos()}
</View>
{this.renderPromoGPS()}
</ScrollView>
</CustomSafeArea>
</View>
)
}
}
const mapStateToProps = (state) => {
return {
userinfo: state.appUserInfoReducer.userinfo,
token: state.appUserInfoReducer.token,
whats_hot: state.appWhatshotAndPromosReducer.whats_hot,
promos: state.appWhatshotAndPromosReducer.promos
}
}
const mapDispatchToProps = {
saveWhatshot,
savePromos,
saveGuestWhatshot,
saveGuestPromos,
saveUserInfo
}
export default connect(mapStateToProps, mapDispatchToProps)(Home)
// const Home = (props) => {
// const navigate = (screen, params) => { props.navigation.navigate(screen, params) }
// const whats_hot = (props.whats_hot != undefined && props.whats_hot.length > 0) ? props.whats_hot : []
// const whats_promos = (props.promos != undefined && props.promos.length > 0) ? props.promos : []
// const [loading, setloading] = useState(true)
// const [refresh, setRefresh] = useState(false)
// const [connected, setconnection] = useState(false)
// const [infodialog, setinfodialog] = useState(true)
// const [promos, setpromos] = useState(whats_promos)
// const [promogps, setpromogps] = useState([])
// const [showpromogps, setshowpromogps] = useState(false)
// const [promogpsindex, setpromogpsindex] = useState(null)
// const [_carousel, setcarousel] = useState("")
// const [whatsHot, setwhatsHot] = useState(whats_hot)
// const [activeSlide, setactiveSlide] = useState(0)
// const [session, setsession] = useState(null)
// const [userProfile, setUserProfile] = useState({})
// const [notifications, setnotifications] = useState([])
// const [isGuest, setisGuest] = useState(false)
// var backPressCount = 0
// var backPressDuration = 0
// const loadUserProfile = async () => {
// const SESSION = await DB.session()
// props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number }).then(res => {
// setUserProfile(res)
// })
// }
// const load = async () => {
// const SESSION = await DB.session()
// const USERPROFILE = await DB.profile()
// const isGuest = await DB.get('is_guest')
// if(isGuest == 'true'){
// loadIsGuest()
// return
// }
// try{
// await setsession(SESSION)
// await setUserProfile(USERPROFILE)
// props.saveWhatshot({ token: SESSION.token, lcard_uuid: `lcard_uuid=${SESSION.user.lcard_uuid}` }).then(res => {
// setwhatsHot(res)
// })
// props.savePromos({ token: SESSION.token, lcard_uuid: `lcard_uuid=${SESSION.user.lcard_uuid}` }).then(res => {
// setpromos(res)
// })
// Geolocation.getCurrentPosition(
// info => {
// REQUEST("promo_gps", "post", {
// Authorization: SESSION.token
// }, {}, {
// lcard_uuid: SESSION.user.lcard_uuid,
// longitude: info.coords.longitude,
// latitude: info.coords.latitude
// }, function(res){
// setpromogps(res.data)
// setshowpromogps(true)
// }, function(error){
// console.log(error)
// })
// },
// error => console.log(error)
// )
// await setloading(false)
// } catch(error) {
// setloading(false)
// }
// loadNotifications()
// }
// const loadIsGuest = async () => {
// setisGuest(true)
// setloading(false)
// await REQUEST("promos", "get", {}, {}, {},
// function(res){
// if(res.status == 1 && res.data.length > 0){
// let wh = []
// for(var x=0;x<res.data.length;x++){
// if(res.data[x].image.includes("mobiletestbuckethttps")){
// wh.push(res.data[x].image.replace("https://s3-ap-southeast-1.amazonaws.com/unioil.mobiletestbucket", ""))
// }else{
// wh.push(res.data[x].image)
// }
// }
// setwhatsHot(wh)
// console.log("WHATS HOT", wh)
// }else{
// console.log(res.message, res.data)
// }
// }, function(error){
// console.log(error)
// })
// await REQUEST("new_promos", "get", {}, {}, {},
// function(res){
// if(res.status == 1 && res.data.length > 0){
// setpromos(res.data)
// }else{
// console.log(res.message, res.data)
// }
// }, function(error){
// console.log(error)
// })
// await setUserProfile({})
// }
// const init = () => {
// NetInfo.netstatus(isConnected => {
// if(isConnected) {
// if(refresh) {
// load()
// setRefresh(false)
// } else {
// if(props.userinfo == undefined && props.userinfo == null) {
// loadUserProfile()
// } else {
// setUserProfile(props.userinfo)
// }
// if(props.whats_hot == undefined && props.promos == undefined) {
// load()
// } else {
// setloading(false)
// }
// }
// } else {
// setloading(false)
// Elements.nointernet2()
// }
// })
// }
// const onBackPress = () => {
// let listener = setInterval(() => {
// backPressDuration += 1
// if(backPressDuration >= 15){
// backPressCount = 0
// backPressDuration = 0
// clearInterval(listener)
// }
// }, 100)
// backPressCount += 1
// console.log("Back Press Count", backPressCount, typeof backPressCount)
// if(backPressCount == 2){
// backPressCount = 0
// backPressDuration = 0
// BackHandler.exitApp()
// return false
// }else{
// ToastAndroid.show("Press back again to exit.", ToastAndroid.SHORT)
// return true
// }
// }
// useEffect(() => {
// BackHandler.addEventListener('hardwareBackPress', onBackPress)
// return () => {
// BackHandler.removeEventListener('hardwareBackPress', onBackPress)
// }
// }, [])
// const softLoad = async () => {
// NetInfo.fetch().then(async state => {
// console.log("Connection type", state.type);
// console.log("Is connected?", state.isConnected);
// if(state.isConnected){
// setloading(true)
// if(isGuest == 'true'){
// loadIsGuest()
// return
// }
// const SESSION = await DB.session()
// await REQUEST("user_profile", "get", {
// Authorization: SESSION.token,
// card_number: SESSION.user.card_number
// }, {}, {}, function(data){
// console.log("FETCH USER PROFILE");
// if(data.status == 1){
// DB.updateProfile(data, function(){
// console.log("USER PROFILE SAVED! ")
// setUserProfile(data)
// }, function(error){
// console.log("Error saving profile", error)
// })
// }
// setloading(false)
// }, function(error){
// setloading(false)
// console.log(error)
// })
// }else{
// setloading(false)
// Elements.nointernet2()
// }
// })
// }
// useEffect(() => {
// init()
// console.log("LOAD DATA");
// }, [])
// const loadNotifications = async () => {
// let allnotifs = await DB.get("notifications")
// let notifs = allnotifs ? JSON.parse(allnotifs) : notifications
// await setnotifications(notifs)
// }
// useEffect(() => {
// const unsubscribe = messaging().onMessage(async remoteMessage => {
// setTimeout(async () => {
// if(Platform.OS == 'ios'){
// let allnotifs = await DB.get("notifications")
// let notifs = allnotifs ? JSON.parse(allnotifs) : notifications
// await setnotifications(notifs)
// console.log("A new notification has recieved on home page", notifications, allnotifs)
// }else{
// let allnotifs = await DB.get("notifications")
// let notifs = allnotifs ? JSON.parse(allnotifs) : notifications
// await setnotifications(notifs)
// console.log("A new notification has recieved on home page", notifications)
// }
// }, 300);
// })
// return unsubscribe;
// }, []);
// const validate = async (tkn) => {
// const SESSION = await DB.session()
// if(!SESSION.token){
// alert("You are not logged in!");
// setloading(false)
// props.navigation.navigate("Login")
// }
// }
// const renderwhatsHot = ({item, index}) => {
// return (
// <View key={index} style={{flex: 1}}>
// <Image source={item.image} style={{width: '100%', height: Theme.screen.h / 2.8 - 60, borderRadius: 20, resizeMode: 'stretch'}} />
// </View>)
// }
// const renderPromos = () => {
// return promos.map((promo, index) => {
// return (
// <Elements.card
// key={index}
// disabled={0}
// title={promo.title || 'DIXIE'}
// onPress={() => {
// console.log("CLICKED!!!")
// navigate('PromoDetails', {data: promo, type: "promo", onBackPress: softLoad});
// }}
// image={{uri: promo.image}} />)
// })
// }
// const renderPromoGPS = () => {
// if(!promogps || promogps.length == 0) return null
// return promogps.map((promo, i) => {
// return <Elements.promoGPS
// key={i}
// visible={showpromogps}
// title={promo.title}
// image={{uri: promo.image}}
// onDismiss={() => {
// setpromogpsindex(i)
// setshowpromogps(false)
// }}
// onOpen={() => {
// setshowpromogps(false)
// navigate('PromoDetails', {data: promo, type: "promogps", onBackPress: softLoad});
// }}
// />
// })
// }
// const renderNotifications = () => {
// return notifications.map((notif, index) => {
// return <Elements.notification
// key={index}
// visible={notif.visible}
// title={notif.title}
// message={notif.body}
// onClose={async () => {
// let nfcopy = notifications
// nfcopy[index].visible = false
// await setnotifications([])
// await setnotifications(nfcopy)
// await DB.set("notifications", JSON.stringify(nfcopy), (res) => console.log(res), (e) => console.log(e))
// console.log("Close notification triggered")
// }}
// onDismiss={async () => {
// let nfcopy = notifications
// nfcopy[index].visible = false
// await setnotifications([])
// await setnotifications(nfcopy)
// console.log("Dismissed")
// }}
// />
// })
// }
// return (
// <View style={{flex: 1, height: '100%'}}>
// <SafeAreaView style={{flex: 1}}>
// {renderNotifications()}
// <Elements.loader visible={loading} />
// {isGuest ? <GuestHeader
// navigation={props.navigation}
// reload={loadIsGuest}
// /> : null}
// {loading && !isGuest ? <EmptyHeader
// navigation={props.navigation}
// reload={softLoad}
// /> : !isGuest ?
// <CustomHeader
// title=""
// banner={true}
// menu={true}
// navigation={props.navigation}
// reload={softLoad}
// /> : null }
// <ScrollView
// showsHorizontalScrollIndicator={false}
// showsVerticalScrollIndicator={false}
// contentContainerStyle={{
// flexGrow: 1,
// padding: 15
// }}
// refreshControl={
// <RefreshControl refreshing={loading} onRefresh={() => {
// setRefresh(true)
// init()
// }} />
// }>
// <Text style={{color: 'gray', fontFamily: 'Arial', fontWeight: 'bold', marginBottom: 0}}>WHAT'S HOT?</Text>
// <View style={{width: '100%', height: Theme.screen.h / 3.29, padding: 20, paddingHorizontal: 15, justifyContent: 'center', alignItems: 'center'}}>
// <SliderBox
// images={whatsHot}
// autoplay={true}
// circleLoop={true}
// resizeMode={"stretch"}
// dotColor={Theme.colors.primary}
// inactiveDotColor={Theme.colors.gray}
// parentWidth={Theme.screen.w - 40}
// ImageComponentStyle={{borderRadius: 10}}
// />
// </View>
// <Text style={{color: 'gray', fontFamily: 'Arial', fontWeight: 'bold', marginBottom: 0}}>PROMOS</Text>
// <View style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap', width: '100%', padding: 0, marginTop: 15, marginBottom: 15, justifyContent: 'center'}}>
// {renderPromos()}
// </View>
// {renderPromoGPS()}
// </ScrollView>
// </SafeAreaView>
// </View>
// );
// }
// const mapStateToProps = (state) => {
// console.log(state);
// return {
// userinfo: state.appUserInfoReducer.userinfo,
// whats_hot: state.appWhatshotAndPromosReducer.whats_hot,
// promos: state.appWhatshotAndPromosReducer.promos
// }
// }
// const mapDispatchToProps = {
// saveWhatshot,
// savePromos,
// saveUserInfo
// }
// export default connect(mapStateToProps, mapDispatchToProps)(Home)
// export default function Home(navigation) {
// const navigate = (screen, params) => { navigation.navigation.navigate(screen, params) }
// const [loading, setloading] = useState(true);
// const [connected, setconnection] = useState(false);
// const [infodialog, setinfodialog] = useState(true);
// const [promos, setpromos] = useState([]);
// const [promogps, setpromogps] = useState([]);
// const [showpromogps, setshowpromogps] = useState(false)
// const [promogpsindex, setpromogpsindex] = useState(null)
// const [_carousel, setcarousel] = useState("");
// const [whatsHot, setwhatsHot] = useState([]);
// const [activeSlide, setactiveSlide] = useState(0);
// const [session, setsession] = useState(null);
// const [userProfile, setUserProfile] = useState({});
// const [notifications, setnotifications] = useState([]);
// const [isGuest, setisGuest] = useState(false)
// var backPressCount = 0
// var backPressDuration = 0
// var sampledata = {}
// // var sampledata = {"data": {"address": "", "birthdate": "January 01, 1990", "card_bg_image": "https://s3-ap-southeast-1.amazonaws.com/unioil.mobiletestbucket/mobileapp/cardTypes_bg_image/1582093000.jpg", "card_black_label": 0, "card_code": "PUVCARD", "card_image": "https://s3-ap-southeast-1.amazonaws.com/unioil.mobiletestbucket/mobileapp/cardTypes/1582093256.jpg", "card_number": "1119000000000020", "card_type": "PASADANG UNIOIL VALUE CARD", "city_name": "", "civilstatus_code": "SE", "email": "bry.rnr@gmail.com", "expiry_date": "2023-02-07", "firstname": "RNR", "fueltype_code": "0", "gender_code": "F", "lastname": "PUV", "lcard_uuid": "5fd8f34c-49ca-11ea-9ba4-02189255205c", "middlename": "", "mobile": "639957951241", "photo": "https://s3-ap-southeast-1.amazonaws.com/unioil.mobiletestbucket/mobileapp/memberPhoto/1581094497.jpg", "pin": "03444748", "points": 1600, "vo_code": "0"}, "message": "Success", "retrieved": {"address": "", "card_number": "1119000000000020", "card_type_code": "PUVCARD", "card_type_desc": "PASADANG UNIOIL VALUE CARD", "civil_status_code": "SE", "civil_status_desc": "SEPARATED", "email": "bry.rnr@gmail.com", "first_name": "RNR", "fuel_type_code": "0", "fuel_type_desc": "NO DATA ENTERED", "gender_code": "F", "gender_desc": "FEMALE", "is_bdo": "0", "is_caltex": "0", "is_cebupacific": "0", "is_flyingv": "0", "is_happy": "0", "is_jetti": "0", "is_mabuhay": "0", "is_mercury": "0", "is_national": "0", "is_petron": "0", "is_petronv": "0", "is_phoenix": "0", "is_ptt": "0", "is_robinson": "0", "is_s&r": "0", "is_seaoil": "0", "is_shell": "0", "is_sm": "0", "is_starbucks": "0", "is_total": "0", "last_name": "PUV", "middle_initial": "", "mobile": "639957951241", "number_cars": "0", "occupation": "0", "vehicle_own_code": "0", "vehicle_own_desc": "NO DATA ENTERED"}, "status": 1}
// // async function requestUserPermission() {
// // const authStatus = await messaging().requestPermission();
// // if (authStatus) {
// // console.log('Permission status:', authStatus);
// // }
// // // const enabled =
// // // authStatus === AuthorizationStatus.AUTHORIZED || authStatus === AuthorizationStatus.PROVISIONAL;
// // // if (enabled) {
// // // console.log('Firebase Notification Authorization status:', authStatus);
// // // }
// // }
// const load = async () => {
// const SESSION = await DB.session()
// const USERPROFILE = await DB.profile()
// const isGuest = await DB.get('is_guest')
// if(isGuest == 'true'){
// loadIsGuest()
// return
// }
// try{
// setloading(true)
// await setsession(SESSION)
// await setUserProfile(USERPROFILE)
// // await validate()
// await REQUEST("user_profile", "get", {
// Authorization: SESSION.token,
// card_number: SESSION.user.card_number
// }, {}, {}, function(data){
// console.log("FETCH USER PROFILE");
// if(data.status == 1){
// DB.updateProfile(data, function(){
// console.log("USER PROFILE SAVED! ", data)
// setUserProfile(data)
// }, function(error){
// console.log("Error saving profile", error)
// })
// }
// }, function(error){
// console.log(error)
// })
// await REQUEST("whats_hot", "get", {
// Authorization: SESSION.token,
// }, `lcard_uuid=${SESSION.user.lcard_uuid}`, {},
// function(res){
// if(res.status == 1 && res.data.length > 0){
// let wh = []
// for(var x=0;x<res.data.length;x++){
// if(res.data[x].image.includes("mobiletestbuckethttps")){
// wh.push(res.data[x].image.replace("https://s3-ap-southeast-1.amazonaws.com/unioil.mobiletestbucket", ""))
// }else{
// wh.push(res.data[x].image)
// }
// }
// setwhatsHot(wh)
// console.log("WHATS HOT", whatsHot)
// }else{
// console.log(res.message, res.data)
// }
// }, function(error){
// console.log(error)
// })
// await REQUEST("new_promos", "get", {}, `lcard_uuid=${SESSION.user.lcard_uuid}`, {},
// function(res){
// if(res.status == 1 && res.data.length > 0){
// setpromos(res.data)
// }else{
// console.log(res.message, res.data)
// }
// }, function(error){
// console.log(error)
// })
// Geolocation.getCurrentPosition(
// info => {
// REQUEST("promo_gps", "post", {
// Authorization: SESSION.token
// }, {}, {
// lcard_uuid: SESSION.user.lcard_uuid,
// longitude: info.coords.longitude,
// latitude: info.coords.latitude
// }, function(res){
// setpromogps(res.data)
// setshowpromogps(true)
// }, function(error){
// console.log(error)
// })
// },
// error => {
// console.log(error)
// }
// )
// await setloading(false)
// }catch(error){
// console.log(error)
// setloading(false)
// }
// loadNotifications()
// }
// const loadIsGuest = async () => {
// setisGuest(true)
// setloading(false)
// await REQUEST("promos", "get", {}, {}, {},
// function(res){
// if(res.status == 1 && res.data.length > 0){
// let wh = []
// for(var x=0;x<res.data.length;x++){
// if(res.data[x].image.includes("mobiletestbuckethttps")){
// wh.push(res.data[x].image.replace("https://s3-ap-southeast-1.amazonaws.com/unioil.mobiletestbucket", ""))
// }else{
// wh.push(res.data[x].image)
// }
// }
// setwhatsHot(wh)
// console.log("WHATS HOT", wh)
// }else{
// console.log(res.message, res.data)
// }
// }, function(error){
// console.log(error)
// })
// await REQUEST("new_promos", "get", {}, {}, {},
// function(res){
// if(res.status == 1 && res.data.length > 0){
// setpromos(res.data)
// }else{
// console.log(res.message, res.data)
// }
// }, function(error){
// console.log(error)
// })
// await setUserProfile({})
// }
// const init = () => {
// NetInfo.fetch().then(state => {
// console.log("Connection type", state.type);
// console.log("Is connected?", state.isConnected);
// if(state.isConnected){
// load()
// }else{
// setloading(false)
// Elements.nointernet2()
// }
// });
// }
// const onBackPress = () => {
// let listener = setInterval(() => {
// backPressDuration += 1
// if(backPressDuration >= 15){
// backPressCount = 0
// backPressDuration = 0
// clearInterval(listener)
// }
// }, 100)
// backPressCount += 1
// console.log("Back Press Count", backPressCount, typeof backPressCount)
// if(backPressCount == 2){
// backPressCount = 0
// backPressDuration = 0
// BackHandler.exitApp()
// return false
// }else{
// ToastAndroid.show("Press back again to exit.", ToastAndroid.SHORT)
// return true
// }
// }
// useEffect(() => {
// BackHandler.addEventListener('hardwareBackPress', onBackPress)
// return () => {
// BackHandler.removeEventListener('hardwareBackPress', onBackPress)
// }
// }, [])
// const softLoad = async () => {
// NetInfo.fetch().then(async state => {
// console.log("Connection type", state.type);
// console.log("Is connected?", state.isConnected);
// if(state.isConnected){
// setloading(true)
// if(isGuest == 'true'){
// loadIsGuest()
// return
// }
// const SESSION = await DB.session()
// await REQUEST("user_profile", "get", {
// Authorization: SESSION.token,
// card_number: SESSION.user.card_number
// }, {}, {}, function(data){
// console.log("FETCH USER PROFILE");
// if(data.status == 1){
// DB.updateProfile(data, function(){
// console.log("USER PROFILE SAVED! ")
// setUserProfile(data)
// }, function(error){
// console.log("Error saving profile", error)
// })
// }
// setloading(false)
// }, function(error){
// setloading(false)
// console.log(error)
// })
// }else{
// setloading(false)
// Elements.nointernet2()
// }
// })
// }
// useEffect(() => {
// init()
// console.log("LOAD DATA");
// }, [])
// const loadNotifications = async () => {
// //RESET NOTIFICATIONS
// // await DB.remove("notifications")
// let allnotifs = await DB.get("notifications")
// let notifs = allnotifs ? JSON.parse(allnotifs) : notifications
// await setnotifications(notifs)
// // console.log("Notifications", notifs)
// }
// useEffect(() => {
// const unsubscribe = messaging().onMessage(async remoteMessage => {
// setTimeout(async () => {
// if(Platform.OS == 'ios'){
// let allnotifs = await DB.get("notifications")
// let notifs = allnotifs ? JSON.parse(allnotifs) : notifications
// await setnotifications(notifs)
// console.log("A new notification has recieved on home page", notifications, allnotifs)
// }else{
// let allnotifs = await DB.get("notifications")
// let notifs = allnotifs ? JSON.parse(allnotifs) : notifications
// await setnotifications(notifs)
// console.log("A new notification has recieved on home page", notifications)
// }
// }, 300);
// })
// return unsubscribe;
// }, []);
// const validate = async (tkn) => {
// const SESSION = await DB.session()
// if(!SESSION.token){
// alert("You are not logged in!");
// setloading(false)
// navigation.navigation.navigate("Login")
// }
// }
// const renderwhatsHot = ({item, index}) => {
// return (
// <View key={index} style={{flex: 1}}>
// <Image source={item.image} style={{width: '100%', height: Theme.screen.h / 2.8 - 60, borderRadius: 20, resizeMode: 'stretch'}} />
// </View>)
// }
// const renderPromos = () => {
// return promos.map((promo, index) => {
// return (
// <Elements.card
// key={index}
// disabled={0}
// title={promo.title || 'DIXIE'}
// onPress={() => {
// console.log("CLICKED!!!")
// navigate('PromoDetails', {data: promo, type: "promo", onBackPress: softLoad});
// }}
// image={{uri: promo.image}} />)
// })
// }
// const renderPromoGPS = () => {
// if(!promogps || promogps.length == 0) return null
// return promogps.map((promo, i) => {
// return <Elements.promoGPS
// key={i}
// visible={showpromogps}
// title={promo.title}
// image={{uri: promo.image}}
// onDismiss={() => {
// setpromogpsindex(i)
// setshowpromogps(false)
// }}
// onOpen={() => {
// setshowpromogps(false)
// navigate('PromoDetails', {data: promo, type: "promogps", onBackPress: softLoad});
// }}
// />
// })
// }
// const renderNotifications = () => {
// return notifications.map((notif, index) => {
// return <Elements.notification
// key={index}
// visible={notif.visible}
// title={notif.title}
// message={notif.body}
// onClose={async () => {
// let nfcopy = notifications
// nfcopy[index].visible = false
// await setnotifications([])
// await setnotifications(nfcopy)
// await DB.set("notifications", JSON.stringify(nfcopy), (res) => console.log(res), (e) => console.log(e))
// console.log("Close notification triggered")
// // console.log("tried to close notification", notifications)
// }}
// onDismiss={async () => {
// let nfcopy = notifications
// nfcopy[index].visible = false
// await setnotifications([])
// await setnotifications(nfcopy)
// console.log("Dismissed")
// }}
// />
// })
// }
// return (
// <View style={{flex: 1, height: '100%'}}>
// <SafeAreaView style={{flex: 1}}>
// {renderNotifications()}
// <Elements.loader visible={loading} />
// {isGuest ? <GuestHeader
// navigation={navigation}
// reload={loadIsGuest}
// /> : null}
// {loading && !isGuest ? <EmptyHeader
// navigation={navigation}
// reload={softLoad}
// /> : !isGuest ?
// <CustomHeader
// title=""
// banner={true}
// menu={true}
// navigation={navigation}
// reload={softLoad}
// /> : null }
// <ScrollView
// showsHorizontalScrollIndicator={false}
// showsVerticalScrollIndicator={false}
// contentContainerStyle={{
// flexGrow: 1,
// padding: 15
// }}
// refreshControl={
// <RefreshControl refreshing={loading} onRefresh={init} />
// }>
// <Text style={{color: 'gray', fontFamily: 'Arial', fontWeight: 'bold', marginBottom: 0}}>WHAT'S HOT?</Text>
// <View style={{width: '100%', height: Theme.screen.h / 2.57, padding: 20, paddingHorizontal: 15, justifyContent: 'center', alignItems: 'center'}}>
// <SliderBox
// images={whatsHot}
// autoplay={true}
// circleLoop={true}
// resizeMode={"stretch"}
// dotColor={Theme.colors.primary}
// inactiveDotColor={Theme.colors.gray}
// parentWidth={Theme.screen.w - 40}
// ImageComponentStyle={{borderRadius: 10}}
// />
// </View>
// <Text style={{color: 'gray', fontFamily: 'Arial', fontWeight: 'bold', marginBottom: 0}}>PROMOS</Text>
// <View style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap', width: '100%', padding: 0, marginTop: 15, marginBottom: 15, justifyContent: 'center'}}>
// {renderPromos()}
// </View>
// {renderPromoGPS()}
// </ScrollView>
// </SafeAreaView>
// </View>
// );
// }
// // useEffect(() => {
// // setnotifications([{
// // title: "Unioil",
// // body: "Welcome to Unioil Loyalty App",
// // visible: true
// // },{
// // title: "Membership",
// // body: "Redeem points and use your points to buy our products",
// // visible: true
// // }])
// // }, [])
// /*
// // await setpromos([
// // {
// // title: 'Dixie Ganda',
// // image: Assets.test.dixie[Math.floor(Math.random() * Assets.test.dixie.length - 1)],
// // description: 'asd asd'
// // },
// // {
// // title: 'Ganda Dixie',
// // image: Assets.test.dixie[Math.floor(Math.random() * Assets.test.dixie.length - 1)],
// // description: 'asd asdasdasd'
// // }
// // ])
// // await setwhatsHot([
// // {
// // title: 'Dixie Ganda',
// // image: Assets.test.zuvapit[Math.floor(Math.random() * Assets.test.zuvapit.length - 1)],
// // description: 'asd asd'
// // },
// // {
// // title: 'Ganda Dixie',
// // image: Assets.test.mina[Math.floor(Math.random() * Assets.test.mina.length - 1)],
// // description: 'asd asdasdasd'
// // },
// // {
// // title: 'Ganda Dixie',
// // image: Assets.test.zuvapit[Math.floor(Math.random() * Assets.test.zuvapit.length - 1)],
// // description: 'asd asdasdasd'
// // },
// // {
// // title: 'Ganda Dixie',
// // image: Assets.test.mina[Math.floor(Math.random() * Assets.test.mina.length - 1)],
// // description: 'asd asdasdasd'
// // }
// // ])
// {/* <Elements.card
// disabled={1}
// title={promos[0]?.title || 'DIXIE'}
// onPress={() => {
// navigate('PromoDetails', promos[0]);
// }}
// image={promos[0]?.image || Assets.dixie} />
// <Elements.card
// disabled={1}
// title={promos[1]?.title || 'DIXIE'}
// onPress={() => {
// navigate('PromoDetails', promos[1]);
// }}
// image={promos[1]?.image || Assets.dixie} /> }
// */