Refactor: Codebase Cleanup #2, use refs to trigger visualizer methods

agonyz · agonyz · commit 9b7d86a8abc2 · 2024-07-02T02:03:44.000+02:00
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,11 +1,12 @@
 import { SelectionsortVisualizer } from './components/visualizers/SelectionsortVisualizer.tsx';
 import { BubblesortVisualizer } from './components/visualizers/BubblesortVisualizer.tsx';
 import { MergeSortVisualizer } from './components/visualizers/MergesortVisualizer.tsx';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Container, Row } from 'react-bootstrap';
 import { generateRandomArray } from './utils';
-import { SettingsPanel } from './components/settings/SettingsPanel.tsx';
+import { SettingsPanel } from './components/panels/SettingsPanel.tsx';
 import { Navigation } from './components/navigation/Navigation.tsx';
+import { ControlPanel } from './components/panels/ControlPanel.tsx';
 
 // todo: refactor the components, upcycle shared states
 export const App = () => {
@@ -15,6 +16,21 @@ export const App = () => {
   const [isSorting, setIsSorting] = useState<boolean>(false);
   const [array, setArray] = useState<number[]>(generateRandomArray(arraySize));
 
+  // sort method refs
+  const bubbleSortRef = useRef<(array: number[]) => void>(() => {}); // initialize with an empty function (ts error)
+  const selectionSortRef = useRef<(array: number[]) => void>(() => {});
+  const mergeSortRef = useRef<(array: number[]) => void>(() => {});
+
+  const resetComponent = () => {
+    const newArray = generateRandomArray(arraySize);
+    setArray(newArray);
+  };
+
+  useEffect(() => {
+    const array = generateRandomArray(arraySize);
+    setArray(array);
+  }, [arraySize]);
+
   const renderVisualizer = () => {
     switch (sortType) {
       case 'bubble':
@@ -26,6 +42,7 @@ export const App = () => {
             sortDelay={sortDelay}
             isSorting={isSorting}
             setIsSorting={setIsSorting}
+            sortRef={bubbleSortRef}
           />
         );
       case 'selection':
@@ -37,6 +54,7 @@ export const App = () => {
             sortDelay={sortDelay}
             isSorting={isSorting}
             setIsSorting={setIsSorting}
+            sortRef={selectionSortRef}
           />
         );
       case 'merge':
@@ -48,6 +66,7 @@ export const App = () => {
             sortDelay={sortDelay}
             isSorting={isSorting}
             setIsSorting={setIsSorting}
+            sortRef={mergeSortRef}
           />
         );
       default:
@@ -59,14 +78,19 @@ export const App = () => {
             sortDelay={sortDelay}
             isSorting={isSorting}
             setIsSorting={setIsSorting}
+            sortRef={bubbleSortRef}
           />
         );
     }
   };
 
   return (
     <>
-      <Navigation sortType={sortType} setSortType={setSortType} />
+      <Navigation
+        sortType={sortType}
+        setSortType={setSortType}
+        isSorting={isSorting}
+      />
       <Container>
         <Row className="mt-4">
           <SettingsPanel
@@ -78,6 +102,26 @@ export const App = () => {
           />
         </Row>
         {renderVisualizer()}
+        <ControlPanel
+          isSorting={isSorting}
+          onGenerate={resetComponent}
+          onSort={() => {
+            switch (sortType) {
+              case 'bubble':
+                bubbleSortRef.current && bubbleSortRef.current(array);
+                break;
+              case 'selection':
+                selectionSortRef.current && selectionSortRef.current(array);
+                break;
+              case 'merge':
+                mergeSortRef.current && mergeSortRef.current(array);
+                break;
+              default:
+                bubbleSortRef.current && bubbleSortRef.current(array);
+                break;
+            }
+          }}
+        />
       </Container>
     </>
   );
diff --git a/src/components/navigation/Navigation.tsx b/src/components/navigation/Navigation.tsx
@@ -6,6 +6,7 @@ import React from 'react';
 export const Navigation: React.FC<NavigationProps> = ({
   sortType,
   setSortType,
+  isSorting,
 }) => {
   return (
     <Navbar collapseOnSelect expand="lg" className="bg-body-tertiary">
@@ -24,6 +25,7 @@ export const Navigation: React.FC<NavigationProps> = ({
                 as="select"
                 value={sortType}
                 onChange={(e) => setSortType(e.target.value)}
+                disabled={isSorting}
               >
                 <option value="bubble">Bubblesort</option>
                 <option value="selection">Selectionsort</option>
diff --git a/src/components/panels/ControlPanel.tsx b/src/components/panels/ControlPanel.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Button, Col, Row } from 'react-bootstrap';
+
+interface ControlPanelProps {
+  isSorting: boolean;
+  onGenerate: () => void;
+  onSort: () => void;
+}
+
+export const ControlPanel: React.FC<ControlPanelProps> = ({
+  isSorting,
+  onGenerate,
+  onSort,
+}) => {
+  return (
+    <Row className="justify-content-center mt-3">
+      <Col className="d-flex justify-content-center">
+        <Button className="mt-5 mx-3" onClick={onGenerate} disabled={isSorting}>
+          Generate
+        </Button>
+      </Col>
+      <Col className="d-flex justify-content-center">
+        <Button className="mt-5" onClick={onSort} disabled={isSorting}>
+          Sort
+        </Button>
+      </Col>
+    </Row>
+  );
+};
diff --git a/src/components/panels/SettingsPanel.tsx b/src/components/panels/SettingsPanel.tsx
diff --git a/src/components/visualizers/BubblesortVisualizer.tsx b/src/components/visualizers/BubblesortVisualizer.tsx
@@ -1,17 +1,16 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useGSAP } from '@gsap/react';
 import gsap from 'gsap';
-import { Button, Col, Container, Row } from 'react-bootstrap';
-import { delay, generateRandomArray } from '../../utils';
+import { Col, Container, Row } from 'react-bootstrap';
+import { delay } from '../../utils';
 import { VisualizerProps } from '../../interfaces';
 
 export const BubblesortVisualizer: React.FC<VisualizerProps> = ({
-  arraySize,
   array,
   setArray,
   sortDelay,
-  isSorting,
   setIsSorting,
+  sortRef,
 }) => {
   const [currentJ, setCurrentJ] = useState<number | null>(null);
 
@@ -21,15 +20,8 @@ export const BubblesortVisualizer: React.FC<VisualizerProps> = ({
   const { contextSafe } = useGSAP({ scope: container });
 
   useEffect(() => {
-    const array = generateRandomArray(arraySize);
-    setArray(array);
-  }, [arraySize]);
-
-  const resetComponent = () => {
-    const array = generateRandomArray(arraySize);
-    setArray(array);
-    setCurrentJ(null);
-  };
+    sortRef.current = (array: number[]) => bubbleSort(array);
+  }, [sortRef]);
 
   const bubbleSort = async (array: number[]) => {
     setIsSorting(true);
@@ -130,26 +122,6 @@ export const BubblesortVisualizer: React.FC<VisualizerProps> = ({
             </Col>
           ))}
         </Row>
-        <Row className="justify-content-center mt-3">
-          <Col className="d-flex justify-content-center">
-            <Button
-              className="mt-5 mx-3"
-              onClick={() => resetComponent()}
-              disabled={isSorting}
-            >
-              Generate
-            </Button>
-          </Col>
-          <Col className="d-flex justify-content-center">
-            <Button
-              className="mt-5"
-              onClick={() => bubbleSort(array)}
-              disabled={isSorting}
-            >
-              Sort
-            </Button>
-          </Col>
-        </Row>
       </Container>
     </>
   );
diff --git a/src/components/visualizers/MergesortVisualizer.tsx b/src/components/visualizers/MergesortVisualizer.tsx
@@ -1,31 +1,23 @@
 import React, { useEffect, useRef } from 'react';
 import { useGSAP } from '@gsap/react';
 import gsap from 'gsap';
-import { Button, Col, Container, Row } from 'react-bootstrap';
-import { generateRandomArray } from '../../utils';
+import { Col, Container, Row } from 'react-bootstrap';
 import { VisualizerProps } from '../../interfaces';
 
 export const MergeSortVisualizer: React.FC<VisualizerProps> = ({
-  arraySize,
   array,
   setArray,
-  //sortDelay,
-  isSorting,
   setIsSorting,
+  sortRef,
 }) => {
   const boxRefs = useRef<(HTMLDivElement | null)[]>([]);
   const container = useRef(null);
   const { contextSafe } = useGSAP({ scope: container });
   const tl = gsap.timeline(); // todo: find better way than using global gsap timeline element
 
   useEffect(() => {
-    resetComponent();
-  }, [arraySize]);
-
-  const resetComponent = () => {
-    const array = generateRandomArray(arraySize);
-    setArray(array);
-  };
+    sortRef.current = () => startSort();
+  }, [sortRef]);
 
   const mergeSort = async (array: number[], left = 0): Promise<number[]> => {
     if (array.length <= 1) {
@@ -153,26 +145,6 @@ export const MergeSortVisualizer: React.FC<VisualizerProps> = ({
             </Col>
           ))}
         </Row>
-        <Row className="justify-content-center mt-3">
-          <Col className="d-flex justify-content-center">
-            <Button
-              className="mt-5 mx-3"
-              onClick={() => resetComponent()}
-              disabled={isSorting}
-            >
-              Generate
-            </Button>
-          </Col>
-          <Col className="d-flex justify-content-center">
-            <Button
-              className="mt-5"
-              onClick={() => startSort()}
-              disabled={isSorting}
-            >
-              Sort
-            </Button>
-          </Col>
-        </Row>
       </Container>
     </>
   );
diff --git a/src/components/visualizers/SelectionsortVisualizer.tsx b/src/components/visualizers/SelectionsortVisualizer.tsx
@@ -1,17 +1,16 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useGSAP } from '@gsap/react';
 import gsap from 'gsap';
-import { Button, Col, Container, Row } from 'react-bootstrap';
-import { delay, generateRandomArray } from '../../utils';
+import { Col, Container, Row } from 'react-bootstrap';
+import { delay } from '../../utils';
 import { VisualizerProps } from '../../interfaces';
 
 export const SelectionsortVisualizer: React.FC<VisualizerProps> = ({
-  arraySize,
   array,
   setArray,
   sortDelay,
-  isSorting,
   setIsSorting,
+  sortRef,
 }) => {
   const [currentI, setCurrentI] = useState<number | null>(null);
   const [currentJ, setCurrentJ] = useState<number | null>(null);
@@ -23,17 +22,8 @@ export const SelectionsortVisualizer: React.FC<VisualizerProps> = ({
   const { contextSafe } = useGSAP({ scope: container });
 
   useEffect(() => {
-    const array = generateRandomArray(arraySize);
-    setArray(array);
-  }, [arraySize]);
-
-  const resetComponent = () => {
-    const array = generateRandomArray(arraySize);
-    setArray(array);
-    setCurrentI(null);
-    setCurrentJ(null);
-    setCurrentMin(null);
-  };
+    sortRef.current = (array: number[]) => selectionSort(array);
+  }, [sortRef]);
 
   const selectionSort = async (array: number[]) => {
     let min = null;
@@ -157,26 +147,6 @@ export const SelectionsortVisualizer: React.FC<VisualizerProps> = ({
             </Col>
           ))}
         </Row>
-        <Row className="justify-content-center mt-3">
-          <Col className="d-flex justify-content-center">
-            <Button
-              className="mt-5 mx-3"
-              onClick={() => resetComponent()}
-              disabled={isSorting}
-            >
-              Generate
-            </Button>
-          </Col>
-          <Col className="d-flex justify-content-center">
-            <Button
-              className="mt-5"
-              onClick={() => selectionSort(array)}
-              disabled={isSorting}
-            >
-              Sort
-            </Button>
-          </Col>
-        </Row>
       </Container>
     </>
   );
diff --git a/src/interfaces/navigation.ts b/src/interfaces/navigation.ts
@@ -1,4 +1,5 @@
 export interface NavigationProps {
   sortType: string;
   setSortType: (sortType: string) => void;
+  isSorting: boolean;
 }
diff --git a/src/interfaces/visualizers.ts b/src/interfaces/visualizers.ts
@@ -1,8 +1,11 @@
+import { MutableRefObject } from 'react';
+
 export interface VisualizerProps {
   arraySize: number;
   array: number[];
   setArray: (array: number[]) => void;
   sortDelay: number;
   isSorting: boolean;
   setIsSorting: (sorting: boolean) => void;
+  sortRef: MutableRefObject<(array: number[]) => void>;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`export interface NavigationProps {`
`2`	`2`	`sortType: string;`
`3`	`3`	`setSortType: (sortType: string) => void;`
	`4`	`+ isSorting: boolean;`
`4`	`5`	`}`