update

src/Pages/Home.js

@@ -69,6 +69,9 @@ const Data = [
 
 class Home extends Component {
 	state = {
+		allDevicesId: null,
+		allDeviceInfo: null,
+		currentUid: null,
 		userToken: null,
 		kairosUrl: null,
 		currentUser: null,
@@ -104,12 +107,13 @@ class Home extends Component {
 	};
 
 	async componentDidMount() {
-		await this.getFireStoreData();
-		this.getCurrentUser();
+		await this.getConfig();
+		await this.getCurrentUser();
+		this.getAllDevicesInfo();
 		// await this.getFeedData();
 	}
 
-	getFireStoreData = async () => {
+	getConfig = async () => {
 		const configData = await db.collection('config').get();
 		//get all data from collection 'config'
 		configData.forEach(doc => {
@@ -121,8 +125,33 @@ class Home extends Component {
 	};
 
 	getCurrentUser = async () => {
-		const { displayName, email } = await app.auth().currentUser;
-		this.setState({ currentUser: displayName || email });
+		const { displayName, email, uid } = await app.auth().currentUser;
+		this.setState({
+			currentUser: displayName || email,
+			currentUid: uid,
+		});
+	};
+
+	getAllDevicesInfo = async () => {
+		const { currentUid } = this.state;
+		const DevicesId = await db
+			.collection('membership')
+			.doc(currentUid)
+			.get();
+		// console.log(Object.keys(DevicesId.data()));
+		// const allDevicesId = Object.keys(DevicesId.data());
+		// console.log(allDevicesId);
+
+		// let allDeviceInfo = [];
+		// allDevicesId.map(async (deviceId, index) => {
+		// 	const deviceInfo = await db
+		// 		.collection('device')
+		// 		.doc(deviceId)
+		// 		.get();
+
+		// 	allDeviceInfo.push(deviceInfo.data());
+		// });
+		this.setState({ allDevicesId: Object.keys(DevicesId.data()) });
 	};
 
 	getFeedData = async (deviceId, selectedRange, breakdown) => {
@@ -199,7 +228,7 @@ class Home extends Component {
 
 	getSelectedFeed = selectedFeed => {
 		const { device, range, breakdown } = selectedFeed;
-		this.getFeedData(device, range, breakdown);
+		this.getFeedData(device || this.state.allDevicesId[0], range, breakdown);
 	};
 
 	getMax = (data) => {
@@ -256,6 +285,8 @@ class Home extends Component {
 
 	render() {
 		const {
+			allDevicesId,
+			allDeviceInfo,
 			currentUser,
 			currentFeed,
 			revenueFeed,
@@ -270,7 +301,11 @@ class Home extends Component {
 				<NavBar user={currentUser} />
 				<Container style={{ padding: '30px', maxWidth: '990px' }}>
 					<Row>
-						<GetDataSelection onConfirm={this.getSelectedFeed} />
+						<GetDataSelection
+							allDevicesId={allDevicesId}
+							// allDeviceInfo={allDeviceInfo}
+							onConfirm={this.getSelectedFeed}
+						/>
 					</Row>
 					<Row>
 						<Mapbox />

src/Pages/LogIn/index.js

@@ -4,11 +4,15 @@ import { withRouter } from 'react-router';
 import app from '../../firebase';
 
 class LogInContainer extends Component {
+	state = {
+		membership: null,
+	};
 	handleSignUp = async event => {
 		event.preventDefault();
 		const { email, password } = event.target.elements;
 		try {
 			await app.auth().signInWithEmailAndPassword(email.value, password.value);
+
 			this.props.history.push('/');
 		} catch (error) {
 			alert(error);

src/components/GetDataSelection/GetDataSelection.js

@@ -2,10 +2,11 @@ import React, { Component } from 'react';
 import { Col, Form, Button } from 'react-bootstrap';
 import DateRangeSeletion from './DateRangeSeletion';
 import moment from 'moment';
+import { db } from '../../firebase';
 
 class GetDataSelection extends Component {
 	state = {
-		device: '3d2951a5-fa10-4d56-abae-bc471f3d2e1f',
+		device: null,
 		range: {
 			startDate: moment()
 				.subtract(1, 'days')
@@ -13,6 +14,7 @@ class GetDataSelection extends Component {
 			endDate: moment().valueOf(),
 		},
 		breakdown: 'minutes',
+		allDeviceInfo: null,
 	};
 
 	handleClickGo = e => {
@@ -23,7 +25,31 @@ class GetDataSelection extends Component {
 		this.setState({ range: selectedRange });
 	};
 
+	getAllDevicesInfo = () => {
+		if (this.props.allDevicesId) {
+			const allDevicesId = this.props.allDevicesId;
+
+			let allDeviceInfo = [];
+			allDevicesId.map(async (deviceId, index) => {
+				const deviceInfo = await db
+					.collection('device')
+					.doc(deviceId)
+					.get();
+
+				allDeviceInfo.push(deviceInfo.data());
+			});
+			console.log('allDeviceInfo', allDeviceInfo);
+			this.setState({ allDeviceInfo });
+		}
+	};
+
+	componentDidMount = () => {
+		this.getAllDevicesInfo();
+	};
+
 	render() {
+		let { allDevicesId } = this.props;
+		console.log('allDevicesId', allDevicesId);
 		return (
 			<Col>
 				<Form.Label>Get data from</Form.Label>
@@ -37,9 +63,14 @@ class GetDataSelection extends Component {
 								this.setState({ device: e.target.value });
 							}}
 						>
-							<option value="">Choose...</option>
-							<option>3d2951a5-fa10-4d56-abae-bc471f3d2e1f</option>
-							<option>3d2951a5-fa10-4d56-abae-bc471f3d2e12</option>
+							{allDevicesId &&
+								allDevicesId.map((deviceId, index) => {
+									return (
+										<option key={`option${index}`} value={deviceId}>
+											{index}
+										</option>
+									);
+								})}
 						</Form.Control>
 					</Col>
 					<Col md>