update

components/MeterCard.js

 import React, { Component } from 'react';
 import { Card, View, Row, Icon, Text } from 'native-base';
-import { Image, TouchableOpacity, StyleSheet } from 'react-native';
+import { Image, StyleSheet } from 'react-native';
+import { RectButton } from 'react-native-gesture-handler';
 import { color, theme } from '../constants/Styles';
 
-const styles = StyleSheet.create({
-	meterOn: {
-		top: 7,
-		left: 5,
-		width: 35,
-		paddingVertical: 1,
-		borderRadius: 9.6,
-		position: 'absolute',
-		alignItems: 'center',
-		justifyContent: 'center',
-	},
-	meterImgStyle: {
-		width: 50,
-		height: 80,
-		resizeMode: 'contain',
-	},
-	online: {
-		top: 27,
-		left: 0,
-		width: 8,
-		height: 8,
-		borderRadius: 10,
-		position: 'absolute',
-		backgroundColor: color.statusOn,
-	},
-	meterIconCover: {
-		width: 32,
-		height: 32,
-		marginRight: 20,
-		borderRadius: 100,
-		alignItems: 'center',
-		justifyContent: 'center',
-		backgroundColor: color.defaultBg,
-	},
-	meterIconStyle: {
-		fontSize: 15,
-		color: color.grey,
-	},
-});
-
 class MeterCard extends Component {
 	render() {
 		return (
-			<TouchableOpacity onPress={this.props.onPressEachCard}>
+			<RectButton onPress={this.props.onPressEachCard}>
 				<Card style={[theme.rowContainer, { borderRadius: 8, marginBottom: 10, height: 136 }]}>
 					<View
 						style={[
@@ -90,8 +51,48 @@ class MeterCard extends Component {
 						</Row>
 					</View>
 				</Card>
-			</TouchableOpacity>
+			</RectButton>
 		);
 	}
 }
 export default MeterCard;
+
+const styles = StyleSheet.create({
+	meterOn: {
+		top: 7,
+		left: 5,
+		width: 35,
+		paddingVertical: 1,
+		borderRadius: 9.6,
+		position: 'absolute',
+		alignItems: 'center',
+		justifyContent: 'center',
+	},
+	meterImgStyle: {
+		width: 50,
+		height: 80,
+		resizeMode: 'contain',
+	},
+	online: {
+		top: 27,
+		left: 0,
+		width: 8,
+		height: 8,
+		borderRadius: 10,
+		position: 'absolute',
+		backgroundColor: color.statusOn,
+	},
+	meterIconCover: {
+		width: 32,
+		height: 32,
+		marginRight: 20,
+		borderRadius: 100,
+		alignItems: 'center',
+		justifyContent: 'center',
+		backgroundColor: color.defaultBg,
+	},
+	meterIconStyle: {
+		fontSize: 15,
+		color: color.grey,
+	},
+});

reduxStore/actions/timersAction.js

@@ -123,7 +123,10 @@ export const getTimers = () => async (dispatch, getState) => {
 
 					existedSubBreakers.push(
 						selectedDeviceSubBreakersDetails.docs.map(subBreaker =>
-							Object.assign(subBreaker.data(), { mcbLinkId: mcbLink.id, subBreakerId: subBreaker.id })
+							Object.assign(
+								// subBreaker.data(),
+								{ mcbLinkId: mcbLink.id, subBreakerId: subBreaker.id }
+							)
 						)
 					);
 
@@ -163,8 +166,8 @@ export const getTimers = () => async (dispatch, getState) => {
 
 		dispatch(getExistedDataAction(existedSubBreakers));
 
-		dispatch(getMainDeviceTImersAction(mainDeviceTimers));
-		dispatch(getSubBreakersTimersAction(subBreakersTimers));
+		// dispatch(getMainDeviceTImersAction(mainDeviceTimers));
+		// dispatch(getSubBreakersTimersAction(subBreakersTimers));
 
 		allTimersData = [...mainDeviceTimers, ...subBreakersTimers];
 		dispatch(getTimersAction(allTimersData));
@@ -209,7 +212,7 @@ export const createNewTimer = (mcbLinkId, subBreakerId, settingTime) => async (d
 			await docRef.add(settingTime);
 			return true;
 		} else {
-			alert('This Breaker cannot have more than 5 timers.');
+			alert('Breaker cannot have more than 5 timers.');
 			return false;
 		}
 	} catch (e) {

reduxStore/reducers/timersReducer.js

@@ -3,23 +3,21 @@ import {
 	GET_TIMERS_LOADING,
 	GET_TIMERS_ERROR,
 	GET_EXISTED_DATA,
-	GET_MAIN_DEVICE_TIMERS,
-	GET_SUBBREAKERS_TIMERS,
 	GET_SELECTED_TIMER_DATA,
 	SET_EDIT_MODAL_VISIBLE,
-	// GET_MCBLINKS_TIMERS,
+	// GET_MAIN_DEVICE_TIMERS,
+	// GET_SUBBREAKERS_TIMERS,
 } from '../actions/timersAction';
 
 const initState = {
 	allTimers: [],
-	mainDeviceTimers: [],
-	subBreakersTimers: [],
 	existedData: {},
 	selectedTimerData: null,
 	isEditVisible: false,
 	isLoading: true,
 	error: null,
-	// mcbLinksTimers: [],
+	// mainDeviceTimers: [],
+	// subBreakersTimers: [],
 };
 
 const timersReducer = (state = initState, action) => {
@@ -28,10 +26,6 @@ const timersReducer = (state = initState, action) => {
 			return { ...state, existedData: action.existedData };
 		case GET_TIMERS:
 			return { ...state, allTimers: action.allTimers };
-		case GET_MAIN_DEVICE_TIMERS:
-			return { ...state, mainDeviceTimers: action.mainDeviceTimers };
-		case GET_SUBBREAKERS_TIMERS:
-			return { ...state, subBreakersTimers: action.subBreakersTimers };
 		case GET_SELECTED_TIMER_DATA:
 			return { ...state, selectedTimerData: action.selectedTimerData };
 		case SET_EDIT_MODAL_VISIBLE:
@@ -40,8 +34,11 @@ const timersReducer = (state = initState, action) => {
 			return { ...state, isLoading: action.isLoading };
 		case GET_TIMERS_ERROR:
 			return { ...state, error: action.error };
-		// case GET_MCBLINKS_TIMERS:
-		// 	return { ...state, mcbLinksTimers: action.mcbLinksTimers };
+		// case GET_MAIN_DEVICE_TIMERS:
+		// 	return { ...state, mainDeviceTimers: action.mainDeviceTimers };
+		// case GET_SUBBREAKERS_TIMERS:
+		// 	return { ...state, subBreakersTimers: action.subBreakersTimers };
+
 		default:
 			return state;
 	}

screens/Private/SmartMeterScreen/SmartMeterDetailScreen.js

@@ -7,6 +7,7 @@ import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
 import { Badge } from 'react-native-elements';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { connect } from 'react-redux';
+import { setCurrentSelected } from '../../../reduxStore/actions/currentSelectedAction';
 // Main Breaker mock data
 const MainBreaker = {
 	name: 'Main Breaker',
@@ -121,6 +122,11 @@ class SmartMeterDetailScreen extends Component {
 		sb: this.expandState(),
 		data: [],
 	};
+
+	constructor(props) {
+		super(props);
+		this.props.setCurrentSelected(this.props.navigation.getParam('deviceId'));
+	}
 	renderCurrent(item, index) {
 		return (
 			<Card
@@ -296,7 +302,14 @@ const mapStateToProps = state => ({
 	allDeviceInfo: state.allMainDeviceReducer.allDeviceInfo,
 });
 
-export default connect(mapStateToProps)(SmartMeterDetailScreen);
+const mapDispatchToProps = {
+	setCurrentSelected,
+};
+
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(SmartMeterDetailScreen);
 const styles = StyleSheet.create({
 	currentCard: {
 		flex: 1,

screens/Private/SmartMeterScreen/SmartMeterScreen.js

@@ -44,9 +44,12 @@ class SmartMeterScreen extends PureComponent {
 				img={item.img || null}
 				isOnline={item.isOnline || false}
 				isOn={item.isOn || false}
-				onPressEachCard={async () => {
-					await this.props.setCurrentSelected(item.deviceId);
-					this.props.navigation.navigate('SmartMeterDetail', { name: item.name || '' });
+				onPressEachCard={() => {
+					// this.props.setCurrentSelected(item.deviceId);
+					this.props.navigation.navigate('SmartMeterDetail', {
+						name: item.name || '',
+						deviceId: item.deviceId,
+					});
 				}}
 			/>
 		);
@@ -68,8 +71,8 @@ class SmartMeterScreen extends PureComponent {
 				style={[theme.container, theme.containerWithPadding]}
 				contentContainerStyle={{ paddingBottom: isIphoneX() ? 90 : 55 }} //iPhoneX BottomSpace = 34
 				data={allMainDeviceInfo}
-				extraData={this.props}
-				keyExtractor={(item, index) => `Card${item.deviceId}`}
+				// extraData={this.props}
+				keyExtractor={(item, index) => item.deviceId}
 				ListEmptyComponent={() => (
 					<View>
 						<Text style={[theme.normalText, { marginTop: 20 }]}>

screens/Private/TimerScreen/TimerScreen.andriod.js

@@ -38,9 +38,9 @@ initTime.setDate(0);
 initTime.setSeconds(0);
 
 const initTimeSetting = {
-	mcbLinkId: null,
-	id: null,
-	key: null,
+	// mcbLinkId: null,
+	// subBreakerId: null,
+	// key: null,
 	isActive: false,
 	isPowerOn: false,
 	timer: initTime,
@@ -60,7 +60,6 @@ const initState = {
 	isAddVisible: false,
 	isfilterVisible: false,
 
-	checked: [],
 	search: '',
 
 	selectedBreaker: null, //Main or mcbLink
@@ -84,6 +83,11 @@ class TimerScreen extends PureComponent {
 		subBreakerList: [],
 	};
 
+	constructor(props) {
+		super(props);
+		this.props.getTimers();
+	}
+
 	setPickerSelectData = () => {
 		let pickerSelectData = [{ label: 'Main Device', value: 'main' }];
 
@@ -158,15 +162,15 @@ class TimerScreen extends PureComponent {
 				const isCreated = await this.props.createNewTimer(null, null, timerData);
 
 				if (isCreated) {
-					this.props.getTimers();
 					this.resetStateAndProps();
+					this.props.getTimers();
 				}
 			} else if (selectedBreaker && selectedSubBreaker) {
 				await this.props.createNewTimer(selectedBreaker, selectedSubBreaker.id, timerData);
 				this.resetStateAndProps();
 				this.props.getTimers();
 			} else {
-				alert('please select Sub Breaker');
+				alert('please select (Sub) Breaker');
 			}
 		} else if (isEditVisible) {
 			this.props.editTimer(timerData);
@@ -214,7 +218,6 @@ class TimerScreen extends PureComponent {
 				</TouchableOpacity>
 			),
 		});
-		this.props.getTimers();
 		// this.setExistedSubBreaker();
 		// this.props.existedData && this.setPickerSelectData();
 		console.log('STATE', this.state);
@@ -422,7 +425,7 @@ class TimerScreen extends PureComponent {
 				<FlatList
 					contentContainerStyle={{ paddingBottom: isIphoneX() ? 90 : 55 }}
 					data={this.props.allTimers}
-					extraData={this.props.allTimers}
+					// extraData={this.props.allTimers}
 					refreshing={this.props.isLoading}
 					onRefresh={this.props.getTimers}
 					ListEmptyComponent={() => (
@@ -434,7 +437,7 @@ class TimerScreen extends PureComponent {
 					renderItem={({ item, index }) => (
 						<SwipeableRow item={item} index={index} onSwipeOpen={this.autoCloseSwipeRow} />
 					)}
-					keyExtractor={(item, index) => `timer${index}`}
+					keyExtractor={(item, index) => `timer${item.key}`}
 				/>
 
 				{/* Create & Update Timer Modal */}