How to make Sorting Visualizer using React

JavaScript
1

I am trying to make sorting visualizer using react, I also made algorithms ready for different sort mechanism like merge sort, bubble sort, insertion sort and Quick sort but not able to implement it visually.

I made visualizer for bubble sort but for that too I asked question in stack overflow and one of the guys gave the entire logic of it using react, now I am trying to make it possible for merge sort, spend 4 days to implement it but still I got stuck, it feels like I will not able survive without taking any help.

Can anyone please suggest me what to do?

my App.js file

import "./styles.css";
import { useState, useEffect } from "react";

export default function App() {
  const [arrayForSort, setArrayForSort] = useState([
    70,
    20,
    40,
    90,
    26,
    10,
    80,
    50
  ]);

  const [isSort, setIsSort] = useState(false);

  const fetchArray = arrayForSort.map((element) => {
    return (
      <span className="array-element" key={element}>
        {element}
      </span>
    );
  });

  const beginSort = () => {
    setIsSort(true);
  };

  const mergeSort = (myArray) => {
    let newArray = [...myArray];

    // if array contains nothing or only one element then return the array
    if (myArray.length <= 1) return myArray;

    // find the middle of the array
    const middle = Math.floor(myArray.length / 2);

    // Split the array into two
    const leftArray = myArray.slice(0, middle);
    const rightArray = myArray.slice(middle);

    // recursive function to combine left and right array
    return merge(mergeSort(leftArray), mergeSort(rightArray), newArray);
  };

  const merge = (leftArr, rightArr, originalArray) => {
    let resultArray = [],
      leftIndex = 0,
      rightIndex = 0;

    while (leftIndex < leftArr.length && rightIndex < rightArr.length) {
      if (leftArr[leftIndex] < rightArr[rightIndex]) {
        let newLeftIndex = originalArray.indexOf(leftArr[leftIndex]);
        let newRightIndex = originalArray.indexOf(rightArr[rightIndex]);
        [originalArray[newLeftIndex], originalArray[newRightIndex]] = [
          originalArray[newRightIndex],
          originalArray[newLeftIndex]
        ];
        resultArray.push(leftArr[leftIndex]);
        leftIndex++;
      } else {
        let newLeftIndex = originalArray.indexOf(leftArr[leftIndex]);
        let newRightIndex = originalArray.indexOf(rightArr[rightIndex]);
        [originalArray[newRightIndex], originalArray[newLeftIndex]] = [
          originalArray[newLeftIndex],
          originalArray[newRightIndex]
        ];
        resultArray.push(rightArr[rightIndex]);
        rightIndex++;
      }
    }

    setArrayForSort(originalArray);

    resultArray = resultArray
      .concat(leftArr.slice(leftIndex))
      .concat(rightArr.slice(rightIndex));

    return resultArray;
  };

  useEffect(() => {
    if (isSort) {
      const arr = [...arrayForSort];
      const sortedArray = mergeSort(arr);
      console.log(sortedArray);
      // setArrayForSort(sortedArray);
      setIsSort(false);
    }
  }, [arrayForSort, setArrayForSort, isSort, mergeSort]);

  return (
    <div className="App">
      <h1>Merge Sort</h1>
      <div className="array">{fetchArray}</div>
      <button onClick={beginSort}>SORT</button>
    </div>
  );
}
2

If I remember correctly, the big issue before was the delay. I was thinking about it. Rather than delay each step and show it as it goes, I think it would be easier to just run the entire sort, but store each step, push the “current” state of the sort onto an array. Then, you can display them one by one with a delay - first show the first one, then show the first two, then the first three, etc.

3

@kevinSmith Yeah, that’s good idea, I will definitely try it, but I am sure if it would be a good practice to store all the changes in the separate array and then render them with the delay, I am actually new to React JS and just started the learning.

4

There is nothing wrong with that, if it is the best way to do what you want. If the purpose of this app is to show the steps of a sort, then that makes sense. To me, it would be a lot easier to control the timing of how it displays than to try to interrupt and delay the sorting.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.