CEC-244 Add search (#43)

* Add search to car send command page
Add snapshot check

src/components/Cars/List/index.jsx

@@ -51,7 +51,7 @@ const tableColumns = [
 
 const MainForm = () => {
   const classes = useStyles();
-  const [pageSize, setPageSize] = useState(25);
+  const [pageSize, setPageSize] = useState(10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("vin");
   const [order, setOrder] = useState("asc");

src/components/Cars/SendCommandBulk/index.jsx

@@ -9,6 +9,7 @@ import {
   TableFooter,
   TablePagination,
   TableRow,
+  Toolbar,
 } from "@material-ui/core";
 
 import {
@@ -21,6 +22,7 @@ import useStyles from "../../useStyles";
 import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
 import SendCommand from "../SendCommand";
+import SearchField from "../../Controls/SearchField";
 
 const tableColumns = [
   {
@@ -51,11 +53,12 @@ const tableColumns = [
 
 const MainForm = () => {
   const classes = useStyles();
-  const [pageSize, setPageSize] = useState(25);
+  const [pageSize, setPageSize] = useState(10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("vin");
   const [order, setOrder] = useState("asc");
   const [selected, setSelected] = useState([]);
+  const [search, setSearch] = useState("");
   const { getVehicles, vehicles, totalVehicles } = useVehicleContext();
   const { setMessage, setTitle } = useStatusContext();
   const {
@@ -89,6 +92,7 @@ const MainForm = () => {
           limit: pageSize,
           offset: pageSize * pageIndex,
           order: `${orderBy} ${order}`,
+          search,
         },
         token
       );
@@ -96,7 +100,7 @@ const MainForm = () => {
       setMessage(e.message);
     }
     // eslint-disable-next-line
-  }, [pageIndex, pageSize, token, orderBy, order]);
+  }, [pageIndex, pageSize, token, orderBy, order, search]);
 
   const handleChangePageIndex = (event, newIndex) => {
     setPageIndex(newIndex);
@@ -128,8 +132,16 @@ const MainForm = () => {
     setSelected(newSelected);
   };
 
+  const handleSearch = (search) => {
+    setSelected([]);
+    setSearch(search);
+  };
+
   return (
     <div className={classes.paper} style={{ height: 700, width: "100%" }}>
+      <Toolbar className={classes.tableToolbar}>
+        <SearchField classes={classes} onSearch={handleSearch} />
+      </Toolbar>
       <TableContainer>
         <Table>
           <TableHeaderSortable