refactor(interface): update VLIW Load component

src/interface/components/VLIW/modal/VLIWLoadModalComponent.tsx

@@ -1,18 +1,16 @@
 import * as React from "react";
-import FileReaderInput from "../../Common/FileReaderInput";
-import { Modal, Button, Stack, Form, Alert } from "react-bootstrap";
-import { useTranslation, withTranslation } from "react-i18next";
+import { Alert, Button, Form, Modal, Stack } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { toggleLoadModal } from "../../../actions/modals";
-import { bindActionCreators } from "redux";
-
 import VLIWIntegration from "../../../../integration/vliw-integration";
-import { Code } from "../../../../core/Common/Code";
-import { VLIWCode } from "../../../../core/VLIW/VLIWCode";
+import { Code } from "@/core/Common/Code";
+import { VLIWCode } from "@/core/VLIW/VLIWCode";
 import { useState } from "react";
+import { bindActionCreators } from "redux";
+import FileReaderInput from "../../Common/FileReaderInput";
 
-const DEFAULT_MODAL_CODE = `
-ADDI	R2 R0 #50
+const DEFAULT_MODAL_CODE = `ADDI	R2 R0 #50
 ADDI	R3 R0 #70
 ADDI	R4 R0 #40
 LF	F0 (R4)
@@ -24,10 +22,9 @@ SF	F1 (R3)
 ADDI 	R2 R2 #1
 ADDI	R3 R3 #1
 BNE	R2 R5 LOOP
-`.trim();
+`;
 
-const DEFAULT_MODAL_VLIW_CODE = `
-2	0 0 0 0	2 0 1 0
+const DEFAULT_MODAL_VLIW_CODE = `2	0 0 0 0	2 0 1 0
 3	1 0 0 0	4 0 1 0	3 4 0 0
 1	5 4 0 0
 0
@@ -42,7 +39,7 @@ const DEFAULT_MODAL_VLIW_CODE = `
 0
 1	10 5 0 0 2 1 2
 1	9 0 1 0
-`.trim();
+`;
 
 const mapStateToProps = (state) => {
   return {
@@ -61,56 +58,62 @@ export const VLIWLoadModalComponent = ({
   isLoadModalOpen,
   actions,
 }: VLIWLoadModalComponentProps) => {
-  const [modalError, setModalError] = useState("");
-  const [modalVLIWError, setModalVLIWError] = useState("");
-  const [modalCode, setModalCode] = useState(DEFAULT_MODAL_CODE);
-  const [modalVLIWCode, setModalVLIWCode] = useState(DEFAULT_MODAL_VLIW_CODE);
+  const [modalError, setModalError] = useState({ general: "", vliw: "" });
+  const [modalCode, setModalCode] = useState({
+    general: DEFAULT_MODAL_CODE,
+    vliw: DEFAULT_MODAL_VLIW_CODE,
+  });
   const [t] = useTranslation();
 
   const close = () => {
     actions.toggleLoadModal(false);
   };
 
   const loadCodeFromFile = ([[fileContent]]) => {
-    setModalCode(fileContent.target.result);
+    setModalCode({ ...modalCode, general: fileContent.target.result });
   };
 
   const loadVLIWCodeFromFile = ([[fileContent]]) => {
-    setModalVLIWCode(fileContent.target.result);
+    setModalCode({ ...modalCode, vliw: fileContent.target.result });
   };
 
   const loadCode = () => {
     const code = new Code();
     const vliwCode = new VLIWCode();
 
+    let generalError = modalError.general;
+    let vliwError = modalError.vliw;
+
     try {
-      code.load(modalCode);
-      setModalError("");
+      code.load(modalCode.general);
+      generalError = "";
     } catch (error) {
       // Check if error has the property position. Checking instance of TokenError not working
       const errorMessage = error.pos
         ? `Syntax error at line ${error.pos?.rowBegin}, column ${error.pos?.columnBegin}:
         ${error.errorMessage}`
         : error.message;
 
-      setModalError(errorMessage);
+      setModalError({ vliw: "", general: errorMessage });
+      return;
     }
 
     try {
-      vliwCode.load(modalVLIWCode, code);
+      vliwCode.load(modalCode.vliw, code);
       VLIWIntegration.loadCode(vliwCode);
 
-      setModalVLIWError("");
+      vliwError = "";
       close();
     } catch (error) {
       // Check if error has the property position. Checking instance of TokenError not working
       const errorMessage = error.pos
         ? `Syntax error at line ${error.pos?.rowBegin}, column ${error.pos?.columnBegin}:
         ${error.errorMessage}`
         : error.message;
-
-      setModalVLIWError(errorMessage);
+      vliwError = errorMessage;
     }
+
+    setModalError({ general: generalError, vliw: vliwError });
   };
 
   return (
@@ -125,20 +128,20 @@ export const VLIWLoadModalComponent = ({
               as="textarea"
               style={{ resize: "none" }}
               className={`smd-monospace mx-0 ${
-                modalError
+                modalError.general
                   ? "border-bottom-0 rounded-bottom-0 border-danger-subtle"
                   : ""
               }`}
-              value={modalCode}
+              value={modalCode.general}
               onChange={(event) => {
-                setModalCode(event.target.value);
+                setModalCode({ ...modalCode, general: event.target.value });
               }}
             />
           </Form>
           <div>
-            {modalError && (
+            {modalError.general && (
               <Alert className="border-top-0 rounded-top-0" variant={"danger"}>
-                {modalError}
+                {modalError.general}
               </Alert>
             )}
           </div>
@@ -149,20 +152,20 @@ export const VLIWLoadModalComponent = ({
               as="textarea"
               style={{ resize: "none" }}
               className={`smd-monospace mx-0 ${
-                modalVLIWError
+                modalError.vliw
                   ? "border-bottom-0 rounded-bottom-0 border-danger-subtle"
                   : ""
               }`}
-              value={modalVLIWCode}
+              value={modalCode.vliw}
               onChange={(event) => {
-                setModalVLIWCode(event.target.value);
+                setModalCode({ ...modalCode, vliw: event.target.value });
               }}
             />
           </Form>
           <div>
-            {modalVLIWError && (
+            {modalError.vliw && (
               <Alert className="border-top-0 rounded-top-0" variant={"danger"}>
-                {modalVLIWError}
+                {modalError.vliw}
               </Alert>
             )}
           </div>