Added Insertion Sort Logic

sasank-tadepalli · sasank-tadepalli · commit ce6b9459e12e · 2021-06-13T17:06:33.000+05:30
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Sort Visualizer</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/App.js b/src/App.js
@@ -8,11 +8,13 @@ import { useEffect } from "react";
 import generateArray from "./helpers/generateArray";
 import bubbleSort from "./helpers/bubbleSort";
 import selectionSort from "./helpers/selectionSort";
+import insertionSort from "./helpers/insertionSort";
 
 function App() {
   const [data, setData] = useState([]);
   const [isSorting, setIsSorting] = useState(false);
   const [currIJ, setCurrIJ] = useState({ i: -1, j: -1 });
+  const [color, setColor] = useState("red");
   const [completed, setCompleted] = useState([]);
   const [size, setSize] = useState(10);
   const [speed, setSpeed] = useState(1);
@@ -24,11 +26,12 @@ function App() {
     setData([...arr]);
   }, [size, speed, algType]);
 
-  const alterStateAfterTimeOut = (arr, i, j, c, cond, index) => {
+  const alterStateAfterTimeOut = (arr, i, j, c, cond, index, color) => {
     setTimeout(
       (arr, i, j, c) => {
         setData(arr);
         setCurrIJ({ i, j });
+        setColor(color ? color : "red");
         // if (c === arr.length) setIsSorting(false);
         if (cond) {
           setCompleted((prev) => {
@@ -77,6 +80,7 @@ function App() {
   const algorithms = {
     0: bubbleSort,
     1: selectionSort,
+    2: insertionSort,
   };
 
   return (
@@ -91,7 +95,7 @@ function App() {
         speed={speed}
         speedChangeHandler={speedChangeHandler}
       />
-      <Chart data={data} currIJ={currIJ} completed={completed} />
+      <Chart data={data} currIJ={currIJ} completed={completed} color={color} />
       <Button
         btnName="Sort"
         onClickHandler={sortClickHandler}
diff --git a/src/components/Chart/Chart.js b/src/components/Chart/Chart.js
@@ -44,7 +44,7 @@ const Chart = (props) => {
   };
   const backgroundColor = props.data.map((el, i) => {
     return i === props.currIJ.i || i === props.currIJ.j
-      ? "red"
+      ? props.color
       : "rgb(248,248,248)";
   });
 
diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js
@@ -15,8 +15,8 @@ const Navbar = (props) => {
         <Select
           value={props.algType}
           onChangeHandler={props.algChangeHandler}
-          values={[0, 1]}
-          options={["Bubble Sort", "Selection Sort"]}
+          values={[0, 1, 2]}
+          options={["Bubble Sort", "Selection Sort", "Insertion Sort"]}
           isDisabled={props.isSorting}
         />
         <Select
diff --git a/src/helpers/insertionSort.js b/src/helpers/insertionSort.js
@@ -0,0 +1,23 @@
+const insertionSort = (alterStateAfterTimeOut, data) => {
+  const array = [...data];
+  let count = 0;
+  for (let i = 1; i < array.length; i++) {
+    let key = array[i];
+    let j = i - 1;
+    while (j >= 0 && array[j] > key) {
+      alterStateAfterTimeOut(array, i, j, count);
+      count++;
+      array[j + 1] = array[j];
+      j--;
+    }
+    array[j + 1] = key;
+    alterStateAfterTimeOut(array, -1, j + 1, count, false, -1, "yellow");
+    count++;
+  }
+  for (let i = 0; i < array.length; i++) {
+    alterStateAfterTimeOut(array, 0, 0, count, true, i);
+  }
+  alterStateAfterTimeOut(array, -1, -1, count);
+};
+
+export default insertionSort;
