refactored

package.json

@@ -12,8 +12,8 @@
     "web-vitals": "^1.1.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "export SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
+    "build": "export SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

src/App.js

@@ -1,17 +1,18 @@
 import './App.css';
-import SelectionSort from './components/selection-sort/selection-sort';
+import {SelectionSort} from './algorithms/selection-sort';
 import { useState } from 'react';
+import AlgorithmVisualizer from './components/algorithm-visualizer/algorithm-visualizer';
+import { BullSort } from './algorithms/bull-sort';
 
 function App() {
   const [colorFactor, setColorFactor] = useState(Math.random());
 
   const [array, setArray] = useState([]);
   const [start, setStart] = useState(false);
 
-
   const genData = () => {
     setStart(false);
-    const data = Array.from({length: 40}, () => Math.floor(Math.random() * 40));
+    const data = Array.from({length: 10}, () => Math.floor(Math.random() * 40));
     setArray(data);
     setColorFactor(Math.random());
   }
@@ -24,12 +25,7 @@ function App() {
     <div>
       <button onClick={genData}>GenerateData</button>
       <button onClick={startVisualization}>Start</button>
-      { start && array.length > 0 &&
-        array.map((el,index) => <SelectionSort colorFactor={colorFactor} key={index} array={array} startIndex={index}/>)
-      }
-      {
-        !start && <SelectionSort colorFactor={colorFactor} array={array} startIndex={array.length-1}/>
-      }
+      <AlgorithmVisualizer array={array} algorithmFunction={BullSort} start={start} colorFactor={colorFactor}/>
     </div>
   );
 }

src/algorithms/bull-sort.js

@@ -0,0 +1,17 @@
+export const BullSort = (array, algorithmWrapper) => {
+  let nbChanges = 1;
+  while(nbChanges != 0)
+  {   
+      nbChanges = 0;
+      for(let i = 1; i < array.length; i++)
+      {
+        if(algorithmWrapper.getElement(i) < algorithmWrapper.getElement(i-1))
+        {
+          nbChanges++;
+          let x = algorithmWrapper.getElement(i);
+          algorithmWrapper.setElement(i, algorithmWrapper.getElement(i-1));
+          algorithmWrapper.setElement(i-1, x);
+        }
+      }
+  }
+}

src/algorithms/selection-sort.js

@@ -0,0 +1,15 @@
+export const SelectionSort = (array, algorithmWrapper) => {
+    let startIndex = 0;
+    while(startIndex !== array.length)
+    {   
+        let minIndex = startIndex;
+        for(let j=startIndex;j<array.length;j++)
+        {
+            if( algorithmWrapper.getElement(j)<algorithmWrapper.getElement(minIndex)) minIndex = j;
+        }
+        let temp = algorithmWrapper.getElement(startIndex);
+        algorithmWrapper.setElement(startIndex, algorithmWrapper.getElement(minIndex));
+        algorithmWrapper.setElement(minIndex, temp);
+        startIndex++;
+    }
+}

src/components/algorithm-visualizer/algorithm-visualizer.jsx

@@ -0,0 +1,31 @@
+import { AlgorithmWrapper } from "../../utils/algorithm-wrapper";
+import VisualizationBoard from "../visualization-board/visualization-board";
+import { useState, useEffect } from 'react';
+
+/* eslint-disable no-undef */
+const AlgorithmVisualizer = ({array, algorithmFunction, start, colorFactor}) => {
+    //Stores a snapshot of each operation done on the array
+    const [executionDone, setExecutionDone] = useState(false);
+    //Stores a snapshot of each operation done on the array
+    const [sequences, setSequences] = useState([]);
+    useEffect(() => {
+        if(start){
+            const algorithmWrapper = new AlgorithmWrapper(array, sequences, setSequences, algorithmFunction, setExecutionDone);
+            algorithmWrapper.executeAlgorithm();
+        }
+    }, [start, array, algorithmFunction, sequences])
+
+
+    return ( 
+        <>
+            { start && executionDone &&
+                sequences.map((el,index) => <VisualizationBoard count={sequences.length} colorFactor={colorFactor} key={index} array={el} startIndex={index}/>)
+            }
+            {
+                (!start || !executionDone) && <VisualizationBoard count={sequences.length} colorFactor={colorFactor} array={array} startIndex={array.length-1}/>
+            }
+        </>
+     );
+}
+
+export default AlgorithmVisualizer;

src/components/array-element/array-element.js

@@ -2,7 +2,6 @@ import styles from "./array-element.module.css"
 
 const ArrayElement = ({value, colorFactor}) => {
     const colorVal = 3.14*((value/70)+2*colorFactor);
-    console.log(colorFactor);
     return ( 
         <div className={styles.element} style={{height: value+ "vh",
         //Generates Gradient for colors 

src/components/visualization-board/visualization-board.js

@@ -2,12 +2,12 @@ import ArrayElement from '../array-element/array-element';
 import styles from './visualization-board.module.css'
 import { useState } from 'react';
 
-const VisualizationBoard = ({array, startIndex, colorFactor}) => {
-    const index = array.length - startIndex;
+const VisualizationBoard = ({array, count, startIndex, colorFactor}) => {
+    const index = count - startIndex;
     const [display, setDisplay] = useState("flex")
-
+    
     setTimeout(()=> {
-        setDisplay(startIndex === array.length-1 ? "flex": "none");
+        setDisplay(startIndex === count-1 ? "flex": "none");
     },startIndex*200)
 
     return ( 

src/utils/algorithm-wrapper.js

@@ -0,0 +1,35 @@
+export class AlgorithmWrapper
+{
+    constructor(array, sequences, setSequences, algorithmFunction, setExecutionDone)
+    {
+        this.array = array;
+        this.sequences = sequences;
+        this.setSequences = setSequences;
+        this.algorithmFunction = algorithmFunction;
+        this.setExecutionDone = setExecutionDone;
+
+        //We empty previously stored sequences
+        this.setSequences([]);
+        this.setExecutionDone(false);
+    }
+
+    getElement(index){
+        return this.array[index];
+    }
+
+    //Sets the element in the array and captures a snapshot of the array
+    setElement(index, value) {
+        // We change the value
+        this.array[index] = value;
+
+        // We store a snapshot of the array
+        this.sequences.push([...this.array]);
+        this.setSequences(this.sequences);
+    }
+
+    executeAlgorithm()
+    {
+        this.algorithmFunction(this.array, this);
+        this.setExecutionDone(true);
+    }
+}