forked from shootismoke/mobile-app
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Details.tsx
123 lines (105 loc) · 4.11 KB
/
Details.tsx
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
// Sh**t! I Smoke
// Copyright (C) 2018-2019 Marcelo S. Coelho, Amaury Martiny
// Sh**t! I Smoke is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// Sh**t! I Smoke is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with Sh**t! I Smoke. If not, see <http:https://www.gnu.org/licenses/>.
import React, { useContext, useEffect, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import MapView, { Marker } from 'react-native-maps';
import { NavigationInjectedProps } from 'react-navigation';
import truncate from 'truncate';
import homeIcon from '../../../assets/images/home.png';
import stationIcon from '../../../assets/images/station.png';
import { Distance } from './Distance';
import { Header } from './Header';
import { i18n } from '../../localization';
import { ApiContext, CurrentLocationContext } from '../../stores';
import { trackScreen } from '../../util/amplitude';
import { distanceToStation, getCorrectLatLng } from '../../util/station';
import { useDistanceUnit } from '../../stores/distanceUnit';
interface DetailsProps extends NavigationInjectedProps {}
// Holds the ref to the MapView.Marker representing the AQI station
let stationMarker: Marker | undefined;
export function Details (props: DetailsProps) {
const { navigation } = props;
const [showMap, setShowMap] = useState(false);
const { api } = useContext(ApiContext);
const { currentLocation: _currentLocation } = useContext(CurrentLocationContext);
const { distanceUnit } = useDistanceUnit();
trackScreen('DETAILS');
useEffect(() => {
// Show map after 200ms for smoother screen transition
setTimeout(() => setShowMap(true), 500);
}, []);
const handleMapReady = () => {
stationMarker && stationMarker.showCallout && stationMarker.showCallout();
};
const handleStationRef = (ref: Marker) => {
stationMarker = ref;
};
// TODO
// I have no idea why, but if we don't clone the object, and continue to
// use `location.current` everywhere, we get a `setting key of frozen
// object` error. It's related to the MapView below.
const currentLocation = { ..._currentLocation! };
const distance = distanceToStation(currentLocation!, api!, distanceUnit);
const station = {
description: api!.shootISmoke.station || '',
title: api!.shootISmoke.station,
...getCorrectLatLng(currentLocation, {
latitude: api!.city.geo[0],
longitude: api!.city.geo[1]
})
};
return (
<View style={styles.container}>
<Header onBackClick={() => navigation.goBack()} />
<View style={styles.mapContainer}>
{showMap && (
<MapView
initialRegion={{
latitude: (currentLocation.latitude + station.latitude) / 2,
latitudeDelta: Math.abs(currentLocation.latitude - station.latitude) * 2,
longitude: (currentLocation.longitude + station.longitude) / 2,
longitudeDelta: Math.abs(currentLocation.longitude - station.longitude) * 2
}}
onMapReady={handleMapReady}
style={styles.map}
>
<Marker
coordinate={station}
image={stationIcon}
ref={handleStationRef}
title={i18n.t('details_air_quality_station_marker')}
description={truncate(station.description, 40)}
/>
<Marker
coordinate={currentLocation}
image={homeIcon}
title={i18n.t('details_your_position_marker')}
/>
</MapView>
)}
</View>
<Distance distance={distance} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flexGrow: 1
},
map: {
flexGrow: 1
},
mapContainer: {
flexGrow: 1
}
});