add Mapbox, delete unused component

package.json

@@ -6,6 +6,7 @@
 		"bootstrap": "^4.3.1",
 		"bootstrap": "^4.3.1",
 		"firebase": "^6.3.3",
 		"firebase": "^6.3.3",
 		"jquery": "^3.4.1",
 		"jquery": "^3.4.1",
+		"mapbox-gl": "^1.2.0",
 		"moment": "^2.24.0",
 		"moment": "^2.24.0",
 		"node-sass": "^4.12.0",
 		"node-sass": "^4.12.0",
 		"react": "^16.8.6",
 		"react": "^16.8.6",
@@ -13,6 +14,7 @@
 		"react-bootstrap-daterangepicker": "^4.1.0",
 		"react-bootstrap-daterangepicker": "^4.1.0",
 		"react-dom": "^16.8.6",
 		"react-dom": "^16.8.6",
 		"react-icons": "^3.7.0",
 		"react-icons": "^3.7.0",
+		"react-mapbox-gl": "^4.6.0",
 		"react-router-dom": "^5.0.1",
 		"react-router-dom": "^5.0.1",
 		"react-scripts": "3.0.1",
 		"react-scripts": "3.0.1",
 		"react-spinners": "^0.5.13",
 		"react-spinners": "^0.5.13",

src/Pages/Home.js

 import React, { Component } from 'react';
 import React, { Component } from 'react';
 import app from '../firebase';
 import app from '../firebase';
-import { Row, Col, Container } from 'react-bootstrap';
+import { Row, Container } from 'react-bootstrap';
 import DataTable from '../components/DataTable';
 import DataTable from '../components/DataTable';
 import NavBar from '../components/NavBar';
 import NavBar from '../components/NavBar';
 import DataCard from '../components/DataCard';
 import DataCard from '../components/DataCard';
 import GetDataSelection from '../components/GetDataSelection/GetDataSelection';
 import GetDataSelection from '../components/GetDataSelection/GetDataSelection';
-
-// mock component
-const Map = () => <Col>Map</Col>;
-// const CurrentChart = () => <Col>Current Chart</Col>;
-// const RevenueChart = () => <Col>Revenue chart</Col>;
-// const PeopleChart = () => <Col>People chart</Col>;
-// const RemoteChart = () => <Col>Remote chart</Col>;
+import Mapbox from '../components/Mapbox';
 
 
 const Data = [
 const Data = [
 	{
 	{
@@ -76,7 +70,7 @@ class Home extends Component {
 						<GetDataSelection />
 						<GetDataSelection />
 					</Row>
 					</Row>
 					<Row>
 					<Row>
-						<Map />
+						<Mapbox />
 					</Row>
 					</Row>
 					<Row>
 					<Row>
 						{Data.map((item, index) => (
 						{Data.map((item, index) => (

src/Pages/LogIn/LogInView.js

@@ -15,12 +15,10 @@ const LogInView = ({ onSubmit }) => {
 				<br />
 				<br />
 				<Form onSubmit={onSubmit}>
 				<Form onSubmit={onSubmit}>
 					<Form.Group controlId="formBasicEmail">
 					<Form.Group controlId="formBasicEmail">
-						{/* <Form.Label>Email address</Form.Label> */}
-						<Form.Control type="email" placeholder="Enter email" name="email" />
+						<Form.Control type="email" placeholder="E-mail..." name="email" />
 					</Form.Group>
 					</Form.Group>
 					<Form.Group controlId="formBasicPassword">
 					<Form.Group controlId="formBasicPassword">
-						{/* <Form.Label>Password</Form.Label> */}
-						<Form.Control type="password" placeholder="Password" name="password" />
+						<Form.Control type="password" placeholder="Password..." name="password" />
 					</Form.Group>
 					</Form.Group>
 					<br />
 					<br />
 					<Button variant={'success'} block type="submit">
 					<Button variant={'success'} block type="submit">

src/components/Mapbox.js

+import React from 'react';
+import { Col } from 'react-bootstrap';
+import ReactMapboxGl, { Layer, Feature, Popup } from 'react-mapbox-gl';
+
+const Map = ReactMapboxGl({
+	accessToken: 'pk.eyJ1IjoicHJhY2hwYXdlZSIsImEiOiJjanlxdndybXcwNDZtM2RxcDlzenRrdzhsIn0.gvfTBIUhhBKvY2ZWBjj3Zw',
+});
+
+const Data = [
+	{ id: 1, position: [100.56721, 13.748115], name: 'NEXPIE' },
+	{ id: 2, position: [100.56987, 13.747821], name: 'AVANI' },
+];
+
+export default class Mapbox extends React.Component {
+	state = {
+		center: [100.523186, 13.736717],
+		active: undefined,
+		zoom: undefined,
+	};
+	render() {
+		const { center, active, zoom } = this.state;
+		return (
+			<Col>
+				<Map
+					style="mapbox://styles/mapbox/streets-v9"
+					containerStyle={{
+						height: '50vh',
+						width: '100%',
+						marginTop: '.5em',
+					}}
+					center={center}
+					zoom={zoom}
+					onClick={() => this.setState({ active: undefined })}
+				>
+					<Layer
+						type="circle"
+						id="marker"
+						paint={{
+							'circle-color': 'red',
+							'circle-stroke-width': 1,
+							'circle-stroke-color': 'white',
+							'circle-stroke-opacity': 1,
+						}}
+					>
+						{Object.keys(Data).map((item, index) => (
+							<Feature
+								key={item}
+								coordinates={Data[item].position}
+								onClick={() =>
+									this.setState({
+										center: Data[item].position,
+										zoom: [14],
+										active: Data[item],
+									})
+								}
+							/>
+						))}
+					</Layer>
+					{active && (
+						<Popup key={active.id} coordinates={active.position}>
+							<div
+								style={{
+									background: 'white',
+									color: '#3f618c',
+									fontWeight: 400,
+									padding: 5,
+									borderRadius: 2,
+								}}
+							>
+								{active.name}
+							</div>
+						</Popup>
+					)}
+				</Map>
+			</Col>
+		);
+	}
+}