fix error, add confirm modal

screens/Private/SmartMeterScreen/EditMcbLinkScreen.js

@@ -38,6 +38,9 @@ class EditMcbLinkScreen extends React.Component {
 		const data = { type, name, description };
 		const mcbId = this.props.navigation.getParam('mcbIndex') + 1;
 		const subId = this.props.navigation.getParam('subIndex') + 1;
+		this.toggleConfirmModal(false);
+
+		this.props.navigation.goBack();
 
 		this.props.updateMcbLinkData(data, mcbId, subId);
 	};
@@ -69,33 +72,26 @@ class EditMcbLinkScreen extends React.Component {
 							)}
 						</View>
 					</View>
-					<Button
-						full
-						style={{
-							backgroundColor: color.primary,
-							borderRadius: 100,
-							marginHorizontal: 25,
-							marginTop: 20,
-						}}
-						onPress={() => this.toggleConfirmModal(true)}
-					>
+					<Button full style={styles.saveBtn} onPress={() => this.toggleConfirmModal(true)}>
 						<Text>SAVE</Text>
 					</Button>
 				</View>
 				<Modal
 					coverScreen
 					isOpen={isVisible}
-					onClosed={this.setState({ isVisible: false })}
-					style={{
-						width: width * 0.9,
-						height: height / 4,
-						borderRadius: 20,
-						alignItems: 'center',
-						justifyContent: 'space-evenly',
-					}}
+					onClosed={() => this.toggleConfirmModal(false)}
+					style={styles.modalContainer}
 				>
-					<View>
-						<Text>test</Text>
+					<Text style={[theme.normalText, theme.textDark, theme.centerText, { marginHorizontal: 30 }]}>
+						Are you sure you want to save this item?
+					</Text>
+					<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+						<Button transparent style={{ width: '40%' }} onPress={() => this.toggleConfirmModal(false)}>
+							<Text style={{ color: color.grey }}>CANCEL</Text>
+						</Button>
+						<Button style={styles.modalSaveBtn} onPress={this.handleSave}>
+							<Text>SAVE</Text>
+						</Button>
 					</View>
 				</Modal>
 			</>
@@ -119,6 +115,27 @@ const styles = StyleSheet.create({
 		color: color.darkGrey,
 		paddingVertical: 10,
 	},
+	modalContainer: {
+		width: width * 0.9,
+		height: height / 4,
+		borderRadius: 20,
+		alignItems: 'center',
+		justifyContent: 'space-around',
+		padding: 20,
+	},
+	modalSaveBtn: {
+		width: '40%',
+		backgroundColor: color.primary,
+		color: color.white,
+		justifyContent: 'center',
+		borderRadius: 100,
+	},
+	saveBtn: {
+		backgroundColor: color.primary,
+		borderRadius: 100,
+		marginHorizontal: 25,
+		marginTop: 20,
+	},
 });
 
 const mapDispatchToProps = {

screens/Private/SmartMeterScreen/McbLinkScreen.js

@@ -586,6 +586,7 @@ const styles = StyleSheet.create({
 });
 
 const mapStateToProps = state => ({
+	existedMcbLinksData: state.timersReducer.existedMcbLinksData,
 	existedSubBreakersData: state.timersReducer.existedSubBreakersData,
 	existedConnectedDevice: state.timersReducer.existedConnectedDevice,
 	shadow: state.currentSelectedDeviceReducer.shadow,

screens/Private/SmartMeterScreen/McbLinkSettingScreen.js

@@ -23,6 +23,23 @@ class McbLinkSettingScreen extends React.Component {
 		mcbLinkInfo: this.props.existedMcbLinksData[this.props.navigation.getParam('mcbIndex')],
 		subBreakerInfo: this.props.existedSubBreakersData[this.props.navigation.getParam('mcbIndex')],
 	};
+	setDataState = () => {
+		this.setState({
+			mcbLinkInfo: this.props.existedMcbLinksData[this.props.navigation.getParam('mcbIndex')],
+			subBreakerInfo: this.props.existedSubBreakersData[this.props.navigation.getParam('mcbIndex')],
+		});
+	};
+	componentDidMount = () => {
+		this.setDataState();
+	};
+	componentDidUpdate = (prevProps, prevState) => {
+		if (
+			prevProps.existedMcbLinksData !== this.props.existedMcbLinksData ||
+			prevProps.existedSubBreakersData !== this.props.existedSubBreakersData
+		) {
+			this.setDataState();
+		}
+	};
 
 	renderList = (item, subIndex) => {
 		const mcbIndex = this.props.navigation.getParam('mcbIndex');