Skip to content

Commit 9a2f41f

Browse files
agonyzagonyz
authored
Refactor: Codebase Cleanup (#2)
1 parent 67a9d60 commit 9a2f41f

File tree

10 files changed

+202
-143
lines changed

10 files changed

+202
-143
lines changed

‎src/App.tsx

Lines changed: 65 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,84 @@
1-
import { SelectionsortVisualizer } from './components/SelectionsortVisualizer.tsx';
2-
import { BubblesortVisualizer } from './components/BubblesortVisualizer.tsx';
3-
import { MergeSortVisualizer } from './components/MergesortVisualizer.tsx';
1+
import { SelectionsortVisualizer } from './components/visualizers/SelectionsortVisualizer.tsx';
2+
import { BubblesortVisualizer } from './components/visualizers/BubblesortVisualizer.tsx';
3+
import { MergeSortVisualizer } from './components/visualizers/MergesortVisualizer.tsx';
44
import { useState } from 'react';
5-
import { Container, Form, Nav, Navbar } from 'react-bootstrap';
6-
import { Github } from 'react-bootstrap-icons';
5+
import { Container, Row } from 'react-bootstrap';
6+
import { generateRandomArray } from './utils';
7+
import { SettingsPanel } from './components/settings/SettingsPanel.tsx';
8+
import { Navigation } from './components/navigation/Navigation.tsx';
79

810
// todo: refactor the components, upcycle shared states
911
export const App = () => {
1012
const [sortType, setSortType] = useState<string>('bubble');
13+
const [arraySize, setArraySize] = useState<number>(10);
14+
const [sortDelay, setSortDelay] = useState<number>(500);
15+
const [isSorting, setIsSorting] = useState<boolean>(false);
16+
const [array, setArray] = useState<number[]>(generateRandomArray(arraySize));
1117

1218
const renderVisualizer = () => {
1319
switch (sortType) {
1420
case 'bubble':
15-
return <BubblesortVisualizer />;
21+
return (
22+
<BubblesortVisualizer
23+
arraySize={arraySize}
24+
array={array}
25+
setArray={setArray}
26+
sortDelay={sortDelay}
27+
isSorting={isSorting}
28+
setIsSorting={setIsSorting}
29+
/>
30+
);
1631
case 'selection':
17-
return <SelectionsortVisualizer />;
32+
return (
33+
<SelectionsortVisualizer
34+
arraySize={arraySize}
35+
array={array}
36+
setArray={setArray}
37+
sortDelay={sortDelay}
38+
isSorting={isSorting}
39+
setIsSorting={setIsSorting}
40+
/>
41+
);
1842
case 'merge':
19-
return <MergeSortVisualizer />;
43+
return (
44+
<MergeSortVisualizer
45+
arraySize={arraySize}
46+
array={array}
47+
setArray={setArray}
48+
sortDelay={sortDelay}
49+
isSorting={isSorting}
50+
setIsSorting={setIsSorting}
51+
/>
52+
);
2053
default:
21-
return <BubblesortVisualizer />;
54+
return (
55+
<BubblesortVisualizer
56+
arraySize={arraySize}
57+
array={array}
58+
setArray={setArray}
59+
sortDelay={sortDelay}
60+
isSorting={isSorting}
61+
setIsSorting={setIsSorting}
62+
/>
63+
);
2264
}
2365
};
66+
2467
return (
2568
<>
26-
<Navbar collapseOnSelect expand="lg" className="bg-body-tertiary">
27-
<Container fluid>
28-
<Navbar.Brand href="#">Sort Algorithm Visualizer</Navbar.Brand>
29-
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
30-
<Navbar.Collapse id="responsive-navbar-nav">
31-
<Nav className="me-auto">
32-
<Nav.Link target="_blank" href="https://github.com/agonyz">
33-
<Github size={35} />
34-
</Nav.Link>
35-
</Nav>
36-
<Nav>
37-
<Form.Group controlId="formSortType" className="d-flex">
38-
<Form.Control
39-
as="select"
40-
value={sortType}
41-
onChange={(e) => setSortType(e.target.value)}
42-
>
43-
<option value="bubble">Bubblesort</option>
44-
<option value="selection">Selectionsort</option>
45-
<option value="merge">Mergesort</option>
46-
</Form.Control>
47-
</Form.Group>
48-
</Nav>
49-
</Navbar.Collapse>
50-
</Container>
51-
</Navbar>
52-
{renderVisualizer()}
69+
<Navigation sortType={sortType} setSortType={setSortType} />
70+
<Container>
71+
<Row className="mt-4">
72+
<SettingsPanel
73+
arraySize={arraySize}
74+
setArraySize={setArraySize}
75+
sortDelay={sortDelay}
76+
setSortDelay={setSortDelay}
77+
isSorting={isSorting}
78+
/>
79+
</Row>
80+
{renderVisualizer()}
81+
</Container>
5382
</>
5483
);
5584
};

‎src/components/navigation/Navigation.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Container, Form, Nav, Navbar } from 'react-bootstrap';
2+
import { Github } from 'react-bootstrap-icons';
3+
import { NavigationProps } from '../../interfaces';
4+
import React from 'react';
5+
6+
export const Navigation: React.FC<NavigationProps> = ({
7+
sortType,
8+
setSortType,
9+
}) => {
10+
return (
11+
<Navbar collapseOnSelect expand="lg" className="bg-body-tertiary">
12+
<Container fluid>
13+
<Navbar.Brand href="#">Sort Algorithm Visualizer</Navbar.Brand>
14+
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
15+
<Navbar.Collapse id="responsive-navbar-nav">
16+
<Nav className="me-auto">
17+
<Nav.Link target="_blank" href="https://github.com/agonyz">
18+
<Github size={35} />
19+
</Nav.Link>
20+
</Nav>
21+
<Nav>
22+
<Form.Group controlId="formSortType" className="d-flex">
23+
<Form.Control
24+
as="select"
25+
value={sortType}
26+
onChange={(e) => setSortType(e.target.value)}
27+
>
28+
<option value="bubble">Bubblesort</option>
29+
<option value="selection">Selectionsort</option>
30+
<option value="merge">Mergesort</option>
31+
</Form.Control>
32+
</Form.Group>
33+
</Nav>
34+
</Navbar.Collapse>
35+
</Container>
36+
</Navbar>
37+
);
38+
};

