Welinton - Alterações

gistfile1.txt

import React, {useState} from 'react';
import {
  Text,
  View,
  PermissionsAndroid,
  TouchableOpacity,
  Platform,
  ScrollView,
} from 'react-native';

import Geolocation from '@react-native-community/geolocation';

import styles from './styles';

export default function Polygon() {
  const [currentLatitude, setCurrentLatitude] = useState('');
  const [currentLongitude, setCurrentLongitude] = useState('');
  const [location, setLocation] = useState(0);

  // Adicionei uma lista geral aqui
  const [listAll, setListAll] = useState([]);

  const [latPoly, setLatPoly] = useState('');
  const [longPoly, setLongPoly] = useState('');
  const [point, setPoint] = useState(0);

  const [showJsx, setShowJsx] = useState(false);

  const callLocation = () => {
    if (Platform.OS === 'ios') {
      getLocation();
    } else {
      const requestLocationPermission = async () => {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
          {
            title: 'Permissão de Acesso à Localização',
            message: 'Este aplicativo precisa acessar sua localização.',
            buttonNeutral: 'Pergunte-me depois',
            buttonNegative: 'Cancelar',
            buttonPositive: 'OK',
          },
        );

        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          getLocation();
          alert('Aguarde enquanto verificamos sua localização atual.');
        } else {
          alert('Permissão de Localização negada');
        }
      };
      requestLocationPermission();
    }
  };

  const getLocation = () => {
    Geolocation.getCurrentPosition(
      (position) => {
        const currentLatitude = JSON.stringify(position.coords.latitude);
        const currentLongitude = JSON.stringify(position.coords.longitude);
        setCurrentLatitude(currentLatitude);
        setCurrentLongitude(currentLongitude);
      },
      (error) => alert(error.message),
      {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000},
    );
    const location = Geolocation.watchPosition((position) => {
      const currentLatitude = JSON.stringify(position.coords.latitude);
      const currentLongitude = JSON.stringify(position.coords.longitude);
      setCurrentLatitude(currentLatitude);
      setCurrentLongitude(currentLongitude);
    });
    setLocation(location);
  };

  const stopLocationMonitoring = () => {
    Geolocation.clearWatch(location);
  };

  const setFalse = () => {
    setShowJsx(false);
    polygonPosition();
  };

  function polygonPosition() {
    setShowJsx(true);
    setPoint(point + 1);
    setLatPoly(currentLatitude);
    setLongPoly(currentLongitude);
  }

  // Adicionei este novo método
  const newPoint = () => {
    setFalse();
    const updateList = listAll;
    updateList.push({latPoly, longPoly, point});
    setListAll(updateList);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.Tittle}>Você está Aqui</Text>
      <Text style={styles.text}>Latitude: {currentLatitude}</Text>
      <Text style={styles.text}>Longitude: {currentLongitude}</Text>

      <TouchableOpacity onPress={callLocation} style={styles.Button}>
        <Text style={styles.TextButton}> Obter Localização atual </Text>
      </TouchableOpacity>

      <View style={styles.ButtonContainer}>
        {/* Mudei o onPress pra chamar o novo método */}
        <TouchableOpacity onPress={newPoint} style={styles.ButtonInRow}>
          <Text style={styles.TextButton}>Inserir ponto Poligonal</Text>
        </TouchableOpacity>

        <TouchableOpacity
          onPress={stopLocationMonitoring}
          style={styles.ButtonInRow}>
          <Text style={styles.TextButton}>Salvar</Text>
        </TouchableOpacity>
      </View>

      <ScrollView style={styles.Scroll}>
        {/* Alterei para dar looping no array. */}
        {showJsx &&
          listAll &&
          listAll.map((item, index) => (
            <View style={styles.PolygonContainer} key={index}>
              <View style={styles.DescriptionContainer}>
                <Text style={styles.TittleDescription}>
                  Ponto n°: {item.point}{' '}
                </Text>
                <Text style={styles.TittleDescription}>
                  Latitude: {item.latPoly}{' '}
                </Text>
                <Text style={styles.TittleDescription}>
                  Longitude: {item.longPoly}{' '}
                </Text>
              </View>
            </View>
          ))}
      </ScrollView>
    </View>
  );
}