unioil-loyalty-rn-app/app/screens/loyalty/index.js

118 lines
3.4 KiB
JavaScript

import * as React from 'react';
import {
useState,
useEffect
} from 'react';
import {
TouchableOpacity,
View,
Text,
Image,
Alert
} from 'react-native';
import { FlatGrid } from 'react-native-super-grid';
import { Box } from 'native-base';
import NetInfo from "@react-native-community/netinfo";
import CustomHeader from '../../components/header.js';
import Elements from '../../components/elements.js';
import DB from '../../components/storage/';
import REQUEST from '../../components/api/';
import Theme from '../../components/theme.style';
import CustomSafeArea from '../../components/safeArea.component.js';
export default function LoyaltyProgram(navigation) {
const [connected, setconnected] = useState(false)
const [loading, setloading] = useState(true)
const [Cards, setCards] = useState([])
const init = async () => {
setconnected(true)
const SESSION = await DB.session()
await REQUEST("loyalty_cards", "get", {
Authorization: SESSION.token,
}, {}, {},
async (res) => {
if(res.status == 1 && res.data.length > 0){
let l = []
for(var x=0;x<res.data.length;x++){
l.push({c_id: res.data[x].cardtype_id, code: res.data[x].code})
}
await setCards(await res.data)
await setloading(false)
}
}, function(err){
Alert.alert("Information", `\n${err.message}`);
}, "Cards", "Fetch")
}
useEffect(() => {
NetInfo.fetch().then(state => {
if(state.isConnected){
init()
}else{
setloading(false)
Elements.nointernet2(navigation)
}
})
}, [])
const NBCard = (props) => {
return (
<TouchableOpacity activeOpacity={1} onPress={props.onPress}>
<Box style={{margin: 0, borderRadius: 15}}>
<Box style={{borderRadius: 15}}>
<Image source={{uri: props.image}} style={{borderRadius: 5, height: 100, width: null, flex: 1, resizeMode: 'stretch'}}/>
</Box>
<Box style={{height: 35, justifyContent: 'center'}}>
<Text style={{alignSelf: 'center', textAlign: 'center', color: Theme.colors.textPrimary}}>{props.title}</Text>
</Box>
</Box>
</TouchableOpacity>
)
}
if(!connected){
return (
<CustomSafeArea>
<View style={{flex: 1}}>
<Elements.loader visible={loading} />
<CustomHeader title="Loyalty Program" navigation={navigation} main={true} />
<Elements.nointernet
message="No internet found. Please check your internet connection."
buttonText="Try Again"
onPress={() => {
NetInfo.fetch().then(state => {
if(state.isConnected){
init()
}else{
Elements.nointernet2(navigation)
}
})
}}
/>
</View>
</CustomSafeArea>
)
}
return (
<CustomSafeArea>
<Elements.loader visible={loading} />
<CustomHeader title="Loyalty Program" navigation={navigation} main={true} />
<FlatGrid
itemDimension={150}
data={Cards}
renderItem={({ item }) => (
<NBCard
image={item.image}
title={item.name}
onPress={() => {
navigation.navigation.navigate("LoyaltyCardDetails", item)
}}
/>
)}
/>
</CustomSafeArea>
);
}