CEC-3943-display-ecu-vin-timeline (#303)

* first push

* fix test

* Fix test

* resolve comments

* fix undefined

* align items and change search field

* fix dates

* resolve comments

* fix lint

* fix test

---------

Co-authored-by: jwu-fisker <jwu@fiskerinc.com>

src/components/Contexts/DTCTimelineContext.jsx

@@ -0,0 +1,43 @@
+import React, { useContext, useState } from "react";
+import api from "../../services/DTCTimelineAPI";
+
+const DTCTimelineContext = React.createContext();
+
+export const DTCTimelineProvider = ({ children }) => {
+  const [busy, setBusy] = useState(false);
+
+  const [dtcData, setDTCData] = useState([]);
+  const [total, setTotal] = useState(0)
+
+  const getDTCData = async (vin, ecu, startDate, endDate, search,token) => {
+    try {
+      setBusy(true);
+      const result = await api.getDTCData(vin, ecu, startDate, endDate, search,token);
+      if (result.error) {
+        throw new Error(`Get DTC data error. ${result.message}`);
+      }
+      setDTCData(result.data ?? []);
+      if (result.total){
+        setTotal(result.total)
+      }
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <DTCTimelineContext.Provider
+      value={{
+        busy,
+        total,
+        dtcData,
+        getDTCData
+      }}
+    >
+      {children}
+    </DTCTimelineContext.Provider>
+  );
+};
+
+export const useDTCTimelineContext = () => useContext(DTCTimelineContext);