‎src/components/settings/SettingsPanel.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { FC } from 'react';
2+
import { Form, Col } from 'react-bootstrap';
3+
import { SettingsPanelProps } from '../../interfaces';
4+
5+
export const SettingsPanel: FC<SettingsPanelProps> = ({
6+
arraySize,
7+
setArraySize,
8+
sortDelay,
9+
setSortDelay,
10+
isSorting,
11+
}) => {
12+
return (
13+
<>
14+
<Col>
15+
<Form.Group controlId="formArraySize">
16+
<Form.Label>Array Size: {arraySize}</Form.Label>
17+
<Form.Range
18+
value={arraySize}
19+
onChange={(e) => setArraySize(parseInt(e.target.value))}
20+
min={5}
21+
max={15}
22+
disabled={isSorting}
23+
/>
24+
</Form.Group>
25+
</Col>
26+
<Col>
27+
<Form.Group controlId="formSortDelay">
28+
<Form.Label>Sort Delay (ms): {sortDelay}</Form.Label>
29+
<Form.Range
30+
value={sortDelay}
31+
onChange={(e) => setSortDelay(parseInt(e.target.value))}
32+
min={1}
33+
max={1000}
34+
disabled={isSorting}
35+
/>
36+
</Form.Group>
37+
</Col>
38+
</>
39+
);
40+
};

‎src/components/BubblesortVisualizer.tsx renamed to ‎src/components/visualizers/BubblesortVisualizer.tsx

