Refactor: Codebase Cleanup

src/App.tsx

@@ -1,55 +1,84 @@
-import { SelectionsortVisualizer } from './components/SelectionsortVisualizer.tsx';
-import { BubblesortVisualizer } from './components/BubblesortVisualizer.tsx';
-import { MergeSortVisualizer } from './components/MergesortVisualizer.tsx';
+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 { Container, Form, Nav, Navbar } from 'react-bootstrap';
-import { Github } from 'react-bootstrap-icons';
+import { Container, Row } from 'react-bootstrap';
+import { generateRandomArray } from './utils';
+import { SettingsPanel } from './components/settings/SettingsPanel.tsx';
+import { Navigation } from './components/navigation/Navigation.tsx';
 
 // todo: refactor the components, upcycle shared states
 export const App = () => {
   const [sortType, setSortType] = useState<string>('bubble');
+  const [arraySize, setArraySize] = useState<number>(10);
+  const [sortDelay, setSortDelay] = useState<number>(500);
+  const [isSorting, setIsSorting] = useState<boolean>(false);
+  const [array, setArray] = useState<number[]>(generateRandomArray(arraySize));
 
   const renderVisualizer = () => {
     switch (sortType) {
       case 'bubble':
-        return <BubblesortVisualizer />;
+        return (
+          <BubblesortVisualizer
+            arraySize={arraySize}
+            array={array}
+            setArray={setArray}
+            sortDelay={sortDelay}
+            isSorting={isSorting}
+            setIsSorting={setIsSorting}
+          />
+        );
       case 'selection':
-        return <SelectionsortVisualizer />;
+        return (
+          <SelectionsortVisualizer
+            arraySize={arraySize}
+            array={array}
+            setArray={setArray}
+            sortDelay={sortDelay}
+            isSorting={isSorting}
+            setIsSorting={setIsSorting}
+          />
+        );
       case 'merge':
-        return <MergeSortVisualizer />;
+        return (
+          <MergeSortVisualizer
+            arraySize={arraySize}
+            array={array}
+            setArray={setArray}
+            sortDelay={sortDelay}
+            isSorting={isSorting}
+            setIsSorting={setIsSorting}
+          />
+        );
       default:
-        return <BubblesortVisualizer />;
+        return (
+          <BubblesortVisualizer
+            arraySize={arraySize}
+            array={array}
+            setArray={setArray}
+            sortDelay={sortDelay}
+            isSorting={isSorting}
+            setIsSorting={setIsSorting}
+          />
+        );
     }
   };
+
   return (
     <>
-      <Navbar collapseOnSelect expand="lg" className="bg-body-tertiary">
-        <Container fluid>
-          <Navbar.Brand href="#">Sort Algorithm Visualizer</Navbar.Brand>
-          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
-          <Navbar.Collapse id="responsive-navbar-nav">
-            <Nav className="me-auto">
-              <Nav.Link target="_blank" href="https://github.com/agonyz">
-                <Github size={35} />
-              </Nav.Link>
-            </Nav>
-            <Nav>
-              <Form.Group controlId="formSortType" className="d-flex">
-                <Form.Control
-                  as="select"
-                  value={sortType}
-                  onChange={(e) => setSortType(e.target.value)}
-                >
-                  <option value="bubble">Bubblesort</option>
-                  <option value="selection">Selectionsort</option>
-                  <option value="merge">Mergesort</option>
-                </Form.Control>
-              </Form.Group>
-            </Nav>
-          </Navbar.Collapse>
-        </Container>
-      </Navbar>
-      {renderVisualizer()}
+      <Navigation sortType={sortType} setSortType={setSortType} />
+      <Container>
+        <Row className="mt-4">
+          <SettingsPanel
+            arraySize={arraySize}
+            setArraySize={setArraySize}
+            sortDelay={sortDelay}
+            setSortDelay={setSortDelay}
+            isSorting={isSorting}
+          />
+        </Row>
+        {renderVisualizer()}
+      </Container>
     </>
   );
 };

src/components/navigation/Navigation.tsx

@@ -0,0 +1,38 @@
+import { Container, Form, Nav, Navbar } from 'react-bootstrap';
+import { Github } from 'react-bootstrap-icons';
+import { NavigationProps } from '../../interfaces';
+import React from 'react';
+
+export const Navigation: React.FC<NavigationProps> = ({
+  sortType,
+  setSortType,
+}) => {
+  return (
+    <Navbar collapseOnSelect expand="lg" className="bg-body-tertiary">
+      <Container fluid>
+        <Navbar.Brand href="#">Sort Algorithm Visualizer</Navbar.Brand>
+        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
+        <Navbar.Collapse id="responsive-navbar-nav">
+          <Nav className="me-auto">
+            <Nav.Link target="_blank" href="https://github.com/agonyz">
+              <Github size={35} />
+            </Nav.Link>
+          </Nav>
+          <Nav>
+            <Form.Group controlId="formSortType" className="d-flex">
+              <Form.Control
+                as="select"
+                value={sortType}
+                onChange={(e) => setSortType(e.target.value)}
+              >
+                <option value="bubble">Bubblesort</option>
+                <option value="selection">Selectionsort</option>
+                <option value="merge">Mergesort</option>
+              </Form.Control>
+            </Form.Group>
+          </Nav>
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+  );
+};

