Further refactoring Pathfinding Visualisation component

* Use Enum type over string to define algorithm
* Move buttons and interactive components to ControlPanel

Author: A-Georgiou

src/components/ControlPanel.tsx

@@ -1,38 +1,23 @@
 // ControlPanel.tsx
 import React from 'react';
+import { Algorithm } from '../utils/AlgorithmEnum';
 
-const ControlPanel = ({
-    BFSSolver,
-    DFSSolver,
-    DijkstraSolver,
-    PrimsMazeSolver,
-    DFSMazeSolver,
-    generateTable,
-    clearLatestRun
-}: {
-    BFSSolver: () => void,
-    DFSSolver: () => void,
-    DijkstraSolver: () => void,
-    PrimsMazeSolver: () => void,
-    DFSMazeSolver: () => void,
+interface ButtonLayoutProps {
+    triggerAlgorithm: (algorithm: Algorithm) => void,
     generateTable: () => void,
     clearLatestRun: () => void
-}) => {
-
-    function runAlgorithm(setAlgorithm: () => void): void {
-        clearLatestRun();
-        setAlgorithm();
-    }
+}
 
+const ControlPanel: React.FC<ButtonLayoutProps> = ({ triggerAlgorithm, generateTable, clearLatestRun}) => {
     return (
         <div>
-            <button onClick={() => runAlgorithm(BFSSolver)} style={{ backgroundColor: 'white', color: 'black' }}>Run BFS Visualisation</button>
-            <button onClick={() => runAlgorithm(DFSSolver)} style={{ backgroundColor: 'white', color: 'black' }}>Run DFS Visualisation</button>
-            <button onClick={() => runAlgorithm(DijkstraSolver)} style={{ backgroundColor: 'white', color: 'black' }}>Run Dijkstra Visualisation</button>
-            <button onClick={() => runAlgorithm(PrimsMazeSolver)} style={{ backgroundColor: 'white', color: 'black' }}>Generate Prims Maze</button>
-            <button onClick={() => runAlgorithm(DFSMazeSolver)} style={{ backgroundColor: 'white', color: 'black' }}>Generate DFS Maze</button>
-            <button onClick={generateTable} style={{ backgroundColor: 'white', color: 'black' }}>Reset Board</button>
-            <button onClick={clearLatestRun} style={{ backgroundColor: 'white', color: 'black' }}>Clear Latest Run</button>
+            <button onClick={() => triggerAlgorithm(Algorithm.BFS)} style={{backgroundColor: 'white', color: 'black'}}>Run BFS Visualisation</button>
+            <button onClick={() => triggerAlgorithm(Algorithm.BFS)} style={{backgroundColor: 'white', color: 'black'}}>Run DFS Visualisation</button>
+            <button onClick={() => triggerAlgorithm(Algorithm.DIJKSTRA)} style={{backgroundColor: 'white', color: 'black'}}>Run Djikstra Visualisation</button>
+            <button onClick={() => triggerAlgorithm(Algorithm.PRIMS_MAZE)} style={{backgroundColor: 'white', color: 'black'}}>Generate Prims Maze</button>
+            <button onClick={() => triggerAlgorithm(Algorithm.DFS_MAZE)} style={{backgroundColor: 'white', color: 'black'}}>Generate DFS Maze</button>
+            <button onClick={() => generateTable()} style={{backgroundColor: 'white', color: 'black'}}>Reset Board</button>
+            <button onClick={() => clearLatestRun()} style={{backgroundColor: 'white', color: 'black'}}>Clear Latest Run</button>
         </div>
     );
 };

src/pages/PathfindingVisualiser.tsx

@@ -1,12 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import useWindowDimensions from '../utils/useWindowDimensions';
 import '../styles/pathfinding.css';
-import { HiChevronDoubleRight } from "react-icons/hi2";
-import { HiOutlineFlag } from "react-icons/hi";
-import { Cell } from '../algorithms/utils/PathfindingUtils';
 import MazeGrid from '../components/MazeGrid.tsx';
 import mazeHooks from '../utils/mazeHooks.ts';
 import pathfindingAlgorithmHooks from '../utils/pathfindingAlgorithmHooks.ts';
+import ControlPanel from '../components/ControlPanel.tsx';
 
 const PathfindingVisualiser: React.FC = () => {
     const { width = 0, height = 0 } = useWindowDimensions();
@@ -26,7 +24,7 @@ const PathfindingVisualiser: React.FC = () => {
         setStartNode,
         setEndNode,
         generateTable,
-        clearAttribute,
+        clearLatestRun,
         populateOptimalPath,
     } = mazeHooks(width, height);
 
@@ -91,11 +89,6 @@ const PathfindingVisualiser: React.FC = () => {
         });
     };
 
