Code smell fixes

sadanandpai · Mar 31, 2024 · 8fa14b1 · 8fa14b1
1 parent 00d9ebd
commit 8fa14b1
Show file tree

Hide file tree

Showing 25 changed files with 220 additions and 223 deletions.
diff --git a/.deepsource.toml b/.deepsource.toml
@@ -1,6 +1,6 @@
 version = 1
 
-exclude_patterns = ["docs/**", "cypress/**"]
+exclude_patterns = ["docs/**", "cypress/**", "__tests__/**"]
 
 [[analyzers]]
 name = "javascript"

diff --git a/cypress.config.ts b/cypress.config.ts
@@ -6,7 +6,7 @@ export default defineConfig({
   defaultCommandTimeout: 50000,
   e2e: {
     baseUrl: 'http://localhost:5173',
-    setupNodeEvents(on, config) {
+    setupNodeEvents() {
       // implement node event listeners here
     },
   },

diff --git a/src/apps/path-finder/algorithms/maze-generator/ellers.ts b/src/apps/path-finder/algorithms/maze-generator/ellers.ts
@@ -10,7 +10,7 @@ export function findSet(
   let currentCell: Cell = cell;
 
   while (parents[currentCell.row][currentCell.col]) {
-    const parent = parents[currentCell.row][currentCell.col]!;
+    const parent = parents[currentCell.row][currentCell.col] as string;
     currentCell = {
       row: parseInt(parent.split(':')[0]),
       col: parseInt(parent.split(':')[1]),

diff --git a/src/apps/path-finder/algorithms/maze-generator/kruskal.ts b/src/apps/path-finder/algorithms/maze-generator/kruskal.ts
@@ -74,12 +74,16 @@ export async function generateKruskalMaze({
     const randomEdge = edges.splice(randomEdgeIdx, 1)[0];
     const [cell1, cell2] = getConnections(randomEdge);
 
-    const set1 = sets.find((set) => set.has(`${cell1.row}-${cell1.col}`));
-    const set2 = sets.find((set) => set.has(`${cell2.row}-${cell2.col}`));
+    const set1 = sets.find((set) =>
+      set.has(`${cell1.row}-${cell1.col}`)
+    ) as Set<string>;
+    const set2 = sets.find((set) =>
+      set.has(`${cell2.row}-${cell2.col}`)
+    ) as Set<string>;
 
     if (set1 !== set2) {
-      set2!.forEach((cell) => set1!.add(cell));
-      sets.splice(sets.indexOf(set2!), 1);
+      set2.forEach((cell) => set1.add(cell));
+      sets.splice(sets.indexOf(set2), 1);
       await updateCells(grid, [cell1, cell2, randomEdge]);
     } else {
       await updateCells(grid, randomEdge, CellType.wall);

diff --git a/src/apps/path-finder/algorithms/path-finder/bfs.ts b/src/apps/path-finder/algorithms/path-finder/bfs.ts
@@ -53,7 +53,7 @@ export async function breadthFirstSearch({
 
     const loopQueue = []; // loopQueue is used for marking the coordinates after each inner iteration
     for (let k = 0; k < length; k++) {
-      const value = queue.shift()!;
+      const value = queue.shift() as Cell;
 
       if (value.row === exit.row && value.col === exit.col) {
         // if exit is found, stop searching
@@ -71,8 +71,7 @@ export async function breadthFirstSearch({
     }
 
     // mark all the cells which are covered
-    for (let i = 0; i < loopQueue.length; i++) {
-      const value = loopQueue[i];
+    for (const value of loopQueue) {
       if (
         !visited[value.row][value.col] &&
         grid[value.row][value.col] !== CellType.wall

diff --git a/src/apps/path-finder/algorithms/path-finder/dfs.ts b/src/apps/path-finder/algorithms/path-finder/dfs.ts
@@ -8,6 +8,12 @@ export async function depthFirstSearch({
   exit,
   updateCells,
 }: SearchAlgoProps) {
+  const grid = stateGrid.map((row) => row.slice());
+  const rows = grid.length;
+  const cols = grid[0].length;
+  const visited = generateGrid(rows, cols, false); // initalize visited arrays
+  const parents = generateGrid<Cell>(rows, cols, null); // initalize parents arrays
+
   async function explorePath(
     row: number,
     col: number,
@@ -41,12 +47,6 @@ export async function depthFirstSearch({
     );
   }
 
-  const grid = stateGrid.map((row) => row.slice());
-  const rows = grid.length;
-  const cols = grid[0].length;
-  const visited = generateGrid(rows, cols, false); // initalize visited arrays
-  const parents = generateGrid<Cell>(rows, cols, null); // initalize parents arrays
   const hasPath = await explorePath(entry.row, entry.col);
-
   return hasPath ? { grid, parents } : { grid, parents: null };
 }
diff --git a/src/apps/path-finder/components/app-tour/app-tour.tsx b/src/apps/path-finder/components/app-tour/app-tour.tsx
@@ -1,84 +1,20 @@
-import { useSetState } from 'react-use';
-import Joyride, { CallBackProps, STATUS, Step } from 'react-joyride';
+import Joyride, { CallBackProps, STATUS } from 'react-joyride';
 import classes from './app-tour.module.scss';
-import mazeVideo from '/assets/maze.mp4';
-import pathVideo from '/assets/path.mp4';
-
-interface State {
-  run: boolean;
-  steps: Step[];
-}
+import { tourSteps } from './tour-data';
+import { useState } from 'react';
 
 function AppTour() {
-  const [{ run, steps }, setState] = useSetState<State>({
-    run: false,
-    steps: [
-      {
-        content: (
-          <>
-            <h2>
-              You can click on the boxes or drag to add walls & clear them. Move
-              the start/end as per your wish
-            </h2>
-            <br />
-            <video autoPlay loop muted>
-              <source src={mazeVideo} type="video/mp4" />
-            </video>
-          </>
-        ),
-        locale: { skip: <strong aria-label="skip">SKIP</strong> },
-        placement: 'center',
-        target: 'body',
-      },
-      {
-        content: (
-          <h2>
-            Or you can select the alogrithm to generate mazes.
-            <br />
-            Customize the speed & play/reset as many times you wish.
-          </h2>
-        ),
-        placement: 'bottom',
-        target: '.select-maze',
-      },
-      {
-        content: <h2>Choose the alogrithm for finding the path</h2>,
-        target: '.execution',
-      },
-      {
-        content: <h2>Analyse the path search details & compare</h2>,
-        target: '.path-info',
-      },
-      {
-        content: (
-          <>
-            <h2>You can move the start/end after search to see live results</h2>
-            <br />
-            <video autoPlay loop muted>
-              <source src={pathVideo} type="video/mp4" />
-            </video>
-          </>
-        ),
-        placement: 'center',
-        target: 'body',
-      },
-    ],
-  });
+  const [inProgress, setInProgress] = useState(false);
 
   const handleClickStart = (event: React.MouseEvent<HTMLElement>) => {
     event.preventDefault();
-
-    setState({
-      run: true,
-    });
+    setInProgress(true);
   };
 
   const handleJoyrideCallback = (data: CallBackProps) => {
-    const { status } = data;
     const finishedStatuses: string[] = [STATUS.FINISHED, STATUS.SKIPPED];
-
-    if (finishedStatuses.includes(status)) {
-      setState({ run: false });
+    if (finishedStatuses.includes(data.status)) {
+      setInProgress(false);
     }
   };
 
@@ -89,14 +25,14 @@ function AppTour() {
           callback={handleJoyrideCallback}
           continuous
           hideCloseButton
-          run={run}
+          run={inProgress}
           showProgress
           showSkipButton
-          steps={steps}
+          steps={tourSteps}
           styles={{
             options: {
               zIndex: 100,
-              width: '300px',
+              width: '400px',
             },
           }}
         />
@@ -106,7 +42,7 @@ function AppTour() {
         <button
           onClick={handleClickStart}
           className={classes.tour}
-          disabled={run}
+          disabled={inProgress}
         >
           Take Tour
         </button>

diff --git a/src/apps/path-finder/components/app-tour/tour-data.tsx b/src/apps/path-finder/components/app-tour/tour-data.tsx
@@ -0,0 +1,60 @@
+import { Step } from 'react-joyride';
+import mazeVideo from '/assets/maze.mp4';
+import pathVideo from '/assets/path.mp4';
+
+export const tourSteps: Step[] = [
+  {
+    content: (
+      <>
+        <h2>
+          Click on the boxes or drag to clear or add wall. Move the entry/exit
+          by dragging.
+        </h2>
+        <br />
+        <video autoPlay loop muted>
+          <source src={mazeVideo} type="video/mp4" />
+        </video>
+      </>
+    ),
+    locale: { skip: <strong aria-label="skip">SKIP</strong> },
+    placement: 'center',
+    target: 'body',
+  },
+  {
+    content: (
+      <h2>
+        Or select the alogrithm to generate mazes.
+        <br />
+        Customize the speed & play/reset.
+      </h2>
+    ),
+    placement: 'bottom',
+    target: '.select-maze',
+  },
+  {
+    content: (
+      <h2>
+        Choose an alogrithm for finding the path. <br />
+        Customize the speed & play/reset.
+      </h2>
+    ),
+    target: '.execution',
+  },
+  {
+    content: <h2>Analyse the path search details & compare</h2>,
+    target: '.path-info',
+  },
+  {
+    content: (
+      <>
+        <h2>Move the entry/exit after search to see live results</h2>
+        <br />
+        <video autoPlay loop muted>
+          <source src={pathVideo} type="video/mp4" />
+        </video>
+      </>
+    ),
+    placement: 'center',
+    target: 'body',
+  },
+];
diff --git a/src/apps/path-finder/components/cell-info/cell-info.module.scss b/src/apps/path-finder/components/cell-info/cell-info.module.scss
@@ -19,11 +19,11 @@
     width: 15px;
   }
 
-  .start {
+  .entry {
     background-color: var(--pf-cell-entry);
   }
 
-  .end {
+  .exit {
     background-color: var(--pf-cell-exit);
   }
 

diff --git a/src/apps/path-finder/components/cell-info/cell-info.tsx b/src/apps/path-finder/components/cell-info/cell-info.tsx
@@ -2,30 +2,28 @@ import classes from './cell-info.module.scss';
 
 function CellInfo() {
   return (
-    <>
-      <div className={classes.cellInfo}>
-        <div>
-          <div className={`${classes.item} ${classes.start}`}></div>
-          <span>Start</span>
-        </div>
-        <div>
-          <div className={`${classes.item} ${classes.end}`}></div>
-          <span>End</span>
-        </div>
-        <div>
-          <div className={`${classes.item} ${classes.wall}`}></div>
-          <span>Wall</span>
-        </div>
-        <div>
-          <div className={`${classes.item} ${classes.visited}`}></div>
-          <span>Visited</span>
-        </div>
-        <div>
-          <div className={`${classes.item} ${classes.path}`}></div>
-          <span>Path</span>
-        </div>
+    <div className={classes.cellInfo}>
+      <div>
+        <div className={`${classes.item} ${classes.entry}`}></div>
+        <span>Entry</span>
       </div>
-    </>
+      <div>
+        <div className={`${classes.item} ${classes.exit}`}></div>
+        <span>Exit</span>
+      </div>
+      <div>
+        <div className={`${classes.item} ${classes.wall}`}></div>
+        <span>Wall</span>
+      </div>
+      <div>
+        <div className={`${classes.item} ${classes.visited}`}></div>
+        <span>Visit</span>
+      </div>
+      <div>
+        <div className={`${classes.item} ${classes.path}`}></div>
+        <span>Path</span>
+      </div>
+    </div>
   );
 }
 

diff --git a/src/apps/path-finder/components/controller/maze-controls.tsx b/src/apps/path-finder/components/controller/maze-controls.tsx
@@ -69,7 +69,7 @@ function MazeControls({ defaultSpeed }: Props) {
         name="maze-speed"
         id="maze-speed"
         value={speed}
-        onChange={(e) => setSpeed(+e.target.value)}
+        onChange={(e) => setSpeed(Number(e.target.value))}
         disabled={disabled}
       >
         {[...speeds.entries()].map(([key, value]) => (