src/components/settings/SettingsPanel.tsx

@@ -0,0 +1,40 @@
+import { FC } from 'react';
+import { Form, Col } from 'react-bootstrap';
+import { SettingsPanelProps } from '../../interfaces';
+
+export const SettingsPanel: FC<SettingsPanelProps> = ({
+  arraySize,
+  setArraySize,
+  sortDelay,
+  setSortDelay,
+  isSorting,
+}) => {
+  return (
+    <>
+      <Col>
+        <Form.Group controlId="formArraySize">
+          <Form.Label>Array Size: {arraySize}</Form.Label>
+          <Form.Range
+            value={arraySize}
+            onChange={(e) => setArraySize(parseInt(e.target.value))}
+            min={5}
+            max={15}
+            disabled={isSorting}
+          />
+        </Form.Group>
+      </Col>
+      <Col>
+        <Form.Group controlId="formSortDelay">
+          <Form.Label>Sort Delay (ms): {sortDelay}</Form.Label>
+          <Form.Range
+            value={sortDelay}
+            onChange={(e) => setSortDelay(parseInt(e.target.value))}
+            min={1}
+            max={1000}
+            disabled={isSorting}
+          />
+        </Form.Group>
+      </Col>
+    </>
+  );
+};

src/components/BubblesortVisualizer.tsx → src/components/visualizers/BubblesortVisualizer.tsx

@@ -1,15 +1,19 @@
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useGSAP } from '@gsap/react';
 import gsap from 'gsap';
-import { Button, Col, Container, Form, Row } from 'react-bootstrap';
-import { delay, generateRandomArray } from '../utils';
+import { Button, Col, Container, Row } from 'react-bootstrap';
+import { delay, generateRandomArray } from '../../utils';
+import { VisualizerProps } from '../../interfaces';
 
