CEC-5135: remove prop from useEffect deps (#459)

* resolve localStorage race condition

* fix

* fix

* CEC-5135: remove prop from deps

* update test

src/components/Cars/List/index.jsx

@@ -18,10 +18,10 @@ import useStyles from "../../useStyles";
 
 const MainForm = () => {
   const classes = useStyles();
-  const [online, setOnline] = useState(false);
+  const [online, setOnline] = useState(null);
-  const [onlineHMI, setOnlineHMI] = useState(false);
+  const [onlineHMI, setOnlineHMI] = useState(null);
   const [selectedVins, setSelectedVins] = useState([]);
-  const { vins, search, query, setQuery, loading } = useQuery();
+  const { payload, query, setQuery, loading } = useQuery();
   const { setTitle, setSitePath } = useStatusContext();
   const {
     token: {
@@ -36,7 +36,7 @@ const MainForm = () => {
   };
 
   const handleOnline = (event) => {
-    setOnline(event.target.checked);
+    setOnline(event.target.checked || null);
   };
 
   const handleSelectAll = (cars) => {
@@ -53,7 +53,7 @@ const MainForm = () => {
   };
 
   const handleOnlineHMI = (event) => {
-    setOnlineHMI(event.target.checked);
+    setOnlineHMI(event.target.checked || null);
   };
 
   useEffect(() => {
@@ -105,10 +105,9 @@ const MainForm = () => {
         token={token}
         multiSelect
         search={{
-          search,
+          ...payload,
-          vins,
+          online,
-          online: online ? true : null,
+          online_hmi: onlineHMI,
-          online_hmi: onlineHMI ? true : null,
         }}
         selected={selectedVins}
         onSelect={handleSelect}

src/components/Cars/List/useQuery.js

@@ -35,42 +35,40 @@ function parseQueryPart(part) {
 export default function useQuery() {
   const [query, setQuery] = useLocalStorage("VEHICLE_SEARCH", "");
   const [parts, setParts] = useState([]);
-  const [search, setSearch] = useState(null);
+  const [payload, setPayload] = useState({});
-  const [vins, setVins] = useState("");
   const [loading, setLoading] = useState(true);
 
-  function reset() {
-    setSearch("");
-    setVins([]);
-  }
-
   useEffect(() => {
-    reset();
+    setLoading(true);
+    let vins = [];
+    let search = "";
     const parts = query.replaceAll(" ", ",").split(",").map(parseQueryPart);
     setParts(parts);
 
     parts.forEach(([type, value]) => {
       if (type === "vin") {
-        setVins(vins => {
+        vins.push(value);
-          if (vins.length) {
-            return `${vins},${value}`;
-          }
-          return value;
-        });
       }
 
       if (type === "search") {
-        setSearch(search => `${search} ${value}`.trim());
+        search = `${search} ${value}`.trim();
       }
     });
 
+
+    setPayload({
+      search,
+      vins: vins.join(","),
+    })
+  }, [query, setPayload]);
+
+  useEffect(() => {
     setLoading(false);
-  }, [query]);
+  }, [payload, setLoading])
 
   return {
     parts,
-    search,
+    payload,
-    vins,
     query,
     setQuery,
     loading,

src/components/Cars/List/useQuery.test.jsx

@@ -3,8 +3,7 @@ import useQuery from "./useQuery";
 
 const MyComponent = () => {
   const {
-    search,
+    payload,
-    vins,
     query,
     setQuery,
   } = useQuery();
@@ -17,8 +16,8 @@ const MyComponent = () => {
         onChange={(e) => setQuery(e.target.value)}
       />
       <ol>
-        <li data-testid="search">{search}</li>
+        <li data-testid="search">{payload.search}</li>
-        <li data-testid="vins">{vins}</li>
+        <li data-testid="vins">{payload.vins}</li>
         <li data-testid="query">{query}</li>
       </ol>
     </>

src/components/Controls/CarSelectionTable/index.jsx

@@ -67,7 +67,6 @@ const CarSelectionTable = (props) => {
   const [order, setOrder] = useState("asc");
   const { getVehicles, vehicles, totalVehicles } = useVehicleContext();
   const { setMessage } = useStatusContext();
-  const { search: searchTerm } = search;
 
   const handleSort = (_event, property) => {
     if (property === orderBy) {
@@ -111,21 +110,22 @@ const CarSelectionTable = (props) => {
   };
 
   useEffect(() => {
-    const options = {
+    const queryParams = {
+      ...search,
       limit: pageSize,
       offset: pageSize * pageIndex,
       order: `${orderBy} ${order}`,
     };
     (async () => {
       try {
-        await getVehicles(Object.assign(options, search), token);
+        await getVehicles(queryParams, token);
       } catch (e) {
         setMessage(e.message);
         logger.warn(e.stack);
       }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pageIndex, pageSize, orderBy, order, search, token]);
+  }, [pageIndex, pageSize, orderBy, order, token]);
 
   useEffect(() => {
     setPageIndex(0);
@@ -172,7 +172,7 @@ const CarSelectionTable = (props) => {
                       <br />
                       <ECUList
                         list={row.ecu_list}
-                        search={searchTerm}
+                        search={search.search}
                         searchedOnly={true}
                       />
                     </>