update setting screen

reduxStore/actions/currentSelectedAction.js

-// import { fireStore } from '../../firebase';
+import { fireStore } from '../../firebase';
 
 
 // export const SET_CURRENT_SELECTED = 'SET_CURRENT_SELECTED';
 // export const SET_CURRENT_SELECTED = 'SET_CURRENT_SELECTED';
 export const GET_CURRENT_SELECTED_DATA = 'GET_CURRENT_SELECTED_DATA';
 export const GET_CURRENT_SELECTED_DATA = 'GET_CURRENT_SELECTED_DATA';
@@ -21,6 +21,40 @@ export const getCurrentSelectedData = currentSelectedDeviceData => dispatch => {
 	dispatch(getCurrentSelectedDataAction(currentSelectedDeviceData));
 	dispatch(getCurrentSelectedDataAction(currentSelectedDeviceData));
 };
 };
 
 
+export const updateDetail = (type, value) => async (dispatch, getState) => {
+	const { currentSelectedDeviceReducer } = getState();
+	const { currentSelectedData } = currentSelectedDeviceReducer;
+	const selectedDeviceId = currentSelectedData.deviceId;
+	const getNewData = () => {
+		switch (type) {
+			case 'Name':
+				return { ...currentSelectedData, name: value };
+			case 'Description':
+				return { ...currentSelectedData, description: value };
+			case 'RCBO':
+				return { ...currentSelectedData, rcbo: value };
+			case 'notification':
+				return { ...currentSelectedData, notification: value };
+			default:
+				return currentSelectedData;
+		}
+	};
+
+	const getRef = () => {
+		const ref = fireStore.collection('device').doc(selectedDeviceId);
+		return ref;
+	};
+	try {
+		const newData = getNewData();
+		dispatch(getCurrentSelectedData(newData));
+		const ref = getRef();
+
+		await ref.update(newData);
+	} catch (e) {
+		alert(e);
+	}
+};
+
 // export const getCurrentSelectedData = (deviceId, mcbLinkId, subBreakerId) => (dispatch, getState) => {
 // export const getCurrentSelectedData = (deviceId, mcbLinkId, subBreakerId) => (dispatch, getState) => {
 // 	const { currentSelectedDeviceReducer } = getState();
 // 	const { currentSelectedDeviceReducer } = getState();
 // 	const { selectedDeviceId } = currentSelectedDeviceReducer;
 // 	const { selectedDeviceId } = currentSelectedDeviceReducer;

screens/Private/SettingScreen/Setting.js

@@ -6,8 +6,10 @@ import { HeaderButtons, Item } from 'react-navigation-header-buttons';
 import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
 import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
 import { width } from '../../../constants/Layout';
 import { width } from '../../../constants/Layout';
 import { Overlay } from 'react-native-elements';
 import { Overlay } from 'react-native-elements';
