Review: App.tsx (Part 2)

[subramanian-elavathur]

Eliminate 'towers' state variable

We no longer need the following useEffect (L59),

useEffect(() => {
  const temptowers: JSX.Element[] = arr.map((n: number, index: number) => (
    <div
      className={
        "bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500 rounded-md"
      }
      key={index}
      style={{ height: `${n / 7}rem`, width: `0.7%` }}
    ></div>
  ));
  setTowers(temptowers);
}, [arr]);

Instead Inline the arr.map((n: number, index: number) => ( code onto line 93 <div className="flex mt-3 gap-1.5 justify-center">{towers}</div>

[subramanian-elavathur]

Create a typescript enum for sort switch case

We try to avoid using "string" values directly in code, this is to avoid duplication - imagine if we used the string "Bubble Sort" in 3 file, if that string changed now we have to remember to change it in 3 files.

So instead of doing the following:

function sort(algorithm: string) {
  switch (algorithm) {
    case "Bubble Sort":
      bubbleSort(arr, setArr);
      break;
    case "Quick Sort":
      quickSort(arr, 0, arr.length - 1, setArr);
      break;
    case "Selection Sort":
      selectionSort(arr, arr.length, setArr);
      break;
    case "Insertion Sort":
      insertionSort(arr, arr.length, setArr);
      break;
    case "Merge Sort":
      MergeSort(arr, setArr);
      break;
  }
}

Replace string like Bubble Sort with a typescript string enum. Documentation here: https://www.typescriptlang.org/docs/handbook/enums.html#string-enums

Note: Also remember to replace all usages of these string with enum reference