Refactoring

components/Bar.tsx

@@ -1,8 +1,16 @@
+import { useTheme } from "@geist-ui/react"
+
 export const Bar: React.FC<{ height: number }> = (props) => {
   const { height } = props
+
+  const { palette } = useTheme()
+
   const barStylings: React.CSSProperties = {
     height: `${height}%`,
+    backgroundColor: palette.errorLight,
+    width: "5px",
+    marginRight: 5,
   }
 
-  return <div className="bar bg-red-600 w-1" style={barStylings}></div>
+  return <div className="bar" style={barStylings}></div>
 }

pages/index.tsx

@@ -3,7 +3,7 @@ import { selectionSort } from "../algorithms/selectionSort"
 import { Bar } from "../components/Bar"
 import { ChartWrapper } from "../components/ChartWrapper"
 import { SortButton } from "../components/SortButton"
-import { generateNewBars } from "../utils/index"
+import { generateNewBarHeights } from "../utils/index"
 
 /**
  * Tailwind class of the active bar
@@ -173,7 +173,7 @@ const Home: React.FC = () => {
   ))
 
   useEffect(() => {
-    const newBarHeights = generateNewBars(150)
+    const newBarHeights = generateNewBarHeights(150)
     setBarHeights(newBarHeights)
   }, [])
 

utils/index.ts

@@ -2,24 +2,25 @@
  * Generate a random integer between 2 integers. If floats are passed instead of integers, the function will round down the min value, and round up the max value.
  * @param min Minimum number (inclusive)
  * @param max Maximum number (exclusive)
- *
+ * @returns A random number between min and max
  */
-export const generateRandomNumber = (min: number, max: number): number => {
+export const generateARandomNumber = (min: number, max: number): number => {
   min = Math.ceil(min)
   max = Math.floor(max)
   return Math.floor(Math.random() * (max - min + 1)) + min
 }
 
 /**
- * Generate x amount of numbers between 1 - 99 (represents bar heights)
- * @param amount How many bar heights to generate
+ * Generate x amount of numbers, each is between 1 - 100
+ * @param amountOfBar How many bar heights to generate
+ * @returns An array of numbers, representing bar heights
  */
-export const generateNewBars = (amount: number): number[] => {
-  let newBars: number[] = []
-  for (let i = 0; i < amount; i++) {
-    let randomNumber = generateRandomNumber(1, 100)
-    newBars.push(randomNumber)
+export const generateNewBarHeights = (amountOfBar: number): number[] => {
+  let newBarHeights: number[] = []
+  for (let i = 0; i < amountOfBar; i++) {
+    let randomHeight = generateARandomNumber(1, 101)
+    newBarHeights.push(randomHeight)
   }
 
-  return newBars
+  return newBarHeights
 }