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

//data display
export default function Noticias() {
    const [users,setUsers] = useState([]);

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

    //Busca la informacion en la base de datos
    const fetchData = () => {
      //fetch('https://ada.uprrp.edu/~luis.ortiz79/api/users/',{
      fetch('http://localhost/apicenso/users/')
        .then(response => response.json())
        //.then(jsonResponse => setUsers(jsonResponse))
        .then((response)=>{
            console.log(response.data);
            setUsers(response.data);
        })
        .catch(error => console.log(error))
    }

    //Es donde va a desplegar la informacion de la base de datos
    const renderUser = ({item}) => {
      return (
        <View style={{margin:10,borderWidth:0.5,padding:10}}>
          <Text style={{color:"black",fontSize:16,fontWeight:"bold"}}>
            Noticia {item.id}
          </Text>
          <Text style={{color:"black"}}> {item.title}</Text>
          <Text style={{color:"black"}}> {item.subject}</Text>
        </View>
      )
    }

    return (
      <View style={{flex:1,backgroundColor:"white"}}>
        <FlatList
          data={users}
          renderItem={renderUser}
          keyExtractor={(item,index) => index.toString()}
          />
      </View>
    )
}