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 [onlineHMI, setOnlineHMI] = useState(false);
+  const [online, setOnline] = useState(null);
+  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,
-          vins,
-          online: online ? true : null,
-          online_hmi: onlineHMI ? true : null,
+          ...payload,
+          online,
+          online_hmi: onlineHMI,
         }}
         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 [vins, setVins] = useState("");
+  const [payload, setPayload] = 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 => {
-          if (vins.length) {
-            return `${vins},${value}`;
-          }
-          return value;
-        });
+        vins.push(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,
-    vins,
+    payload,
     query,
     setQuery,
     loading,

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

@@ -3,8 +3,7 @@ import useQuery from "./useQuery";
 
 const MyComponent = () => {
   const {
-    search,
-    vins,
+    payload,
     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="vins">{vins}</li>
+        <li data-testid="search">{payload.search}</li>
+        <li data-testid="vins">{payload.vins}</li>
         <li data-testid="query">{query}</li>
       </ol>
     </>