parent
3ac1dd6b9d
commit
3e318a28e2
@ -0,0 +1,58 @@
|
|||||||
|
import React, { FC, useEffect, useState } from 'react'
|
||||||
|
import { Card } from '../Card'
|
||||||
|
import { FlatList, Text, TouchableOpacity } from 'react-native'
|
||||||
|
import { useFetchWithAuth } from '../../hooks/useFetchWithAuth'
|
||||||
|
import { useNavigation } from '@react-navigation/native';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
endpoint: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CardList:FC <Props> = ({endpoint}) => {
|
||||||
|
|
||||||
|
const navitation = useNavigation();
|
||||||
|
|
||||||
|
let defaultData:[] = [];
|
||||||
|
|
||||||
|
const [entities, setEntities] = useState(defaultData);
|
||||||
|
|
||||||
|
|
||||||
|
const getInitData = async () => {
|
||||||
|
|
||||||
|
const { data, error } = await useFetchWithAuth(endpoint);
|
||||||
|
|
||||||
|
if (!error) {
|
||||||
|
setEntities(data);
|
||||||
|
} else {
|
||||||
|
console.log(error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getInitData();
|
||||||
|
}, [endpoint])
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
|
||||||
|
<FlatList
|
||||||
|
data={entities}
|
||||||
|
renderItem={({item}) =>
|
||||||
|
<Card>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={()=>navitation.navigate("CustomerFormScreen" as never)}
|
||||||
|
>
|
||||||
|
<Text>
|
||||||
|
{item["nombre"]}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</Card>
|
||||||
|
}
|
||||||
|
keyExtractor={item => item["id"]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
@ -0,0 +1,36 @@
|
|||||||
|
import AsyncStorage from '@react-native-async-storage/async-storage'
|
||||||
|
|
||||||
|
const fecher = async (url: string, token: string) => {
|
||||||
|
return await fetch(url, {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
"Authorization":token
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useFetchWithAuth = async (url: string) => {
|
||||||
|
|
||||||
|
url= "http://192.168.1.21:8082/api/"+url+"/";
|
||||||
|
const token = await AsyncStorage.getItem("token") || "";
|
||||||
|
let data;
|
||||||
|
let error;
|
||||||
|
try{
|
||||||
|
const response = await fecher(url, token)
|
||||||
|
if (response.ok){
|
||||||
|
data = await response.json();
|
||||||
|
}else {
|
||||||
|
|
||||||
|
error = "Servidor: "+ ((await response.json()).trace);
|
||||||
|
}
|
||||||
|
}catch (e){
|
||||||
|
error = "Cliente: "+e;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
data,
|
||||||
|
error
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -1,23 +1,38 @@
|
|||||||
import { FC } from 'react'
|
import { FC } from 'react'
|
||||||
import { Text } from 'react-native'
|
import { FlatList, Text, View } from 'react-native'
|
||||||
import { Background } from '../../components/Background'
|
import { Background } from '../../components/Background'
|
||||||
import { Card } from '../../components/Card'
|
import { Card } from '../../components/Card'
|
||||||
import { Input } from '../../components/Input'
|
|
||||||
import { Button } from '../../components/Button'
|
import { Button } from '../../components/Button'
|
||||||
import { useNavigation } from '@react-navigation/native';
|
import { useNavigation } from '@react-navigation/native';
|
||||||
|
import { CardList } from '../../components/cardList/CardList'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
}
|
}
|
||||||
|
|
||||||
export const CustomerListScreen:FC <Props> = () => {
|
export const CustomerListScreen:FC <Props> = () => {
|
||||||
const navigation = useNavigation();
|
const navigation = useNavigation();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Background >
|
<View className=''>
|
||||||
|
<Button title=' + ' additionalStyle='z-10 absolute bottom-2 right-0' onClick={()=>navigation.navigate("CustomerFormScreen" as never)} />
|
||||||
|
<FlatList
|
||||||
|
data={[""]}
|
||||||
|
renderItem={({item}) =>
|
||||||
|
<View id={item} className='flex-1 items-center'>
|
||||||
<Card>
|
<Card>
|
||||||
<Text className='text-xl text-center my-4'>Listado de clientes</Text>
|
<Text className='text-xl text-center my-4'>Listado de clientes</Text>
|
||||||
<Button title='Nuevo' onClick={()=>navigation.navigate("CustomerFormScreen" as never)} />
|
<CardList endpoint='cliente'/>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
</Background>
|
</View>
|
||||||
|
|
||||||
|
}
|
||||||
|
keyExtractor={item => item}
|
||||||
|
|
||||||
|
/>
|
||||||
|
|
||||||
|
</View>
|
||||||
|
|
||||||
|
|
||||||
)
|
)
|
||||||
}
|
}
|
Loading…
Reference in new issue