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

export default function Page() {
    const [isLoading, setLoading] = useState(true);
    const [data, setData] = useState([]);
    const getProjects = () => {
        return fetch('http://192.168.178.129:1337/api/projects?populate=*')
            .then(response => response.json())
            .then(json => {
                 setData(json.data);
                 setLoading(false)
            })
            .catch(error => {
                console.error(error);
            });
    };

    useEffect(() => {
        getProjects();
    })

    return (
        <View style={{flex:1,padding: 24}}>
            {
                isLoading ? (
                    <ActivityIndicator/>
                ) : (
                    <FlatList
                        data={data}
                        keyExtractor={({id}) => id}
                        renderItem={({item}) => (
                            <View style={{height: "120px", width: '95%', backgroundColor: 'grey', marginTop: 10, borderColor: '#69c350'}}>
                                <Text>{item.attributes.name}</Text>
                            </View>
                        )}
                    />
                )
            }
        </View>


    )
}