update

src/Pages/Home.js

@@ -13,36 +13,46 @@ const Data = [
 	{
 		title: 'Current chart',
 		backgroundColor: '#51ABAD',
-		detail: [{ smtitle: 'Total current', smValue: 0, iconType: 'money' }],
+		detail: [{ smtitle: 'Total current', iconType: 'money' }],
 	},
 	{
 		title: 'Revenue chart',
 		backgroundColor: '#51ABAD',
 		detail: [
-			{ smtitle: 'Total revenue', smValue: 0, iconType: 'money' },
-			{ smtitle: 'Avg. revenue', smValue: 0, iconType: 'money' },
-			{ smtitle: 'Max. Revenue', smValue: 0, iconType: 'max' },
-			{ smtitle: 'Min. Revenue', smValue: 0, iconType: 'min' },
+			{ smtitle: 'Total revenue', iconType: 'money' },
+			{ smtitle: 'Avg. revenue', iconType: 'money' },
+			{ smtitle: 'Max. Revenue', iconType: 'max' },
+			{ smtitle: 'Min. Revenue', iconType: 'min' },
 		],
 	},
 	{
 		title: 'People chart',
 		backgroundColor: '#5E73F6',
 		detail: [
-			{ smtitle: 'Total People', smValue: 0 },
-			{ smtitle: 'Avg. People', smValue: 0 },
-			{ smtitle: 'Max. People', smValue: 0, iconType: 'max' },
-			{ smtitle: 'Min. People', smValue: 0, iconType: 'min' },
+			{ smtitle: 'Total People' },
+			{ smtitle: 'Avg. People' },
+			{ smtitle: 'Max. People', iconType: 'max' },
+			{ smtitle: 'Min. People', iconType: 'min' },
 		],
 	},
 	{
 		title: 'Remote chart',
 		backgroundColor: '#5E73F6',
 		detail: [
-			{ smtitle: 'Total Remote', smValue: 0 },
-			{ smtitle: 'Avg. Remote', smValue: 0 },
-			{ smtitle: 'Max. Remote', smValue: 0, iconType: 'max' },
-			{ smtitle: 'Min. Remote', smValue: 0, iconType: 'min' },
+			{ smtitle: 'Total Remote' },
+			{ smtitle: 'Avg. Remote' },
+			{ smtitle: 'Max. Remote', iconType: 'max' },
+			{ smtitle: 'Min. Remote', iconType: 'min' },
+		],
+	},
+	{
+		title: 'Fingerprint chart',
+		backgroundColor: '#5E73F6',
+		detail: [
+			{ smtitle: 'Total Fingerprint' },
+			{ smtitle: 'Avg. Fingerprint' },
+			{ smtitle: 'Max. Fingerprint', iconType: 'max' },
+			{ smtitle: 'Min. Fingerprint', iconType: 'min' },
 		],
 	},
 	{
@@ -106,11 +116,17 @@ class Home extends Component {
 		table: null,
 	};
 
-	async componentDidMount() {
+	componentDidMount = async () => {
 		await this.getConfig();
 		await this.getCurrentUser();
 		this.getAllDevicesInfo();
-	}
+	};
+
+	componentDidUpdate = async (prevProps, prevState) => {
+		if (prevState.allDevicesId !== this.state.allDevicesId) {
+			await this.getFeedData();
+		}
+	};
 
 	getConfig = async () => {
 		const configData = await db.collection('config').get();
@@ -133,15 +149,12 @@ class Home extends Component {
 
 	getAllDevicesInfo = async () => {
 		const { currentUid } = this.state;
-		// console.log('currentUid');
-		// console.log(currentUid);
 		const DevicesId = await db
 			.collection('membership')
 			.doc(currentUid)
 			.get();
 
 		let allDevicesId = Object.keys(DevicesId.data());
-		// console.log(allDevicesId);
 
 		let allDeviceInfo = [];
 		for (let i = 0, len = allDevicesId.length; i < len; i++) {
@@ -157,7 +170,16 @@ class Home extends Component {
 		this.setState({ allDevicesId });
 	};
 
-	getFeedData = async (deviceId, selectedRange, breakdown) => {
+	getFeedData = async (
+		deviceId,
+		selectedRange = {
+			startDate: moment()
+				.subtract(1, 'days')
+				.valueOf(),
+			endDate: moment().valueOf(),
+		},
+		breakdown = 'minutes'
+	) => {
 		const { kairosUrl, userToken } = this.state;
 		const { startDate, endDate } = selectedRange;
 		const now = moment().valueOf();
@@ -166,7 +188,7 @@ class Home extends Component {
 			end_absolute: endDate || now,
 			metrics: [
 				{
-					name: deviceId,
+					name: deviceId || this.state.allDevicesId[0],
 					group_by: [
 						{
 							name: 'tag',
@@ -240,9 +262,8 @@ class Home extends Component {
 		}
 	};
 
-	getSelectedFeed = selectedFeed => {
-		const { device, range, breakdown } = selectedFeed;
-		this.getFeedData(device || this.state.allDevicesId[0], range, breakdown);
+	getSelectedFeed = ({ device, range, breakdown }) => {
+		this.getFeedData(device, range, breakdown);
 	};
 
 	getMax = data => {

src/components/DataCard.js

@@ -41,7 +41,6 @@ const DataCard = props => {
 			xAxis: moment(value[0]).format('D/M/YY H:mm'),
 			yAxis: value[1],
 		}));
-		console.log(dataObj);
 	}
 
 	return (

src/components/DataTable.js

@@ -13,22 +13,24 @@ export default class DataTable extends React.PureComponent {
 
 	handlePageClick = data => {
 		let selected = data.selected + 1;
-
 		this.setState({ activePage: selected });
 	};
-	render() {
-		const { data, activePage, itemsPerPage } = this.state;
-		const lastIndex = activePage * itemsPerPage;
-		const firstIndex = lastIndex - itemsPerPage;
-		const currentItem = data.slice(firstIndex, lastIndex);
-		const totalPage = Math.ceil(data.length / itemsPerPage);
 
+	componentDidUpdate = () => {
 		if (this.props.table) {
 			let data1 = this.props.table;
 			this.setState({
 				data: data1,
 			});
 		}
+	};
+
+	render() {
+		const { data, activePage, itemsPerPage } = this.state;
+		const lastIndex = activePage * itemsPerPage;
+		const firstIndex = lastIndex - itemsPerPage;
+		const currentItem = data.slice(firstIndex, lastIndex);
+		const totalPage = Math.ceil(data.length / itemsPerPage);
 
 		const renderItem = currentItem.map((item, index) => {
 			return (

src/components/GetDataSelection/DateRangeSeletion.js

@@ -26,9 +26,6 @@ class PredefinedRanges extends Component {
 		},
 	};
 
-	// handleEvent = (event, picker) => {
-	// };
-
 	handleApply = (event, picker) => {
 		this.setState({
 			startDate: picker.startDate,
@@ -40,9 +37,6 @@ class PredefinedRanges extends Component {
 				startDate: this.state.startDate.valueOf(),
 				endDate: this.state.endDate.valueOf(),
 			});
-
-		// console.log(picker.startDate.format('DD MMM YY HH:MM:SS'));
-		// console.log(picker.endDate.format('DD MMM YY HH:MM:SS'));
 	};
 
 	render() {

src/components/GetDataSelection/GetDataSelection.js

@@ -15,8 +15,7 @@ class GetDataSelection extends PureComponent {
 		breakdown: 'minutes',
 	};
 
-	handleClickGo = e => {
-		console.log(this.state)
+	handleClickGo = () => {
 		this.props.onConfirm && this.props.onConfirm(this.state);
 	};
 
@@ -24,16 +23,8 @@ class GetDataSelection extends PureComponent {
 		this.setState({ range: selectedRange });
 	};
 
-	componentDidMount = () =>{
-	
-	}
-
 	render() {
 		let { allDevicesId, allDeviceInfo } = this.props;
-		if (allDevicesId) {
-			this.setState({ device: allDevicesId[0]})
-			this.props.onConfirm && this.props.onConfirm(this.state);
-		}
 
 		return (
 			<Col>
@@ -44,8 +35,6 @@ class GetDataSelection extends PureComponent {
 							as="select"
 							defaultValue={this.state.device}
 							onChange={e => {
-								console.log("e.target.value")
-								console.log(e.target.value)
 								this.setState({ device: e.target.value });
 							}}
 						>

src/styles.scss

@@ -9,8 +9,13 @@ body {
 	margin-bottom: 0.4rem;
 }
 .pagination {
+	justify-content: center;
 	border-radius: 5px;
 	margin-top: 10px;
+	li,
+	a {
+		cursor: pointer;
+	}
 }
 // .myStyleGutters {
 // 	> .col,