Skip to content

S
safetcut-app
Commit 93413610 by HaOuiha
Options

update redux timer and timerscreen

parent 17aebbe9
Showing with 85 additions and 153 deletions
App.js
......@@ -12,6 +12,7 @@ import { Provider } from 'react-redux';
import rootStore from './reduxStore';
import { Root } from 'native-base';
import { fixTimerWarning } from './utils/fixTimerWarning';
import { YellowBox } from 'react-native';
import { fireStore } from './firebase';
......@@ -19,6 +20,7 @@ console.disableYellowBox = true;
const Application = () => {
useEffect(() => {
fixTimerWarning();
YellowBox.ignoreWarnings(['Warning:']);
// createMockData();
}, []);
......
components/SwipeableRow.js
......@@ -97,7 +97,7 @@ const Row = ({ data, getSelectedTimerData, setEditModalVisible }) => {
},
]}
>
{data.name}
{data.name ? data.name : data.type === 'main' ? 'Main' : `Sub Breaker ${data.subBreakerId}`}
</Text>
<Text style={[theme.description, { fontSize: 12, marginTop: 1 }]}>
{data.type === 'main'
......
package.json
......@@ -13,7 +13,7 @@
"@eva-design/eva": "^1.0.1",
"@react-native-community/async-storage": "^1.6.1",
"date-fns": "^1.30.1",
"firebase": "^6.3.5",
"firebase": "^6.5.0",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"native-base": "^2.12.2",
......
reduxStore/actions/timersAction.js
......@@ -6,10 +6,6 @@ export const GET_TIMERS_LOADING = 'GET_TIMERS_LOADING';
export const GET_TIMERS_ERROR = 'GET_TIMERS_ERROR';
export const GET_EXISTED_MCBLINKS_DATA = 'GET_EXISTED_MCBLINKS_DATA';
export const GET_EXISTED_SUBBREAKERS_DATA = 'GET_EXISTED_SUBBREAKERS_DATA';
// export const GET_MAIN_DEVICE_TIMERS = 'GET_MAIN_DEVICE_TIMERS';
// export const GET_SUBBREAKERS_TIMERS = 'GET_SUBBREAKERS_TIMERS';
export const GET_SELECTED_TIMER_DATA = 'GET_SELECTED_TIMER_DATA';
export const SET_EDIT_MODAL_VISIBLE = 'SET_EDIT_MODAL_VISIBLE';
......@@ -18,16 +14,6 @@ export const getTimersAction = allTimers => ({
allTimers,
});
// export const getMainDeviceTImersAction = mainDeviceTimers => ({
// type: GET_MAIN_DEVICE_TIMERS,
// mainDeviceTimers,
// });
// export const getSubBreakersTimersAction = subBreakersTimers => ({
// type: GET_SUBBREAKERS_TIMERS,
// subBreakersTimers,
// });
export const getExistedMcbLinksDataAction = existedMcbLinksData => ({
type: GET_EXISTED_MCBLINKS_DATA,
existedMcbLinksData,
......@@ -192,7 +178,7 @@ export const createNewTimer = (mcbLinkId, subBreakerId, settingTime) => async (d
const { currentSelectedDeviceReducer, timersReducer } = getState();
const { currentSelectedData } = currentSelectedDeviceReducer;
const selectedDeviceId = currentSelectedData.deviceId;
const { allTimers, existedData } = timersReducer;
const { allTimers, existedSubBreakersData } = timersReducer;
const getDocRef = () => {
if (mcbLinkId && subBreakerId) {
......@@ -247,7 +233,7 @@ export const createNewTimer = (mcbLinkId, subBreakerId, settingTime) => async (d
subBreakerId: subBreakerId,
key: resRef.id,
type: 'subBreaker',
name: existedData[mcbLinkId - 1][subBreakerId - 1].name,
name: existedSubBreakersData[mcbLinkId - 1][subBreakerId - 1].name,
});
} else {
timerData = Object.assign(settingTime, {
......@@ -278,7 +264,7 @@ export const editTimer = settingTime => async (dispatch, getState) => {
const {
selectedTimerData: { mcbLinkId, subBreakerId, key },
allTimers,
existedData,
existedSubBreakersData,
} = timersReducer;
const { currentSelectedData } = currentSelectedDeviceReducer;
const selectedDeviceId = currentSelectedData.deviceId;
......@@ -314,7 +300,7 @@ export const editTimer = settingTime => async (dispatch, getState) => {
subBreakerId: subBreakerId,
key: key,
type: 'subBreaker',
name: existedData[mcbLinkId - 1][subBreakerId - 1].name,
name: existedSubBreakersData[mcbLinkId - 1][subBreakerId - 1].name,
});
return timerData;
} else {
......
screens/Private/TimerScreen/TimerScreen.android.js
......@@ -5,7 +5,7 @@ import {
StyleSheet,
FlatList,
ScrollView,
Modal,
Modal as BackdropModal,
TouchableOpacity,
Platform,
RefreshControl,
......@@ -29,7 +29,7 @@ import {
deleteTimer,
} from '../../../reduxStore/actions/timersAction';
import moment from 'moment';
import Modal2 from 'react-native-modalbox';
import Modal from 'react-native-modalbox';
const initTimeSetting = {
isActive: false,
......@@ -78,6 +78,8 @@ class TimerScreen extends PureComponent {
allTimersData: [],
};
_isMounted = false;
constructor(props) {
super(props);
// this.props.getTimers();
......@@ -91,31 +93,33 @@ class TimerScreen extends PureComponent {
const { currentSelectedData } = this.props;
let pickerSelectData = [{ label: `Main Device [${currentSelectedData.name}]`, value: 'main' }];
if (this.props.existedData) {
this.props.existedData.map((mcbLink, index) => {
pickerSelectData.push({ label: `MCB Link ${index + 1} `, value: index + 1 });
if (this.props.existedMcbLinksData) {
this.props.existedMcbLinksData.map((mcbLink, index) => {
pickerSelectData.push({
label: `MCB Link ${index + 1} [${mcbLink.name ? mcbLink.name : ''}] `,
value: index + 1,
});
});
this.setState({ pickerSelectData });
}
};
setExistedSubBreaker = () => {
let existedSubBreakerListLength = 0;
if (this.props.existedData) {
this.props.existedData.map((mainBreaker, index) => {
if (this.state.selectedBreaker === index + 1) {
existedSubBreakerListLength = mainBreaker.length;
}
});
let subBreakerList = new Array(existedSubBreakerListLength).fill().map((el, index) => {
return {
const { selectedBreaker } = this.state;
const { existedSubBreakersData } = this.props;
if (existedSubBreakersData && selectedBreaker && selectedBreaker !== 'main') {
let currentSelectedExistedSubBreakers = existedSubBreakersData[selectedBreaker - 1].map(
(subBreaker, index) => {
return Object.assign(subBreaker, {
id: index + 1,
selected: false,
};
});
}
);
this.setState({ subBreakerList });
this.setState({ subBreakerList: currentSelectedExistedSubBreakers });
} else {
this.setState({ subBreakerList: [] });
}
};
......@@ -198,12 +202,12 @@ class TimerScreen extends PureComponent {
if (prevProps.allTimers !== this.props.allTimers) {
this.getAllTimersData();
}
if (prevProps.existedMcbLinksData !== this.props.existedMcbLinksData) {
this.setPickerSelectData();
}
if (prevState.selectedBreaker !== this.state.selectedBreaker) {
this.setExistedSubBreaker();
}
if (prevProps.existedData !== this.props.existedData) {
this.setPickerSelectData();
}
if (prevState.subBreakerList !== this.state.subBreakerList && this.state.subBreakerList) {
let selectedSubBreaker = this.state.subBreakerList.find(subBreaker => {
return subBreaker.selected === true;
......@@ -239,6 +243,7 @@ class TimerScreen extends PureComponent {
this.getAllTimersData();
this.setPickerSelectData();
this.setExistedSubBreaker();
this._isMounted = true;
};
renderAddAndEditTimerModal = () => {
......@@ -319,7 +324,7 @@ class TimerScreen extends PureComponent {
containerStyle={styles.checkboxContainer}
fontFamily={'Avenir-Roman'}
textStyle={{ fontWeight: 'normal', color: color.darkGrey }}
title={`Sub breaker ${item.id} `}
title={`Sub breaker ${item.id} [${item.name ? item.name : ''}]`}
checked={this.state.subBreakerList[index].selected}
checkedIcon={
<Icon
......@@ -435,16 +440,6 @@ class TimerScreen extends PureComponent {
render() {
return (
<>
{/* Overlay */}
{/* <Modal
transparent
presentationStyle={'overFullScreen'}
animationType="fade"
visible={this.state.isfilterVisible || this.state.isAddVisible || this.props.isEditVisible}
>
<View style={{ width, height, backgroundColor: 'rgba(0,0,0,0.5)' }} />
</Modal> */}
{/* Search Bar */}
<View style={{ marginTop: 10, padding: 15, flexDirection: 'row', alignItems: 'center' }}>
......@@ -482,7 +477,11 @@ class TimerScreen extends PureComponent {
extraData={this.state}
ListEmptyComponent={() => (
<View>
<Text style={[theme.modalText, theme.mt2]}>No timers</Text>
<Text
style={[theme.modalText, theme.mt2, { justifyContent: 'center', alignItems: 'center' }]}
>
{this._isMounted ? 'No timers' : ''}
</Text>
</View>
)}
ItemSeparatorComponent={() => <View style={styles.separator} />}
......@@ -493,17 +492,19 @@ class TimerScreen extends PureComponent {
/>
{/* Create & Update Timer Modal */}
<Modal
<BackdropModal
transparent
presentationStyle={'overFullScreen'}
hardwareAccelerated={Platform.OS === 'android' ? true : false}
animationType="fade"
visible={this.state.isAddVisible || this.props.isEditVisible}
>
<Modal2
<Modal
swipeArea={45}
swipeThreshold={65}
backdropPressToClose={false}
style={[styles.modal]}
animationDuration={300}
style={styles.modal}
position={'bottom'}
isOpen={this.state.isAddVisible || this.props.isEditVisible}
onClosed={() => {
......@@ -512,79 +513,15 @@ class TimerScreen extends PureComponent {
}}
>
{this.renderAddAndEditTimerModal()}
</Modal2>
</Modal>
{/* <CustomBottomSheet
visible={this.state.isAddVisible}
onVisibilityChange={() => {
this.setState(prevState => {
return { isAddVisible: !prevState };
});
}}
height={height * 0.9}
>
{this.renderAddAndEditTimerModal()}
</CustomBottomSheet> */}
{/* <SwipeablePanel
fullWidth
isActive={this.state.isAddVisible}
onClose={() => this.setState({ isAddVisible: false })}
openLarge={true}
// onPressCloseButton={() => this.setState({ isAddVisible: false })}
>
{this.renderAddAndEditTimerModal()}
</SwipeablePanel> */}
{/* <BottomDrawer
ref={this.bottomSheetRef}
containerHeight={height}
offset={TAB_BAR_HEIGHT + HEADER_HEIGHT}
>
{this.renderContent()}
</BottomDrawer> */}
{/* <View style={{ display: 'flex', felx: 1, backgroundColor: '#000' }}>
<BottomSheet
ref={this.bottomSheetRef}
snapPoints={[height * 0.9, 300, 0]}
initialSnap={1}
renderContent={this.renderInner}
renderHeader={this.renderHeader}
/>
<Button onPress={() => this.bottomSheetRef.current.snapTo(2)}>
<Text>Hello</Text>
</Button>
</View> */}
{/* <RBSheet
ref={ref => (this.RBSheet = ref)}
height={height * 0.9}
duration={250}
closeOnDragDown={true}
animationType="fade"
customStyles={{
container: {
justifyContent: 'center',
alignItems: 'center',
},
}}
>
{this.renderAddAndEditTimerModal()}
</RBSheet> */}
{/* <BottomSheet
ref={this.bs}
initialSnap={1}
snapPoints={[450, 300, 0]}
renderContent={this.renderAddAndEditTimerModal}
// renderHeader = {this.renderHeader}
/> */}
{/* {this.renderAddAndEditTimerModal()} */}
</BackdropModal>
{/* Filter Modal */}
<Modal
<BackdropModal
transparent
presentationStyle={'overFullScreen'}
animationType="slide"
hardwareAccelerated={Platform.OS === 'android' ? true : false}
visible={this.state.isfilterVisible}
>
<View style={styles.filterModal}>
......@@ -646,7 +583,7 @@ class TimerScreen extends PureComponent {
containerStyle={styles.checkboxContainer}
fontFamily={'Avenir-Roman'}
textStyle={{ fontWeight: 'normal', color: color.darkGrey }}
title={'Sub breaker ' + item.id}
title={`Sub breaker ${item.id} ${item.name ? `[${item.name}]` : ''}`}
checked={this.state.selectedBreaker[index].active}
checkedIcon={
<Icon name="md-checkbox" style={{ color: color.primary, fontSize: 26 }} />
......@@ -668,7 +605,7 @@ class TimerScreen extends PureComponent {
keyExtractor={(item, index) => `sub${index}`}
/>
</View>
</Modal>
</BackdropModal>
</>
);
}
......@@ -680,7 +617,9 @@ const mapStateToProps = state => ({
selectedTimerData: state.timersReducer.selectedTimerData,
isLoading: state.timersReducer.isLoading,
isEditVisible: state.timersReducer.isEditVisible,
existedData: state.timersReducer.existedData,
existedMcbLinksData: state.timersReducer.existedMcbLinksData,
existedSubBreakersData: state.timersReducer.existedSubBreakersData,
});
const mapDispatchToProps = {
......
screens/Public/AuthLoadingScreen.js
......@@ -18,27 +18,32 @@ class AuthLoadingScreen extends Component {
alreadyLaunched: null,
RememberedLogin: null,
};
_isMounted = false;
showLogoThenIndicator = () => {
setTimeout(() => {
if (this._isMounted) {
this.setState({ isShowImg: false });
}, 1200); // 1200
}
}, 800); // 1200
};
_bootstrapAsync = async () => {
this.showLogoThenIndicator();
try {
// Preload data from an external API
// Preload data using AsyncStorage
const alreadyLaunched = await AsyncStorage.getItem('alreadyLaunched');
const RememberedLogin = await AsyncStorage.getItem('RememberedLogin');
try {
app.auth().onAuthStateChanged(async user => {
if (user) {
console.log(user);
const idToken = await app.auth().currentUser.getIdToken(/* forceRefresh */ true);
console.log(idToken);
await this.props.getCurrentUser(user);
this.props.navigation.navigate(RememberedLogin === 'true' ? 'Main' : 'Login');
// this.props.navigation.navigate(false ? 'Main' : 'Login');
} else {
this.props.navigation.navigate(alreadyLaunched === 'true' ? 'Login' : 'Onboarding');
}
......@@ -48,8 +53,13 @@ class AuthLoadingScreen extends Component {
}
};
componentDidMount = async () => {
await this._bootstrapAsync();
componentDidMount = () => {
this._isMounted = true;
this._bootstrapAsync();
};
componentWillUnmount = () => {
this._isMounted = false;
};
render() {
......
screens/Public/LoginScreen.js
......@@ -28,24 +28,26 @@ export default class LoginScreen extends Component {
};
success = async () => {
// console.log('call success function');
// const alreadyLaunched = await AsyncStorage.getItem('alreadyLaunched');
try {
await AsyncStorage.setItem('alreadyLaunched', 'true');
// console.log('Remembered me?', this.state.isCheck);
this.state.isCheck === true && (await AsyncStorage.setItem('RememberedLogin', 'true'));
this.props.navigation.navigate('Main');
} catch (e) {
alert(e);
}
};
componentDidMount = async () => {
const currentUser = await app.auth().currentUser;
if (currentUser) {
try {
await app.auth().signOut();
console.log(signOut);
} catch (error) {
alert(error);
}
}
};
// submit = values => {
// if (values.username == 'test' && values.password == 'password') {
// console.log('Login Success!', values);
// this.success();
// } else if (values.username == 'test') {
// alert('Wrong password! \n ==> password');
// } else {
// alert('Wrong username & password! \n ==> (test, password)');
// }
// };
render() {
return (
......@@ -57,17 +59,12 @@ export default class LoginScreen extends Component {
<CheckBox
color={color.grey}
checked={this.state.isCheck}
onPress={() => this.setState({ isCheck: !this.state.isCheck })}
onPress={() => this.setState(prevState => ({ isCheck: !prevState.isCheck }))}
style={{ left: 0 }}
/>
<Text style={[theme.description, { marginLeft: 5 }]}>Remember me</Text>
</View>
<Text
style={theme.description}
onPress={() => {
this.props.navigation.navigate('Forget');
}}
>
<Text style={theme.description} onPress={() => this.props.navigation.navigate('Forget')}>
Forgot password?
</Text>
</View>
......@@ -76,9 +73,7 @@ export default class LoginScreen extends Component {
Don't have an account?{' '}
<Text
style={[theme.normalText, theme.textDanger, { fontWeight: 'bold' }]}
onPress={() => {
this.props.navigation.navigate('Register');
}}
onPress={() => this.props.navigation.navigate('Register')}
>
Register
</Text>
......
yarn.lock
This source diff could not be displayed because it is too large. You can view the blob instead.
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