tambah pemisah ribuan di shopping cart, dan tampilkan 'No data' jika data kosong di reward select

view/ItemShopingCart.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, TextInput } from 'react-native';
 import { connect } from 'react-redux';
 import ActionType from '../redux/globalActionType';
+import NumberFormat from 'react-number-format';
 
 
 class ItemShoping extends React.Component {
@@ -36,8 +37,8 @@ class ItemShoping extends React.Component {
                             <Image source={{ uri: item.image }} style={{ height: 100, width: 100, borderRadius: 5, top: 5 }}></Image>
                         </View>
                         <View >
-                            <Text style={{ fontSize: 20, margin: 5, marginRight: 10, fontFamily: 'Gotham-Black' }}>{item.name}</Text>
-                            <Text style={{ fontSize: 15, margin: 5, marginRight: 10, fontFamily: 'Gotham-Light'}}>Rp. {item.price}</Text>
+                            <Text style={{ fontSize: 15, margin: 5, marginRight: 10, fontFamily: 'Gotham-Black' }}>{item.name}</Text>
+                            <NumberFormat decimalScale={0} value={item.price} renderText={value => <Text style={{ fontSize: 12, margin: 5, marginRight: 10, fontFamily: 'Gotham-Black', color: 'grey' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
                             <View style={{ flexDirection: 'row', flex: 1 }}>
                                 <View style={styles.shadowEdit}></View>
                                 <View style={styles.shadowAdd}>

view/RewardSelect.js

@@ -89,30 +89,36 @@ class RewardSelect extends React.Component {
                 </View> */}
                 <ScrollView style={styles.body}>
                     {
-                        this.state.rewardsList.map((item, key) => (
-                            <TouchableOpacity key={key} onPress={() => this.handleSelect(item)}>
-                                <View style={{ alignItems: 'center' }}>
-                                    <Card style={{ padding: 5, margin: 10 }}>
-                                        <View>
-                                            <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 }}>
+                        this.state.rewardsList.length ? (
+                            this.state.rewardsList.map((item, key) => (
+                                <TouchableOpacity key={key} onPress={() => this.handleSelect(item)}>
+                                    <View style={{ alignItems: 'center' }}>
+                                        <Card style={{ padding: 5, margin: 10 }}>
                                             <View>
-                                                <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>
+                                                <Image source={{ uri: item.reward.title_image }}
+                                                    resizeMethod="resize"
+                                                    resizeMode='cover'
+                                                    style={{ height: 100, width: '100%' }} />
                                             </View>
-                                            <View>
-                                                <Text style={{textAlign:'right', fontSize: 12, fontFamily: 'Gotham-Light'}}>Expired</Text>
-                                                <Text style={{textAlign:'right', fontSize: 12, fontFamily: 'Gotham-Light'}}>{item.expire_time}</Text>
+                                            <View style={{ flexDirection: 'row', justifyContent: 'space-between', padding: 10 }}>
+                                                <View>
+                                                    <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' }}>Expired</Text>
+                                                    <Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.expire_time}</Text>
+                                                </View>
                                             </View>
-                                        </View>
-                                    </Card>
+                                        </Card>
+                                    </View>
+                                </TouchableOpacity>
+                            ))
+                        ) : (
+                                <View style={{justifyContent:'center', alignItems:'center', height:100}}>
+                                    <Text style={{ textAlign: 'left', fontSize: 12, fontFamily: 'Gotham-Light' }}>No data</Text>
                                 </View>
-                            </TouchableOpacity>
-                        ))
+                            )
                     }
                     {/* <TouchableOpacity>
                         <Text style={{ textAlign: 'right', color: '#ccb46c' }}>REDEEM E-VOUCHER HISTORY</Text>