tadd select component

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

@@ -45,16 +45,6 @@ export const FishCardForm: React.FC<FishCardFormProps> = ({
   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 (
     <>
@@ -66,15 +56,14 @@ export const FishCardForm: React.FC<FishCardFormProps> = ({
         {isEditing ? (
           <FishSelectDropdown
             options={fishSpecies || []}
-            selectedValue={null}
+            selectedFishId={selectedFishIndex}
             isOpen={selectedFishIndex === index}
             onToggle={() =>
               setSelectedFishIndex(selectedFishIndex === index ? null : index)
             }
             onSelect={(value: Model.FishSpeciesResponse) => {
               onUpdateCatchItem(index, "fish_name", value.name);
-              // setSelectedFishIndex(null);
-
+              setSelectedFishIndex(value.id);
               console.log("Fish Selected: ", fish);
             }}
             zIndex={1000 - index}

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

@@ -5,7 +5,7 @@ import styles from "../../style/NetDetailModal.styles";
 
 interface FishSelectDropdownProps {
   options: Model.FishSpeciesResponse[];
-  selectedValue: Model.FishSpeciesResponse | null;
+  selectedFishId: number | null;
   isOpen: boolean;
   onToggle: () => void;
   onSelect: (value: Model.FishSpeciesResponse) => void;
@@ -15,7 +15,7 @@ interface FishSelectDropdownProps {
 
 export const FishSelectDropdown: React.FC<FishSelectDropdownProps> = ({
   options,
-  selectedValue,
+  selectedFishId,
   isOpen,
   onToggle,
   onSelect,
@@ -23,12 +23,17 @@ export const FishSelectDropdown: React.FC<FishSelectDropdownProps> = ({
   styleOverride,
 }) => {
   const dropdownStyle = styleOverride || styles.optionsList;
-
+  const findFishNameById = (id: number | null) => {
+    const fish = options.find((item) => item.id === id);
+    return fish?.name || "Chọn cá";
+  };
+  const [selectedFish, setSelectedFish] =
+    React.useState<Model.FishSpeciesResponse | null>(null);
   return (
     <View style={{ zIndex }}>
       <TouchableOpacity style={styles.selectButton} onPress={onToggle}>
         <Text style={styles.selectButtonText}>
-          {selectedValue ? selectedValue.name : "Chọn cá"}
+          {findFishNameById(selectedFishId)}
         </Text>
         <IconSymbol
           name={isOpen ? "chevron.up" : "chevron.down"}
@@ -44,7 +49,9 @@ export const FishSelectDropdown: React.FC<FishSelectDropdownProps> = ({
               style={styles.optionItem}
               onPress={() => onSelect(option)}
             >
-              <Text style={styles.optionText}>{option.name}</Text>
+              <Text style={styles.optionText}>
+                {findFishNameById(option.id)}
+              </Text>
             </TouchableOpacity>
           ))}
         </ScrollView>