JeLuOrRi/MocionesIUPI/App.js

import React, { useEffect, useState } from 'react';
import { ActivityIndicator, Button, FlatList, Text, View } from 'react-native';

export default App = () => {
  const [isLoading, setLoading] = useState(true);
  const[json, setJson] = useState(null);
  const [mocion, setMocion] = useState([]);
  const [description, setDescription] = useState([]);

  // this connects us to the API and fetches the json file with the mociones
  const getMociones = async () => {
     try {
      const response = await fetch('http://10.190.1.140:5000/send?PIN=121071');
      const json = await response.json();
      setMocion(json.Mocion);
      setDescription(json.Description);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    getMociones();
  }, []);

  // this recieves the value of the button pressed and sends it to the api 
  const sendVotos = (value) => {
    console.log(value); // testing that we recied the value

    //adding new values to json
    fetch('http://10.190.1.140:5000', {
      method: 'POST',
      body: JSON.stringify(json),
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
    });
  };

  // here we want to display each mocion in a flatlist 
  // it's supposed to be like buttons. Once clicked it would let you vote inside
  return (
    <View style={{ flex: 1, padding: 24 }}>
      <Text>{mocion}</Text>
      <Text>{description}</Text>
      
      {/* container for the look of the buttons */}
      <View >
      <Button title='A favor' onPress={() => sendVotos('A Favor')} />
      <Button title='En Contra'onPress={() => sendVotos('En Contra')} />
      <Button title='Abstenido/a' onPress={() => sendVotos('Abstenido/a')} />
      </View>

    </View>
  );
};