update add new connected device

reduxStore/actions/currentSelectedAction.js

@@ -252,20 +252,28 @@ export const addConnectedDevice = (mcbLinkId, subBreakerId, deviceData) => async
 			.collection('device')
 			.doc(selectedDeviceId)
 			.collection('mcbLinks')
-			.doc(mcbLinkId)
+			.doc(String(mcbLinkId))
 			.collection('subBreakers')
-			.doc(subBreakerId);
+			.doc(String(subBreakerId))
+			.collection('electronicDevices');
 
 		return docRef;
 	};
-	const newConnectedDevice = existedConnectedDevice.map(
-		x => x.index + 1 === subBreakerId && [...x[index], deviceData]
-	);
 	try {
 		const docRef = getDocRef();
-		await docRef.add(deviceData);
-		dispatch(getExistedConnectedDeviceAction(newConnectedDevice));
-	} catch (error) {}
+		const res = await docRef.add(deviceData);
+		const newDeviceData = Object.assign(deviceData, {
+			mcbLinkId: mcbLinkId,
+			subBreakerId: subBreakerId,
+			connectedDeviceId: res.id,
+		});
+		let newAllConnected = existedConnectedDevice.map((x, index) =>
+			index === (mcbLinkId - 1) * 8 + (subBreakerId - 1) ? [...x, newDeviceData] : [...x]
+		);
+		dispatch(getExistedConnectedDeviceAction(newAllConnected));
+	} catch (error) {
+		console.log(error);
+	}
 };
 export const deleteConnectedDevice = data => async (dispatch, getState) => {
 	const { currentSelectedDeviceReducer, timersReducer } = getState();

screens/Private/SmartMeterScreen/McbLinkScreen.js

@@ -84,10 +84,10 @@ class McbLinkScreen extends React.Component {
 		this.setState({ subBreakersInfo: existedSubBreakersData[mcbIndex], subBreakerStatus: status });
 	};
 	addDevice = async () => {
-		const { deviceName, mcbIndex, subIndex } = this.state;
+		const { deviceName, mcbIndex, subBreakerIndex } = this.state;
 		let deviceData = { name: deviceName };
 		const mcbId = mcbIndex + 1;
-		const subId = subIndex + 1;
+		const subId = subBreakerIndex + 1;
 
 		await this.props.addConnectedDevice(mcbId, subId, deviceData);
 		this.setState({ deviceName: '', isAddElectronicVisible: false });
@@ -95,8 +95,7 @@ class McbLinkScreen extends React.Component {
 
 	formatData(item, start, end) {
 		let data = [];
-		data.push(...item); //Electronic devices data
-		data.push({ name: 'add' });
+		data.push(...item, { name: 'add' }); //Electronic devices data
 		const numberOfFullRows = Math.floor(data.length / 4);
 		let numberOfElementsLastRow = data.length - numberOfFullRows * 4;
 		while (numberOfElementsLastRow !== 4 && numberOfElementsLastRow !== 0) {
@@ -160,7 +159,11 @@ class McbLinkScreen extends React.Component {
 		const { toggleDel } = this.state;
 		const data = item.connectedDevice;
 		const renderScroll = () => {
-			const maxPage = data.length ? Math.ceil(data.length / 8) : 1;
+			const maxPage = data.length
+				? data.length % 8 === 0
+					? Math.ceil(data.length / 8) + 1
+					: Math.ceil(data.length / 8)
+				: 1;
 			const scrollPage = [];
 			for (let index = 0; index < maxPage; index++) {
 				let start = index * 8;
@@ -285,7 +288,7 @@ class McbLinkScreen extends React.Component {
 	};
 
 	render() {
-		const subIndex = this.props.navigation.getParam('subIndex');
+		const initialPage = this.props.navigation.getParam('subIndex');
 		const { subBreakersInfo } = this.state;
 		const TabStyle = {
 			textStyle: [theme.description, theme.textWhite],
@@ -309,10 +312,10 @@ class McbLinkScreen extends React.Component {
 				<Tabs
 					tabBarUnderlineStyle={{ backgroundColor: 'transparent' }}
 					renderTabBar={() => <ScrollableTab style={styles.scrollTab} />}
-					initialPage={subIndex}
+					initialPage={initialPage}
 					locked
 					onChangeTab={tab => {
-						this.setState({ subIndex: tab.i });
+						this.setState({ subBreakerIndex: tab.i });
 						console.log(tab.i);
 					}}
 				>