done

src/Pages/Home.js

@@ -9,6 +9,7 @@ import moment from 'moment';
 import { connect } from 'react-redux';
 import { getAllDevicesInfo } from '../redux/actions/allDevicesInfoAction';
 import { getFeedData } from '../redux/actions/feedDataAction';
+import { getShadowData } from '../redux/actions/shadowDataAction';
 import { getSelectedFeed } from '../redux/actions/selectedFeedAction';
 
 const Data = [
@@ -110,6 +111,7 @@ class Home extends Component {
 		active: undefined
 	};
 	looper = null;
+	shadowLooper = null;
 
 	componentDidMount = () => {
 		this.props.getAllDevicesInfo();
@@ -117,16 +119,18 @@ class Home extends Component {
 
 	componentDidUpdate = (prevProps, prevState) => {
 		if (prevProps.selectedFeed !== this.props.selectedFeed) {
-			console.log(this.props.selectedFeed);
 			this.setState({ isLoading: true });
-			this.loopFeedData();
+			if(this.props.selectedFeed.type==="coinexchange") this.loopShadowData();
+			if(this.props.selectedFeed.type==="door") this.loopFeedData();
 		}
 		if (prevProps.feedData !== this.props.feedData) {
-			console.log(this.props.selectedFeed)
-			console.log(this.props.feedData);
 			this.setDataToCharts();
 			this.setState({ isLoading: false });
 		}
+		if (prevProps.shadowData !== this.props.shadowData) {
+			this.setCoinData();
+			this.setState({ isLoading: false });
+		}
 	};
 
 
@@ -136,6 +140,12 @@ class Home extends Component {
 		this.looper = setInterval(() => this.props.getFeedData(), 300000);
 	};
 
+	loopShadowData = () => {
+		clearInterval(this.shadowLooper);
+		this.props.getShadowData();
+		this.shadowLooper = setInterval(() => this.props.getShadowData(), 300000);
+	};
+
 	submitSelectedRange = (selectMap) => {
 		const { startDate, endDate } = this.props.selectedFeed.range;
 		const { breakdown } = this.props.selectedFeed;
@@ -195,10 +205,17 @@ class Home extends Component {
 				currentFeed,
 			]),
 			deviceList: selectDevice,
-			coinExchangeTable: this.getCoinExchangeTable()
 		});
 	};
 
