-
Notifications
You must be signed in to change notification settings - Fork 7
/
02-App.js
89 lines (71 loc) · 2.12 KB
/
02-App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import './App.css';
import React, { useEffect, useState } from "react";
import Amplify, { Auth } from "aws-amplify";
import { AmplifyAuthenticator } from '@aws-amplify/ui-react';
import { createRequestTransformer } from "amazon-location-helpers";
import 'bootstrap/dist/css/bootstrap.min.css';
import Header from './components/Header'
import ReactMapGL, { NavigationControl } from "react-map-gl";
import "maplibre-gl/dist/maplibre-gl.css";
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
//* ---- CONSTANTS ----- */
const MAP_NAME = "store1Maps";
const INITIAL_VIEWPORT = {
longitude: -56.164532,
latitude: -34.901112,
}
//* --------- */
const App = () => {
const [credentials, setCredentials] = useState();
const [transformRequest, setRequestTransformer] = useState();
const [viewport, setViewport] = useState({
longitude: INITIAL_VIEWPORT.longitude,
latitude: INITIAL_VIEWPORT.latitude,
zoom: 13,
});
useEffect(() => {
const fetchCredentials = async () => {
setCredentials(await Auth.currentUserCredentials());
};
fetchCredentials();
}, []);
useEffect(() => {
const makeRequestTransformer = async () => {
if (credentials != null) {
const tr = await createRequestTransformer({
credentials,
region: awsconfig.aws_project_region,
});
setRequestTransformer(() => tr);
}
};
makeRequestTransformer();
}, [credentials]);
return (
<AmplifyAuthenticator>
<div className="App">
<Header />
<div>
{transformRequest ? (
<ReactMapGL
{...viewport}
width="100%"
height="100vh"
transformRequest={transformRequest}
mapStyle={MAP_NAME}
onViewportChange={setViewport}
>
<div style={{ position: "absolute", left: 20, top: 20 }}>
<NavigationControl showCompass={false} />
</div>
</ReactMapGL>
) : (
<h1>Loading...</h1>
)}
</div>
</div>
</AmplifyAuthenticator>
);
}
export default App;