Skip to content

Commit 9c009fe

Browse files
sasank-tadepallisasank-tadepalli
committed
Modularised the project
1 parent a69d976 commit 9c009fe

File tree

8 files changed

+151
-97
lines changed

8 files changed

+151
-97
lines changed

‎src/App.js

Lines changed: 53 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,28 @@
11
import "./App.css";
22
import { useState } from "react";
33
import Chart from "./components/Chart/Chart";
4+
import Select from "./components/Select/Select";
5+
import Button from "./components/Button/Button";
46
import { useEffect } from "react";
57

8+
import generateArray from "./helpers/generateArray";
9+
import bubbleSort from "./helpers/bubbleSort";
10+
import selectionSort from "./helpers/selectionSort";
11+
612
function App() {
713
const [data, setData] = useState([]);
814
const [isSorting, setIsSorting] = useState(false);
915
const [currIJ, setCurrIJ] = useState({ i: -1, j: -1 });
1016
const [completed, setCompleted] = useState([]);
1117
const [size, setSize] = useState(10);
1218
const [speed, setSpeed] = useState(1);
13-
14-
// console.log(completed);
15-
console.log(completed);
19+
const [algType, setAlgType] = useState(0);
1620

1721
useEffect(() => {
1822
const arr = generateArray(size);
1923
setCompleted([]);
2024
setData([...arr]);
21-
}, [size]);
22-
23-
const generateArray = (size) => {
24-
const arr = [];
25-
for (let i = 0; i < size; i++) {
26-
const num = Math.round(Math.random() * 100) + 1;
27-
// console.log(num);
28-
arr.push(num);
29-
}
30-
return [...arr];
31-
};
25+
}, [size, speed, algType]);
3226

3327
const alterStateAfterTimeOut = (arr, i, j, c, cond, index) => {
3428
setTimeout(
@@ -43,6 +37,9 @@ function App() {
4337
return [...next];
4438
});
4539
}
40+
if (i === -1 && j === -1) {
41+
setIsSorting(false);
42+
}
4643
},
4744
(500 * c) / speed,
4845
[...arr],
@@ -53,111 +50,70 @@ function App() {
5350
);
5451
};
5552

56-
const bubbleSort = () => {
57-
const array = [...data];
58-
let count = 0;
59-
for (let i = 0; i < array.length - 1; i++) {
60-
for (let j = 0; j < array.length - i - 1; j++) {
61-
alterStateAfterTimeOut(
62-
array,
63-
j,
64-
j + 1,
65-
count,
66-
j === 0,
67-
array.length - i
68-
);
69-
count++;
70-
if (array[j] > array[j + 1]) {
71-
let temp = array[j];
72-
array[j] = array[j + 1];
73-
array[j + 1] = temp;
74-
// console.log(arr);
75-
}
76-
}
77-
}
78-
alterStateAfterTimeOut(array, 0, 1, count, true, 1);
79-
alterStateAfterTimeOut(array, 0, 1, count, true, 0);
80-
alterStateAfterTimeOut(array, -1, -1, count);
81-
};
82-
83-
const selectionSort = () => {
84-
const array = [...data];
85-
let count = 0;
86-
for (let i = 0; i < array.length; i++) {
87-
let index = i;
88-
for (let j = i + 1; j < array.length; j++) {
89-
alterStateAfterTimeOut(array, i, j, count, j === i + 1, i - 1);
90-
count++;
91-
if (array[index] > array[j]) {
92-
index = j;
93-
// console.log(arr);
94-
}
95-
}
96-
let temp = array[i];
97-
array[i] = array[index];
98-
array[index] = temp;
99-
}
100-
alterStateAfterTimeOut(
101-
array,
102-
array.length - 1,
103-
array.length - 2,
104-
count,
105-
true,
106-
array.length - 2
107-
);
108-
alterStateAfterTimeOut(
109-
array,
110-
array.length - 1,
111-
array.length - 2,
112-
count,
113-
true,
114-
array.length - 1
115-
);
116-
};
117-
11853
const sortClickHandler = () => {
11954
setCompleted([]);
12055
setIsSorting(true);
121-
// bubbleSort();
122-
selectionSort();
123-
setIsSorting(false);
56+
algorithms[algType](alterStateAfterTimeOut, data);
12457
};
12558

12659
const randomizeClickHandler = () => {
60+
setCompleted([]);
12761
const arr = generateArray(size);
12862
setData([...arr]);
12963
};
13064

13165
const sizeChangeHandler = (e) => {
13266
setSize(+e.target.value);
133-
// console.log(e.target.value);
13467
};
13568

13669
const speedChangeHandler = (e) => {
13770
setSpeed(+e.target.value);
13871
};
13972

