fix algorithms and refactor player UI

Author: Fedorse

src/App.jsx

@@ -1,17 +1,16 @@
 import { useCallback } from 'react';
-import Array from './components/Array/Array';
+
 import { usePlayer, useHistory, useAlgorithm } from './hooks';
-import { ResetIcon } from './components/icon/ResetIcon';
-import PauseIcon from './components/icon/PauseIcon';
-import PlayIcon from './components/icon/PlayIcon';
-import Player from './components/Player/Player';
+
 import { disableScroll } from './utils/disableScroll';
 
+import BarContainer from './components/BarContainer/BarContainer';
+import Player from './components/Player/Player';
+
 const App = () => {
   const history = useHistory();
 
   const player = usePlayer();
-  // console.log('history:', history, 'player:', player);
   const {
     array,
     algorithmState,
@@ -37,22 +36,6 @@ const App = () => {
     }
   }, [player, runAlgorithm, resetAll, algorithmState]);
 
-  // refactor - move logic to Player
-  const getButtonText = useCallback(() => {
-    if (algorithmState === 'notStarted') {
-      return <PlayIcon />;
-    } else if (algorithmState === 'finished') {
-      return <ResetIcon />;
-    }
-
-    if (player.playerState === 'play') {
-      return <PauseIcon />;
-    }
-    {
-      return <PlayIcon />;
-    }
-  }, [algorithmState, player]);
-
   // refactor - use CSS instead of JS logic  (hint: media queries, dvh units)
   const barWidth = window.screen.width / array.length;
   disableScroll();
@@ -62,19 +45,19 @@ const App = () => {
   return (
     <section>
       <span className="title-algorithm">{selectedAlgorithm} Sort</span>
-      <Array {...step} barWidth={barWidth} />
+      <BarContainer {...step} barWidth={barWidth} />
       <Player
         selectAlgorithm={selectAlgorithm}
         goToNextStep={() => player.setPlayerState('forward')}
-        getButtonText={getButtonText}
         goToPreviousStep={() => player.setPlayerState('backward')}
         speed={player.speed}
         resetAlgorithm={resetAll}
         setSpeed={(speed) => player.setSpeed(speed)}
         handleAlgorithmRun={handleAlgorithmRun}
         selectedAlgorithm={selectedAlgorithm}
-        evalState={player.evalState}
         currentTrack={history.currentTrack}
+        algorithmState={algorithmState}
+        player={player}
       />
     </section>
   );

src/components/hooks/useClickOutside.js renamed to src/actions/useClickOutside.ts

@@ -1,11 +1,11 @@
 import { bubbleSort } from './bubbleSort';
-// import { insertionSort } from './insertionSort';
-// import { quickSort } from './quickSort';
-// import { selectionSort } from './selectionSort';
+import { insertionSort } from './insertionSort';
+import { selectionSort } from './selectionSort';
+import { quickSort } from './quickSort';
 
 export const algorithms = {
-    bubble: bubbleSort,
-    // selection: selectionSort,
-    // quick: quickSort,
-    // insertion: insertionSort
-}
+  bubble: bubbleSort,
+  insertion: insertionSort,
+  selection: selectionSort,
+  quick: quickSort,
+};

src/algorithms/index.js

@@ -1,40 +1,24 @@
-import { sleep } from '../../utils/sleep';
-import { pause } from '../../utils/pause';
+import { pause } from '../utils/pause';
 
