Agrupando componentes de ClientSearch

Endurance-Soft · Jun 1, 2024 · dd8ee34 · dd8ee34
1 parent 19560f7
commit dd8ee34
Show file tree

Hide file tree

Showing 9 changed files with 97 additions and 79 deletions.
diff --git a/App.js b/App.js
@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Button, View } from 'react-native';
 import { MenuProvider } from 'react-native-popup-menu';
 import AppNavigator from './src/navigation/AppNavigator';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 const App = () => {
-
   return (
     <MenuProvider>
       <AppNavigator />

diff --git a/config.js b/config.js
@@ -0,0 +1,2 @@
+// config.js
+export const BASE_URL = "http://192.168.1.2:3000"; // Will
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "@expo-google-fonts/alex-brush": "^0.2.3",
     "@expo-google-fonts/montserrat": "^0.2.3",
     "@firebase/firestore": "^4.6.0",
+    "@react-native-async-storage/async-storage": "^1.23.1",
     "@react-native-community/datetimepicker": "8.0.1",
     "@react-native-firebase/analytics": "^19.0.0",
     "@react-native-firebase/app": "^19.0.0",

diff --git a/src/navigation/AppNavigator.js b/src/navigation/AppNavigator.js
@@ -3,7 +3,7 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { NavigationContainer } from '@react-navigation/native';
 import NewScreen from '../screens/HomeScreen';
-import ClientSearchScreen from '../screens/ClientSearchScreen';
+import ClientSearchScreen from '../screens/ClientSearch/ClientSearchScreen';
 import BillScreen from '../screens/BillScreen'
 import ClientPaymentScreen from '../screens/ClientPaymentScreen';
 import PayScreen from '../screens/PayScreen';

diff --git a/src/screens/ClientPaymentScreen.js b/src/screens/ClientPaymentScreen.js
@@ -9,7 +9,6 @@ import NoteItem from "../components/NoteItem";
 import DropdownSelector from "../components/DropdownSelector";
 import Cascading from "../animation/CascadingFadeInView";
 import { useFocusEffect } from "@react-navigation/native";
-import ClientItem from "../components/ClientItem";
 import StyledText from "../utils/StyledText";
 const windowWidth = Dimensions.get('window').width;
 import useStore from '../stores/store';

diff --git a/src/components/ClientItem.js → src/screens/ClientSearch/ClientItem.js b/src/components/ClientItem.js → src/screens/ClientSearch/ClientItem.js
@@ -2,58 +2,61 @@ import React, { useEffect, useState } from "react";
 import { View, Text, TouchableOpacity, StyleSheet, Dimensions } from "react-native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { FontAwesome5 } from "@expo/vector-icons";
-import { theme } from '../assets/Theme';
-import StyledText from "../utils/StyledText";
-import BorderBox from "../utils/BorderBox";
-import useStore from "../stores/store";
+import { theme } from '../../assets/Theme';
+import StyledText from "../../utils/StyledText";
+import BorderBox from "../../utils/BorderBox";
+import useStore from "../../stores/store";
 
 const windowWidth = Dimensions.get('window').width;
 
 const ClientItem = ({ client, onSelect }) => {
   const vNombre = client.Nombre;
-  const vCuenta =client.Cuenta;
-  const vBalance = parseFloat(client.NotasPendientes.reduce((total, nota) => total + nota.Saldo_pendiente, 0).toFixed(2));
-  const vNotasPendientes = client.NotasPendientes.length;
+  const vCuenta = client.Cuenta;
+
+  // Asegurarse de que NotasPendientes esté definido y sea un array
+  const notasPendientes = Array.isArray(client.NotasPendientes) ? client.NotasPendientes : [];
+  const vBalance = parseFloat(notasPendientes.reduce((total, nota) => {
+    const saldoPendiente = parseFloat(nota.Saldo_pendiente);
+    return total + (isNaN(saldoPendiente) ? 0 : saldoPendiente);
+  }, 0).toFixed(2));
+
+  const vNotasPendientes = notasPendientes.length;
   const pagosRealizados = useStore(state => state.pagosRealizados);
   const [vUltimoPago, setUltimoPago] = useState("2020-06-10");
 
-  useEffect( () => {
-    if(pagosRealizados.length > 0){
-      setUltimoPago(pagosRealizados.reduce((mayor, pago)=> pago.fecha > mayor && pago.cuenta === client.Cuenta? pago.fecha : mayor, "2020-06-10"));
+  useEffect(() => {
+    if (pagosRealizados.length > 0) {
+      setUltimoPago(pagosRealizados.reduce((mayor, pago) => pago.fecha > mayor && pago.cuenta === client.Cuenta ? pago.fecha : mayor, "2020-06-10"));
     }
   }, [pagosRealizados]);
+
   return (
-      <BorderBox onPress={() => onSelect(client.id)} style={{marginVertical: 10}}>
+    <BorderBox onPress={() => onSelect(client.cliente_ID)} style={{ marginVertical: 10 }}>
       <View style={styles.iconContainer}>
         <View style={styles.iconWraped}>
-          {/* <Text style={styles.icon}>{vNombre.charAt(0)}</Text> */}
           <StyledText initial>{vNombre.charAt(0)}</StyledText>
         </View>
         <View style={styles.detailsContainer}>
           <StyledText boldTextUpper>{vNombre}</StyledText>
           <StyledText regularText>{vCuenta}</StyledText>
-          {/* <View style={styles.codeContainer}>
-            <MaterialCommunityIcons name="account" size={19} color="black" />
-            <StyledText regularText style={{marginLeft:5,}}>{vCuenta}</StyledText>
-          </View> */}
         </View>
       </View>
       <View style={styles.lineContainer}>
         <View style={styles.line}></View>
       </View>
       <View style={styles.notesContainer}>
         <View style={styles.textLine}>
-          <StyledText regularText>notas Pendientes :</StyledText>
+          <StyledText regularText>Notas Pendientes:</StyledText>
           <StyledText regularText>
             {vNotasPendientes} {vNotasPendientes === 1 ? 'nota' : 'notas'}
           </StyledText>
         </View>
         <View style={styles.textLine}>
-          <StyledText regularText>saldo total :</StyledText>
+          <StyledText regularText>Saldo Total:</StyledText>
           <StyledText regularText>{vBalance} Bs</StyledText>
         </View>
         <View style={styles.textLine}>
-          <StyledText regularText>ultimo pago :</StyledText>
+          <StyledText regularText>Último Pago:</StyledText>
           <StyledText regularText>{vUltimoPago}</StyledText>
         </View>
       </View>
@@ -84,16 +87,15 @@ const styles = StyleSheet.create({
   },
   notesContainer: {
     flexDirection: 'column',
-    // alignItems: 'flex-start',
   },
   lineContainer: {
     justifyContent: 'center',
     alignItems: 'center',
   },
   line: {
-    marginVertical: 3 ,
+    marginVertical: 3,
     backgroundColor: theme.colors.otherWhite,
-    width: windowWidth*0.8,
+    width: windowWidth * 0.8,
     height: 2,
   },
   textLine: {
@@ -102,4 +104,5 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
 });
+
 export default ClientItem;
diff --git a/src/screens/ClientSearchScreen.js → ...creens/ClientSearch/ClientSearchScreen.js b/src/screens/ClientSearchScreen.js → ...creens/ClientSearch/ClientSearchScreen.js
@@ -1,23 +1,16 @@
-// ClientSearchScreen.js
-import React, { useState, useCallback, useEffect } from "react";
-import {
-  SafeAreaView,
-  TouchableOpacity,
-  Text,
-  FlatList,
-  StyleSheet,
-  View,
-} from "react-native";
-import SearchBar from "../components/SearchBar";
-import ClientItem from "../components/ClientItem";
+import React, { useState, useCallback, useEffect, useMemo } from "react";
+import { SafeAreaView, TouchableOpacity, FlatList, StyleSheet, View, } from "react-native";
+import SearchBar from "./SearchBar";
+import ClientItem from "./ClientItem";
 import { StatusBar } from "expo-status-bar";
-import { theme } from "../assets/Theme";
+import { theme } from "../../assets/Theme";
 import Icon from "react-native-vector-icons/AntDesign";
 import { useNavigation } from "@react-navigation/native";
-import Cascading from "../animation/CascadingFadeInView";
+import Cascading from "../../animation/CascadingFadeInView";
 import { useFocusEffect } from "@react-navigation/native";
-import StyledText from "../utils/StyledText";
+import StyledText from "../../utils/StyledText";
 import axios from "axios";
+import { BASE_URL } from "../../../config";
 
 const secondary = theme.colors.secondary;
 
@@ -30,24 +23,25 @@ const ClientSearchScreen = () => {
   const [animationKey, setAnimationKey] = useState(Date.now());
   const [visibleItemCount, setVisibleItemCount] = useState(10);
 
-  const fetchClientes = async () => {
+  const fetchClientes = useCallback(async () => {
     try {
-      const response = await axios.get("http://192.168.1.2:3000/empresa/1/clientes");
+      const empresaId = 1; // Hardcoded empresa ID
+      const response = await axios.get(`${BASE_URL}/empresa/${empresaId}/clientes`);
       setClientesConNotas(response.data);
-      console.log(response.data);
-      // setFilteredData(response.data);
+      setFilteredData(response.data);
+      console.log(JSON.stringify(response.data, null, 2));
     } catch (error) {
       console.error("Error fetching clientes: ", error);
     }
-  };
+  }, []);
 
   useEffect(() => {
     fetchClientes();
-  }, []);
+  }, [fetchClientes]);
 
-  const loadMoreItems = () => {
+  const loadMoreItems = useCallback(() => {
     setVisibleItemCount((prevItemCount) => prevItemCount + 10);
-  };
+  }, []);
 
   useFocusEffect(
     useCallback(() => {
@@ -56,7 +50,7 @@ const ClientSearchScreen = () => {
     }, [])
   );
 
-  const handleSearch = (text) => {
+  const handleSearch = useCallback((text) => {
     setSearchQuery(text);
     const formattedQuery = text.toLowerCase();
     const newData = clientesConNotas.filter((item) => {
@@ -67,13 +61,13 @@ const ClientSearchScreen = () => {
       }
     });
     setFilteredData(newData);
-  };
+  }, [clientesConNotas, selectedOption]);
 
-  const handleOptionChange = (option) => {
+  const handleOptionChange = useCallback((option) => {
     setSelectedOption(option);
-  };
+  }, []);
 
-  const renderItem = ({ item, index }) => (
+  const renderItem = useCallback(({ item, index }) => (
     <Cascading
       delay={index > 9 ? 0 : 400 + 100 * index}
       animationKey={animationKey}
@@ -85,7 +79,15 @@ const ClientSearchScreen = () => {
         }
       />
     </Cascading>
-  );
+  ), [animationKey, navigation]);
+
+  const keyExtractor = useCallback((item) => item.cliente_ID.toString(), []);
+
+  const getItemLayout = useCallback((data, index) => ({
+    length: 70,
+    offset: 70 * index,
+    index,
+  }), []);
 
   return (
     <SafeAreaView style={styles.container}>
@@ -121,7 +123,8 @@ const ClientSearchScreen = () => {
         <FlatList
           data={filteredData.slice(0, visibleItemCount)}
           renderItem={renderItem}
-          keyExtractor={(item) => item.cliente_ID}
+          keyExtractor={keyExtractor}
+          getItemLayout={getItemLayout}
           ListHeaderComponent={<View style={{ height: 10 }} />}
           ListFooterComponent={<View style={{ height: 10 }} />}
           onEndReached={loadMoreItems}
@@ -179,24 +182,3 @@ const styles = StyleSheet.create({
 });
 
 export default ClientSearchScreen;
-
-//   Empresa_ID: 2,
-//   sucursal_ID: 1,
-//   cliente_ID: "00C",
-//   Cuenta: "11201010013",
-//   Nombre: "ARANCIBIA HEBERTO",
-//   Direccion: "CHIQUICOLLO",
-//   Telefono: "4248174 - 75467019",
-//   cobrador_ID: "01"
-//   NotasPendientes[{
-//          "Empresa_ID": 2,
-//          "sucursal_ID": 1,
-//          "Cuenta": "11201010011",
-//          "Fecha": "2024-01-01",
-//          "nro_nota": "R01225066",
-//              "importe_nota": 696.0,
-//              "Monto_pagado": 0.0,
-//          "Saldo_pendiente": 696.0,
-//             "Fecha_venta": "2022-10-26",
-//             "Fecha_vence": "2022-12-25"
-//          }]
diff --git a/src/components/SearchBar.js → src/screens/ClientSearch/SearchBar.js b/src/components/SearchBar.js → src/screens/ClientSearch/SearchBar.js
@@ -4,8 +4,8 @@ import { View, TextInput, Text, TouchableOpacity, StyleSheet, Dimensions } from
 import { Ionicons } from "@expo/vector-icons";
 import { FontAwesome5 } from "@expo/vector-icons";
 import { Menu, MenuOptions, MenuOption, MenuTrigger } from "react-native-popup-menu";
-import { theme } from "../assets/Theme";
-import StyledText from "../utils/StyledText";
+import { theme } from "../../assets/Theme";
+import StyledText from "../../utils/StyledText";
 const windowWidth = Dimensions.get("window").width;
 const { height } = Dimensions.get('window');
 const regularTextSize = height * 0.021
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// config.js
		export const BASE_URL = "http://192.168.1.2:3000"; // Will