thêm giao diện quản lý thuyền

components/ShipSearchForm.tsx

@@ -1,6 +1,6 @@
 import { Colors } from "@/config";
-import { queryShipGroups } from "@/controller/DeviceController";
 import { ColorScheme, useTheme } from "@/hooks/use-theme-context";
+import { useShipGroups } from "@/state/use-ship-groups";
 import { useShipTypes } from "@/state/use-ship-types";
 import { useEffect, useMemo, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -44,8 +44,8 @@ const ShipSearchForm = (props: ShipSearchFormProps) => {
     [colors, colorScheme]
   );
   const { shipTypes, getShipTypes } = useShipTypes();
-  const [groupShips, setGroupShips] = useState<Model.ShipGroup[]>([]);
   const [slideAnim] = useState(new Animated.Value(0));
+  const { shipGroups, getShipGroups } = useShipGroups();
 
   const { control, handleSubmit, reset, watch } = useForm<SearchShipResponse>({
     defaultValues: {
@@ -70,8 +70,10 @@ const ShipSearchForm = (props: ShipSearchFormProps) => {
   }, [shipTypes]);
 
   useEffect(() => {
-    getShipGroups();
-  }, []);
+    if (shipGroups === null) {
+      getShipGroups();
+    }
+  }, [props.isOpen]);
 
   useEffect(() => {
     if (props.isOpen) {
@@ -107,17 +109,6 @@ const ShipSearchForm = (props: ShipSearchFormProps) => {
     }
   }, [props.initialValues]);
 
-  const getShipGroups = async () => {
-    try {
-      const response = await queryShipGroups();
-      if (response && response.data) {
-        setGroupShips(response.data);
-      }
-    } catch (error) {
-      console.error("Error fetching ship groups:", error);
-    }
-  };
-
   const alarmListLabel = [
     {
       label: "Tiếp cận vùng hạn chế",
@@ -366,10 +357,12 @@ const ShipSearchForm = (props: ShipSearchFormProps) => {
                     name="ship_group_id"
                     render={({ field: { onChange, value } }) => (
                       <Select
-                        options={groupShips.map((group) => ({
-                          label: group.name || "",
-                          value: group.id || "",
-                        }))}
+                        options={
+                          shipGroups?.map((group) => ({
+                            label: group.name || "",
+                            value: group.id || "",
+                          })) || []
+                        }
                         placeholder="Chọn đội tàu"
                         mode="multiple"
                         value={value}