-    function clearLatestRun(){
-        clearAttribute('visited');
-        clearAttribute('finalPath');
-    }
-
     return (
         <div>
             <MazeGrid
@@ -104,13 +97,7 @@ const PathfindingVisualiser: React.FC = () => {
                 handleMouseEnter={handleMouseEnter}
                 handleMouseUp={handleMouseUp}
             />
-            <button onClick={() => triggerAlgorithm('bfs')} style={{backgroundColor: 'white', color: 'black'}}>Run BFS Visualisation</button>
-            <button onClick={() => triggerAlgorithm('dfs')} style={{backgroundColor: 'white', color: 'black'}}>Run DFS Visualisation</button>
-            <button onClick={() => triggerAlgorithm('dijkstra')} style={{backgroundColor: 'white', color: 'black'}}>Run Djikstra Visualisation</button>
-            <button onClick={() => triggerAlgorithm('primsMaze')} style={{backgroundColor: 'white', color: 'black'}}>Generate Prims Maze</button>
-            <button onClick={() => triggerAlgorithm('dfsMaze')} style={{backgroundColor: 'white', color: 'black'}}>Generate DFS Maze</button>
-            <button onClick={() => generateTable()} style={{backgroundColor: 'white', color: 'black'}}>Reset Board</button>
-            <button onClick={() => clearLatestRun()} style={{backgroundColor: 'white', color: 'black'}}>Clear Latest Run</button>
+            <ControlPanel triggerAlgorithm={triggerAlgorithm} generateTable={generateTable} clearLatestRun={clearLatestRun}/>
         </div>
     );
 };

src/utils/AlgorithmEnum.ts

@@ -0,0 +1,7 @@
+export enum Algorithm {
+    BFS = 'bfs',
+    DIJKSTRA = 'dijkstra',
+    DFS = 'dfs',
+    PRIMS_MAZE = 'primsMaze',
+    DFS_MAZE = 'dfsMaze'
+}

src/utils/mazeHooks.ts

@@ -73,6 +73,11 @@ const mazeHooks = (width: number, height: number) => {
         ));
     };
 
+    function clearLatestRun(){
+        clearAttribute('visited');
+        clearAttribute('finalPath');
+    }
+
     async function populateOptimalPath(optimalPath: Cell[] | null) {
         if (!optimalPath) {
             return;
@@ -106,7 +111,7 @@ const mazeHooks = (width: number, height: number) => {
         setStartNode,
         setEndNode,
         generateTable,
-        clearAttribute,
+        clearLatestRun,
         populateOptimalPath,
     };
 };

src/utils/pathfindingAlgorithmHooks.ts

@@ -5,6 +5,7 @@ import { Dijkstra } from '../algorithms/pathfinding/Dijkstra.ts';
 import { DepthFirstSearch } from '../algorithms/pathfinding/DepthFirstSearch.ts';
 import { primsMazeGeneration } from '../algorithms/mazes/PrimsMazeGeneration.ts';
 import { dfsMazeGeneration } from '../algorithms/mazes/DFSMazeGeneration.ts';
+import { Algorithm } from '../utils/AlgorithmEnum.ts';
 
 interface PathfindingAlgorithmHooksProps {
     clearLatestRun: () => void;
@@ -23,31 +24,31 @@ const pathfindingAlgorithmHooks = ({
     endNode,
     setMaze,
 }: PathfindingAlgorithmHooksProps) => {
-    const [algorithm, setAlgorithm] = useState<string | null>(null);
+    const [algorithm, setAlgorithm] = useState<Algorithm | null>(null);
 
     useEffect(() => {
         if (!algorithm) return;
 
         const startCell = maze[startNode[0]][startNode[1]];
         const endCell = maze[endNode[0]][endNode[1]];
 
-        const algorithmMap: Record<string, () => Promise<void> | void> = {
-            bfs: async () => {
+        const algorithmMap: Record<Algorithm, () => Promise<void> | void> = {
+            [Algorithm.BFS]: async () => {
                 const optimalPath = await BreadthFirstSearch(maze, startCell, endCell, setMaze);
                 if (optimalPath) populateOptimalPath(optimalPath);
             },
-            dijkstra: async () => {
+            [Algorithm.DIJKSTRA]: async () => {
                 const optimalPath = await Dijkstra(maze, startCell, endCell, setMaze);
                 if (optimalPath) populateOptimalPath(optimalPath);
             },
-            dfs: async () => {
+            [Algorithm.DFS]: async () => {
                 const optimalPath = await DepthFirstSearch(maze, startCell, endCell, setMaze);
                 if (optimalPath) populateOptimalPath(optimalPath);
             },
-            primsMaze: () => {
+            [Algorithm.PRIMS_MAZE]: () => {
                 primsMazeGeneration(maze, startCell, endCell, setMaze);
             },
-            dfsMaze: () => {
+            [Algorithm.DFS_MAZE]: () => {
                 dfsMazeGeneration(maze, startCell, endCell, setMaze);
             },
         };
@@ -57,9 +58,10 @@ const pathfindingAlgorithmHooks = ({
         setAlgorithm(null);
     }, [algorithm, maze, startNode, endNode, clearLatestRun, populateOptimalPath, setMaze]);
 
-    const triggerAlgorithm = (algorithm: 'bfs' | 'dijkstra' | 'dfs' | 'primsMaze' | "dfsMaze") => {
+    const triggerAlgorithm = (algorithm: Algorithm) => {
         clearLatestRun();
-        setAlgorithm(algorithm)};
+        setAlgorithm(algorithm);
+    };
 
     return {
         triggerAlgorithm,