update netDetail

components/tripInfo/modal/NetDetailModal/components/FishCardForm.tsx

@@ -1,3 +1,4 @@
+import { useFishes } from "@/state/use-fish";
 import React from "react";
 import { Text, TextInput, View } from "react-native";
 import styles from "../../style/NetDetailModal.styles";
@@ -7,8 +8,8 @@ interface FishCardFormProps {
   fish: Model.FishingLogInfo;
   index: number;
   isEditing: boolean;
-  fishNameOptions: string[];
-  unitOptions: string[];
+  fishNameOptions: string[]; // Bỏ gọi API cá
+  unitOptions: string[]; // Bỏ render ở trong này
   // conditionOptions: string[];
   // gearOptions: string[];
   selectedFishIndex: number | null;
@@ -30,7 +31,6 @@ export const FishCardForm: React.FC<FishCardFormProps> = ({
   fish,
   index,
   isEditing,
-  fishNameOptions,
   unitOptions,
   // conditionOptions,
   // gearOptions,
@@ -44,6 +44,18 @@ export const FishCardForm: React.FC<FishCardFormProps> = ({
   // setSelectedGearIndex,
   onUpdateCatchItem,
 }) => {
+  const { fishSpecies } = useFishes();
+  const [fishNameOptions, setFishNameOptions] = React.useState<string[]>([]);
+
+  React.useEffect(() => {
+    console.log("Length: ", fishSpecies?.length);
+
+    if (Array.isArray(fishSpecies)) {
+      const names = fishSpecies.map((item) => item.name).filter(Boolean);
+      setFishNameOptions(names);
+    }
+  }, [fishSpecies]);
+
   return (
     <>
       {/* Tên cá - Select */}
@@ -53,15 +65,17 @@ export const FishCardForm: React.FC<FishCardFormProps> = ({
         <Text style={styles.label}>Tên cá</Text>
         {isEditing ? (
           <FishSelectDropdown
-            options={fishNameOptions}
-            selectedValue={fish.fish_name ?? ""}
+            options={fishSpecies || []}
+            selectedValue={null}
             isOpen={selectedFishIndex === index}
             onToggle={() =>
               setSelectedFishIndex(selectedFishIndex === index ? null : index)
             }
-            onSelect={(value: string) => {
-              onUpdateCatchItem(index, "fish_name", value);
-              setSelectedFishIndex(null);
+            onSelect={(value: Model.FishSpeciesResponse) => {
+              onUpdateCatchItem(index, "fish_name", value.name);
+              // setSelectedFishIndex(null);
+
+              console.log("Fish Selected: ", fish);
             }}
             zIndex={1000 - index}
             styleOverride={styles.fishNameDropdown}
@@ -96,7 +110,7 @@ export const FishCardForm: React.FC<FishCardFormProps> = ({
           ]}
         >
           <Text style={styles.label}>Đơn vị</Text>
-          {isEditing ? (
+          {/* {isEditing ? (
             <FishSelectDropdown
               options={unitOptions}
               selectedValue={fish.catch_unit ?? ""}
@@ -112,7 +126,7 @@ export const FishCardForm: React.FC<FishCardFormProps> = ({
             />
           ) : (
             <Text style={styles.infoValue}>{fish.catch_unit}</Text>
-          )}
+          )} */}
         </View>
       </View>
 

components/tripInfo/modal/NetDetailModal/components/FishSelectDropdown.tsx

@@ -4,11 +4,11 @@ import { ScrollView, Text, TouchableOpacity, View } from "react-native";
 import styles from "../../style/NetDetailModal.styles";
 
 interface FishSelectDropdownProps {
-  options: string[];
-  selectedValue: string;
+  options: Model.FishSpeciesResponse[];
+  selectedValue: Model.FishSpeciesResponse | null;
   isOpen: boolean;
   onToggle: () => void;
-  onSelect: (value: string) => void;
+  onSelect: (value: Model.FishSpeciesResponse) => void;
   zIndex: number;
   styleOverride?: any;
 }
@@ -27,7 +27,9 @@ export const FishSelectDropdown: React.FC<FishSelectDropdownProps> = ({
   return (
     <View style={{ zIndex }}>
       <TouchableOpacity style={styles.selectButton} onPress={onToggle}>
-        <Text style={styles.selectButtonText}>{selectedValue}</Text>
+        <Text style={styles.selectButtonText}>
+          {selectedValue ? selectedValue.name : "Chọn cá"}
+        </Text>
         <IconSymbol
           name={isOpen ? "chevron.up" : "chevron.down"}
           size={16}
@@ -38,11 +40,11 @@ export const FishSelectDropdown: React.FC<FishSelectDropdownProps> = ({
         <ScrollView style={dropdownStyle} nestedScrollEnabled={true}>
           {options.map((option, optIndex) => (
             <TouchableOpacity
-              key={optIndex}
+              key={option.id || optIndex}
               style={styles.optionItem}
               onPress={() => onSelect(option)}
             >
-              <Text style={styles.optionText}>{option}</Text>
+              <Text style={styles.optionText}>{option.name}</Text>
             </TouchableOpacity>
           ))}
         </ScrollView>