add sub breaker current data

screens/Private/SmartMeterScreen/McbLinkScreen.js

@@ -75,6 +75,7 @@ class McbLinkScreen extends React.Component {
 				mcbLink.map((subBreaker, index) =>
 				mcbLink.map((subBreaker, index) =>
 					Object.assign(subBreaker, {
 					Object.assign(subBreaker, {
 						connectedDevice: existedConnectedDevice[mcbIndex * 8 + index],
 						connectedDevice: existedConnectedDevice[mcbIndex * 8 + index],
+						data: shadow[`data_L${mcbIndex + 1}_B${index + 1}`],
 					})
 					})
 				)
 				)
 			);
 			);
@@ -133,7 +134,7 @@ class McbLinkScreen extends React.Component {
 		const subStatus = subBreakerStatus[`L${mcbIndex + 1}B${index + 1}`] === 0 ? false : true;
 		const subStatus = subBreakerStatus[`L${mcbIndex + 1}B${index + 1}`] === 0 ? false : true;
 		return (
 		return (
 			<View style={[theme.container, theme.containerWithPadding]}>
 			<View style={[theme.container, theme.containerWithPadding]}>
-				<Card style={{ borderRadius: 10, padding: 10, paddingHorizontal: 15 }}>
+				<Card style={{ borderRadius: 10, padding: 10, paddingHorizontal: 15, borderColor: 'transparent' }}>
 					<View style={[theme.rowContainer, { justifyContent: 'space-between' }]}>
 					<View style={[theme.rowContainer, { justifyContent: 'space-between' }]}>
 						<Text style={[theme.smallTitle, theme.textDark]}>{item.name}</Text>
 						<Text style={[theme.smallTitle, theme.textDark]}>{item.name}</Text>
 						<Switch
 						<Switch
@@ -145,6 +146,7 @@ class McbLinkScreen extends React.Component {
 					<Text style={[theme.description, theme.mt1]}>{item.description}</Text>
 					<Text style={[theme.description, theme.mt1]}>{item.description}</Text>
 				</Card>
 				</Card>
 
 
+				{this.renderData(item)}
 				{this.renderElectronic(item)}
 				{this.renderElectronic(item)}
 				<View style={[theme.rowContainer, theme.mt2, { justifyContent: 'space-between' }]}>
 				<View style={[theme.rowContainer, theme.mt2, { justifyContent: 'space-between' }]}>
 					<Text style={[theme.normalText, theme.textDark]}>Logging</Text>
 					<Text style={[theme.normalText, theme.textDark]}>Logging</Text>
@@ -154,6 +156,24 @@ class McbLinkScreen extends React.Component {
 			</View>
 			</View>
 		);
 		);
 	};
 	};
+	renderData = item => {
+		const data = item.data;
+		return (
+			<View style={{ flexDirection: 'row' }}>
+				{Object.keys(data).map((key, index) => (
+					<Card style={[styles.dataCard, { marginRight: index === 2 ? 0 : 10 }]} key={`data${index}`}>
+						<Text style={styles.dataTitle} numberOfLines={1}>
+							{key === 'AMP' ? 'Current' : key === 'ARC' ? 'Arcing Fault' : 'Leakage Current'}
+						</Text>
+						<Text style={styles.dataCurrent}>
+							{data[key]}{' '}
+							{key === 'ARC' ? null : <Text style={styles.dataUnit}>{key === 'AMP' ? 'A' : 'mA'}</Text>}
+						</Text>
+					</Card>
+				))}
+			</View>
+		);
+	};
 	renderElectronic = item => {
 	renderElectronic = item => {
 		const { toggleDel } = this.state;
 		const { toggleDel } = this.state;
 		const data = item.connectedDevice;
 		const data = item.connectedDevice;
@@ -488,6 +508,26 @@ const styles = StyleSheet.create({
 		paddingHorizontal: 15,
 		paddingHorizontal: 15,
 		paddingVertical: 10,
 		paddingVertical: 10,
 	},
 	},
+	dataCard: {
+		flex: 1,
+		borderRadius: 10,
+		padding: 10,
+		marginRight: 10,
+		borderColor: 'transparent',
+	},
+	dataTitle: {
+		...theme.description,
+	},
+	dataCurrent: {
+		...theme.smallTitle,
+		...theme.textDark,
+		...theme.mt1,
+		textAlign: 'right',
+	},
+	dataUnit: {
+		...theme.description,
+		...theme.textDark,
+	},
 });
 });
 
 
 const mapStateToProps = state => ({
 const mapStateToProps = state => ({