Skip to content

N
new_excelso
Commit e5a92675 authored by Trisno's avatar Trisno
Browse files
Options

display loading bar and 'No Reward History'

parent e4660d35
Hide whitespace changes
Inline Side-by-side
Showing with 37 additions and 27 deletions
view/RewardHistory.js
View file @ e5a92675
import React from 'react'; import React from 'react';
import { View, Text, Image, StyleSheet, ScrollView, Alert, TouchableOpacity } from 'react-native'; import { View, Text, Image, StyleSheet, ScrollView, Alert, TouchableOpacity, ActivityIndicator } from 'react-native';
import { Card } from 'react-native-shadow-cards' import { Card } from 'react-native-shadow-cards'
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Axios from 'axios'; import Axios from 'axios';
...@@ -9,7 +9,8 @@ class RewardHistory extends React.Component { ...@@ -9,7 +9,8 @@ class RewardHistory extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
rewardsList: [] rewardsList: [],
indicator: true
} }
} }
...@@ -32,14 +33,15 @@ class RewardHistory extends React.Component { ...@@ -32,14 +33,15 @@ class RewardHistory extends React.Component {
Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/reward/history', params).then(res => { Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/reward/history', params).then(res => {
let data = res.data.rewards let data = res.data.rewards
// console.log(data) // console.log(data)
data.map((item,key) => { data.map((item, key) => {
// console.log(item.expire_time) // console.log(item.expire_time)
item.expire_time = moment(item.expire_time).format("DD MMMM YYYY") item.expire_time = moment(item.expire_time).format("DD MMMM YYYY")
item.used_time = moment(item.used_time).format("DD MMMM YYYY") item.used_time = moment(item.used_time).format("DD MMMM YYYY")
}) })
// console.log(data) // console.log(data)
this.setState({ this.setState({
rewardsList: data rewardsList: data,
indicator: false
}) })
}).catch(error => { }).catch(error => {
...@@ -52,31 +54,39 @@ class RewardHistory extends React.Component { ...@@ -52,31 +54,39 @@ class RewardHistory extends React.Component {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ScrollView style={styles.body}> <ScrollView style={styles.body}>
{ {this.state.indicator ? (<ActivityIndicator style={{ justifyContent: "center", alignItems: 'center', margin: 20 }} size="large" color="#c9af6d" />) :
this.state.rewardsList.map((item, key) => ( this.state.rewardsList.length ? (
<TouchableOpacity key={key} onPress={() => this.props.navigation.navigate('Reward Detail', { rewardId: item.id })}> this.state.rewardsList.map((item, key) => (
<View style={{ alignItems: 'center' }}> <TouchableOpacity key={key} onPress={() => this.props.navigation.navigate('Reward Detail', { rewardId: item.id })}>
<Card style={{ padding: 5, margin: 10 }}> <View style={{ alignItems: 'center' }}>
<View> <Card style={{ padding: 5, margin: 10 }}>
<Image source={{ uri: item.reward.title_image }}
resizeMethod="resize"
resizeMode='cover'
style={{ height: 100, width: '100%' }} />
</View>
<View style={{ flexDirection: 'row', justifyContent:'space-between', padding:10 }}>
<View> <View>
<Text style={{textAlign:'left', fontSize: 12, fontFamily: 'Gotham-Black'}}>{item.reward.title}</Text> <Image source={{ uri: item.reward.title_image }}
<Text style={{textAlign:'left', fontSize: 12, fontFamily: 'Gotham-Light'}}>{item.reward.subtitle}</Text> resizeMethod="resize"
resizeMode='cover'
style={{ height: 100, width: '100%' }} />
</View> </View>
<View> <View style={{ flexDirection: 'row', justifyContent: 'space-between', padding: 10 }}>
<Text style={{textAlign:'right',fontSize: 12, fontFamily: 'Gotham-Light'}}>Used at</Text> <View>
<Text style={{textAlign:'right', fontSize: 12, fontFamily: 'Gotham-Light'}}>{item.used_time}</Text> <Text style={{ textAlign: 'left', fontSize: 12, fontFamily: 'Gotham-Black' }}>{item.reward.title}</Text>
<Text style={{ textAlign: 'left', fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.reward.subtitle}</Text>
</View>
<View>
<Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light' }}>Used at</Text>
<Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.used_time}</Text>
</View>
</View> </View>
</View> </Card>
</Card> </View>
</TouchableOpacity>
))
) : (
<View style={{ alignItems: 'center', margin: 20 }}>
<Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light' }}>No Reward History</Text>
</View> </View>
</TouchableOpacity> )
))
} }
</ScrollView> </ScrollView>
</View> </View>
......
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