everything checks out, except for that one bug: Error Modal doesn't show up for Dijkstra or A*

Author: Sethuram52001

.eslintcache

@@ -1,17 +1,12 @@
 import React, { Component } from 'react';
 import "bootstrap/dist/css/bootstrap.min.css";
 import PathVisualizer from './components/PathVisualizer/PathVisualizer';
-import { Container } from "reactstrap";
 
 class App extends Component {
-  state = {}
-
   render() { 
-    return ( 
-      <div>
-        <PathVisualizer />
-      </div>
-     );
+    return (
+      <PathVisualizer />
+    );
   }
 }
 

src/App.js

@@ -1,3 +1,7 @@
+// Performs BFS algorithm; returns *all* nodes in the order
+// in which they were visited. Also makes nodes point back to their
+// previous node, effectively allowing us to compute the shortest path
+// by backtracking from the finish node.
 export function bfs(grid, startNode, finishNode) {
   const visitedNodesInOrder = [];
   // queue to keep track of the visited nodes

src/algorithms/bfs.js

@@ -1,3 +1,7 @@
+// Performs DFS algorithm; returns *all* nodes in the order
+// in which they were visited. Also makes nodes point back to their
+// previous node, effectively allowing us to compute the shortest path
+// by backtracking from the finish node.
 export function dfs(grid, startNode, finishNode) {
   const visitedNodesInOrder = [];
   // stack to keep track of the visited nodes

src/algorithms/dfs.js

@@ -34,8 +34,8 @@ const AppNavbar = (props) => {
             <NavItem id={"Tooltip-" + 6}>
               <NavLink href="https://github.com/Sethuram52001/Path-Finding-Visualizer">GitHub</NavLink>
             </NavItem>
-            <UncontrolledDropdown id={"Tooltip-" + 5} nav inNavbar>
-              <DropdownToggle nav caret>
+            <UncontrolledDropdown nav inNavbar>
+              <DropdownToggle id={"Tooltip-" + 5} nav caret>
                 Algorithms
               </DropdownToggle>
               <DropdownMenu right>
@@ -53,8 +53,8 @@ const AppNavbar = (props) => {
                 </DropdownItem>
               </DropdownMenu>
             </UncontrolledDropdown>
-            <UncontrolledDropdown id={"Tooltip-" + 4} nav inNavbar>
-              <DropdownToggle nav caret>
+            <UncontrolledDropdown nav inNavbar>
+              <DropdownToggle id={"Tooltip-" + 4} nav caret>
                 Generate Maze
               </DropdownToggle>
               <DropdownMenu right>

src/components/AppNavbar/AppNavbar.js

@@ -1,15 +1,12 @@
 import React from 'react';
 import { Modal, ModalHeader } from 'reactstrap';
 
-const ErrorModal = (props) => {
-  const {
-    className
-  } = props;
+const ErrorModal = () => {
 
   return (
     <div>
-      <Modal isOpen={true} className={className}>
-        <ModalHeader>Path not found</ModalHeader>
+      <Modal isOpen={true}>
+        <ModalHeader style={{color: 'black'}}>Path is not found</ModalHeader>
       </Modal>
     </div>
   );

src/components/ErrorModal/ErrorModal.js

@@ -293,12 +293,16 @@ class PathVisualizer extends Component {
         }
     }
 
+/*------------------------------------------------------------------------------------------------------------------------------*/
+
+    // sets the stae to visualizing, to prevent any other func from executing during the visualization
     setVisualization = () => {
         this.setState({
             isVisualizing: !this.state.isVisualizing
         });
     }
 
+    // same as the previous func, but this one to set the state outside of this component, in algorithms visualizing components
     handleClick = () => {
         setVisualizationState(this);
     }

src/components/PathVisualizer/PathVisualizer.js

@@ -14,6 +14,7 @@ export function recursiveDivisionMaze(grid, startNode, finishNode) {
   return walls;
 }
 
+// main func 
 function getRecursiveWalls(vertical, horizontal, grid, startNode, finishNode) {
   if (vertical.length < 2 || horizontal.length < 2)
     return;
@@ -31,12 +32,12 @@ function getRecursiveWalls(vertical, horizontal, grid, startNode, finishNode) {
   // recursive part where the approach to 
   // start horizontal or vertical is dependent on dir variable
   if (dir === 0) {
-    addWall(dir, num, vertical, horizontal, startNode, finishNode);
+    addWalls(dir, num, vertical, horizontal, startNode, finishNode);
     getRecursiveWalls(vertical.slice(0, vertical.indexOf(num)), horizontal, grid, startNode, finishNode);
     getRecursiveWalls(vertical.slice(vertical.indexOf(num) + 1), horizontal, grid, startNode, finishNode);
   }
   else {
-    addWall(dir, num, vertical, horizontal, startNode, finishNode);
+    addWalls(dir, num, vertical, horizontal, startNode, finishNode);
     getRecursiveWalls(vertical, horizontal.slice(0, horizontal.indexOf(num)), grid, startNode, finishNode);
     getRecursiveWalls(vertical, horizontal.slice(horizontal.indexOf(num) + 1), grid, startNode, finishNode);
   }
@@ -56,7 +57,7 @@ function generateOddRandomNumber(arr) {
 } 
 
 // func to push the coordinates of nodes into wall array
-function addWall(dir, num, vertical, horizontal, startNode, finishNode) {
+function addWalls(dir, num, vertical, horizontal, startNode, finishNode) {
   let isStartFinish = false;
   let tempWalls = [];
   if (dir === 0) {