-export const BubblesortVisualizer = () => {
-  const [array, setArray] = useState<number[]>([]);
-  const [isSorting, setIsSorting] = useState<boolean>(false);
+export const BubblesortVisualizer: React.FC<VisualizerProps> = ({
+  arraySize,
+  array,
+  setArray,
+  sortDelay,
+  isSorting,
+  setIsSorting,
+}) => {
   const [currentJ, setCurrentJ] = useState<number | null>(null);
-  const [arraySize, setArraySize] = useState<number>(10);
-  const [sortDelay, setSortDelay] = useState<number>(500);
 
   // refs
   const boxRefs = useRef<(HTMLDivElement | null)[]>([]);
@@ -80,33 +84,6 @@ export const BubblesortVisualizer = () => {
     <>
       <h1 className="mt-5 text-center">Bubblesort</h1>
       <Container ref={container} className="mt-5">
-        <Row>
-          <Col>
-            <Form.Group controlId="formArraySize">
-              <Form.Label>Array Size: {arraySize}</Form.Label>
-              <Form.Range
-                value={arraySize}
-                onChange={(e) => setArraySize(parseInt(e.target.value))}
-                min={5}
-                max={15}
-                disabled={isSorting}
-              />
-            </Form.Group>
-          </Col>
-          <Col>
-            <Form.Group controlId="formSortDelay">
-              <Form.Label>Sort Delay (ms): {sortDelay}</Form.Label>
-              <Form.Range
-                value={sortDelay}
-                onChange={(e) => setSortDelay(parseInt(e.target.value))}
-                min={1}
-                max={1000}
-                disabled={isSorting}
-              />
-            </Form.Group>
-          </Col>
-        </Row>
-
         <Row className="mt-5" style={{ marginBottom: 60 }}>
           <Col className="d-flex justify-content-center align-items-center">
             <div

src/components/MergesortVisualizer.tsx → src/components/visualizers/MergesortVisualizer.tsx

@@ -1,15 +1,18 @@
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useGSAP } from '@gsap/react';
 import gsap from 'gsap';
-import { Button, Col, Container, Form, Row } from 'react-bootstrap';
-import { generateRandomArray } from '../utils';
-
-export const MergeSortVisualizer = () => {
-  const [array, setArray] = useState<number[]>([]);
-  const [isSorting, setIsSorting] = useState<boolean>(false);
-  const [arraySize, setArraySize] = useState<number>(10);
-  const [sortDelay, setSortDelay] = useState<number>(500);
-
+import { Button, Col, Container, Row } from 'react-bootstrap';
+import { generateRandomArray } from '../../utils';
+import { VisualizerProps } from '../../interfaces';
+
+export const MergeSortVisualizer: React.FC<VisualizerProps> = ({
+  arraySize,
+  array,
+  setArray,
+  //sortDelay,
+  isSorting,
+  setIsSorting,
+}) => {
   const boxRefs = useRef<(HTMLDivElement | null)[]>([]);
   const container = useRef(null);
   const { contextSafe } = useGSAP({ scope: container });
@@ -135,33 +138,6 @@ export const MergeSortVisualizer = () => {
     <>
       <h1 className="mt-5 text-center">Merge Sort</h1>
       <Container ref={container} className="mt-5">
-        <Row>
-          <Col>
-            <Form.Group controlId="formArraySize">
-              <Form.Label>Array Size: {arraySize}</Form.Label>
-              <Form.Range
-                value={arraySize}
-                onChange={(e) => setArraySize(parseInt(e.target.value))}
-                min={5}
-                max={15}
-                disabled={isSorting}
-              />
-            </Form.Group>
-          </Col>
-          <Col>
-            <Form.Group controlId="formSortDelay">
-              <Form.Label>Sort Delay (ms): {sortDelay}</Form.Label>
-              <Form.Range
-                value={sortDelay}
-                onChange={(e) => setSortDelay(parseInt(e.target.value))}
-                min={1}
-                max={5000}
-                disabled={isSorting}
-              />
-            </Form.Group>
-          </Col>
-        </Row>
-
         <Row className="mt-5">
           {array.map((v, i) => (
             <Col

src/components/SelectionsortVisualizer.tsx → src/components/visualizers/SelectionsortVisualizer.tsx

@@ -1,17 +1,21 @@
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useGSAP } from '@gsap/react';
 import gsap from 'gsap';
-import { Button, Col, Container, Form, Row } from 'react-bootstrap';
-import { delay, generateRandomArray } from '../utils';
+import { Button, Col, Container, Row } from 'react-bootstrap';
+import { delay, generateRandomArray } from '../../utils';
+import { VisualizerProps } from '../../interfaces';
 
-export const SelectionsortVisualizer = () => {
-  const [array, setArray] = useState<number[]>([]);
-  const [isSorting, setIsSorting] = useState<boolean>(false);
+export const SelectionsortVisualizer: React.FC<VisualizerProps> = ({
+  arraySize,
+  array,
+  setArray,
+  sortDelay,
+  isSorting,
+  setIsSorting,
+}) => {
   const [currentI, setCurrentI] = useState<number | null>(null);
   const [currentJ, setCurrentJ] = useState<number | null>(null);
   const [currentMin, setCurrentMin] = useState<number | null>(null);
-  const [arraySize, setArraySize] = useState<number>(10);
-  const [sortDelay, setSortDelay] = useState<number>(500);
 
   // refs
   const boxRefs = useRef<(HTMLDivElement | null)[]>([]);
@@ -94,33 +98,6 @@ export const SelectionsortVisualizer = () => {
     <>
       <h1 className="mt-5 text-center">Selectionsort</h1>
       <Container ref={container} className="mt-5">
-        <Row>
-          <Col>
-            <Form.Group controlId="formArraySize">
-              <Form.Label>Array Size: {arraySize}</Form.Label>
-              <Form.Range
-                value={arraySize}
-                onChange={(e) => setArraySize(parseInt(e.target.value))}
-                min={5}
-                max={15}
-                disabled={isSorting}
-              />
-            </Form.Group>
-          </Col>
-          <Col>
-            <Form.Group controlId="formSortDelay">
-              <Form.Label>Sort Delay (ms): {sortDelay}</Form.Label>
-              <Form.Range
-                value={sortDelay}
-                onChange={(e) => setSortDelay(parseInt(e.target.value))}
-                min={1}
-                max={1000}
-                disabled={isSorting}
-              />
-            </Form.Group>
-          </Col>
-        </Row>
-
         <Row className="mt-5" style={{ marginBottom: 60 }}>
           <Col className="d-flex justify-content-center align-items-center">
             <div

src/interfaces/index.ts

@@ -0,0 +1,3 @@
+export { type VisualizerProps } from './visualizers';
+export { type SettingsPanelProps } from './settings';
+export { type NavigationProps } from './navigation';

src/interfaces/navigation.ts

@@ -0,0 +1,4 @@
+export interface NavigationProps {
+  sortType: string;
+  setSortType: (sortType: string) => void;
+}