CEC-6008 - Map flashpack numbers to OS numbers, and display in the UI

src/components/Flashpack/Add/index.jsx

@@ -32,9 +32,12 @@ const MainForm = () => {
   const [trims, setTrims] = useLocalStorage("FLASHPACK_ADD_TRIMS", modelsTrimsYears.oceanTrims);
   const [years, setYears] = useLocalStorage("FLASHPACK_ADD_YEARS", modelsTrimsYears.oceanYears);
   const [flashpack, setFlashpack] = useState();
+  const [osVersion, setOSVersion] = useState();
   const [mappingInputs, setMappingInputs] = useState([{ ecuName: "", ecuVersion: "" }]);
   const {
     addFlashpackVersion,
+    getOSVersions,
+    osVersions,
     busy,
   } = useVehicleContext();
 
@@ -56,6 +59,19 @@ const MainForm = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!token) return;
+        await getOSVersions(token);
+      } catch (e) {
+        setMessage(e.message);
+        logger.warn(e.stack);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
   const onCarModelChange = (event) => {
     let newModel = event.target.value
 
@@ -87,6 +103,10 @@ const MainForm = () => {
     setFlashpack(event.target.value);
   }
 
+  const onOSVersionChange = (event) => {
+    setOSVersion(event.target.value);
+  }
+
   const onSubmit = async (event) => {
     try {
       event.preventDefault();
@@ -100,7 +120,7 @@ const MainForm = () => {
           })
       }
 
-      const result = await addFlashpackVersion(carModel, carTrim, parseInt(carYear), flashpack, carFlashpackVersions, token);
+      const result = await addFlashpackVersion(carModel, carTrim, parseInt(carYear), flashpack, osVersion, carFlashpackVersions, token);
       if (!result || result.error) return;
 
       setMessage(`Added ${carYear} ${carModel} ${carTrim} ${flashpack}`);
@@ -157,6 +177,7 @@ const MainForm = () => {
             onChange={onFlashpackChange}
             type="number"
           />
+          <DropDownList fullWidth required label="OS Version" data={osVersions} classes={classes} onChange={onOSVersionChange} value={osVersion} />
           <div className="container">
             {mappingInputs.map((item, index) => (
               <div className="input_container" key={index}>