+import { connect } from 'react-redux';
+import { updateDetail } from '../../../reduxStore/actions/currentSelectedAction';
 
 
-export default class SmartMeterDetailScreen extends Component {
+class updateDetailScreen extends Component {
 	static navigationOptions = ({ navigation }) => {
 	static navigationOptions = ({ navigation }) => {
 		return {
 		return {
 			title: 'Setting',
 			title: 'Setting',
@@ -31,6 +33,10 @@ export default class SmartMeterDetailScreen extends Component {
 			isVisible: visible,
 			isVisible: visible,
 		});
 		});
 	}
 	}
+	confirm() {
+		this.props.updateDetail(this.state.field, this.state.data);
+		this.props.navigation.navigate('Setting');
+	}
 	render() {
 	render() {
 		const { breaker, data, field, isVisible } = this.state;
 		const { breaker, data, field, isVisible } = this.state;
 		return (
 		return (
@@ -100,7 +106,7 @@ export default class SmartMeterDetailScreen extends Component {
 							>
 							>
 								<Text style={{ color: color.grey }}>CANCEL</Text>
 								<Text style={{ color: color.grey }}>CANCEL</Text>
 							</Button>
 							</Button>
-							<Button style={styles.saveBtn} onPress={this.save} rounded>
+							<Button style={styles.saveBtn} rounded onPress={() => this.confirm()}>
 								<Text>SAVE</Text>
 								<Text>SAVE</Text>
 							</Button>
 							</Button>
 						</View>
 						</View>
@@ -111,6 +117,15 @@ export default class SmartMeterDetailScreen extends Component {
 	}
 	}
 }
 }
 
 
+const mapDispatchToProps = {
+	updateDetail,
+};
+
+export default connect(
+	null,
+	mapDispatchToProps
+)(updateDetailScreen);
+
 const styles = StyleSheet.create({
 const styles = StyleSheet.create({
 	overlayStyle: {
 	overlayStyle: {
 		padding: 20,
 		padding: 20,

screens/Private/SettingScreen/SettingScreen.js

@@ -5,6 +5,7 @@ import { theme, color } from '../../../constants/Styles';
 import { connect } from 'react-redux';
 import { connect } from 'react-redux';
 import { Overlay } from 'react-native-elements';
 import { Overlay } from 'react-native-elements';
 import { TouchableHighlight } from 'react-native-gesture-handler';
 import { TouchableHighlight } from 'react-native-gesture-handler';
+import { updateDetail } from '../../../reduxStore/actions/currentSelectedAction';
 
 
 class SettingScreen extends React.Component {
 class SettingScreen extends React.Component {
 	static navigationOptions = ({ navigation }) => ({
 	static navigationOptions = ({ navigation }) => ({
@@ -31,11 +32,23 @@ class SettingScreen extends React.Component {
 		});
 		});
 	}
 	}
 	state = {
 	state = {
-		data: this.props.allMainDeviceInfo.find(x => x.deviceId === this.props.currentSelectedData.deviceId),
+		data: '',
 		isVisible: false,
 		isVisible: false,
 		pressQr: false,
 		pressQr: false,
 		pressMail: false,
 		pressMail: false,
 	};
 	};
+	componentDidMount() {
+		this.setState({
+			data: this.props.currentSelectedData,
+		});
+	}
+	componentDidUpdate(prevProps, prevState) {
+		if (prevProps.currentSelectedData != this.props.currentSelectedData) {
+			this.setState({
+				data: this.props.currentSelectedData,
+			});
+		}
+	}
 	toggleModal(visible) {
 	toggleModal(visible) {
 		this.setState({
 		this.setState({
 			isVisible: visible,
 			isVisible: visible,
@@ -110,12 +123,26 @@ class SettingScreen extends React.Component {
 							<Icon name="arrow-forward" />
 							<Icon name="arrow-forward" />
 						</Right>
 						</Right>
 					</ListItem>
 					</ListItem>
+					<ListItem style={{ borderBottomColor: '#efefef' }}>
+						<Body>
+							<Text style={[theme.normalText, theme.textDark]}>WiFi</Text>
+							<Text note numberOfLines={1} style={theme.description}>
+								...
+							</Text>
+						</Body>
+						<Right>
+							<Icon name="arrow-forward" />
+						</Right>
+					</ListItem>
 					<ListItem style={{ borderBottomWidth: 0 }}>
 					<ListItem style={{ borderBottomWidth: 0 }}>
 						<Body>
 						<Body>
 							<Text style={[theme.normalText, theme.textDark]}>Notification</Text>
 							<Text style={[theme.normalText, theme.textDark]}>Notification</Text>
 						</Body>
 						</Body>
 						<Right>
 						<Right>
-							<Switch value={data.notification} />
+							<Switch
+								value={data.notification}
+								onValueChange={value => this.props.updateDetail('notification', value)}
+							/>
 						</Right>
 						</Right>
 					</ListItem>
 					</ListItem>
 				</List>
 				</List>
@@ -201,8 +228,14 @@ const mapStateToProps = state => ({
 	allMainDeviceInfo: state.allMainDeviceReducer.allMainDeviceInfo,
 	allMainDeviceInfo: state.allMainDeviceReducer.allMainDeviceInfo,
 	currentSelectedData: state.currentSelectedDeviceReducer.currentSelectedData,
 	currentSelectedData: state.currentSelectedDeviceReducer.currentSelectedData,
 });
 });
+const mapDispatchToProps = {
+	updateDetail,
+};
 
 
-export default connect(mapStateToProps)(SettingScreen);
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(SettingScreen);
 
 
 const styles = StyleSheet.create({
 const styles = StyleSheet.create({
 	ListItemContainer: {
 	ListItemContainer: {