Typescript quality (#36)

- try to add coverage
- some sonar issues

frontend/package.json

@@ -21,7 +21,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --coverage",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

frontend/src/App.tsx

@@ -8,29 +8,31 @@ import { StepDto, ProofDto } from './types';
 import { LOGIC } from './constant';
 
 function App() {
-  const [coloringMap, setColor] = useState(new Map<number, string>());
-  const [isModalOpen, setModalOpen] = useState(false);
+  const [colorMapping, setColorMapping] = useState(new Map<number, string>());
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const [proof, setProof] = useState<ProofDto>({
     steps: [],
     logic: LOGIC,
     goal: '',
   });
 
   const onColorChange = (color: string, line: number) => {
-    const newColoringMap = new Map(coloringMap);
-    newColoringMap.forEach((value, key) => {
-      if (value === color) {
-        newColoringMap.delete(key);
-      }
+    setColorMapping(colorMapping => {
+        const newColoringMap = new Map<number,string>(colorMapping);
+        newColoringMap.forEach((value, key) => {
+          if (value === color) {
+            newColoringMap.delete(key);
+          }
+        });
+        if (line >= 0) {
+          newColoringMap.set(line, color);
+        }
+        return newColoringMap
     });
-    if (line >= 0) {
-      newColoringMap.set(line, color);
-    }
-    setColor(newColoringMap);
   };
 
-  const handleOpenModal = () => setModalOpen(true);
-  const handleCloseModal = () => setModalOpen(false);
+  const handleOpenModal = () => setIsModalOpen(true);
+  const handleCloseModal = () => setIsModalOpen(false);
 
   const handleNewProofSubmit = (premises: string[], goal: string) => {
     const steps: StepDto[] = premises.map((premise) => ({
@@ -45,6 +47,7 @@ function App() {
       logic: LOGIC,
       goal: goal,
     });
+    setColorMapping(new Map<number, string>())
   };
 
   return (
@@ -54,7 +57,7 @@ function App() {
         New Proof
       </button>
       <Menu logic={LOGIC} proof={proof} setProof={setProof} onColorChange={onColorChange} />
-      <Proof proof={proof} coloring={coloringMap} />
+      <Proof proof={proof} coloring={colorMapping} />
 
       <NewProofModal
         isOpen={isModalOpen}

frontend/src/components/menu/Menu.tsx

@@ -18,6 +18,8 @@ type ActionParsed = {
     intInputs: number;
 };
 
+const glowingColors: string[] = ['#ffcc00', '#00f2ff', '#ff69b4'];
+
 function parseAction(
     action: string,
     onColorChange: (color: string, line: number) => void,
@@ -26,7 +28,6 @@ function parseAction(
     const name = action.split('(')[0];
     const inputString = action.match(/\[\s*(.*?)\s*\]/)?.[1];
     const inputs = inputString ? inputString.split(',').map(input => input.trim()) : [];
-    const glowingColors: string[] = ['#ffcc00', '#00f2ff', '#ff69b4'];
 
     return {
         name,
@@ -63,6 +64,8 @@ const Menu: FC<MenuProps> = ({ logic, onColorChange, setProof, proof }) => {
         const newAction = event.target.value;
         setSelectedAction(newAction);
 
+        glowingColors.forEach((color) => onColorChange(color,-1));
+
         const selectedActionObj = actions.find(action => action.name === newAction);
         if (selectedActionObj) {
             const initialSources = Array(selectedActionObj.intInputs).fill(-1);
@@ -107,6 +110,7 @@ const Menu: FC<MenuProps> = ({ logic, onColorChange, setProof, proof }) => {
         applyAction(logic, proof, actionDto, (response: ApplyActionResponse) => {
             if (response.success) {
                 setProof(response.proof);
+                glowingColors.forEach((color) => onColorChange(color,-1));
             } else {
                 console.error('Action failed:', response.message);
                 alert(`Action failed: ${response.message}`);