NewPlace.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import React, {useState} from 'react';
  2. import {StyleSheet, TextInput, Text, TouchableOpacity, View, Alert} from 'react-native';
  3. import 'react-native-get-random-values'
  4. import GLOBALS from "../Globals"
  5. const NewPlace = ({route, navigation}) => {
  6. const [description, setDesc] = useState('');
  7. const [name, setName] = useState('');
  8. const onDescChange = (desc) => setDesc(desc);
  9. const onNameChange = (name) => setName(name);
  10. const { coords } = route.params;
  11. const addPlace = async () => {
  12. const place = {
  13. lat: coords[1],
  14. lng: coords[0],
  15. desc: description,
  16. name: name
  17. };
  18. console.log(JSON.stringify(place));
  19. await fetch(GLOBALS.API_HOST, {
  20. method: 'POST',
  21. headers: {'Content-Type': 'application/json'},
  22. body: JSON.stringify(place),
  23. }).then(response => {
  24. if (response.ok) {
  25. Alert.alert("Place saved to database.")
  26. navigation.navigate("Map", {newCoords: coords});
  27. }
  28. else {
  29. Alert.alert("Something went wrong when adding a new place", `Response code: ${response.status}`)
  30. }
  31. })
  32. .catch(error => Alert.alert("Something went wrong when talking to the server",error));
  33. }
  34. return(
  35. <View style={styles.container}>
  36. <Text style={styles.title}>Add new place for the following coordinates:</Text>
  37. <Text>Longitude: {coords[0]}</Text>
  38. <Text>Latitude: {coords[1]}</Text>
  39. <Text>{'\n'}</Text>
  40. <Text>Your name:</Text>
  41. <TextInput
  42. style={styles.input}
  43. placeholder="Enter name..."
  44. onChangeText={onNameChange}></TextInput>
  45. <Text>Description:</Text>
  46. <TextInput
  47. style={styles.input}
  48. placeholder="Enter place description..."
  49. onChangeText={onDescChange}></TextInput>
  50. <TouchableOpacity
  51. onPress={() => addPlace()}
  52. style={styles.btn}>
  53. <Text style={styles.btnText}>+ Add Place</Text>
  54. </TouchableOpacity>
  55. </View>
  56. )
  57. }
  58. const styles = StyleSheet.create({
  59. container: {
  60. padding: 20,
  61. flex: 1,
  62. flexDirection: 'column',
  63. justifyContent: 'flex-start'
  64. },
  65. title: {
  66. fontSize: 20,
  67. marginBottom: 10
  68. },
  69. input: {
  70. height: 40,
  71. borderWidth: 1,
  72. borderColor: "grey",
  73. marginTop: 5,
  74. marginBottom: 10
  75. },
  76. btn: {
  77. height: 50,
  78. backgroundColor: '#FE4C4C',
  79. justifyContent: 'center',
  80. alignItems: 'center'
  81. },
  82. btnText: {
  83. color: 'white'
  84. }
  85. })
  86. export default NewPlace;