Skip to content

S
safetcut-app
Commit 6e70fa0d by HaOuiha
Options

update redux change getdata flow

parent 096f255a
Showing with 129 additions and 80 deletions
components/MeterCard.js
......@@ -34,7 +34,7 @@ class MeterCard extends Component {
</View>
<View style={[theme.containerWithPadding, { flex: 2 }]}>
<Row style={{ alignItems: 'center' }}>
<Text style={[theme.smallTitle, { marginRight: 15 }]}>{item.name}</Text>
<Text style={[theme.smallTitle, { marginRight: 15 }]}>{item.name || 'Untitled'}</Text>
</Row>
<Text style={[theme.smDescription]} numberOfLines={2}>
{item.description}
......
package.json
......@@ -12,6 +12,7 @@
"dependencies": {
"@eva-design/eva": "^1.0.1",
"@react-native-community/async-storage": "^1.6.1",
"axios": "^0.19.0",
"date-fns": "^1.30.1",
"firebase": "^6.5.0",
"lodash": "^4.17.15",
......
reduxStore/actions/currentSelectedAction.js
import { fireStore } from '../../firebase';
import app, { fireStore } from '../../firebase';
import axios from 'axios';
// export const SET_CURRENT_SELECTED = 'SET_CURRENT_SELECTED';
export const GET_CURRENT_SELECTED_DATA = 'GET_CURRENT_SELECTED_DATA';
// export const setCurrentSelectedAction = selectedDeviceId => ({
// type: SET_CURRENT_SELECTED,
// selectedDeviceId,
// });
const baseURL = 'https://us-central1-safetcut-20cdf.cloudfunctions.net';
// export const setCurrentSelected = deviceId => dispatch => {
// dispatch(setCurrentSelectedAction(deviceId));
// };
export const GET_CURRENT_SELECTED_DATA = 'GET_CURRENT_SELECTED_DATA';
export const GET_CURRENT_SELECTED_DATA_LOADING = 'GET_CURRENT_SELECTED_DATA_LOADING';
export const GET_CURRENT_SELECTED_DATA_ERROR = 'GET_CURRENT_SELECTED_DATA_ERROR';
export const getCurrentSelectedDataAction = currentSelectedData => ({
type: GET_CURRENT_SELECTED_DATA,
currentSelectedData,
});
export const getCurrentSelectedData = currentSelectedDeviceData => dispatch => {
dispatch(getCurrentSelectedDataAction(currentSelectedDeviceData));
export const loadingAction = bool => ({
type: GET_CURRENT_SELECTED_DATA_LOADING,
isLoading: bool,
});
export const errorAction = error => ({
type: GET_CURRENT_SELECTED_DATA_ERROR,
error,
});
export const getCurrentSelectedData = deviceId => async dispatch => {
try {
dispatch(loadingAction(true));
const currentSelectedDevice = await fireStore
.collection('device')
.doc(deviceId)
.get();
const currentSelectedDeviceData = await currentSelectedDevice.data();
const idToken = await app.auth().currentUser.getIdToken(true);
console.log(idToken);
const URL = `${baseURL}/shadow/${deviceId}`;
const options = {
headers: { Authorization: `Token ${idToken}` },
url: URL,
};
console.log(URL);
try {
const getShadow = await axios(options);
console.log(getShadow);
} catch (error) {
alert(error);
}
const currentSelectedDeviceDataMoreInfo = { ...currentSelectedDeviceData, deviceId: currentSelectedDevice.id };
dispatch(loadingAction(false));
return dispatch(getCurrentSelectedDataAction(currentSelectedDeviceDataMoreInfo));
} catch (error) {
dispatch(errorAction(error.message || error || 'Error'));
dispatch(loadingAction(false));
}
};
export const updateDetail = (type, value) => async (dispatch, getState) => {
const { currentSelectedDeviceReducer } = getState();
const { currentSelectedData } = currentSelectedDeviceReducer;
const selectedDeviceId = currentSelectedData.deviceId;
const { deviceId, isSharing, ...currentSelectedMainData } = currentSelectedData;
const getNewData = () => {
switch (type) {
case 'Name':
return { ...currentSelectedData, name: value };
return { ...currentSelectedMainData, name: value };
case 'Description':
return { ...currentSelectedData, description: value };
return { ...currentSelectedMainData, description: value };
case 'RCBO':
return { ...currentSelectedData, rcbo: value };
return { ...currentSelectedMainData, rcbo: value };
case 'notification':
return { ...currentSelectedData, notification: value };
return { ...currentSelectedMainData, notification: value };
default:
return currentSelectedData;
return currentSelectedMainData;
}
};
......
reduxStore/reducers/currentSelectedReducer.js
import {
// SET_CURRENT_SELECTED,
GET_CURRENT_SELECTED_DATA,
GET_CURRENT_SELECTED_DATA_LOADING,
GET_CURRENT_SELECTED_DATA_ERROR,
} from '../actions/currentSelectedAction';
const initState = {
// selectedDeviceId: '',
currentSelectedData: {},
isLoading: true,
error: null,
};
const currentSelectedDeviceReducer = (state = initState, action) => {
switch (action.type) {
// case SET_CURRENT_SELECTED:
// return { ...state, selectedDeviceId: action.selectedDeviceId };
case GET_CURRENT_SELECTED_DATA:
return { ...state, currentSelectedData: action.currentSelectedData };
case GET_CURRENT_SELECTED_DATA_LOADING:
return { ...state, isLoading: action.isLoading };
case GET_CURRENT_SELECTED_DATA_ERROR:
return { ...state, error: action.error };
default:
return state;
}
......
screens/Private/SmartMeterScreen/SmartMeterDetailScreen.js
import React, { Component } from 'react';
import { View, Text, Content, Card, Row, Right, Left, Switch, Icon } from 'native-base';
import { View, Text, Card, Row, Right, Left, Switch, Icon } from 'native-base';
import { color, theme } from '../../../constants/Styles';
import { FlatList, StyleSheet, ActivityIndicator, RefreshControl, ScrollView, Platform } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
......@@ -19,8 +19,6 @@ const MockData = [
class SmartMeterDetailScreen extends Component {
static navigationOptions = ({ navigation }) => {
// const deviceName = navigation.getParam('name', '');
return {
title: 'Device',
headerLeft: (
......@@ -42,22 +40,20 @@ class SmartMeterDetailScreen extends Component {
isPowerOn: false,
mcbLinksInfo: [],
mcbLinksListMounted: false,
subBreakersInfo: [],
};
constructor(props) {
super(props);
this.getData();
}
_mcbLinksListMounted = false;
getData = () => {
const currentSelectedDeviceData = this.props.navigation.getParam('currentSelectedDeviceData');
this.props.getCurrentSelectedData(currentSelectedDeviceData);
getData = async () => {
const deviceId = this.props.navigation.getParam('deviceId');
await this.props.getCurrentSelectedData(deviceId);
this.props.getTimers();
};
componentDidMount = () => {};
componentDidMount = async () => {
await this.getData();
};
componentDidUpdate = (prevProps, prevState) => {
if (prevProps.currentSelectedData !== this.props.currentSelectedData) {
......@@ -65,7 +61,7 @@ class SmartMeterDetailScreen extends Component {
}
if (prevProps.existedMcbLinksData !== this.props.existedMcbLinksData) {
this.setMcbLinksState();
this.setState({ mcbLinksListMounted: true });
this._mcbLinksListMounted = true;
}
if (prevProps.existedSubBreakersData !== this.props.existedSubBreakersData) {
this.setSubBreakersState();
......@@ -99,13 +95,15 @@ class SmartMeterDetailScreen extends Component {
<Card style={{ padding: 15, marginBottom: 20, borderRadius: 10, borderColor: color.white }}>
<Row style={{ justifyContent: 'center', alignItems: 'center' }}>
<Left>
<Text style={[theme.smallTitle, { color: color.darkGrey }]}>{name}</Text>
<Text style={[theme.smallTitle, { color: color.darkGrey }]}>{name || 'Untitled'}</Text>
</Left>
<Right>
<Switch value={isPowerOn} />
</Right>
</Row>
<Text style={[theme.description, theme.mt1]}>{description}</Text>
<Text numberOfLines={2} style={[theme.description, theme.mt1]}>
{description || ''}
</Text>
<Row style={theme.mt1}>
<Text style={[theme.description, theme.textDark, { marginRight: 5 }]}>
Status:{' '}
......@@ -180,7 +178,7 @@ class SmartMeterDetailScreen extends Component {
const handleOnPressMcbLink = () =>
this.setState(prevState => (mcbLink.isExpand = !prevState.mcbLinksInfo[indexMcbLinks].isExpand));
const renderSubbreaker = (subBreaker, indexSubBreakers) => {
const renderSubBreaker = (subBreaker, indexSubBreakers) => {
const handleOnPressSubBreakerSwitch = () =>
this.setState(
prevState =>
......@@ -243,7 +241,7 @@ class SmartMeterDetailScreen extends Component {
data={subBreakersInfo[indexMcbLinks]}
extraData={this.state}
keyExtractor={(item, index) => `subBreakerItem${item.mcbLinkId}${item.subBreakerId}`}
renderItem={({ item, index }) => renderSubbreaker(item, index)}
renderItem={({ item, index }) => renderSubBreaker(item, index)}
/>
)}
</View>
......@@ -251,7 +249,7 @@ class SmartMeterDetailScreen extends Component {
};
render() {
const { mcbLinksInfo, mcbLinksListMounted } = this.state;
const { mcbLinksInfo } = this.state;
const { isLoadingValues, isLoadingList } = this.props;
return (
......@@ -260,7 +258,7 @@ class SmartMeterDetailScreen extends Component {
contentContainerStyle={[theme.containerWithPadding]}
refreshControl={
<RefreshControl
refreshing={mcbLinksListMounted && (isLoadingValues || isLoadingList)}
refreshing={this._mcbLinksListMounted && (isLoadingList || isLoadingValues)}
onRefresh={this.getData}
title="Pull to refresh"
tintColor={color.primary}
......@@ -277,7 +275,7 @@ class SmartMeterDetailScreen extends Component {
numColumns={3}
keyExtractor={(item, index) => `DeviceValues${item.name}`}
/>
{isLoadingList && !mcbLinksListMounted ? (
{isLoadingList && !this._mcbLinksListMounted ? (
<View style={{ marginTop: 20 }}>
<ActivityIndicator color={color.primary} />
</View>
......@@ -305,12 +303,11 @@ class SmartMeterDetailScreen extends Component {
}
const mapStateToProps = state => ({
allMainDeviceInfo: state.allMainDeviceReducer.allMainDeviceInfo,
isLoadingValues: state.allMainDeviceReducer.isLoading,
isLoadingValues: state.currentSelectedDeviceReducer.isLoading,
currentSelectedData: state.currentSelectedDeviceReducer.currentSelectedData,
isLoadingList: state.timersReducer.isLoading,
existedMcbLinksData: state.timersReducer.existedMcbLinksData,
existedSubBreakersData: state.timersReducer.existedSubBreakersData,
currentSelectedData: state.currentSelectedDeviceReducer.currentSelectedData,
});
const mapDispatchToProps = {
......
screens/Private/SmartMeterScreen/SmartMeterScreen.js
......@@ -7,18 +7,13 @@ import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { isIphoneX } from '../../../utils/isPhoneX';
import { getAllMainDeviceInfo } from '../../../reduxStore/actions/allMainDeviceAction';
// import { setCurrentSelected } from '../../../reduxStore/actions/currentSelectedAction';
import { connect } from 'react-redux';
import { SearchBar } from 'react-native-elements';
class SmartMeterScreen extends PureComponent {
static navigationOptions = ({ navigation }) => ({
title: 'Home',
// headerLeft: (
// <HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
// <Item title="menu" iconName="ios-menu" onPress={() => console.log('menu')} />
// </HeaderButtons>
// ),
headerRight: (
<HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
<Item title="menu" iconName="ios-add" onPress={() => navigation.navigate('Camera')} />
......@@ -29,7 +24,6 @@ class SmartMeterScreen extends PureComponent {
state = {
search: '',
};
_isMounted = false;
componentDidMount = async () => {
......@@ -41,19 +35,7 @@ class SmartMeterScreen extends PureComponent {
return (
<MeterCard
item={item}
onPressEachCard={() => {
this.props.navigation.navigate('SmartMeterDetail', {
currentSelectedDeviceData: {
deviceId: item.deviceId,
name: item.name,
description: item.description,
isSharing: item.isSharing,
notification: item.notification,
rcbo: item.rcbo,
type: item.type,
},
});
}}
onPressEachCard={() => this.props.navigation.navigate('SmartMeterDetail', { deviceId: item.deviceId })}
/>
);
};
......@@ -84,8 +66,6 @@ class SmartMeterScreen extends PureComponent {
colors={[color.primary]}
/>
}
// refreshing={isLoading}
// onRefresh={this.getData}
style={[theme.container]}
contentContainerStyle={[theme.containerWithPadding, { paddingBottom: isIphoneX() ? 90 : 55 }]} //iPhoneX BottomSpace = 34
data={allMainDeviceInfo}
......
screens/Private/TimerScreen/TimerScreen.android.js
......@@ -91,12 +91,14 @@ class TimerScreen extends PureComponent {
setPickerSelectData = () => {
const { currentSelectedData } = this.props;
let pickerSelectData = [{ label: `Main Device [${currentSelectedData.name}]`, value: 'main' }];
let pickerSelectData = [
{ label: `Main Device ${currentSelectedData.name ? `[${currentSelectedData.name}]` : ''}`, value: 'main' },
];
if (this.props.existedMcbLinksData) {
this.props.existedMcbLinksData.map((mcbLink, index) => {
pickerSelectData.push({
label: `MCB Link ${index + 1} [${mcbLink.name ? mcbLink.name : ''}] `,
label: `MCB Link ${index + 1} ${mcbLink.name ? `[${mcbLink.name}]` : ''} `,
value: index + 1,
});
});
......@@ -255,7 +257,7 @@ class TimerScreen extends PureComponent {
<View
style={{
display: 'flex',
marginTop: 30,
marginTop: 23,
paddingHorizontal: 30,
marginBottom: 10,
flexDirection: 'row',
......@@ -279,7 +281,7 @@ class TimerScreen extends PureComponent {
</View>
<ScrollView contentContainerStyle={{ paddingHorizontal: 30, paddingBottom: 20 }}>
<Text style={[theme.modalText, theme.textDark, theme.mt2]}>Set Time</Text>
<Text style={[theme.modalText, theme.textDark, theme.mt1]}>Set Time</Text>
<DatePicker
date={this.state.timer}
......@@ -309,7 +311,7 @@ class TimerScreen extends PureComponent {
Icon={() => (
<Icon
name="ios-arrow-down"
style={{ fontSize: 16, color: '#c8c8c8', marginBottom: 5 }}
style={{ fontSize: 16, color: color.lightGrey, marginBottom: 5 }}
/>
)}
/>
......@@ -324,7 +326,7 @@ class TimerScreen extends PureComponent {
containerStyle={styles.checkboxContainer}
fontFamily={'Avenir-Roman'}
textStyle={{ fontWeight: 'normal', color: color.darkGrey }}
title={`Sub breaker ${item.id} [${item.name ? item.name : ''}]`}
title={`Sub Breaker ${item.id} ${item.name ? `[${item.name}]` : ''}`}
checked={this.state.subBreakerList[index].selected}
checkedIcon={
<Icon
......@@ -360,7 +362,7 @@ class TimerScreen extends PureComponent {
<View
style={[
styles.rowContainer,
{ marginTop: 12 },
{ marginTop: 20 },
{ marginRight: Platform.OS === 'android' ? -4 : 0 },
]}
>
......@@ -583,7 +585,7 @@ class TimerScreen extends PureComponent {
containerStyle={styles.checkboxContainer}
fontFamily={'Avenir-Roman'}
textStyle={{ fontWeight: 'normal', color: color.darkGrey }}
title={`Sub breaker ${item.id} ${item.name ? `[${item.name}]` : ''}`}
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 }} />
......@@ -743,11 +745,11 @@ const styles = StyleSheet.create({
},
dragIndicator: {
marginTop: 10,
marginTop: 12,
width: 50,
height: 5,
borderRadius: 3,
backgroundColor: color.grey,
backgroundColor: color.lightGrey,
display: 'flex',
alignSelf: 'center',
},
......
screens/Public/AuthLoadingScreen.js
......@@ -39,8 +39,8 @@ class AuthLoadingScreen extends Component {
app.auth().onAuthStateChanged(async user => {
if (user) {
console.log(user);
const idToken = await app.auth().currentUser.getIdToken(/* forceRefresh */ true);
console.log(idToken);
// 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');
......
yarn.lock
......@@ -1653,6 +1653,14 @@ aws4@^1.8.0:
resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
axios@^0.19.0:
version "0.19.0"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8"
integrity sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==
dependencies:
follow-redirects "1.5.10"
is-buffer "^2.0.2"
babel-eslint@10.0.1:
version "10.0.1"
resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.0.1.tgz#919681dc099614cd7d31d45c8908695092a1faed"
......@@ -2386,6 +2394,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
dependencies:
ms "2.0.0"
debug@=3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
dependencies:
ms "2.0.0"
debug@^3.2.6:
version "3.2.6"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
......@@ -3200,6 +3215,13 @@ flatted@^2.0.0:
resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.1.tgz#69e57caa8f0eacbc281d2e2cb458d46fdb449e08"
integrity sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==
follow-redirects@1.5.10:
version "1.5.10"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
dependencies:
debug "=3.1.0"
for-in@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
......@@ -3712,6 +3734,11 @@ is-buffer@^1.1.5:
resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
is-buffer@^2.0.2:
version "2.0.3"
resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725"
integrity sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==
is-callable@^1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
......
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