From 82e6350aa003d6446166dfacfa0da8ba67d57750 Mon Sep 17 00:00:00 2001 From: freddyheredia4 Date: Tue, 27 Jun 2023 20:13:47 -0500 Subject: [PATCH] crud ok --- src/components/Button.tsx | 6 +- src/components/CardItem.tsx | 20 ++++++ src/components/cardList/CardList.tsx | 43 +++++-------- src/hooks/saveWithAuth.ts | 42 +++++++++++++ src/navigator/TabScreen.tsx | 5 +- src/screens/company/CompanyFormScreen.tsx | 8 +++ src/screens/company/CompanyListScreen.tsx | 12 ++++ src/screens/company/CompanyStack.tsx | 24 +++++++ src/screens/customer/CustomerFormScreen.tsx | 70 +++++++++++++++++++-- src/screens/customer/CustomerListScreen.tsx | 52 +++++++++++++-- src/screens/customer/CustomerStack.tsx | 12 ++-- src/screens/exit/ExitScreen.tsx | 2 +- src/screens/login/LoginScreen.tsx | 2 +- 13 files changed, 245 insertions(+), 53 deletions(-) create mode 100644 src/components/CardItem.tsx create mode 100644 src/hooks/saveWithAuth.ts create mode 100644 src/screens/company/CompanyFormScreen.tsx create mode 100644 src/screens/company/CompanyListScreen.tsx create mode 100644 src/screens/company/CompanyStack.tsx diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 20c41b9..2baecc0 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -4,12 +4,12 @@ import LinearGradient from 'react-native-linear-gradient'; interface Props { title:string, - onClick?(): void, + onPress?(): void, style?: "primary" | "secundary" | "info", additionalStyle?: string } -export const Button:FC = ({title,onClick, style="primary",additionalStyle}) => { +export const Button:FC = ({title,onPress, style="primary",additionalStyle}) => { let className = "rounded-full mx-8 p-4 shadow-xl shadow-slate-800 uppercase"; switch (style) { @@ -27,7 +27,7 @@ export const Button:FC = ({title,onClick, style="primary",additionalStyl <> {title} diff --git a/src/components/CardItem.tsx b/src/components/CardItem.tsx new file mode 100644 index 0000000..666ac98 --- /dev/null +++ b/src/components/CardItem.tsx @@ -0,0 +1,20 @@ +import React, { FC } from 'react'; +import { View } from 'react-native' + +type CardType = { + children: JSX.Element | JSX.Element[], + addClassName?: string +} + +export const CardItem:FC = ({ children , addClassName}) => { + + let className = 'w-5/6 p-4 m-4 bg-white rounded-xl border border-slate-300'; + className = className + " " + addClassName; + return ( + <> + + {children} + + + ) +} \ No newline at end of file diff --git a/src/components/cardList/CardList.tsx b/src/components/cardList/CardList.tsx index ff289e9..a53b073 100644 --- a/src/components/cardList/CardList.tsx +++ b/src/components/cardList/CardList.tsx @@ -1,53 +1,38 @@ import React, { FC, useEffect, useState } from 'react' -import { Card } from '../Card' -import { FlatList, Text, TouchableOpacity } from 'react-native' -import { useFetchWithAuth } from '../../hooks/useFetchWithAuth' +import { FlatList, RefreshControl, Text, TouchableOpacity } from 'react-native' + import { useNavigation } from '@react-navigation/native'; +import { CardItem } from '../CardItem'; +import { NativeStackNavigationProp } from '@react-navigation/native-stack'; interface Props { - endpoint: string + entities: [], + screenName: string } -export const CardList:FC = ({endpoint}) => { - - const navitation = useNavigation(); - - let defaultData:[] = []; - - const [entities, setEntities] = useState(defaultData); +export const CardList:FC = ({entities, screenName}) => { + const navitation = useNavigation>(); - const getInitData = async () => { - const { data, error } = await useFetchWithAuth(endpoint); - - if (!error) { - setEntities(data); - } else { - console.log(error) - } - } - - useEffect(() => { - getInitData(); - }, [endpoint]) - - return ( <> - + navitation.navigate("CustomerFormScreen" as never)} + onPress={()=> + navitation + .navigate(screenName , {id:item['id']} )} > {item["nombre"]} - + } keyExtractor={item => item["id"]} /> diff --git a/src/hooks/saveWithAuth.ts b/src/hooks/saveWithAuth.ts new file mode 100644 index 0000000..379c3a1 --- /dev/null +++ b/src/hooks/saveWithAuth.ts @@ -0,0 +1,42 @@ +import AsyncStorage from "@react-native-async-storage/async-storage"; + + +const fecher = async (url: string, id:string, token: string, data:any) => { + return await fetch(url, { + method: id==="0" ? 'POST': 'PATCH', + mode: 'cors', + headers: { + 'Authorization' :token, + 'Content-Type': 'application/json', + 'Accept':'application/json' + }, + body: data, + }); + } + + export const saveWithAuth = async (url: string, id:string, body:any) => { + url= "http://192.168.1.21:8082"+"/api/"+url+"/"; + if ( Number(id)>0){ + url = url + id +"/" + } + const token = await AsyncStorage.getItem('token') || ""; + let data; + let error; + try{ + data = JSON.stringify(body); + console.log(url) + const response = await fecher(url, id, token, data) + if (response.ok){ + data = await response.json(); + }else { + error = "Servidor: "+ ((await response.json()).trace).substring(1,300); + } + }catch (e){ + error = "Cliente: "+e; + } + return { + data, + error + } + + } \ No newline at end of file diff --git a/src/navigator/TabScreen.tsx b/src/navigator/TabScreen.tsx index 3004c50..b38d2d1 100644 --- a/src/navigator/TabScreen.tsx +++ b/src/navigator/TabScreen.tsx @@ -11,6 +11,7 @@ import { ProductScreen } from '../screens/product/ProductScreen'; import { ExitScreen } from '../screens/exit/ExitScreen'; import { CustomerListScreen } from '../screens/customer/CustomerListScreen'; import { CustomerStack } from '../screens/customer/CustomerStack'; +import CompanyStack from '../screens/company/CompanyStack'; interface Props { @@ -48,8 +49,8 @@ export const TabScreen:FC = () => { }} /> ( diff --git a/src/screens/company/CompanyFormScreen.tsx b/src/screens/company/CompanyFormScreen.tsx new file mode 100644 index 0000000..724f21f --- /dev/null +++ b/src/screens/company/CompanyFormScreen.tsx @@ -0,0 +1,8 @@ +const CompanyFormScreen = () => { + return( + <> + + ) +} + +export default CompanyFormScreen; \ No newline at end of file diff --git a/src/screens/company/CompanyListScreen.tsx b/src/screens/company/CompanyListScreen.tsx new file mode 100644 index 0000000..a680cef --- /dev/null +++ b/src/screens/company/CompanyListScreen.tsx @@ -0,0 +1,12 @@ +import { Text } from "react-native"; + +const CompanyListScreen = () => { + + return ( + <> + Compañia lista + + ) +} + +export default CompanyListScreen; \ No newline at end of file diff --git a/src/screens/company/CompanyStack.tsx b/src/screens/company/CompanyStack.tsx new file mode 100644 index 0000000..46d39a4 --- /dev/null +++ b/src/screens/company/CompanyStack.tsx @@ -0,0 +1,24 @@ +import { createNativeStackNavigator } from "@react-navigation/native-stack"; +import CompanyListScreen from "./CompanyListScreen"; +import CompanyFormScreen from "./CompanyFormScreen"; + +const Stack = createNativeStackNavigator(); + +const CompanyStack = () => { + + return( + + + + + ) + +} + +export default CompanyStack; \ No newline at end of file diff --git a/src/screens/customer/CustomerFormScreen.tsx b/src/screens/customer/CustomerFormScreen.tsx index 5b61afa..f0d4930 100644 --- a/src/screens/customer/CustomerFormScreen.tsx +++ b/src/screens/customer/CustomerFormScreen.tsx @@ -1,4 +1,4 @@ -import { FC } from 'react' +import { FC, useEffect } from 'react' import { Text } from 'react-native' import { NavBar } from '../../components/navbar/NavBar' import { Background } from '../../components/Background' @@ -7,12 +7,70 @@ import { Button } from '../../components/Button'; import { Card } from '../../components/Card'; import { Input } from '../../components/Input'; import { useForm } from 'react-hook-form'; -interface Props { +import { NativeStackScreenProps } from '@react-navigation/native-stack'; +import { RootStackParams } from './CustomerStack'; +import { useFetchWithAuth } from '../../hooks/useFetchWithAuth'; +import { saveWithAuth } from '../../hooks/saveWithAuth'; + +interface Props extends NativeStackScreenProps{}; + +export const CustomerFormScreen = ({route , navigation }: Props) => { + + + + const { control, handleSubmit, getValues, setValue, formState: { errors } } = useForm({ + defaultValues: { + id: 0, + nombre: '', + telefono: '', + } + }); + let id:string = "0"; + if (route.params?.id!= undefined) { + id = String(route.params.id); + } + + const getInitData = async () => { + if (!id || id=="0") + return; + const { data, error } = await useFetchWithAuth("cliente/" + id); + + if (!error) { + + if (data.id!=0){ + setValue("id", data['id']) + setValue("nombre", data['nombre']) + setValue("telefono", data['telefono']) + } + + } else { + console.log(error) + } } -export const CustomerFormScreen:FC = () => { - const { control, handleSubmit, getValues, formState: { errors } } = useForm(); - const navigation = useNavigation(); + + useEffect(() => { + getInitData(); + }, []) + + const onSubmit = async (entity: any) => { + try { + let endpoint = "cliente"; + //entity['compania'] = {id: entity['compania']} + console.log(entity) + const { data, error } = await saveWithAuth(endpoint, id, entity); + if (error) { + console.log(error); + } else { + navigation.navigate("CustomerListScreen") + } + } catch (e) { + console.log("Post error:"); + console.table(e); + } + } + + console.debug(id) return ( <> @@ -22,7 +80,7 @@ export const CustomerFormScreen:FC = () => {