CEC-2378 Add fix for fleet vehicles' search

src/components/Fleets/Status/Vehicles/Table/index.jsx

@@ -42,11 +42,16 @@ const MainForm = ({ name }) => {
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
+  const [search, setSearch] = useState("");
   const classes = useStyles();
   const { setMessage } = useStatusContext();
   const { fleetVehicles, totalFleetVehicles, getFleetVehicles, deleteFleetVehicle } = useFleetContext();
   const { token: { idToken: { jwtToken: token } }, groups } = useUserContext();
 
+  const handleSearch = (query) => {
+    setSearch(query);
+  };
+
   useEffect(() => {
     (async () => {
       try {
@@ -54,6 +59,7 @@ const MainForm = ({ name }) => {
         await getFleetVehicles(
           name,
           {
+            search,
             limit: pageSize,
             offset: pageSize * pageIndex,
             order: `${orderBy} ${order}`,
@@ -66,7 +72,7 @@ const MainForm = ({ name }) => {
       }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [token, pageIndex, pageSize, orderBy, order]);
+  }, [token, pageIndex, pageSize, orderBy, order, search]);
 
   const handleChangePageIndex = (event, newIndex) => {
     setPageIndex(newIndex);
@@ -145,7 +151,7 @@ const MainForm = ({ name }) => {
           </Link>
         </Grid>
         <Grid item md={8} align="right" className={classes.textCenterAlign}>
-          <SearchField classes={classes} />
+          <SearchField classes={classes} onSearch={handleSearch}/>
         </Grid>
       </Grid>
       <Table>