· 4 years ago · Jun 10, 2021, 10:56 AM
1// Google maps API key = AIzaSyBzzCzbTGy2BJUxSaXFj2RjMzMoWYsZBZM
2
3import React, { useState } from 'react';
4import type {Node} from 'react';
5import {
6 StyleSheet,
7 View,
8 TextInput,
9 Text
10} from 'react-native';
11import { Dialog } from 'react-native-simple-dialogs';
12import { Button, Container, Header, Body, Title, Left, Content, Icon, Footer, FooterTab } from 'native-base';
13import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
14import useAxios from 'axios-hooks';
15import axios from 'axios';
16
17// ONGELMA: täällä tapahtuu mystinen luuppi ennen datan saamista kun sovellus käynnistetään ekaa kertaa, eli tulostaa ensin tuon
18// sisääntulologin, sitten kaupungin, sitten "----loading----" mistä palaa uudelleen sisääntulologiin jne. Dataan jää undefined.
19// Ongelma ehkä MarkerDatan kutsussa?
20
21const MarkerData = (params) => {
22
23 console.log("-------@ MarkerData--------")
24 const city = params.city;
25 const markText = params.text;
26 const id = params.id;
27 console.log(city); //toimii, palauttaa kaupungin nimen
28
29 const [ { data, loading, error }, refetch] = useAxios(
30 'https://nominatim.openstreetmap.org/search?city=$'+city+'&format=json'
31 )
32
33 // tämä tapahtuu, sitten palaa alkuun, tapahtuu uudestaan, sitten error koska ei dataa alempana oleville asioille
34 if (loading) return (
35 console.log("----loading----")
36 )
37
38 // ei tule erroria
39 if (error) return (
40 console.log("----error----")
41 )
42
43 console.log(data);
44
45 const refreshMarkers = () => {
46 refetch();
47 }
48
49 const lat = data.lat;
50 const lon = data.lon;
51
52 return (
53 <MapView.Marker id={id} coordinate={{latitude: 60.980380564, longitude: 25.654987962}} title={city} description={markText} />
54 );
55}
56
57
58const App: () => Node = () => {
59
60 const [dialogVisible, setDialogVisible] = useState(false);
61 const [newCityName, setNewCityName] = useState("");
62 const [cities, setCities] = useState([]);
63 const [newMarkerText, setNewMarkerText] = useState("");
64
65 const openDialog = () => {
66 setDialogVisible(true);
67 }
68
69 const addMarker = () => {
70 setCities( [...cities,{id:Math.random()*Date.now(), name:newCityName, text:newMarkerText}]); // Not truly unique id, but pretty close...
71 setDialogVisible(false);
72 }
73
74 const closeDialog = () => {
75 setDialogVisible(false);
76 }
77
78 return (
79 <Container>
80
81 <Header style={styles.header}>
82 <Left>
83 <Icon name="business-outline" style={styles.headerIcon}></Icon>
84 </Left>
85 <Body>
86 <Title style={styles.headerTitle}> My Places</Title>
87 </Body>
88 </Header>
89
90 <Content contentContainerStyle={styles.content}>
91 <MapView
92 provider={ PROVIDER_GOOGLE }
93 style={styles.map}
94 initialRegion={{
95 latitude: 61.92411,
96 longitude: 25.748151,
97 latitudeDelta: 17.0,
98 longitudeDelta: 17.0,
99 }}
100 >
101 {cities.map(city => (
102 <MarkerData key={city.id} id={city.id} city={city.name} text={city.text} />
103 ))}
104 </MapView>
105
106 </Content>
107
108 <Footer>
109 <FooterTab style={styles.footer}>
110 <Button full onPress={openDialog}>
111 <Text style={styles.add}>Add a marker</Text>
112 </Button>
113 </FooterTab>
114 </Footer>
115
116 <Dialog visible={dialogVisible}
117 title="Add a new city marker"
118 onTouchOutside={closeDialog}>
119 <View>
120 <Text>City</Text>
121 <TextInput
122 onChangeText={ (text) => setNewCityName(text)}
123 placeholder='Type city name here'
124 />
125 <Text>Text</Text>
126 <TextInput
127 onChangeText={ (text) => setNewMarkerText(text)}
128 placeholder='Type marker text here'
129 />
130 </View>
131 <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
132 <Button bordered dark onPress={closeDialog}>
133 <Text style={{fontWeight: 'bold'}}> Cancel </Text>
134 </Button>
135 <Button bordered dark onPress={addMarker}>
136 <Text style={{fontWeight: 'bold'}}> Add </Text>
137 </Button>
138 </View>
139 </Dialog>
140
141 </Container>
142
143 );
144};
145
146const styles = StyleSheet.create({
147 content: {
148 ...StyleSheet.absoluteFillObject,
149 height: 800,
150 width: 500,
151 justifyContent: 'flex-end',
152 alignItems: 'center',
153 },
154 map: {
155 ...StyleSheet.absoluteFillObject,
156 },
157 add: {
158 color: 'darkblue',
159 fontSize: 20,
160 },
161 headerTitle: {
162 fontSize: 24,
163 color: 'darkblue',
164 },
165 headerIcon: {
166 color: 'darkblue',
167 },
168 header: {
169 backgroundColor: 'lightblue'
170 },
171 footer: {
172 backgroundColor: 'lightblue',
173 }
174
175});
176
177export default App;