Skip to content

S
safetcut-app
Commit afaf941c by Tonk
Options

Merge branch 'injectedFirebase' into ejectedExpo

parents d8dd88a4 4a7df4f1
Showing with 614 additions and 320 deletions
App.js
......@@ -44,15 +44,15 @@ const createMockData = () => {
const mainRef = fireStore.doc(`device/${deviceId}`);
batch.set(mainRef, main);
// for (let i = 1; i <= 2; i++) {
// let mainTimerRef = fireStore
// .collection('device')
// .doc(deviceId)
// .collection('Timers')
// .doc();
// batch.set(mainTimerRef, timer);
// }
for (let i = 1; i <= 2; i++) {
let mainTimerRef = fireStore
.collection('device')
.doc(deviceId)
.collection('Timers')
.doc();
batch.set(mainTimerRef, timer);
}
/*------------------------------*/
for (let i = 1; i <= 4; i++) {
const mcbLinks = {
......@@ -66,17 +66,17 @@ const createMockData = () => {
.collection('mcbLinks')
.doc(i.toString());
for (let z = 1; z <= 1; z++) {
let mcbLinkTimerRef = fireStore
.collection('device')
.doc(deviceId)
.collection('mcbLinks')
.doc(i.toString())
.collection('Timers')
.doc();
// for (let z = 1; z <= 1; z++) {
// let mcbLinkTimerRef = fireStore
// .collection('device')
// .doc(deviceId)
// .collection('mcbLinks')
// .doc(i.toString())
// .collection('Timers')
// .doc();
batch.set(mcbLinkTimerRef, timer);
}
// batch.set(mcbLinkTimerRef, timer);
// }
batch.set(mcbLinksRef, mcbLinks);
}
......@@ -130,7 +130,7 @@ const main = {
const initTime = new Date();
initTime.setFullYear(2019);
initTime.setMonth(1);
initTime.setMonth(0);
initTime.setDate(0);
initTime.setSeconds(0);
......
AppNavigation.js
......@@ -230,6 +230,9 @@ const MainStack = createStackNavigator(
},
{
defaultNavigationOptions: { header: null },
tabBarOptions: {
keyboardHidesTabBar: true,
},
}
);
......@@ -245,6 +248,9 @@ const IntroStack = createStackNavigator(
{
initialRouteName: 'Login',
defaultNavigationOptions: { headerStyle: { borderColor: 'transparent', elevation: 0, borderBottomWidth: 0 } },
tabBarOptions: {
keyboardHidesTabBar: true,
},
}
);
......@@ -256,6 +262,9 @@ const AppStack = createSwitchNavigator(
},
{
initialRouteName: 'AuthLoading', //default AuthLoading
tabBarOptions: {
keyboardHidesTabBar: true,
},
}
);
......
android/app/build.gradle
......@@ -186,6 +186,7 @@ android {
pickFirst '**/x86/libjsc.so'
pickFirst '**/armeabi-v7a/libjsc.so'
}
buildToolsVersion = buildToolsVersion
}
dependencies {
......
android/app/release/output.json 0 → 100644
[{"outputType":{"type":"APK"},"apkData":{"type":"MAIN","splits":[],"versionCode":1,"versionName":"1.0","enabled":true,"outputFile":"app-release.apk","fullName":"release","baseName":"release"},"path":"app-release.apk","properties":{}}]
\ No newline at end of file
android/app/src/main/AndroidManifest.xml
......@@ -19,7 +19,7 @@
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="stateAlwaysHidden"
android:windowSoftInputMode="stateAlwaysHidden|adjustPan"
android:screenOrientation="portrait">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
......
android/settings.gradle
......@@ -2,7 +2,6 @@ rootProject.name = 'rn_safetcutapp'
include ':react-native-svg'
project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'
include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')
include ':app'
components/SwipeableRow.js
......@@ -7,13 +7,20 @@ import Swipeable from 'react-native-gesture-handler/Swipeable';
import IconMaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { Overlay } from 'react-native-elements';
import { format } from 'date-fns';
import { connect } from 'react-redux';
import { getSelectedTimerData, setEditModalVisible, deleteTimer, getTimers } from '../reduxStore/actions/timersAction';
const AnimatedIcon = Animated.createAnimatedComponent(IconMaterialIcons);
const Row = ({ data }) => {
// console.log(data);
const Row = ({ data, getSelectedTimerData, setEditModalVisible }) => {
return (
<RectButton style={styles.rectButton} onPress={() => alert('hello ' + data.name)}>
<RectButton
style={styles.rectButton}
onPress={() => {
getSelectedTimerData(data);
setEditModalVisible(true);
}}
>
<View style={{ flexDirection: 'row', paddingVertical: 5 }}>
<View style={{ flex: 1 }}>
<View style={{ flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between' }}>
......@@ -71,8 +78,8 @@ const Row = ({ data }) => {
{data.type === 'main'
? 'Main'
: data.type === 'mcbLink'
? `MCB LINK${data.id}`
: `MCB Link${data.mcbLinkId} | Sub Breaker${data.id}`}
? `MCB LINK${data.mcbLinkId}`
: `MCB Link ${data.mcbLinkId} | Sub Breaker ${data.subBreakerId}`}
</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
......@@ -101,13 +108,43 @@ const Row = ({ data }) => {
);
};
const mapDispatchToProps = {
getSelectedTimerData,
setEditModalVisible,
};
const WarppedRow = connect(
null,
mapDispatchToProps
)(Row);
class SwipeableRow extends Component {
selectedRow = null;
state = {
isVisible: false,
};
renderRightActions = (progress, dragX) => {
updateRef = instance => {
this.swipeInstance = instance;
};
showConfirmDelete = () => {
this.swipeInstance.close();
this.setState({ isVisible: true });
};
cancel = () => {
this.setState({ isVisible: false });
};
delete = data => {
console.log(data);
this.props.deleteTimer(data);
this.props.getTimers();
this.setState({ isVisible: false });
};
_onSwipeOpen = () => {
this.props.onSwipeOpen(this.swipeInstance);
};
renderRightActions = (progress, dragX) => data => {
const scale = dragX.interpolate({
inputRange: [-80, 0],
outputRange: [1, 0],
......@@ -115,7 +152,7 @@ class SwipeableRow extends Component {
});
return (
<>
<RectButton style={styles.rightAction} onPress={this.cfDelete}>
<RectButton style={styles.rightAction} onPress={this.showConfirmDelete}>
<AnimatedIcon
name="delete-forever"
size={30}
......@@ -139,7 +176,7 @@ class SwipeableRow extends Component {
<Button transparent style={{ width: '40%' }} onPress={this.cancel} rounded>
<Text style={{ color: color.grey }}>Cancel</Text>
</Button>
<Button style={styles.delBtn} onPress={this.delete} rounded>
<Button style={styles.delBtn} onPress={() => this.delete(data)} rounded>
<Text>Delete</Text>
</Button>
</View>
......@@ -148,23 +185,6 @@ class SwipeableRow extends Component {
</>
);
};
updateRef = instance => {
this.swipeInstance = instance;
};
cfDelete = () => {
this.swipeInstance.close();
this.setState({ isVisible: true });
};
cancel = () => {
this.setState({ isVisible: false });
};
delete = () => {
this.setState({ isVisible: false });
};
_onSwipeOpen = () => {
this.props.onSwipeOpen(this.swipeInstance);
};
render() {
return (
......@@ -172,17 +192,25 @@ class SwipeableRow extends Component {
ref={this.updateRef}
friction={2}
rightThreshold={40}
renderRightActions={this.renderRightActions}
renderRightActions={(progress, dragX) => this.renderRightActions(progress, dragX)(this.props.item)}
containerStyle={{ backgroundColor: color.primary }}
onSwipeableWillOpen={this._onSwipeOpen}
>
<Row data={this.props.item} index={this.props.index} />
<WarppedRow data={this.props.item} index={this.props.index} />
</Swipeable>
);
}
}
export default SwipeableRow;
const _mapDispatchToProps = {
deleteTimer,
getTimers,
};
export default connect(
null,
_mapDispatchToProps
)(SwipeableRow);
const styles = StyleSheet.create({
leftAction: {
......
firebase.js
......@@ -15,4 +15,5 @@ const app = firebase.initializeApp({
export default app;
const fireStore = app.firestore();
export { fireStore };
reduxStore/actions/timersAction.js
......@@ -7,13 +7,11 @@ export const GET_TIMERS_ERROR = 'GET_TIMERS_ERROR';
export const GET_EXISTED_DATA = 'GET_EXISTED_DATA';
export const GET_MAIN_DEVICE_TIMERS = 'GET_MAIN_DEVICE_TIMERS';
export const GET_MCBLINKS_TIMERS = 'GET_MCBLINKS_TIMERS';
// export const GET_MCBLINKS_TIMERS = 'GET_MCBLINKS_TIMERS';
export const GET_SUBBREAKERS_TIMERS = 'GET_SUBBREAKERS_TIMERS';
// export const getTimersAction = (mainDeviceTimers, mcbLinksTimers, subBreakersTimers) => ({
// type: GET_TIMERS,
// allTimers: { mainDeviceTimers, mcbLinksTimers, subBreakersTimers },
// });
export const GET_SELECTED_TIMER_DATA = 'GET_SELECTED_TIMER_DATA';
export const SET_EDIT_MODAL_VISIBLE = 'SET_EDIT_MODAL_VISIBLE';
export const getTimersAction = allTimers => ({
type: GET_TIMERS,
......@@ -25,10 +23,10 @@ export const getMainDeviceTImersAction = mainDeviceTimers => ({
mainDeviceTimers,
});
export const getMcbLinksTimersAction = mcbLinksTimers => ({
type: GET_MCBLINKS_TIMERS,
mcbLinksTimers,
});
// export const getMcbLinksTimersAction = mcbLinksTimers => ({
// type: GET_MCBLINKS_TIMERS,
// mcbLinksTimers,
// });
export const getSubBreakersTimersAction = subBreakersTimers => ({
type: GET_SUBBREAKERS_TIMERS,
......@@ -40,6 +38,16 @@ export const getExistedDataAction = existedData => ({
existedData,
});
export const getSelectedTimerDataAction = selectedTimerData => ({
type: GET_SELECTED_TIMER_DATA,
selectedTimerData,
});
export const setEditModalVisibleAction = bool => ({
type: SET_EDIT_MODAL_VISIBLE,
isEditVisible: bool,
});
export const loadingAction = bool => ({
type: GET_TIMERS_LOADING,
isLoading: bool,
......@@ -57,12 +65,11 @@ export const getTimers = () => async (dispatch, getState) => {
dispatch(loadingAction(true));
let allTimersData = [];
let mainDeviceTimers = [];
let mcbLinksTimers = [];
let subBreakersTimers = [];
// let existedMcbLinks = [];
let existedSubBreakers = [];
let mcbLinksSubBreakersTimers = [];
//main device section
/*-------------------------------------*/
......@@ -80,19 +87,17 @@ export const getTimers = () => async (dispatch, getState) => {
const selectedDeviceDetailsData = selectedDeviceDetails.data();
await Promise.all(
selectedDeviceTimers.docs.map(timer => {
if (timer.exists) {
mainDeviceTimers.push(
Object.assign(timer.data(), {
id: timer.id,
type: selectedDeviceDetailsData.type,
name: selectedDeviceDetailsData.name,
})
);
}
})
);
selectedDeviceTimers.docs.map(timer => {
if (timer.exists) {
mainDeviceTimers.push(
Object.assign(timer.data(), {
key: timer.id,
type: selectedDeviceDetailsData.type,
name: selectedDeviceDetailsData.name,
})
);
}
});
//mcblink section
/*-------------------------------------*/
......@@ -106,33 +111,8 @@ export const getTimers = () => async (dispatch, getState) => {
await Promise.all(
selectedDeviceMcbLinksDetails.docs.map(async mcbLink => {
if (mcbLink.exists) {
// existedMcbLinks.push(Object.assign(mcbLink.data(), { id: mcbLink.id }));
let mcbLinkTimers = await fireStore
.collection('device')
.doc(selectedDeviceId)
.collection('mcbLinks')
.doc(mcbLink.id)
.collection('Timers')
.orderBy('timer', 'asc')
.get();
mcbLinkTimers.docs.map(mcbLinkTimer => {
if (mcbLinkTimer.exists) {
mcbLinksTimers.push(
Object.assign(mcbLinkTimer.data(), {
id: mcbLink.id,
key: mcbLinkTimer.id,
type: mcbLink.data().type,
name: mcbLink.data().name,
})
);
}
});
//subbreaker section
/*-------------------------------------*/
const selectedDeviceSubBreakersDetails = await fireStore
.collection('device')
.doc(selectedDeviceId)
......@@ -143,7 +123,7 @@ export const getTimers = () => async (dispatch, getState) => {
existedSubBreakers.push(
selectedDeviceSubBreakersDetails.docs.map(subBreaker =>
Object.assign(subBreaker.data(), { mcbLinkId: mcbLink.id, id: subBreaker.id })
Object.assign(subBreaker.data(), { mcbLinkId: mcbLink.id, subBreakerId: subBreaker.id })
)
);
......@@ -166,7 +146,7 @@ export const getTimers = () => async (dispatch, getState) => {
subBreakersTimers.push(
Object.assign(subBreakerTimer.data(), {
mcbLinkId: mcbLink.id,
id: subBreaker.id,
subBreakerId: subBreaker.id,
key: subBreakerTimer.id,
type: subBreaker.data().type,
name: subBreaker.data().name,
......@@ -184,10 +164,9 @@ export const getTimers = () => async (dispatch, getState) => {
dispatch(getExistedDataAction(existedSubBreakers));
dispatch(getMainDeviceTImersAction(mainDeviceTimers));
dispatch(getMcbLinksTimersAction(mcbLinksTimers));
dispatch(getSubBreakersTimersAction(subBreakersTimers));
allTimersData = [...mainDeviceTimers, ...mcbLinksTimers, ...subBreakersTimers];
allTimersData = [...mainDeviceTimers, ...subBreakersTimers];
dispatch(getTimersAction(allTimersData));
} catch (error) {
dispatch(errorAction(error.message || error || 'Error'));
......@@ -195,6 +174,116 @@ export const getTimers = () => async (dispatch, getState) => {
dispatch(loadingAction(false));
};
export const getSelectedTimerData = data => async dispatch => {
await dispatch(getSelectedTimerDataAction(data));
};
export const setEditModalVisible = bool => async dispatch => {
await dispatch(setEditModalVisibleAction(bool));
};
export const createNewTimer = (mcbLinkId, subBreakerId, settingTime) => async (dispatch, getState) => {
const { currentSelectedDeviceReducer } = getState();
const { selectedDeviceId } = currentSelectedDeviceReducer;
let docRef = null;
try {
// dispatch(loadingAction(true));
if (mcbLinkId && subBreakerId) {
docRef = fireStore
.collection('device')
.doc(selectedDeviceId)
.collection('mcbLinks')
.doc(mcbLinkId.toString())
.collection('subBreakers')
.doc(subBreakerId.toString())
.collection('Timers');
} else {
docRef = fireStore
.collection('device')
.doc(selectedDeviceId)
.collection('Timers');
}
let timers = await docRef.get();
// console.log('timerLength', timers.size, timers.docs.length);
if (timers.size < 5) {
await docRef.add(settingTime);
return true;
} else {
alert('This Breaker cannot have more than 5 timers.');
return false;
}
} catch (e) {
alert(e);
}
};
export const editTimer = settingTime => async (dispatch, getState) => {
const { currentSelectedDeviceReducer, timersReducer } = getState();
const {
selectedTimerData: { mcbLinkId, subBreakerId, key },
} = timersReducer;
const { selectedDeviceId } = currentSelectedDeviceReducer;
let docRef = null;
try {
// dispatch(loadingAction(true));
if (mcbLinkId && subBreakerId) {
docRef = fireStore
.collection('device')
.doc(selectedDeviceId)
.collection('mcbLinks')
.doc(mcbLinkId)
.collection('subBreakers')
.doc(subBreakerId)
.collection('Timers')
.doc(key);
} else {
docRef = fireStore
.collection('device')
.doc(selectedDeviceId)
.collection('Timers')
.doc(key);
}
await docRef.update(settingTime);
} catch (e) {
alert(e);
}
};
export const deleteTimer = selectedData => async (dispatch, getState) => {
const { currentSelectedDeviceReducer } = getState();
const { selectedDeviceId } = currentSelectedDeviceReducer;
const { mcbLinkId, subBreakerId, key } = selectedData;
let docRef = null;
try {
// dispatch(loadingAction(true));
if (key) {
if (mcbLinkId && subBreakerId) {
docRef = fireStore
.collection('device')
.doc(selectedDeviceId)
.collection('mcbLinks')
.doc(mcbLinkId)
.collection('subBreakers')
.doc(subBreakerId)
.collection('Timers')
.doc(key);
} else {
docRef = fireStore
.collection('device')
.doc(selectedDeviceId)
.collection('Timers')
.doc(key);
}
await docRef.delete();
}
} catch (e) {
alert(e);
}
};
// export const getTimers = () => async (dispatch, getState) => {
// const { currentSelectedDeviceReducer } = getState();
// const { selectedDeviceId } = currentSelectedDeviceReducer;
......
reduxStore/reducers/timersReducer.js
......@@ -4,18 +4,22 @@ import {
GET_TIMERS_ERROR,
GET_EXISTED_DATA,
GET_MAIN_DEVICE_TIMERS,
GET_MCBLINKS_TIMERS,
GET_SUBBREAKERS_TIMERS,
GET_SELECTED_TIMER_DATA,
SET_EDIT_MODAL_VISIBLE,
// GET_MCBLINKS_TIMERS,
} from '../actions/timersAction';
const initState = {
allTimers: [],
mainDeviceTimers: [],
mcbLinksTimers: [],
subBreakersTimers: [],
existedData: {},
selectedTimerData: null,
isEditVisible: false,
isLoading: true,
error: null,
// mcbLinksTimers: [],
};
const timersReducer = (state = initState, action) => {
......@@ -26,14 +30,18 @@ const timersReducer = (state = initState, action) => {
return { ...state, allTimers: action.allTimers };
case GET_MAIN_DEVICE_TIMERS:
return { ...state, mainDeviceTimers: action.mainDeviceTimers };
case GET_MCBLINKS_TIMERS:
return { ...state, mcbLinksTimers: action.mcbLinksTimers };
case GET_SUBBREAKERS_TIMERS:
return { ...state, subBreakersTimers: action.subBreakersTimers };
case GET_SELECTED_TIMER_DATA:
return { ...state, selectedTimerData: action.selectedTimerData };
case SET_EDIT_MODAL_VISIBLE:
return { ...state, isEditVisible: action.isEditVisible };
case GET_TIMERS_LOADING:
return { ...state, isLoading: action.isLoading };
case GET_TIMERS_ERROR:
return { ...state, error: action.error };
// case GET_MCBLINKS_TIMERS:
// return { ...state, mcbLinksTimers: action.mcbLinksTimers };
default:
return state;
}
......
screens/Private/SmartMeterScreen/SmartMeterScreen.js
......@@ -36,7 +36,7 @@ class SmartMeterScreen extends PureComponent {
componentDidMount = () => {
this._isMounted = true;
// this.getData();
this.getData();
};
renderItem = ({ item, index }) => {
......@@ -49,7 +49,6 @@ class SmartMeterScreen extends PureComponent {
isOn={item.switch || false}
onPressEachCard={async () => {
await this.props.setCurrentSelected(item.deviceId);
await this.props.getTimers();
this.props.navigation.navigate('SmartMeterDetail', { name: item.name || '' });
}}
/>
......@@ -155,7 +154,6 @@ const mapStateToProps = state => ({
const mapDispatchToProps = {
getAllMainDeviceInfo,
setCurrentSelected,
getTimers,
};
export default connect(
......
screens/Private/TimerScreen/TimerScreen.andriod.js
......@@ -22,21 +22,25 @@ import { width, height } from '../../../constants/Layout';
import InputField from '../../../components/InputField';
import { isIphoneX } from '../../../utils/isPhoneX';
import { connect } from 'react-redux';
import { getTimers } from '../../../reduxStore/actions/timersAction';
import { fireStore } from '../../../firebase';
import firebase from 'firebase/app';
import 'firebase/firestore';
import {
getTimers,
getSelectedTimerData,
setEditModalVisible,
createNewTimer,
editTimer,
deleteTimer,
} from '../../../reduxStore/actions/timersAction';
const initTime = new Date();
initTime.setFullYear(2019);
initTime.setMonth(1);
initTime.setMonth(0);
initTime.setDate(0);
initTime.setSeconds(0);
const initState = {
isAddVisible: false,
isfilterVisible: false,
const initTimeSetting = {
mcbLinkId: null,
id: null,
key: null,
isActive: false,
isPowerOn: false,
timer: initTime,
......@@ -49,9 +53,14 @@ const initState = {
{ id: 5, isRepeat: false, day: 'Friday' },
{ id: 6, isRepeat: false, day: 'Saturday' },
],
};
checked: [],
const initState = {
...initTimeSetting,
isAddVisible: false,
isfilterVisible: false,
checked: [],
search: '',
selectedBreaker: null, //Main or mcbLink
......@@ -76,7 +85,7 @@ class TimerScreen extends PureComponent {
};
setPickerSelectData = () => {
let pickerSelectData = [{ label: 'Main Device', value: false }];
let pickerSelectData = [{ label: 'Main Device', value: 'main' }];
this.props.existedData.map((mcbLink, index) => {
pickerSelectData.push({ label: `MCB Link ${index + 1}`, value: index + 1 });
......@@ -85,14 +94,14 @@ class TimerScreen extends PureComponent {
};
setExistedSubBreaker = () => {
let subBreakersList = 0;
let existedSubBreakerListLength = 0;
this.props.existedData.map((mainBreaker, index) => {
if (this.state.selectedBreaker === index + 1) {
subBreakersList = mainBreaker.length;
existedSubBreakerListLength = mainBreaker.length;
}
});
let subBreakerList = new Array(subBreakersList).fill().map((el, index) => {
let subBreakerList = new Array(existedSubBreakerListLength).fill().map((el, index) => {
return { id: index + 1, selected: false };
});
......@@ -126,38 +135,53 @@ class TimerScreen extends PureComponent {
this.setState({ search });
};
createNewTimer = () => {
const deviceId = this.props.selectedDeviceId;
const { selectedSubBreaker, selectedBreaker } = this.state;
let docRef = null;
if (selectedSubBreaker) {
docRef = fireStore.doc(`device/${deviceId}/mcbLinks/${selectedBreaker}/subBreakers/${selectedSubBreaker}`);
} else if (selectedBreaker) {
docRef = fireStore.doc(`device/${deviceId}/mcbLinks/${selectedBreaker}`);
} else {
docRef = fireStore.doc(`device/${deviceId}`);
createNewOrEditTimer = async () => {
const { selectedSubBreaker, selectedBreaker, isAddVisible } = this.state;
const { isEditVisible } = this.props;
// fixed year mouth date secound So we can focus on hour and minute and can sort with timestamp
let saveTimer = new Date(this.state.timer);
saveTimer.setFullYear(2019);
saveTimer.setMonth(0);
saveTimer.setDate(0);
saveTimer.setSeconds(0);
const timerData = {
isActive: this.state.isActive,
isPowerOn: this.state.isPowerOn,
timer: Number(saveTimer),
repeatOn: this.state.repeatOn,
};
if (isAddVisible) {
if (selectedBreaker === 'main') {
const isCreated = await this.props.createNewTimer(null, null, timerData);
if (isCreated) {
this.props.getTimers();
this.resetStateAndProps();
}
} else if (selectedBreaker && selectedSubBreaker) {
await this.props.createNewTimer(selectedBreaker, selectedSubBreaker.id, timerData);
this.resetStateAndProps();
this.props.getTimers();
} else {
alert('please select Sub Breaker');
}
} else if (isEditVisible) {
this.props.editTimer(timerData);
this.resetStateAndProps();
this.props.setEditModalVisible(false);
this.props.getTimers();
}
};
try {
docRef.update({
timers: firebase.firestore.FieldValue.arrayUnion({
isActive: this.state.isActive,
isPowerOn: this.state.isPowerOn,
timer: Number(this.state.timer),
repeatOn: this.state.repeatOn,
}),
});
} catch (e) {
alert(e);
}
resetStateAndProps = async () => {
await this.props.getSelectedTimerData(initTimeSetting);
this.setState(initState);
};
componentDidUpdate = (prevProps, prevState) => {
if (prevProps.timers !== this.props.timers) {
console.log('timers =>', this.props.timers || '');
}
componentDidUpdate = async (prevProps, prevState) => {
if (prevState.selectedBreaker !== this.state.selectedBreaker) {
this.setExistedSubBreaker();
}
......@@ -168,11 +192,16 @@ class TimerScreen extends PureComponent {
let selectedSubBreaker = this.state.subBreakerList.find(subBreaker => {
return subBreaker.selected === true;
});
this.setState({ selectedSubBreaker: selectedSubBreaker });
}
console.log('STATE', this.state);
if (prevProps.selectedTimerData !== this.props.selectedTimerData) {
this.setState({
isActive: this.props.selectedTimerData.isActive,
isPowerOn: this.props.selectedTimerData.isPowerOn,
timer: this.props.selectedTimerData.timer,
repeatOn: this.props.selectedTimerData.repeatOn,
});
}
};
componentDidMount = () => {
......@@ -185,8 +214,176 @@ class TimerScreen extends PureComponent {
</TouchableOpacity>
),
});
this.setExistedSubBreaker();
this.props.existedData && this.setPickerSelectData();
this.props.getTimers();
// this.setExistedSubBreaker();
// this.props.existedData && this.setPickerSelectData();
console.log('STATE', this.state);
};
renderAddAndEditTimerModal = () => {
const { isAddVisible } = this.state;
const { isEditVisible, selectedTimerData } = this.props;
// console.log('selectedTimerData', this.props.selectedTimerData);
return (
<Modal
transparent
presentationStyle={'overFullScreen'}
animationType="slide"
visible={isAddVisible || isEditVisible}
>
<View style={styles.scrollContainer}>
<View
style={{
display: 'flex',
paddingHorizontal: 25,
flexDirection: 'row',
alignContent: 'stretch',
justifyContent: 'space-between',
}}
>
<Text style={[theme.title]}>{isAddVisible ? 'Create Timer' : 'Edit Timer'}</Text>
{isEditVisible && (
<Icon
name="trash-o"
type="FontAwesome"
style={{ color: color.grey, fontSize: 22 }}
onPress={async () => {
this.props.deleteTimer(selectedTimerData);
await this.resetStateAndProps();
this.props.setEditModalVisible(false);
await this.props.getTimers();
}}
/>
)}
</View>
<ScrollView contentContainerStyle={{ paddingHorizontal: 25, paddingBottom: 20 }}>
<Text style={[theme.normalText, theme.textDark, theme.mt2]}>Set Time</Text>
<DatePicker
date={this.state.timer}
onDateChange={date => this.setState({ timer: date })}
mode="time"
locale="fr"
style={{ height: 100, display: 'flex', alignSelf: 'center' }}
/>
{isAddVisible && (
<>
<Text style={[theme.normalText, theme.textDark, theme.mt2]}>Select Breaker</Text>
<View style={styles.selectBreakerStyle}>
<RNPickerSelect
items={this.state.pickerSelectData}
useNativeAndroidPickerStyle={false}
onValueChange={(value, index) => {
this.setState({ selectedBreaker: value });
}}
placeholder={{ label: 'Select...', value: null }}
style={pickerStyle}
Icon={() => (
<Icon name="ios-arrow-down" style={{ fontSize: 14, color: '#c8c8c8' }} />
)}
/>
</View>
<FlatList
style={theme.mt2}
data={this.state.subBreakerList}
extradata={this.state.subBreakerList}
ItemSeparatorComponent={() => <View style={theme.mt1} />}
renderItem={({ item, index }) => (
<CheckBox
containerStyle={styles.checkboxContainer}
fontFamily={'Avenir-Roman'}
textStyle={{ fontWeight: 'normal', color: color.darkGrey }}
title={'Sub breaker ' + item.id}
checked={this.state.subBreakerList[index].selected}
checkedIcon={
<Icon
name="md-radio-button-on"
style={{ color: color.primary, fontSize: 22 }}
/>
}
uncheckedIcon={
<Icon
name="md-radio-button-off"
style={{ color: color.grey, fontSize: 22 }}
/>
}
onPress={() => {
this.setState(prevState => ({
subBreakerList: prevState.subBreakerList.map((el, elementIndex) =>
elementIndex === index
? {
...el,
selected: !this.state.subBreakerList[index]
.selected,
}
: { ...el, selected: false }
),
}));
}}
/>
)}
keyExtractor={(item, index) => `sub${index}`}
/>
</>
)}
<View style={[styles.rowContainer, theme.mt2]}>
<Text style={[theme.normalText, theme.textDark]}>Power</Text>
<Switch value={this.state.isPowerOn} onValueChange={this.togglePower} />
</View>
<View style={[styles.rowContainer, theme.mt2]}>
<Text style={[theme.normalText, theme.textDark]}>Active</Text>
<Switch value={this.state.isActive} onValueChange={this.toggleActive} />
</View>
<View style={theme.mt2}>
<Text style={[theme.normalText, theme.textDark, { marginBottom: 10 }]}>Repeat</Text>
<View style={styles.dayContainer}>
{this.state.repeatOn.map((item, index) => {
let dynamicColor = this.state.repeatOn[index].isRepeat ? color.primary : color.grey;
return (
<TouchableNativeFeedback
key={`repeatOn${index}`}
onPress={() => this.toggleRepeatDays(index)}
>
<View style={[styles.dayBtn, { borderColor: dynamicColor }]}>
<Text style={[theme.normalText, { color: dynamicColor }]}>
{item.day.substr(0, 1)}
</Text>
</View>
</TouchableNativeFeedback>
);
})}
</View>
</View>
<View style={[{ flexDirection: 'row', justifyContent: 'space-evenly' }, theme.mt2]}>
<Button
transparent
style={{ flex: 1, justifyContent: 'center' }}
onPress={() => {
this.resetStateAndProps();
this.props.setEditModalVisible(false);
}}
>
<Text style={{ color: color.grey }}>Cancel</Text>
</Button>
<Button
rounded
style={{
flex: 1,
justifyContent: 'center',
backgroundColor: color.primary,
}}
onPress={this.createNewOrEditTimer}
>
<Text style={{ color: color.white }}>Confirm</Text>
</Button>
</View>
</ScrollView>
</View>
</Modal>
);
};
render() {
......@@ -197,7 +394,7 @@ class TimerScreen extends PureComponent {
transparent
presentationStyle={'overFullScreen'}
animationType="fade"
visible={this.state.isfilterVisible || this.state.isAddVisible}
visible={this.state.isfilterVisible || this.state.isAddVisible || this.props.isEditVisible}
>
<View style={{ width, height, backgroundColor: 'rgba(0,0,0,0.5)' }} />
</Modal>
......@@ -226,6 +423,8 @@ class TimerScreen extends PureComponent {
contentContainerStyle={{ paddingBottom: isIphoneX() ? 90 : 55 }}
data={this.props.allTimers}
extraData={this.props.allTimers}
refreshing={this.props.isLoading}
onRefresh={this.props.getTimers}
ListEmptyComponent={() => (
<View>
<Text style={[theme.normalText, theme.mt2]}>No timers</Text>
......@@ -239,146 +438,7 @@ class TimerScreen extends PureComponent {
/>
{/* Create & Update Timer Modal */}
<Modal
transparent
presentationStyle={'overFullScreen'}
animationType="slide"
visible={this.state.isAddVisible}
>
<View style={styles.scrollContainer}>
<Text style={[theme.title, { paddingHorizontal: 25 }]}>Create Timer</Text>
<ScrollView contentContainerStyle={{ paddingHorizontal: 25, paddingBottom: 20 }}>
<Text style={[theme.normalText, theme.textDark, theme.mt2]}>Set Time</Text>
<DatePicker
date={this.state.timer}
onDateChange={date => this.setState({ timer: date })}
mode="time"
style={{ height: 100 }}
/>
<Text style={[theme.normalText, theme.textDark, theme.mt2]}>Select Breaker</Text>
<View
style={[
theme.mt2,
{
borderWidth: 1,
borderColor: '#dcdcdc',
borderRadius: 5,
padding: 10,
},
]}
>
<RNPickerSelect
items={this.state.pickerSelectData}
useNativeAndroidPickerStyle={false}
onValueChange={(value, index) => {
this.setState({ selectedBreaker: value });
}}
placeholder={{ label: 'Select...', value: null }}
style={pickerStyle}
Icon={() => (
<Icon name="ios-arrow-down" style={{ fontSize: 14, color: '#c8c8c8' }} />
)}
/>
</View>
<FlatList
style={theme.mt2}
data={this.state.subBreakerList}
extradata={this.state.subBreakerList}
ItemSeparatorComponent={() => <View style={theme.mt1} />}
renderItem={({ item, index }) => (
<CheckBox
containerStyle={styles.checkboxContainer}
fontFamily={'Avenir-Roman'}
textStyle={{ fontWeight: 'normal', color: color.darkGrey }}
title={'Sub breaker ' + item.id}
checked={this.state.subBreakerList[index].selected}
checkedIcon={
<Icon
name="md-radio-button-on"
style={{ color: color.primary, fontSize: 22 }}
/>
}
uncheckedIcon={
<Icon
name="md-radio-button-off"
style={{ color: color.grey, fontSize: 22 }}
/>
}
onPress={() => {
this.setState(prevState => ({
subBreakerList: prevState.subBreakerList.map((el, elementIndex) =>
elementIndex === index
? {
...el,
selected: !this.state.subBreakerList[index].selected,
}
: { ...el, selected: false }
),
}));
}}
/>
)}
keyExtractor={(item, index) => `sub${index}`}
/>
<View style={[styles.rowContainer, theme.mt2]}>
<Text style={[theme.normalText, theme.textDark]}>Power</Text>
<Switch value={this.state.isPowerOn} onValueChange={this.togglePower} />
</View>
<View style={[styles.rowContainer, theme.mt2]}>
<Text style={[theme.normalText, theme.textDark]}>Active</Text>
<Switch value={this.state.isActive} onValueChange={this.toggleActive} />
</View>
<View style={theme.mt2}>
<Text style={[theme.normalText, theme.textDark, { marginBottom: 10 }]}>Repeat</Text>
<View style={styles.dayContainer}>
{this.state.repeatOn.map((item, index) => {
let dynamicColor = this.state.repeatOn[index].isRepeat
? color.primary
: color.grey;
return (
<TouchableNativeFeedback
key={`repeatOn${index}`}
onPress={() => this.toggleRepeatDays(index)}
>
<View style={[styles.dayBtn, { borderColor: dynamicColor }]}>
<Text style={[theme.normalText, { color: dynamicColor }]}>
{item.day.substr(0, 1)}
</Text>
</View>
</TouchableNativeFeedback>
);
})}
</View>
</View>
<View style={[{ flexDirection: 'row', justifyContent: 'space-evenly' }, theme.mt2]}>
<Button
transparent
style={{ flex: 1, justifyContent: 'center' }}
onPress={() => this.setState(initState)}
>
<Text style={{ color: color.grey }}>Cancel</Text>
</Button>
<Button
rounded
style={{
flex: 1,
justifyContent: 'center',
backgroundColor: color.primary,
}}
onPress={async () => {
await this.createNewTimer();
await this.props.getTimers();
this.setState(initState);
}}
>
<Text style={{ color: color.white }}>Confirm</Text>
</Button>
</View>
</ScrollView>
</View>
</Modal>
{this.renderAddAndEditTimerModal()}
{/* Filter Modal */}
<Modal
......@@ -477,15 +537,22 @@ class TimerScreen extends PureComponent {
const mapStateToProps = state => ({
existedData: state.timersReducer.existedData,
allTimers: state.timersReducer.allTimers,
mainDeviceTimers: state.timersReducer.mainDeviceTimers,
mcbLinksTimers: state.timersReducer.mcbLinksTimers,
subBreakersTimers: state.timersReducer.subBreakersTimers,
// mainDeviceTimers: state.timersReducer.mainDeviceTimers,
// mcbLinksTimers: state.timersReducer.mcbLinksTimers,
// subBreakersTimers: state.timersReducer.subBreakersTimers,
selectedTimerData: state.timersReducer.selectedTimerData,
isLoading: state.timersReducer.isLoading,
selectedDeviceId: state.currentSelectedDeviceReducer.selectedDeviceId,
// selectedDeviceId: state.currentSelectedDeviceReducer.selectedDeviceId,
isEditVisible: state.timersReducer.isEditVisible,
});
const mapDispatchToProps = {
getTimers,
getSelectedTimerData,
setEditModalVisible,
createNewTimer,
editTimer,
deleteTimer,
};
export default connect(
......@@ -511,6 +578,13 @@ const pickerStyle = {
};
const styles = StyleSheet.create({
selectBreakerStyle: {
...theme.mt2,
borderWidth: 1,
borderColor: '#dcdcdc',
borderRadius: 5,
padding: 10,
},
searchBarContainer: {
flex: 1,
display: 'flex',
......@@ -587,3 +661,84 @@ const styles = StyleSheet.create({
margin: 0,
},
});
// createNewOrEditTimer = async () => {
// const deviceId = await this.props.selectedDeviceId;
// const selectedTimerData = await this.props.selectedTimerData;
// const { selectedSubBreaker, selectedBreaker } = this.state;
// let docRef = null;
// let saveTimer = new Date(this.state.timer);
// saveTimer.setFullYear(2019);
// saveTimer.setMonth(1);
// saveTimer.setDate(0);
// saveTimer.setSeconds(0);
// const timerData = {
// isActive: this.state.isActive,
// isPowerOn: this.state.isPowerOn,
// timer: Number(saveTimer),
// repeatOn: this.state.repeatOn,
// };
// try {
// if (selectedTimerData.key) {
// if (selectedTimerData.subBreakerId) {
// docRef = fireStore
// .collection('device')
// .doc(deviceId)
// .collection('mcbLinks')
// .doc(selectedTimerData.mcbLinkId)
// .collection('subBreakers')
// .doc(selectedTimerData.subBreakerId)
// .collection('Timers')
// .doc(selectedTimerData.key);
// } else if (selectedTimerData.mcbLinkId) {
// docRef = fireStore
// .collection('device')
// .doc(deviceId)
// .collection('mcbLinks')
// .doc(selectedTimerData.mcbLinkId)
// .collection('Timers')
// .doc(selectedTimerData.key);
// } else {
// docRef = fireStore
// .collection('device')
// .doc(deviceId)
// .collection('Timers')
// .doc(selectedTimerData.key);
// }
// await docRef.update(timerData);
// } else {
// if (selectedSubBreaker) {
// docRef = fireStore
// .collection('device')
// .doc(deviceId)
// .collection('mcbLinks')
// .doc(selectedBreaker.toString())
// .collection('subBreakers')
// .doc(selectedSubBreaker.toString())
// .collection('Timers');
// } else if (selectedBreaker) {
// docRef = fireStore
// .collection('device')
// .doc(deviceId)
// .collection('mcbLinks')
// .doc(selectedBreaker.toString())
// .collection('Timers');
// } else {
// docRef = fireStore
// .collection('device')
// .doc(deviceId)
// .collection('Timers');
// }
// await docRef.add(timerData);
// }
// } catch (e) {
// alert(e);
// }
// await this.resetStateAndProps();
// await this.props.getTimers();
// };
screens/Public/AuthLoadingScreen.js
......@@ -6,7 +6,7 @@ import { width } from '../../constants/Layout';
import app from '../../firebase';
import { connect } from 'react-redux';
import { getCurrentUser } from '../../reduxStore/actions/cerrentUserAction';
import { getAllMainDeviceInfo } from '../../reduxStore/actions/allMainDeviceAction';
// import { getAllMainDeviceInfo } from '../../reduxStore/actions/allMainDeviceAction';
class AuthLoadingScreen extends Component {
static navigationOptions = {
......@@ -33,15 +33,19 @@ class AuthLoadingScreen extends Component {
const alreadyLaunched = await AsyncStorage.getItem('alreadyLaunched');
const RememberedLogin = await AsyncStorage.getItem('RememberedLogin');
app.auth().onAuthStateChanged(async user => {
if (user) {
await this.props.getCurrentUser(user);
await this.props.getAllMainDeviceInfo();
this.props.navigation.navigate(RememberedLogin === 'true' ? 'Main' : 'Login');
} else {
this.props.navigation.navigate(alreadyLaunched === 'true' ? 'Login' : 'Onboarding');
}
});
try {
app.auth().onAuthStateChanged(async user => {
if (user) {
await this.props.getCurrentUser(user);
// await this.props.getAllMainDeviceInfo();
this.props.navigation.navigate(RememberedLogin === 'true' ? 'Main' : 'Login');
} else {
this.props.navigation.navigate(alreadyLaunched === 'true' ? 'Login' : 'Onboarding');
}
});
} catch (e) {
alert(e);
}
};
componentDidMount = async () => {
......@@ -67,16 +71,16 @@ class AuthLoadingScreen extends Component {
}
}
mapStateToProps = state => ({
uid: state.currentUserReducer.uid,
});
// mapStateToProps = state => ({
// uid: state.currentUserReducer.uid,
// });
const mapDispatchToProps = {
getCurrentUser,
getAllMainDeviceInfo,
// getAllMainDeviceInfo,
};
export default connect(
mapStateToProps,
null,
mapDispatchToProps
)(AuthLoadingScreen);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment