cập nhật modal add/edit fishingLog và sửa lỗi event ở map

components/tripInfo/NetListTable.tsx

@@ -3,7 +3,7 @@ import { useFishes } from "@/state/use-fish";
 import { useTrip } from "@/state/use-trip";
 import React, { useEffect, useRef, useState } from "react";
 import { Animated, Text, TouchableOpacity, View } from "react-native";
-import NetDetailModal from "./modal/NetDetailModal/NetDetailModal";
+import CreateOrUpdateHaulModal from "./modal/CreateOrUpdateHaulModal";
 import styles from "./style/NetListTable.styles";
 
 const NetListTable: React.FC = () => {
@@ -17,8 +17,11 @@ const NetListTable: React.FC = () => {
   useEffect(() => {
     getFishSpecies();
   }, []);
-  const data: Model.FishingLog[] = trip?.fishing_logs ?? [];
-  const tongSoMe = data.length;
+
+  // useEffect(() => {
+  //   console.log("Trip thay đổi: ", trip?.fishing_logs?.length);
+  // }, [trip]);
+  // const data: Model.FishingLog[] = trip?.fishing_logs ?? [];
 
   const handleToggle = () => {
     const toValue = collapsed ? contentHeight : 0;
@@ -31,7 +34,7 @@ const NetListTable: React.FC = () => {
   };
 
   const handleStatusPress = (id: string) => {
-    const net = data.find((item) => item.fishing_log_id === id);
+    const net = trip?.fishing_logs?.find((item) => item.fishing_log_id === id);
     if (net) {
       setSelectedNet(net);
       setModalVisible(true);
@@ -47,7 +50,11 @@ const NetListTable: React.FC = () => {
         style={styles.headerRow}
       >
         <Text style={styles.title}>Danh sách mẻ lưới</Text>
-        {collapsed && <Text style={styles.totalCollapsed}>{tongSoMe}</Text>}
+        {collapsed && (
+          <Text style={styles.totalCollapsed}>
+            {trip?.fishing_logs?.length}
+          </Text>
+        )}
         <IconSymbol
           name={collapsed ? "chevron.down" : "chevron.up"}
           size={16}
@@ -60,8 +67,18 @@ const NetListTable: React.FC = () => {
         style={{ position: "absolute", opacity: 0, zIndex: -1000 }}
         onLayout={(event) => {
           const height = event.nativeEvent.layout.height;
-          if (height > 0 && contentHeight === 0) {
+          // Update measured content height whenever it actually changes.
+          if (height > 0 && height !== contentHeight) {
             setContentHeight(height);
+            // If the panel is currently expanded, animate to the new height so
+            // newly added/removed rows become visible immediately.
+            if (!collapsed) {
+              Animated.timing(animatedHeight, {
+                toValue: height,
+                duration: 200,
+                useNativeDriver: false,
+              }).start();
+            }
           }
         }}
       >
@@ -72,7 +89,7 @@ const NetListTable: React.FC = () => {
         </View>
 
         {/* Body */}
-        {data.map((item, index) => (
+        {trip?.fishing_logs?.map((item, index) => (
           <View key={item.fishing_log_id} style={styles.row}>
             {/* Cột STT */}
             <Text style={styles.sttCell}>Mẻ {index + 1}</Text>
@@ -101,7 +118,7 @@ const NetListTable: React.FC = () => {
         </View>
 
         {/* Body */}
-        {data.map((item, index) => (
+        {trip?.fishing_logs?.map((item, index) => (
           <View key={item.fishing_log_id} style={styles.row}>
             {/* Cột STT */}
             <Text style={styles.sttCell}>Mẻ {index + 1}</Text>
@@ -120,9 +137,23 @@ const NetListTable: React.FC = () => {
           </View>
         ))}
       </Animated.View>
-
+      <CreateOrUpdateHaulModal
+        isVisible={modalVisible}
+        onClose={() => {
+          console.log("OnCLose");
+          setModalVisible(false);
+        }}
+        fishingLog={selectedNet}
+        fishingLogIndex={
+          selectedNet
+            ? trip!.fishing_logs!.findIndex(
+                (item) => item.fishing_log_id === selectedNet.fishing_log_id
+              ) + 1
+            : undefined
+        }
+      />
       {/* Modal chi tiết */}
-      <NetDetailModal
+      {/* <NetDetailModal
         visible={modalVisible}
         onClose={() => {
           console.log("OnCLose");
@@ -136,7 +167,7 @@ const NetListTable: React.FC = () => {
               ) + 1
             : undefined
         }
-      />
+      /> */}
     </View>
   );
 };