+	setCoinData = () => {
+		const { location } = this.props.selectedFeed;
+
+		this.setState({
+			coinExchangeTable: this.getCoinExchangeTable(location, this.props.shadowData.coinExchangeData),
+		})
+	}
+
 	getMax = data => {
 		let max = data[0][1];
 		for (let i = 1, len = data.length; i < len; i++) {
@@ -355,8 +372,16 @@ class Home extends Component {
 		return table;
 	};
 
-	getCoinExchangeTable = () => {
-		return [];
+	getCoinExchangeTable = (location, data) => {
+		const devicesInfo = this.props.allDeviceInfo.filter(element => element.location === location);
+		const table = [];
+		devicesInfo.map(device => {
+				const value = data.find(query => query.deviceid==device.deviceid);
+				table.push({name: device.name, onStock: value.onStock, changed: value.changed})
+			}
+		);
+
+		return table.sort((a, b) => a.name.localeCompare(b.name)) || [];
 	}
 
 	getBox = () => {
@@ -436,12 +461,12 @@ class Home extends Component {
 				/>
 			</Row>
 			<Row>
-				<DataTable table={this.state.table} size={currentFeed ? currentFeed.length: 0} deviceList={this.state.deviceList} />
+				<DataTable table={this.state.table} size={currentFeed ? currentFeed.length: 0} deviceList={this.state.deviceList} dataType={this.props.selectedFeed.type} />
 			</Row></div>);
 
 		}else if(this.props.selectedFeed && this.props.selectedFeed.type=="coinexchange"){
 			return (<div><Row>
-				<DataTable table={this.state.coinExchangeTable} size={currentFeed ? currentFeed.length: 0} deviceList={this.state.deviceList} />
+				<DataTable table={this.state.coinExchangeTable} dataType={this.props.selectedFeed.type} />
 			</Row></div>)
 		}
 	}
@@ -471,13 +496,15 @@ const mapStateToProps = state => {
 		allDeviceInfo: state.allDevicesInfoReducer.allDeviceInfo,
 		allLocationInfo: state.allDevicesInfoReducer.allLocationInfo,
 		feedData: state.feedDataReducer,
+		shadowData: state.shadowDataReducer
 	};
 };
 
 const mapDispatchToProps = {
 	getAllDevicesInfo,
 	getFeedData,
-	getSelectedFeed
+	getSelectedFeed,
+	getShadowData
 };
 
 export default connect(

src/components/DataCard.js

@@ -65,7 +65,6 @@ const DataCard = props => {
 				key = moment(parseInt(allValues[index][0])).startOf('month').hours(0).minutes(0);
 			}
 			const timestamp = key.valueOf().toString().substring(0, 8) + "00000";
-			// console.log(timestamp);
 			if (Object.keys(mapValues).includes(timestamp)) {
 				mapValues[timestamp] += allValues[index][1];
 			} else {
@@ -117,11 +116,6 @@ const DataCard = props => {
 							<YAxis stroke="white" tick={{ fill: 'white' }} />
 							<Area type="monotone" dataKey="yAxis" stroke="white" fill="white" />
 
-							{/* {dataKeys.map(function(key, index) {
-								return (
-									<Area type="monotone" dataKey={key} stroke={colors[index]} fill={colors[index]} />
-								)
-							})} */}
 						</AreaChart>
 					</ResponsiveContainer>
 				</div>

src/components/GetDataSelection.js

@@ -11,7 +11,7 @@ class GetDataSelection extends Component {
 
 	state = {
 		devices: this.props.allLocationInfo[0].devicesId,
-		location: this.props.allLocationId[0],
+		location: this.props.allLocationInfo[0].locationid,
 		breakdown: 'minutes',
 		startDate: moment().startOf('day'),
 		endDate: moment().endOf('day'),
@@ -77,7 +77,7 @@ class GetDataSelection extends Component {
 		if (start === end) {
 			label = start;
 		}
-
+		
 		return (
 			<Col>
 				<Form.Label>Get data from</Form.Label>
@@ -91,11 +91,11 @@ class GetDataSelection extends Component {
 							}}
 							value={this.state.location}
 						>
-							{allLocationId ? (
-								allLocationId.map((location, index) => {
+							{allLocationInfo ? (
+								allLocationInfo.map((location, index) => {
 									return (
-										<option key={`option${index}`} value={location}>
-											{allLocationInfo[index].name}
+										<option key={`option${index}`} value={location.locationid}>
+											{location.name}
 										</option>
 									);
 								})

src/components/NavBar.js

@@ -7,7 +7,11 @@ import { connect } from 'react-redux';
 const NavbarComponent = ({ isMobileSized, fireStoreCurrentUser }) => {
 	const { username } = fireStoreCurrentUser;
 	const signOut = async () => {
-		await app.auth().signOut();
+		try {
+			await app.auth().signOut();
+		} catch(error) {
+			console.log(error)
+		}
 	};
 	return (
 		<Navbar style={{ backgroundColor: '#49b9ff', paddingHorizontal: '2rem' }}>

src/redux/actions/allDevicesInfoAction.js

@@ -48,7 +48,7 @@ export const getAllDevicesInfo = () => async (dispatch, getState) => {
 		allLocationInfo.push(locationData);
 		
 		if (i === allLocationId.length - 1) {
-			dispatch(getAllDevicesInfoAction(allLocationInfo, allLocationId, allDeviceInfo, allDeviceId));
+			dispatch(getAllDevicesInfoAction(allLocationInfo.sort((a, b) => a.name.localeCompare(b.name)), allLocationId, allDeviceInfo, allDeviceId));
 		}
 	}
 

src/redux/actions/feedDataAction.js

@@ -64,7 +64,7 @@ export const getFeedData = () => async (dispatch, getState) => {
 		metrics : metrics
 		
 	};
-	// console.log(JSON.stringify(q_data));
+
 	try {
 		// axios.defaults.headers.common['Authorization'] = `Bearer ${userToken}`;
 		// const response = await axios.post(kairosUrl, q_data);

src/redux/actions/fireStoreAction.js

@@ -3,9 +3,9 @@ import app, { db } from '../../firebase';
 export const GET_CONFIG = 'GET_CONFIG';
 export const GET_CURRENT_USER = 'GET_CURRENT_USER';
 
-export const fireStoreGetConfigAction = ({ kairosUrl, userToken }) => ({
+export const fireStoreGetConfigAction = ({ kairosUrl, userToken, gqlUrl }) => ({
 	type: GET_CONFIG,
-	fireStoreConfig: { kairosUrl, userToken },
+	fireStoreConfig: { kairosUrl, userToken, gqlUrl },
 });
 
 export const fireStoreGetCurrentUserAction = ({ username, uid }) => ({
@@ -21,6 +21,7 @@ export const fireStoreGetConfig = () => async dispatch => {
 			fireStoreGetConfigAction({
 				kairosUrl: doc.data().kairosUrl,
 				userToken: doc.data().userToken,
+				gqlUrl: doc.data().gqlUrl
 			})
 		);
 	});

src/redux/actions/shadowDataAction.js

+import axios from 'axios';
+export const GET_SHADOW_DATA = 'GET_SHADOW_DATA';
+
+export const getShadowDataAction = ({
+	coinExchangeData,
+}) => ({
+	type: GET_SHADOW_DATA,
+	coinExchangeData,
+});
+
+export const getShadowData = () => async (dispatch, getState) => {
+	const { fireStoreReducer, selectedFeedReducer } = getState();
+	const { gqlUrl, userToken } = fireStoreReducer.fireStoreConfig;
+	const { devices } = selectedFeedReducer.selectedFeed;
+
+    let queryData = "";
+	devices.map((deviceid,index) => {
+        queryData += `query${index}:shadow(deviceid:\"${deviceid}\"){deviceid value rev modified}`
+    });
+    const data = { "query":"{"+queryData+"}"};
+    
+	try {
+		// axios.defaults.headers.common['Authorization'] = `Bearer ${userToken}`;
+		// const response = await axios.post(kairosUrl, q_data);
+		const request = {
+			url: gqlUrl,
+			method: 'post',
+			headers: { Authorization: `Bearer ${userToken}` },
+			data: data,
+		};
+        const response = await axios(request);
+		let coinExchange = [];
+		devices.map((device, index) => {
+            const value = { deviceid: response.data.data[`query${index}`].deviceid, onStock: response.data.data[`query${index}`].value ? response.data.data[`query${index}`].value["On Stock"] : "-", changed: response.data.data[`query${index}`].value ? response.data.data[`query${index}`].value["Changed"]: "-" }
+            coinExchange.push(value);
+		});
+		dispatch(
+			getShadowDataAction({
+				coinExchangeData: coinExchange,
+			})
+		);
+	} catch (error) {
+		console.error(error);
+	}
+};

src/redux/reducers/index.js

@@ -3,10 +3,12 @@ import fireStoreReducer from './fireStoreReducer';
 import selectedFeedReducer from './selectedFeedReducer';
 import allDevicesInfoReducer from './allDevicesInfoReducer';
 import feedDataReducer from './feedDataReducer';
+import shadowDataReducer from './shadowDataReducer';
 
 export default combineReducers({
 	fireStoreReducer,
 	selectedFeedReducer,
 	allDevicesInfoReducer,
 	feedDataReducer,
+	shadowDataReducer
 });

src/redux/reducers/shadowDataReducer.js

+import { GET_SHADOW_DATA } from '../actions/shadowDataAction';
+
+const initState = {
+	coinExchangeData: null,
+};
+
+const shadowDataReducer = (state = initState, action) => {
+	switch (action.type) {
+		case GET_SHADOW_DATA:
+			return {
+				...state,
+				...{
+					coinExchangeData: action.coinExchangeData,
+				},
+			};
+
+		default:
+			return state;
+	}
+};
+
+export default shadowDataReducer;