fill data API CrewList, FishingTools, TripCost

components/tripInfo/FishingToolsList.tsx

@@ -1,31 +1,23 @@
 import { IconSymbol } from "@/components/ui/icon-symbol";
-import React, { useRef, useState } from "react";
+import { useTrip } from "@/state/use-trip";
+import React, { useEffect, useRef, useState } from "react";
 import { Animated, Text, TouchableOpacity, View } from "react-native";
 import styles from "./style/FishingToolsTable.styles";
 
-// ---------------------------
-// 🧩 Interface
-// ---------------------------
-interface ToolItem {
-  id: string;
-  ten: string;
-  soLuong: number;
-}
-
-// ---------------------------
-// 🎣 Dữ liệu mẫu
-// ---------------------------
-const data: ToolItem[] = [
-  { id: "1", ten: "Lưới kéo", soLuong: 1 },
-  { id: "2", ten: "Cần câu", soLuong: 1 },
-  { id: "3", ten: "Mồi câu", soLuong: 5 },
-];
-
 const FishingToolsTable: React.FC = () => {
   const [collapsed, setCollapsed] = useState(true);
   const [contentHeight, setContentHeight] = useState<number>(0);
   const animatedHeight = useRef(new Animated.Value(0)).current;
-  const tongSoLuong = data.reduce((sum, item) => sum + item.soLuong, 0);
+
+  const { trip } = useTrip();
+  const data: Model.FishingGear[] = trip?.fishing_gears ?? [];
+  const tongSoLuong = data.reduce((sum, item) => sum + Number(item.number), 0);
+
+  // Reset animated height khi dữ liệu thay đổi
+  useEffect(() => {
+    setContentHeight(0); // Reset để tính lại chiều cao
+    setCollapsed(true); // Reset về trạng thái gập lại
+  }, [data]);
 
   const handleToggle = () => {
     const toValue = collapsed ? contentHeight : 0;
@@ -73,10 +65,10 @@ const FishingToolsTable: React.FC = () => {
         </View>
 
         {/* Body */}
-        {data.map((item) => (
-          <View key={item.id} style={styles.row}>
-            <Text style={[styles.cell, styles.left]}>{item.ten}</Text>
-            <Text style={[styles.cell, styles.right]}>{item.soLuong}</Text>
+        {data.map((item, index) => (
+          <View key={index} style={styles.row}>
+            <Text style={[styles.cell, styles.left]}>{item.name}</Text>
+            <Text style={[styles.cell, styles.right]}>{item.number}</Text>
           </View>
         ))}
 
@@ -102,10 +94,10 @@ const FishingToolsTable: React.FC = () => {
         </View>
 
         {/* Body */}
-        {data.map((item) => (
-          <View key={item.id} style={styles.row}>
-            <Text style={[styles.cell, styles.left]}>{item.ten}</Text>
-            <Text style={[styles.cell, styles.right]}>{item.soLuong}</Text>
+        {data.map((item, index) => (
+          <View key={index} style={styles.row}>
+            <Text style={[styles.cell, styles.left]}>{item.name}</Text>
+            <Text style={[styles.cell, styles.right]}>{item.number}</Text>
           </View>
         ))}