update expand state follow length of MCB link

screens/Private/SmartMeterScreen/SmartMeterDetailScreen.js

@@ -6,7 +6,7 @@ import { HeaderButtons, Item } from 'react-navigation-header-buttons';
 import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
 import { Badge } from 'react-native-elements';
 import { TouchableOpacity } from 'react-native-gesture-handler';
-
+import { connect } from 'react-redux';
 // Main Breaker mock data
 const MainBreaker = {
 	name: 'Main Breaker',
@@ -84,7 +84,7 @@ const LimitCurrent = [
 	{ name: 'Watthour', limit: 1000 },
 ];
 
-export default class SmartMeterDetailScreen extends Component {
+class SmartMeterDetailScreen extends Component {
 	static navigationOptions = ({ navigation }) => {
 		const deviceName = navigation.getParam('deviceName', '');
 
@@ -118,20 +118,8 @@ export default class SmartMeterDetailScreen extends Component {
 
 	state = {
 		mbOn: false,
-		sb: [
-			{
-				expand: true,
-			},
-			{
-				expand: false,
-			},
-			{
-				expand: false,
-			},
-			{
-				expand: false,
-			},
-		],
+		sb: this.expandState(),
+		data: this.props.allDeviceInfo[0],
 	};
 	renderCurrent(item, index) {
 		return (
@@ -220,7 +208,14 @@ export default class SmartMeterDetailScreen extends Component {
 			</View>
 		);
 	}
-
+	expandState() {
+		const length = MainBreaker.MCB.length;
+		const preSb = new Array(length);
+		for (let i = 0; i < length; i++) {
+			preSb[i] = { expand: false };
+		}
+		return preSb;
+	}
 	// full incomplete row
 	formatGridData(unformatData) {
 		let data = unformatData;
@@ -234,16 +229,14 @@ export default class SmartMeterDetailScreen extends Component {
 	}
 
 	render() {
-		// Electric Current card
-		const Current = props => {};
-
+		const { data } = this.state;
 		return (
 			<Content style={[theme.container, theme.containerWithPadding]}>
 				{/* Main Breaker */}
 				<Card style={[theme.containerWithPadding, { borderRadius: 10 }]}>
 					<Row>
 						<Left>
-							<Text style={[theme.smallTitle, { color: color.darkGrey }]}>{MainBreaker.name}</Text>
+							<Text style={[theme.smallTitle, { color: color.darkGrey }]}>{data.name}</Text>
 						</Left>
 						<Right>
 							<Switch
@@ -256,7 +249,7 @@ export default class SmartMeterDetailScreen extends Component {
 							/>
 						</Right>
 					</Row>
-					<Text style={[theme.description, theme.mt1]}>{MainBreaker.description}</Text>
+					<Text style={[theme.description, theme.mt1]}>{data.description}</Text>
 					<Row style={theme.mt1}>
 						<Text style={[theme.description, theme.textDark, { marginRight: 5 }]}>
 							Status:{' '}
@@ -299,6 +292,11 @@ export default class SmartMeterDetailScreen extends Component {
 	}
 }
 
+const mapStateToProps = state => ({
+	allDeviceInfo: state.allDataReducer.allDeviceInfo,
+});
+
+export default connect(mapStateToProps)(SmartMeterDetailScreen);
 const styles = StyleSheet.create({
 	currentCard: {
 		flex: 1,