Skip to content

S
safetcut-app
Commit c9bd1136 by OuiAtichat
Options

update main page get data from firebase

parent e1f1d4b7
Showing with 243 additions and 117 deletions
App.js
......@@ -15,6 +15,7 @@ import { fixTimerWarning } from './utils/fixTimerWarning';
// import { default as customMapping } from './custom-mapping.json';
console.disableYellowBox = true;
const Application = () => {
useEffect(() => {
fixTimerWarning();
......
AppNavigation.js
......@@ -197,7 +197,7 @@ const WithBottomTabStack = createBottomTabNavigator(
Setting: SettingStack,
},
{
initialRouteName: 'Timer', // default SmartMeter
initialRouteName: 'SmartMeter', // default SmartMeter
tabBarComponent: props => <BottomNavigationTabs {...props} />,
tabBarOptions: {
keyboardHidesTabBar: true,
......@@ -238,7 +238,7 @@ const AppStack = createSwitchNavigator(
Main: MainStack,
},
{
initialRouteName: 'Main', //default AuthLoading
initialRouteName: 'AuthLoading', //default AuthLoading
}
);
......
components/MeterCard.js
import React from 'react';
import React, { Component } from 'react';
import { Card, View, Row, Icon, Text } from 'native-base';
import { Image, TouchableOpacity, StyleSheet } from 'react-native';
import { color, theme } from '../constants/Styles';
......@@ -43,42 +43,55 @@ const styles = StyleSheet.create({
},
});
const MeterCard = props => {
return (
<TouchableOpacity onPress={props.onPressEachCard}>
<Card style={[theme.rowContainer, { borderRadius: 8, marginBottom: 10 }]}>
<View
style={[
styles.meterOn,
{ backgroundColor: props.isOn ? 'rgba(65, 204, 0, 0.59)' : 'rgba(223, 0, 0, 0.59)' },
]}
>
<Text style={[theme.smDescription, theme.textWhite]}>{props.isOn ? 'ON' : 'OFF'}</Text>
</View>
<View style={[theme.centerContainer]}>
<Image source={{ uri: props.img }} style={styles.meterImgStyle} />
</View>
<View style={[theme.containerWithPadding, { flex: 2 }]}>
{props.isOnline ? <View style={[styles.online]} /> : null}
class MeterCard extends Component {
render() {
return (
<TouchableOpacity onPress={this.props.onPressEachCard}>
<Card style={[theme.rowContainer, { borderRadius: 8, marginBottom: 10, height: 136 }]}>
<View
style={[
styles.meterOn,
{ backgroundColor: this.props.isOn ? 'rgba(65, 204, 0, 0.59)' : 'rgba(223, 0, 0, 0.59)' },
]}
>
<Text style={[theme.smDescription, theme.textWhite]}>{this.props.isOn ? 'ON' : 'OFF'}</Text>
</View>
<View style={[theme.centerContainer]}>
{this.props.img ? (
<Image source={{ uri: this.props.img }} style={styles.meterImgStyle} />
) : (
<View
style={[
styles.meterImgStyle,
{ flex: 1, justifyContent: 'center', alignContent: 'center' },
]}
>
<Text style={{ fontSize: 10 }}>No Img</Text>
</View>
)}
</View>
<View style={[theme.containerWithPadding, { flex: 2 }]}>
{this.props.isOnline ? <View style={[styles.online]} /> : null}
<Row style={{ alignItems: 'center' }}>
<Text style={[theme.smallTitle, { marginRight: 15 }]}>{props.deviceName}</Text>
<Icon name="people" style={{ color: color.darkGrey }} />
</Row>
<Text style={[theme.smDescription]} numberOfLines={2}>
{props.description}
</Text>
<Row style={{ marginTop: 10 }}>
<View style={[styles.meterIconCover]}>
<Icon name="notifications" style={styles.meterIconStyle} />
</View>
<View style={styles.meterIconCover}>
<Icon name="time" style={styles.meterIconStyle} />
</View>
</Row>
</View>
</Card>
</TouchableOpacity>
);
};
<Row style={{ alignItems: 'center' }}>
<Text style={[theme.smallTitle, { marginRight: 15 }]}>{this.props.name}</Text>
<Icon name="people" style={{ color: color.darkGrey }} />
</Row>
<Text style={[theme.smDescription]} numberOfLines={2}>
{this.props.description}
</Text>
<Row style={{ marginTop: 10 }}>
<View style={[styles.meterIconCover]}>
<Icon name="notifications" style={styles.meterIconStyle} />
</View>
<View style={styles.meterIconCover}>
<Icon name="time" style={styles.meterIconStyle} />
</View>
</Row>
</View>
</Card>
</TouchableOpacity>
);
}
}
export default MeterCard;
reduxStore/actions/allDataAction.js
......@@ -35,27 +35,45 @@ export const getAllDeviceInfoAction = allDeviceInfo => ({
export const getAllDeviceInfo = () => async (dispatch, getState) => {
const { currentUserReducer } = getState();
const currentUserId = currentUserReducer.uid;
try {
const allOwnerDevice = await fireStore
.collection('owner')
.doc(currentUserId)
.get();
const allOwnerDeviceId = await fireStore
.collection('owner')
.doc(currentUserId)
.get();
const allSharingDevice = await fireStore
.collection('sharing')
.doc(currentUserId)
.get();
const allSharingDeviceId = await fireStore
.collection('sharing')
.doc(currentUserId)
.get();
const allOwnerDeviceId = Object.keys({ ...allOwnerDevice.data() });
const allSharingDeviceId = Object.keys({ ...allSharingDevice.data() });
const allDeviceId = Object.keys({ ...allOwnerDeviceId.data(), ...allSharingDeviceId.data() });
let alldeviceInfo = [];
await allOwnerDeviceId.map((deviceId, index) => {
fireStore
.collection('device')
.doc(deviceId)
.get()
.then(deviceInfo =>
alldeviceInfo.push(Object.assign(deviceInfo.data(), { deviceId, isSharing: false }))
);
});
await allSharingDeviceId.map((deviceId, index) => {
fireStore
.collection('device')
.doc(deviceId)
.get()
.then(deviceInfo =>
alldeviceInfo.push(Object.assign(deviceInfo.data(), { deviceId, isSharing: true }))
);
});
let alldeviceInfo = [];
await allDeviceId.map((deviceId, index) => {
fireStore
.collection('device')
.doc(deviceId)
.get()
.then(deviceInfo => alldeviceInfo.push(deviceInfo.data()));
});
const allDataInfo = await alldeviceInfo;
console.log(allDataInfo);
return dispatch(getAllDeviceInfoAction(alldeviceInfo));
return dispatch(getAllDeviceInfoAction(allDataInfo));
} catch (error) {
alert(error);
}
};
reduxStore/actions/currentSelectedAction.js 0 → 100644
export const SET_CURRENT_SELECTED = 'SET_CURRENT_SELECTED';
export const setCurrentSelectedAction = selectedDeviceId => ({
type: GET_CURRENT_SELECTED,
selectedDeviceId,
});
export const setCurrentSelected = DeviceId => async dispatch => {
return dispatch(setCurrentSelectedAction(DeviceId));
};
reduxStore/reducers/currentSelectedReducer.js 0 → 100644
import { SET_CURRENT_SELECTED } from '../actions/currentSelectedAction';
const initState = {
selectedDeviceId: '',
};
const currentSelectedDeviceReducer = (state = initState, action) => {
switch (action.type) {
case SET_CURRENT_SELECTED:
return { ...state, selectedDeviceId: action.selectedDeviceId };
default:
return state;
}
};
export default currentSelectedDeviceReducer;
reduxStore/reducers/index.js
......@@ -3,9 +3,11 @@ import { combineReducers } from 'redux';
import { reducer as form } from 'redux-form';
import allDataReducer from './allDataReducer';
import currentUserReducer from './currentUserReducer';
import currentSelectedDeviceReducer from './currentSelectedReducer';
export default combineReducers({
// token: authReducer,
currentSelectedDeviceReducer,
currentUserReducer,
allDataReducer,
form,
......
screens/Private/SmartMeterScreen/SmartMeterScreen.js
import React, { Component } from 'react';
import { Text } from 'native-base';
import { FlatList, View } from 'react-native';
import { theme } from '../../../constants/Styles';
import MeterCard from '../../../components/MeterCard';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { isIphoneX } from '../../../utils/isPhoneX';
import { getAllDeviceInfo } from '../../../reduxStore/actions/allDataAction';
import { setCurrentSelected } from '../../../reduxStore/actions/currentSelectedAction';
import { connect } from 'react-redux';
const Meter = [
{
deviceName: 'Device 1',
description: 'Lorem ipsum dolorsit amet,consectetur adipiscing elit. Cras sagitti.',
img: 'https://www.tunnelbear.com/static/img/android@2x.b83f4df.png',
isOnline: true,
isOn: true,
},
{
deviceName: 'Device 2',
description: 'Lorem ipsum dolorsit amet,consectetur adipiscing elit. Cras sagitti.',
img: 'https://www.tunnelbear.com/static/img/android@2x.b83f4df.png',
isOnline: false,
isOn: true,
},
{
deviceName: 'Device 3',
description: 'Lorem ipsum dolorsit amet,consectetur adipiscing elit. Cras sagitti.',
img: 'https://www.tunnelbear.com/static/img/android@2x.b83f4df.png',
isOnline: true,
isOn: false,
},
{
deviceName: 'Device 4',
description: 'Lorem ipsum dolorsit amet,consectetur adipiscing elit. Cras sagitti.',
img: 'https://www.tunnelbear.com/static/img/android@2x.b83f4df.png',
isOnline: false,
isOn: false,
},
let Data = [
// {
// deviceName: 'Device 1',
// description: 'Lorem ipsum dolorsit amet,consectetur adipiscing elit. Cras sagitti.',
// img: 'https://www.tunnelbear.com/static/img/android@2x.b83f4df.png',
// isOnline: true,
// isOn: true,
// },
// {
// deviceName: 'Device 2',
// description: 'Lorem ipsum dolorsit amet,consectetur adipiscing elit. Cras sagitti.',
// img: 'https://www.tunnelbear.com/static/img/android@2x.b83f4df.png',
// isOnline: false,
// isOn: true,
// },
// {
// deviceName: 'Device 3',
// description: 'Lorem ipsum dolorsit amet,consectetur adipiscing elit. Cras sagitti.',
// img: 'https://www.tunnelbear.com/static/img/android@2x.b83f4df.png',
// isOnline: true,
// isOn: false,
// },
// {
// deviceName: 'Device 4',
// description: 'Lorem ipsum dolorsit amet,consectetur adipiscing elit. Cras sagitti.',
// img: 'https://www.tunnelbear.com/static/img/android@2x.b83f4df.png',
// isOnline: false,
// isOn: false,
// },
];
class SmartMeterScreen extends Component {
......@@ -54,24 +56,49 @@ class SmartMeterScreen extends Component {
),
});
componentDidMount() {
/*----add listener willFocur,willBlur ---*/
// const { navigation } = this.props;
// this.blurListener = navigation.addListener('didBlur', () => {
// console.log('didBlur');
// });
}
state = {
initData: this.props.allDeviceInfo,
data: this.props.allDeviceInfo,
isLoading: true,
};
static getDerivedStateFromProps = (nextProps, prevState) => {
if (prevState.data !== nextProps.allDeviceInfo) {
return {
data: nextProps.allDeviceInfo,
};
} else null;
};
componentDidMount = async () => {
await this.props.getAllDeviceInfo();
};
componentDidUpdate = (prevProps, prevState) => {
if (prevState.data !== this.state.data) {
this.setState({ isLoading: false });
}
};
render() {
console.log(this.state);
let { allDeviceInfo, getAllDeviceInfo, setCurrentSelected } = this.props;
const { isLoading } = this.state;
return (
<FlatList
refreshing={isLoading}
onRefresh={getAllDeviceInfo}
style={[theme.container, theme.containerWithPadding]}
contentContainerStyle={{ paddingBottom: isIphoneX() ? 90 : 55 }} //iPhoneX BottomSpace = 34
data={Meter}
keyExtractor={item => item.deviceName}
data={this.state.initData}
extraData={this.state.data}
keyExtractor={(item, index) => `Card${index}`}
ListEmptyComponent={() => (
<View>
<Text style={[theme.normalText, { marginTop: 20 }]}>No Device Connected</Text>
<Text style={[theme.normalText, { marginTop: 20 }]}>
{isLoading ? '' : 'No Device Connected'}
</Text>
</View>
)}
ListHeaderComponent={() => (
......@@ -79,15 +106,15 @@ class SmartMeterScreen extends Component {
)}
renderItem={({ item, index }) => (
<MeterCard
key={index + item.deviceName}
deviceName={item.deviceName}
description={item.description}
img={item.img}
isOnline={item.isOnline}
isOn={item.isOn}
index={index + 1}
// key={`mastercard${index}`}
name={item.name || 'Untitled'}
description={item.description || ''}
img={item.img || null}
isOnline={item.isOnline || false}
isOn={item.isOn || false}
onPressEachCard={() => {
this.props.navigation.navigate('SmartMeterDetail', { deviceName: item.deviceName });
setCurrentSelected(item.deviceId);
this.props.navigation.navigate('SmartMeterDetail', { name: item.name });
}}
/>
)}
......@@ -96,4 +123,16 @@ class SmartMeterScreen extends Component {
}
}
export default SmartMeterScreen;
const mapStateToProps = state => ({
allDeviceInfo: state.allDataReducer.allDeviceInfo,
});
const mapDispatchToProps = {
getAllDeviceInfo,
setCurrentSelected,
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(SmartMeterScreen);
screens/Public/AuthLoadingScreen.js
......@@ -13,6 +13,11 @@ class AuthLoadingScreen extends Component {
header: null,
};
constructor(props) {
super(props);
this._bootstrapAsync();
}
state = {
isShowImg: true,
authentication: null,
......@@ -21,10 +26,10 @@ class AuthLoadingScreen extends Component {
showLogoThenIndicator = () => {
setTimeout(() => {
this.setState({ isShowImg: false });
}, 1300);
}, 1200);
};
componentDidMount = async () => {
_bootstrapAsync = async () => {
this.showLogoThenIndicator();
// Preload data from an external API
// Preload data using AsyncStorage
......@@ -34,7 +39,6 @@ class AuthLoadingScreen extends Component {
app.auth().onAuthStateChanged(async user => {
if (user) {
await this.props.getCurrentUser();
// await this.props.getAllDeviceId();
await this.props.getAllDeviceInfo();
this.props.navigation.navigate(RememberedLogin ? 'Main' : 'Login');
} else {
......@@ -43,11 +47,35 @@ class AuthLoadingScreen extends Component {
});
};
// componentDidUpdate = (prevProps, prevState) => {
// componentDidMount = async () => {
// this.showLogoThenIndicator();
// // Preload data from an external API
// // Preload data using AsyncStorage
// const alreadyLaunched = await AsyncStorage.getItem('alreadyLaunched');
// const RememberedLogin = await AsyncStorage.getItem('RememberedLogin');
// app.auth().onAuthStateChanged(async user => {
// if (user) {
// this.props.getCurrentUser && (await this.props.getCurrentUser());
// this.setState({ authentication: true });
// this.props.navigation.navigate(RememberedLogin ? 'Main' : 'Login');
// } else {
// this.setState({ authentication: false });
// this.props.navigation.navigate(alreadyLaunched ? 'Login' : 'Onboarding');
// }
// });
// };
// componentDidUpdate = async (prevProps, prevState) => {
// if (prevState.authentication !== this.state.authentication) {
// this.state.authentication
// ? this.props.navigation.navigate(RememberedLogin ? 'Main' : 'Login')
// : this.props.navigation.navigate(alreadyLaunched ? 'Login' : 'Onboarding');
// this.props.getCurrentUser && (await this.props.getCurrentUser());
// this.props.navigation.navigate(
// this.state.RememberedLogin
// ? 'Main'
// : this.state.authentication || this.state.alreadyLaunched
// ? 'Login'
// : 'Onboarding'
// );
// }
// };
......@@ -65,7 +93,6 @@ class AuthLoadingScreen extends Component {
) : (
<ActivityIndicator size="large" color="#f44c4c" />
)}
{/* <StatusBar hidden /> */}
</View>
);
}
......
screens/Public/LoginScreen.js
......@@ -29,8 +29,8 @@ export default class LoginScreen extends Component {
success = async () => {
// console.log('call success function');
const alreadyLaunched = await AsyncStorage.getItem('alreadyLaunched');
if (alreadyLaunched !== null) await AsyncStorage.setItem('alreadyLaunched', 'true');
// const alreadyLaunched = await AsyncStorage.getItem('alreadyLaunched');
await AsyncStorage.setItem('alreadyLaunched', 'true');
// console.log('Remembered me?', this.state.isCheck);
this.state.isCheck === true && (await AsyncStorage.setItem('RememberedLogin', 'true'));
......
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