Lines changed: 12 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
1-
import { useEffect, useRef, useState } from 'react';
1+
import React, { useEffect, useRef, useState } from 'react';
22
import { useGSAP } from '@gsap/react';
33
import gsap from 'gsap';
4-
import { Button, Col, Container, Form, Row } from 'react-bootstrap';
5-
import { delay, generateRandomArray } from '../utils';
4+
import { Button, Col, Container, Row } from 'react-bootstrap';
5+
import { delay, generateRandomArray } from '../../utils';
6+
import { VisualizerProps } from '../../interfaces';
67

7-
export const BubblesortVisualizer = () => {
8-
const [array, setArray] = useState<number[]>([]);
9-
const [isSorting, setIsSorting] = useState<boolean>(false);
8+
export const BubblesortVisualizer: React.FC<VisualizerProps> = ({
9+
arraySize,
10+
array,
11+
setArray,
12+
sortDelay,
13+
isSorting,
14+
setIsSorting,
15+
}) => {
1016
const [currentJ, setCurrentJ] = useState<number | null>(null);
11-
const [arraySize, setArraySize] = useState<number>(10);
12-
const [sortDelay, setSortDelay] = useState<number>(500);
1317

1418
// refs
1519
const boxRefs = useRef<(HTMLDivElement | null)[]>([]);
@@ -80,33 +84,6 @@ export const BubblesortVisualizer = () => {
8084
<>
8185
<h1 className="mt-5 text-center">Bubblesort</h1>
8286
<Container ref={container} className="mt-5">
83-
<Row>
84-
<Col>
85-
<Form.Group controlId="formArraySize">
86-
<Form.Label>Array Size: {arraySize}</Form.Label>
87-
<Form.Range
88-
value={arraySize}
89-
onChange={(e) => setArraySize(parseInt(e.target.value))}
90-
min={5}
91-
max={15}
92-
disabled={isSorting}
93-
/>
94-
</Form.Group>
95-
</Col>
96-
<Col>
97-
<Form.Group controlId="formSortDelay">
98-
<Form.Label>Sort Delay (ms): {sortDelay}</Form.Label>
99-
<Form.Range
100-
value={sortDelay}
101-
onChange={(e) => setSortDelay(parseInt(e.target.value))}
102-
min={1}
103-
max={1000}
104-
disabled={isSorting}
105-
/>
106-
</Form.Group>
107-
</Col>
108-
</Row>
109-
11087
<Row className="mt-5" style={{ marginBottom: 60 }}>
11188
<Col className="d-flex justify-content-center align-items-center">
11289
<div

‎src/components/MergesortVisualizer.tsx renamed to ‎src/components/visualizers/MergesortVisualizer.tsx

Lines changed: 13 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
1-
import { useEffect, useRef, useState } from 'react';
1+
import React, { useEffect, useRef } from 'react';
22
import { useGSAP } from '@gsap/react';
33
import gsap from 'gsap';
4-
import { Button, Col, Container, Form, Row } from 'react-bootstrap';
5-
import { generateRandomArray } from '../utils';
6-
7-
export const MergeSortVisualizer = () => {
8-
const [array, setArray] = useState<number[]>([]);
9-
const [isSorting, setIsSorting] = useState<boolean>(false);
10-
const [arraySize, setArraySize] = useState<number>(10);
11-
const [sortDelay, setSortDelay] = useState<number>(500);
12-
4+
import { Button, Col, Container, Row } from 'react-bootstrap';
5+
import { generateRandomArray } from '../../utils';
6+
import { VisualizerProps } from '../../interfaces';
7+
8+
export const MergeSortVisualizer: React.FC<VisualizerProps> = ({
9+
arraySize,
10+
array,
11+
setArray,
12+
//sortDelay,
13+
isSorting,
14+
setIsSorting,
15+
}) => {
1316
const boxRefs = useRef<(HTMLDivElement | null)[]>([]);
1417
const container = useRef(null);
1518
const { contextSafe } = useGSAP({ scope: container });
@@ -135,33 +138,6 @@ export const MergeSortVisualizer = () => {
135138
<>
136139
<h1 className="mt-5 text-center">Merge Sort</h1>
137140
<Container ref={container} className="mt-5">
138-
<Row>
139-
<Col>
140-
<Form.Group controlId="formArraySize">
141-
<Form.Label>Array Size: {arraySize}</Form.Label>
142-
<Form.Range
143-
value={arraySize}
144-
onChange={(e) => setArraySize(parseInt(e.target.value))}
145-
min={5}
146-
max={15}
147-
disabled={isSorting}
148-
/>
149-
</Form.Group>
150-
</Col>
151-
<Col>
152-
<Form.Group controlId="formSortDelay">
153-
<Form.Label>Sort Delay (ms): {sortDelay}</Form.Label>
154-
<Form.Range
155-
value={sortDelay}
156-
onChange={(e) => setSortDelay(parseInt(e.target.value))}
157-
min={1}
158-
max={5000}
159-
disabled={isSorting}
160-
/>
161-
</Form.Group>
162-
</Col>
163-
</Row>
164-
165141
<Row className="mt-5">
166142
{array.map((v, i) => (
167143
<Col

‎src/components/SelectionsortVisualizer.tsx renamed to ‎src/components/visualizers/SelectionsortVisualizer.tsx

Lines changed: 12 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
1-
import { useEffect, useRef, useState } from 'react';
1+
import React, { useEffect, useRef, useState } from 'react';
22
import { useGSAP } from '@gsap/react';
33
import gsap from 'gsap';
4-
import { Button, Col, Container, Form, Row } from 'react-bootstrap';
5-
import { delay, generateRandomArray } from '../utils';
4+
import { Button, Col, Container, Row } from 'react-bootstrap';
5+
import { delay, generateRandomArray } from '../../utils';
6+
import { VisualizerProps } from '../../interfaces';
67

7-
export const SelectionsortVisualizer = () => {
8-
const [array, setArray] = useState<number[]>([]);
9-
const [isSorting, setIsSorting] = useState<boolean>(false);
8+
export const SelectionsortVisualizer: React.FC<VisualizerProps> = ({
9+
arraySize,
10+
array,
11+
setArray,
12+
sortDelay,
13+
isSorting,
14+
setIsSorting,
15+
}) => {
1016
const [currentI, setCurrentI] = useState<number | null>(null);
1117
const [currentJ, setCurrentJ] = useState<number | null>(null);
1218
const [currentMin, setCurrentMin] = useState<number | null>(null);
13-
const [arraySize, setArraySize] = useState<number>(10);
14-
const [sortDelay, setSortDelay] = useState<number>(500);
1519

1620
// refs
1721
const boxRefs = useRef<(HTMLDivElement | null)[]>([]);
@@ -94,33 +98,6 @@ export const SelectionsortVisualizer = () => {
9498
<>
9599
<h1 className="mt-5 text-center">Selectionsort</h1>
96100
<Container ref={container} className="mt-5">
97-
<Row>
98-
<Col>
99-
<Form.Group controlId="formArraySize">
100-
<Form.Label>Array Size: {arraySize}</Form.Label>
101-
<Form.Range
102-
value={arraySize}
103-
onChange={(e) => setArraySize(parseInt(e.target.value))}
104-
min={5}
105-
max={15}
106-
disabled={isSorting}
107-
/>
108-
</Form.Group>
109-
</Col>
110-
<Col>
111-
<Form.Group controlId="formSortDelay">
112-
<Form.Label>Sort Delay (ms): {sortDelay}</Form.Label>
113-
<Form.Range
114-
value={sortDelay}
115-
onChange={(e) => setSortDelay(parseInt(e.target.value))}
116-
min={1}
117-
max={1000}
118-
disabled={isSorting}
119-
/>
120-
</Form.Group>
121-
</Col>
122-
</Row>
123-
124101
<Row className="mt-5" style={{ marginBottom: 60 }}>
125102
<Col className="d-flex justify-content-center align-items-center">
126103
<div

‎src/interfaces/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export { type VisualizerProps } from './visualizers';
2+
export { type SettingsPanelProps } from './settings';
3+
export { type NavigationProps } from './navigation';

‎src/interfaces/navigation.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export interface NavigationProps {
2+
sortType: string;
3+
setSortType: (sortType: string) => void;
4+
}

0 commit comments

Comments
 (0)