-export const insertionSort = async (
+export const insertionSort = async ({
   array,
   updateArray,
-  setActiveIndex,
-  setCompareIndex,
-  evalStateRef,
-speedRef,
-playerStateRef,
-trackRef,
-) => {
-  let arr = [...array];
-  for (let i = 1; i < arr.length; i++) {
-    const temp = arr[i];
+  updateTracking,
+  history,
+  player,
+}) => {
+  for (let i = 1; i < array.length; i++) {
+    const temp = array[i];
     let j = i - 1;
 
-    await pause(evalStateRef, playerStateRef, trackRef, speedRef);
-    if (evalStateRef.current === 'notStarted') {
-      throw new Error('cancelSort');
-    }
-    setActiveIndex(i);
-    updateArray([...arr], i, null, null);
+    await pause({ history, player });
+    updateTracking({ activeIndex: i, compareIndex: j });
 
-    await sleep(100, speed.current);
-    while (j >= 0 && arr[j] > temp) {
-      arr[j + 1] = arr[j];
+    while (j >= 0 && array[j] > temp) {
+      array[j + 1] = array[j];
       j--;
-      setCompareIndex(j);
-      updateArray([...arr], null, j, null);
-      await sleep(100, speedRef.current);
     }
-    arr[j + 1] = temp;
-    await sleep(100, speedRef.current);
-    updateArray([...arr], temp, null, null);
+    array[j + 1] = temp;
+    updateArray(array);
   }
-  setActiveIndex(null);
-  setCompareIndex(null);
 };

src/algorithms/insertionSort.js

@@ -1,150 +1,93 @@
-import { sleep } from '../../utils/sleep';
-import { pause } from '../../utils/pause';
+import { pause } from '../utils/pause';
 
-const partition = async (
+const partition = async ({
   arr,
   start,
   end,
-  setActiveIndex,
-  setCompareIndex,
-  setPivotIndex,
-  evalStateRef,
-  speedRef,
-  playerStateRef,
-  trackRef,
   updateArray,
-) => {
+  updateTracking,
+  history,
+  player,
+}) => {
   const pivotElement = arr[end];
   let partitionIndex = start;
-  // setActiveIndex(end);
-  // setPivotIndex(partitionIndex);
-  // await sleep(100, speedRef.current);
 
   for (let i = start; i < end; i++) {
-    await pause(evalStateRef, playerStateRef, trackRef, speedRef);
-    if (evalStateRef === 'notStarted') {
-      throw new Error('cancelSort');
-    }
-    setCompareIndex(i);
-    // await sleep(100, speedRef.current);
-    console.log('arrrr,', arr);
+    await pause({ history, player });
+    updateTracking({ activeIndex: partitionIndex, pivotIndex: end });
 
     if (arr[i] < pivotElement) {
       [arr[i], arr[partitionIndex]] = [arr[partitionIndex], arr[i]];
 
-      updateArray([...arr], null, null, null);
-      await sleep(20, speedRef.current);
       partitionIndex++;
     }
   }
 
   [arr[partitionIndex], arr[end]] = [arr[end], arr[partitionIndex]];
-  updateArray([...arr], null, null, null);
-  await sleep(50, speedRef.current);
+  updateArray(arr);
 
   return partitionIndex;
 };
 
-const quickSortRecursive = async (
+const quickSortRecursive = async ({
   arr,
   start,
   end,
-  setActiveIndex,
-  setCompareIndex,
-  setPivotIndex,
-  evalStateRef,
-  speedRef,
-  playerStateRef,
-  trackRef,
   updateArray,
-) => {
+  updateTracking,
+  history,
+  player,
+}) => {
   if (start >= end) {
     return;
   }
-  await pause(evalStateRef, playerStateRef, speedRef, trackRef);
-  if (evalStateRef === 'notStarted') {
-    throw new Error('cancelSort');
-  }
+  await pause({ history, player });
 
-  const index = await partition(
+  const index = await partition({
     arr,
     start,
     end,
-    setActiveIndex,
-    setCompareIndex,
-    setPivotIndex,
-    evalStateRef,
-    speedRef,
-    playerStateRef,
-    trackRef,
     updateArray,
-  );
+    updateTracking,
+    history,
+    player,
+  });
 
-  await quickSortRecursive(
+  await quickSortRecursive({
     arr,
     start,
-    index - 1,
-    setActiveIndex,
-    setCompareIndex,
-    setPivotIndex,
-    evalStateRef,
-    speedRef,
-    playerStateRef,
-    trackRef,
+    end: index - 1,
     updateArray,
-  );
-  await quickSortRecursive(
+    updateTracking,
+    history,
+    player,
+  });
+  await quickSortRecursive({
     arr,
-    index + 1,
+    start: index + 1,
     end,
-    setActiveIndex,
-    setCompareIndex,
-    setPivotIndex,
-    evalStateRef,
-    speedRef,
-    playerStateRef,
-    trackRef,
     updateArray,
-  );
+    updateTracking,
+    history,
+    player,
+  });
 };
 
-// array,
-// updateArray,
-// setActiveIndex,
-// setCompareIndex,
-// evalStateRef,
-// speedStateRef,
-// playerStateRef,
-// trackRef,
-
-export const quickSort = async (
+export const quickSort = async ({
   array,
   updateArray,
-  setActiveIndex,
-  setCompareIndex,
-  setPivotIndex,
-  evalStateRef,
-  speedRef,
-  playerStateRef,
-  trackRef,
-) => {
-  await quickSortRecursive(
-    array,
-    0,
-    array.length - 1,
-    setActiveIndex,
-    setCompareIndex,
-    setPivotIndex,
-    evalStateRef,
-    speedRef,
-    playerStateRef,
-    trackRef,
+  updateTracking,
+  history,
+  player,
+}) => {
+  await quickSortRecursive({
+    arr: array,
+    start: 0,
+    end: array.length - 1,
     updateArray,
-  );
-
-  setActiveIndex(null);
-  setCompareIndex(null);
-  setPivotIndex(null);
-
+    updateTracking,
+    history,
+    player,
+  });
   return array;
 };

src/algorithms/quickSort.js

@@ -1,43 +1,26 @@
-import { sleep } from '../../utils/sleep';
-import { pause } from '../../utils/pause';
+import { pause } from '../utils/pause';
 
-export const selectionSort = async (
+export const selectionSort = async ({
   array,
   updateArray,
-  setActiveIndex,
-  setCompareIndex,
-  evalStateRef,
-  speedRef,
-  playerStateRef,
-  trackRef,
-) => {
-  let arr = [...array];
-  for (let i = 0; i < arr.length; i++) {
+  updateTracking,
+  history,
+  player,
+}) => {
+  for (let i = 0; i < array.length; i++) {
     let indexMin = i;
-    setActiveIndex(indexMin);
-    updateArray([...arr], indexMin, null, null);
-    for (let j = i + 1; j < arr.length; j++) {
-      setCompareIndex(j);
-      updateArray([...arr], indexMin, j, null);
-      await pause(evalStateRef, playerStateRef, trackRef, speedRef);
-      if (evalStateRef.current === 'notStarted') {
-        throw new Error('cancelSort');
-      }
-
-      if (arr[j] < arr[indexMin]) {
+    for (let j = i + 1; j < array.length; j++) {
+      await pause({ history, player });
+      updateTracking({ activeIndex: indexMin, compareIndex: j });
+      if (array[j] < array[indexMin]) {
         indexMin = j;
-        setActiveIndex(indexMin);
-        updateArray([...arr], indexMin, null, null);
       }
     }
 
-    let tmp = arr[i];
-    arr[i] = arr[indexMin];
-    arr[indexMin] = tmp;
-
-    updateArray([...arr], indexMin, null, null);
+    let tmp = array[i];
+    array[i] = array[indexMin];
+    array[indexMin] = tmp;
 
-    await sleep(100, speedRef.current);
-    setCompareIndex(null);
+    updateArray(array);
   }
 };