reactnative/src/screens/salesorder/ProductList.tsx

import { useEffect, useState } from 'react'
import { FlatList, RefreshControl, Text, View } from 'react-native'
import { useNavigation } from '@react-navigation/native';
import { Card } from '../../components/Card'
import { CardList } from '../../components/cardList/CardList'
import { Button } from '../../components/Button'
import { useFetchWithAuth } from '../../hooks/useFetchWithAuth'
import { ProductCardList } from '../../components/cardList/ProductCardList';


export const ProductList = () => {
    const navigation = useNavigation();
    const [refreshing, setRefreshing] = useState(false);
    const endpoints = "producto";
    let defaultData: [] = [];

    const [entities, setEntities] = useState(defaultData);

    const getInitData = async () => {
        const { data, error } = await useFetchWithAuth(endpoints);
        if (!error) {
            setEntities(data);
        } else {
            console.log(error)
        }
    }

    useEffect(() => {
        getInitData();
    }, [refreshing])

    const onRefresh = () => {
        setRefreshing(true);
        setTimeout(() => {
            setRefreshing(false);
        }, 1000);
    };

    return (
        <View className='bg-sky-100'>
            <Button
                title=' + '
                additionalStyle='z-10 absolute bottom-2 right-0'
                onPress={() => {
                    // Pass and merge params back to home screen
                    navigation.navigate(
                        {
                            name: 'SalesOrderFormScreen',
                            params: { productId: 1 },
                            merge: true,
                        } as never
                    );
                }}
        />
            <FlatList
                refreshControl={
                    <RefreshControl
                        refreshing={refreshing}
                        onRefresh={onRefresh}
                    />
                }
                data={[""]}
                renderItem={({ item }) =>
                    <View id={item} className='flex-1 items-center'>
                        <Card>
                            <Text className='text-xl text-center my-4'>Listado de Produtos</Text>
                            <ProductCardList screenName="ProductFormScreen" columnDisplay="nombre" entities={entities} />
                        </Card>
                    </View>
                }
                keyExtractor={item => item}
            />
        </View>
    )
}