73+
const algChangeHandler = (e) => {
74+
setAlgType(+e.target.value);
75+
};
76+
77+
const algorithms = {
78+
0: bubbleSort,
79+
1: selectionSort,
80+
};
81+
14082
return (
14183
<div className="App">
14284
<h1>Sorting Visualizer</h1>
14385
<Chart data={data} currIJ={currIJ} completed={completed} />
144-
<button onClick={sortClickHandler}>Sort</button>
145-
<button onClick={randomizeClickHandler}>Randomize</button>
146-
<select value={`${size}`} onChange={sizeChangeHandler}>
147-
<option value="5">5</option>
148-
<option value="10">10</option>
149-
<option value="25">25</option>
150-
<option value="50">50</option>
151-
<option value="75">75</option>
152-
<option value="100">100</option>
153-
</select>
154-
<select value={`${speed}`} onChange={speedChangeHandler}>
155-
<option value="0.25">0.25x</option>
156-
<option value="0.5">0.5x</option>
157-
<option value="1">1x</option>
158-
<option value="2">2x</option>
159-
<option value="4">4x</option>
160-
</select>
86+
<Button
87+
btnName="Sort"
88+
onClickHandler={sortClickHandler}
89+
isDisabled={isSorting}
90+
/>
91+
<Button
92+
btnName="Randomize"
93+
onClickHandler={randomizeClickHandler}
94+
isDisabled={isSorting}
95+
/>
96+
<Select
97+
value={algType}
98+
onChangeHandler={algChangeHandler}
99+
values={[0, 1]}
100+
options={["Bubble Sort", "Selection Sort"]}
101+
isDisabled={isSorting}
102+
/>
103+
<Select
104+
value={size}
105+
onChangeHandler={sizeChangeHandler}
106+
values={[5, 10, 25, 50, 75, 100]}
107+
options={[5, 10, 25, 50, 75, 100]}
108+
isDisabled={isSorting}
109+
/>
110+
<Select
111+
value={speed}
112+
onChangeHandler={speedChangeHandler}
113+
values={[0.25, 0.5, 1, 2, 4]}
114+
options={["0.25x", "0.5x", "1x", "2x", "4x"]}
115+
isDisabled={isSorting}
116+
/>
161117
</div>
162118
);
163119
}

‎src/components/Button/Button.css

Whitespace-only changes.

‎src/components/Button/Button.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import "./Button.css";
2+
3+
const Button = (props) => {
4+
return (
5+
<button onClick={props.onClickHandler} disabled={props.isDisabled}>
6+
{props.btnName}
7+
</button>
8+
);
9+
};
10+
11+
export default Button;

‎src/components/Select/Select.css

Whitespace-only changes.

‎src/components/Select/Select.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import "./Select.css";
2+
3+
const Select = (props) => {
4+
let options = props.options.map((option, i) => {
5+
return <option value={props.values[i]}>{option}</option>;
6+
});
7+
return (
8+
<select
9+
value={props.value}
10+
onChange={props.onChangeHandler}
11+
disabled={props.isDisabled}
12+
>
13+
{options}
14+
</select>
15+
);
16+
};
17+
18+
export default Select;

‎src/helpers/bubbleSort.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const bubbleSort = (alterStateAfterTimeOut, data) => {
2+
const array = [...data];
3+
let count = 0;
4+
for (let i = 0; i < array.length - 1; i++) {
5+
for (let j = 0; j < array.length - i - 1; j++) {
6+
alterStateAfterTimeOut(array, j, j + 1, count, j === 0, array.length - i);
7+
count++;
8+
if (array[j] > array[j + 1]) {
9+
let temp = array[j];
10+
array[j] = array[j + 1];
11+
array[j + 1] = temp;
12+
// console.log(arr);
13+
}
14+
}
15+
}
16+
alterStateAfterTimeOut(array, 0, 1, count, true, 1);
17+
alterStateAfterTimeOut(array, 0, 1, count, true, 0);
18+
alterStateAfterTimeOut(array, -1, -1, count);
19+
};
20+
21+
export default bubbleSort;

‎src/helpers/generateArray.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const generateArray = (size) => {
2+
const arr = [];
3+
for (let i = 0; i < size; i++) {
4+
const num = Math.round(Math.random() * 100) + 1;
5+
// console.log(num);
6+
arr.push(num);
7+
}
8+
return [...arr];
9+
};
10+
11+
export default generateArray;

‎src/helpers/selectionSort.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
const selectionSort = (alterStateAfterTimeOut, data) => {
2+
const array = [...data];
3+
let count = 0;
4+
for (let i = 0; i < array.length; i++) {
5+
let index = i;
6+
for (let j = i + 1; j < array.length; j++) {
7+
alterStateAfterTimeOut(array, i, j, count, j === i + 1, i - 1);
8+
count++;
9+
if (array[index] > array[j]) {
10+
index = j;
11+
// console.log(arr);
12+
}
13+
}
14+
let temp = array[i];
15+
array[i] = array[index];
16+
array[index] = temp;
17+
}
18+
alterStateAfterTimeOut(
19+
array,
20+
array.length - 1,
21+
array.length - 2,
22+
count,
23+
true,
24+
array.length - 2
25+
);
26+
alterStateAfterTimeOut(
27+
array,
28+
array.length - 1,
29+
array.length - 2,
30+
count,
31+
true,
32+
array.length - 1
33+
);
34+
alterStateAfterTimeOut(array, -1, -1, count);
35+
};
36+
37+
export default selectionSort;

0 commit comments

Comments
 (0)