refactor: Simplify code

src/components/solvers/Graph/ProblemGraphView.tsx

@@ -19,12 +19,13 @@ import {
 } from "reactflow";
 import "reactflow/dist/style.css";
 import { ProblemDto } from "../../../api/data-model/ProblemDto";
+import { ProblemSolverInfo } from "../../../api/data-model/ProblemSolverInfo";
 import { ProblemState } from "../../../api/data-model/ProblemState";
 import { SubRoutineDefinitionDto } from "../../../api/data-model/SubRoutineDefinitionDto";
 import { fetchProblem, patchProblem } from "../../../api/ToolboxAPI";
 import { SolutionView } from "../SolutionView";
 import { LevelInfo, ProblemNode, ProblemNodeData } from "./ProblemNode";
-import { SolverNode, SolverNodeData } from "./SolverNode";
+import { SolverNode } from "./SolverNode";
 import { useSolvers } from "./SolverProvider";
 
 interface ProblemEdgeData {
@@ -146,7 +147,7 @@ export const ProblemGraphView = (props: ProblemGraphViewProps) => {
     ReactFlowInstance | undefined
   >(undefined);
 
-  const { solvers, getSolvers } = useSolvers();
+  const { getSolvers } = useSolvers();
 
   /**
    * Node updates are scheduled in order to provide an asynchronous update mechanism.
@@ -238,7 +239,7 @@ export const ProblemGraphView = (props: ProblemGraphViewProps) => {
       updateSolverNodes(node);
 
       // Update node data
-      updateNodeData(node.id, node);
+      updateNodeData(node.id, () => node);
 
       // Solver id and thus sub problems are the same for all problems, so we can just use the first one
       const subProblems = node.data.problemDtos[0].subProblems;
@@ -273,10 +274,6 @@ export const ProblemGraphView = (props: ProblemGraphViewProps) => {
               ) &&
               problemDtos.every((dto) => dto.state === ProblemState.SOLVED)
             ) {
-              console.log(
-                "All problems are solved, updating parent node",
-                node
-              );
               updateProblem(node.id);
             }
 
@@ -350,46 +347,15 @@ export const ProblemGraphView = (props: ProblemGraphViewProps) => {
       function createSolverNodes(node: Node<ProblemNodeData>) {
         getSolvers(node.data.problemDtos[0].typeId).then((solvers) => {
           for (let i = 0; i < solvers.length; i++) {
-            let solverId = solvers[i].id.toString();
-            let solverNodeId = node.id + solverNodeIdentifier + solverId;
-            let solverNode: Node<SolverNodeData> = {
-              id: solverNodeId,
+            let solverId =
+              node.id + solverNodeIdentifier + solvers[i].id.toString();
+
+            addNode({
+              id: solverId,
               data: {
                 problemTypeId: node.data.problemDtos[0].typeId,
                 problemSolver: solvers[i],
-                selectCallback: (problemSolver) => {
-                  let edge = edges.find((e) =>
-                    e.target.startsWith(node.id + solverEdgeIdentifier)
-                  );
-                  if (edge) {
-                    updateEdge(edge);
-                  }
-
-                  Promise.all(
-                    node.data.problemDtos.map((problemDto) =>
-                      patchProblem(problemDto.typeId, problemDto.id, {
-                        solverId: problemSolver.id,
-                      })
-                    )
-                  ).then((dtos) => {
-                    setNodes((previousNodes) =>
-                      previousNodes.map((n) => {
-                        if (n.id !== node.id) return n;
-
-                        let updatedNode: Node<ProblemNodeData> = {
-                          ...n,
-                          data: {
-                            ...n.data,
-                            problemDtos: dtos,
-                          },
-                        };
-                        scheduleNodeUpdate(updatedNode);
-
-                        return updatedNode;
-                      })
-                    );
-                  });
-                },
+                selectCallback: selectCallback,
               },
               position: {
                 x:
@@ -398,20 +364,45 @@ export const ProblemGraphView = (props: ProblemGraphViewProps) => {
                 y: getNodePositionY(node.data.level + 1),
               },
               type: "solverNode",
-            };
-
-            addNode(solverNode);
+            });
 
             addEdge({
-              id: node.id + solverEdgeIdentifier + solverNode.id,
+              id: node.id + solverEdgeIdentifier + solverId,
               type: "step",
               source: node.id,
-              target: solverNode.id,
+              target: solverId,
             });
           }
         });
       }
 
+      function selectCallback(problemSolver: ProblemSolverInfo) {
+        // Set new visuals on solver node
+        let edge = edges.find((e) =>
+          e.target.startsWith(node.id + solverEdgeIdentifier)
+        );
+        if (edge) {
+          updateEdge(edge);
+        }
+
+        // Update problem node
+        Promise.all(
+          node.data.problemDtos.map((problemDto) =>
+            patchProblem(problemDto.typeId, problemDto.id, {
+              solverId: problemSolver.id,
+            })
+          )
+        ).then((dtos) => {
+          updateNodeData(node.id, (n) => ({
+            ...n,
+            data: {
+              ...n.data,
+              problemDtos: dtos,
+            },
+          }));
+        });
+      }
+
       function updateSolverNodes(node: Node<ProblemNodeData>) {
         // Load solver nodes when user action is required
         if (node.data.problemDtos[0].solverId === undefined) {
@@ -428,10 +419,9 @@ export const ProblemGraphView = (props: ProblemGraphViewProps) => {
 
       function removeSolverNodes(node: Node<ProblemNodeData>) {
         setNodes((previousNodes) =>
-          previousNodes.filter((n) => {
-            let x = n.id.startsWith(node.id + solverNodeIdentifier);
-            return !x;
-          })
+          previousNodes.filter(
+            (n) => !n.id.startsWith(node.id + solverNodeIdentifier)
+          )
         );
         setEdges((edges) =>
           edges.filter((e) => !e.id.startsWith(node.id + solverEdgeIdentifier))
@@ -440,13 +430,13 @@ export const ProblemGraphView = (props: ProblemGraphViewProps) => {
 
       function updateNodeData(
         nodeId: string,
-        updatedNode: Node<ProblemNodeData>
+        updateNode: (node: Node<ProblemNodeData>) => Node<ProblemNodeData>
       ) {
         setNodes((previousNodes) =>
           previousNodes.map((node) => {
             if (node.id !== nodeId) return node;
 
-            return updatedNode;
+            return updateNode(node);
           })
         );
       }

src/components/solvers/Graph/SolverProvider.tsx

@@ -14,7 +14,7 @@ const SolverContext = createContext<{
   getSolvers: (problemTypeId: string) => Promise<ProblemSolverInfo[]>;
 }>({
   solvers: {},
-  getSolvers: (x) => Promise.resolve([]),
+  getSolvers: () => Promise.resolve([]),
 });
 
 export const useSolvers = () => useContext(SolverContext);