Used TypeScript for Sorting Algorithms

package.json

@@ -6,12 +6,17 @@
   "dependencies": {
     "@material-ui/core": "^4.5.1",
     "@material-ui/icons": "^4.5.1",
+    "@types/jest": "^24.0.23",
+    "@types/node": "^12.12.14",
+    "@types/react": "^16.9.14",
+    "@types/react-dom": "^16.9.4",
     "baseui": "^9.9.0",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
     "react-scripts": "3.2.0",
     "styletron-engine-atomic": "^1.4.1",
-    "styletron-react": "^5.2.2"
+    "styletron-react": "^5.2.2",
+    "typescript": "^3.7.3"
   },
   "scripts": {
     "start": "react-scripts start",

src/Algorithms/BaseSort.ts

@@ -0,0 +1,70 @@
+import Column from '../Column';
+type dimensionType = {
+  xPos: number;
+  yPos: number;
+  canvasWidth: number;
+  canvasHeight: number;
+};
+
+export default class BaseSort {
+  data: number[];
+  canvasContext: any;
+  columnArray: Column[];
+  dimension: dimensionType;
+  isTopDown: boolean;
+  isCompareModeOn: boolean;
+  delay: number;
+  constructor(
+    data: number[],
+    canvasContext: any,
+    columnArray: Column[],
+    dimension: dimensionType,
+    isTopDown: boolean,
+    isCompareModeOn: boolean,
+    delay = 0
+  ) {
+    this.data = data;
+    this.canvasContext = canvasContext;
+    this.columnArray = columnArray;
+    this.dimension = dimension;
+    this.isTopDown = isTopDown;
+    this.isCompareModeOn = isCompareModeOn;
+    this.delay = delay;
+  }
+
+  timer = (ms: number) => {
+    return new Promise(res => setTimeout(res, ms));
+  };
+
+  task = async (delay: number) => {
+    await this.timer(delay);
+  };
+
+  getRectHeight = (value: number) => {
+    const factor = this.isCompareModeOn ? 2 : 1;
+    const { canvasHeight } = this.dimension;
+    if (this.isTopDown) {
+      return canvasHeight / factor - value * (canvasHeight / factor);
+    } else {
+      return value * (canvasHeight / factor) - canvasHeight / factor;
+    }
+  };
+
+  drawRect = (i: number, reactHeight: number) => {
+    if (!this.isTopDown) {
+      this.canvasContext.fillRect(
+        this.columnArray[i].x,
+        this.columnArray[i].y,
+        this.columnArray[i].width,
+        Math.floor(reactHeight)
+      );
+    } else {
+      this.canvasContext.fillRect(
+        this.columnArray[i].x,
+        0,
+        this.columnArray[i].width,
+        Math.floor(reactHeight)
+      );
+    }
+  };
+}

src/Algorithms/BubbleSort.ts

@@ -0,0 +1,62 @@
+import BaseSort from './BaseSort';
+import Column from '../Column';
+
+class BubbleSort extends BaseSort {
+  clearReact = (i: number) => {
+    const factor = this.isCompareModeOn ? 2 : 1;
+    const { canvasHeight } = this.dimension;
+    if (!this.isTopDown) {
+      this.canvasContext.clearRect(
+        this.columnArray[i].x,
+        factor === 2 ? canvasHeight / 2 : 0,
+        Math.ceil(this.columnArray[i].width + this.columnArray[i + 1].width) +
+          8,
+        canvasHeight / factor
+      );
+    } else {
+      this.canvasContext.clearRect(
+        this.columnArray[i].x,
+        0,
+        Math.ceil(this.columnArray[i].width),
+        canvasHeight / 2
+      );
+    }
+  };
+
+  sort = async () => {
+    const data = this.data.slice(0);
+    const length = data.length;
+    for (let i = 0; i < length - 1; i++) {
+      for (let j = 0; j < length - i - 1; j++) {
+        let temp;
+        if (data[j] < data[j + 1]) {
+          temp = data[j];
+          data[j] = data[j + 1];
+          data[j + 1] = temp;
+          let rectHeight1 = this.getRectHeight(data[j]);
+          let rectHeight2 = this.getRectHeight(data[j + 1]);
+          this.columnArray[j] = new Column(
+            this.columnArray[j].x,
+            this.columnArray[j].y,
+            this.columnArray[j].width,
+            Math.floor(rectHeight1)
+          );
+          this.columnArray[j + 1] = new Column(
+            this.columnArray[j + 1].x,
+            this.columnArray[j + 1].y,
+            this.columnArray[j + 1].width,
+            Math.floor(rectHeight2)
+          );
+          this.clearReact(j);
+          this.drawRect(j, rectHeight1);
+          this.canvasContext.fillStyle = '#00FF91';
+          this.drawRect(j + 1, rectHeight2);
+        }
+        // canvasContext.fillStyle = '#6002EE';
+        await this.task(this.delay);
+      }
+    }
+  };
+}
+
+export default BubbleSort;