Merge pull request #10 from danilhendrasr/refactoring

danilhendrasr · web-flow · commit 6f13de99c8c0 · 2021-03-09T08:18:01.000+07:00
Fix bad variable namings and hard coded values
diff --git a/algorithms-helper/bubble-sort.ts b/algorithms-helper/bubble-sort.ts
@@ -1,4 +1,4 @@
-import { ACTIVE_BAR_COLOR, INACTIVE_BAR_COLOR } from "../constants"
+import { AnimateFunctionParams } from "../types"
 import {
   changeBarsColor,
   getAllBars,
@@ -42,11 +42,8 @@ const bubbleSort = (array: number[]) => {
   return animaSeq
 }
 
-export const animateBubbleSort = (
-  barHeights: number[],
-  sortingSpeed: number,
-  callback?: () => void
-) => {
+export const animateBubbleSort = (params: AnimateFunctionParams) => {
+  const { barHeights, palette, sortingSpeed, callback } = params
   const animationSequence = bubbleSort(barHeights)
   const bars = getAllBars()
 
@@ -57,25 +54,25 @@ export const animateBubbleSort = (
       if (!isFirstIteration) {
         const [prevFirstBarIdx, prevSecondBarIdx] = animationSequence[iteration - 1]
 
-        changeBarsColor(
-          [bars[prevFirstBarIdx], bars[prevSecondBarIdx]],
-          INACTIVE_BAR_COLOR
-        )
+        changeBarsColor([bars[prevFirstBarIdx], bars[prevSecondBarIdx]], palette.inactive)
       }
 
       const activeBarHeights = [
         getNumberFromHeightString(bars[firstBarIdx].style.height),
         getNumberFromHeightString(bars[secondBarIdx].style.height),
       ]
 
-      makeBarsActive([
-        { element: bars[firstBarIdx], height: activeBarHeights[1] },
-        { element: bars[secondBarIdx], height: activeBarHeights[0] },
-      ])
+      makeBarsActive(
+        [
+          { element: bars[firstBarIdx], height: activeBarHeights[1] },
+          { element: bars[secondBarIdx], height: activeBarHeights[0] },
+        ],
+        palette.active
+      )
 
       const isLastIteration = iteration === animationSequence.length - 1
       if (isLastIteration && callback) {
-        postSortAnimation(bars, ACTIVE_BAR_COLOR)
+        postSortAnimation(bars, palette.active)
         callback()
       }
     }, iteration * sortingSpeed)
diff --git a/algorithms-helper/insertion-sort.ts b/algorithms-helper/insertion-sort.ts
@@ -1,4 +1,4 @@
-import { INACTIVE_BAR_COLOR, ACTIVE_BAR_COLOR } from "../constants"
+import { AnimateFunctionParams } from "../types"
 import { getAllBars, changeBarsColor, makeBarsActive, postSortAnimation } from "../utils"
 
 interface InsertionAnimationSequence {
@@ -52,11 +52,8 @@ const insertionSort = (arrayToSort: number[]): InsertionAnimationSequence[] => {
   return animaSeq
 }
 
-export const animateInsertionSort = (
-  barHeights: number[],
-  sortingSpeed: number,
-  callback?: () => void
-) => {
+export const animateInsertionSort = (params: AnimateFunctionParams) => {
+  const { barHeights, palette, sortingSpeed, callback } = params
   const animationSequence = insertionSort(barHeights)
   const bars = getAllBars()
 
@@ -73,11 +70,14 @@ export const animateInsertionSort = (
 
     setTimeout(() => {
       if (!isFirstIteration) {
-        changeBarsColor(bars[animationSequence[i - 1].idx], INACTIVE_BAR_COLOR)
+        changeBarsColor(bars[animationSequence[i - 1].idx], palette.inactive)
       }
 
       prevIdxBarHeights.push(bars[idxToInsertTo].style.height)
-      makeBarsActive([{ element: bars[idxToInsertTo], height: barHeights[barToMove] }])
+      makeBarsActive(
+        [{ element: bars[idxToInsertTo], height: barHeights[barToMove] }],
+        palette.active
+      )
     }, i * sortingSpeed)
 
     for (let x = 1; x <= rightShift; x++) {
@@ -87,8 +87,8 @@ export const animateInsertionSort = (
 
         const isLastInnerIteration = x === rightShift
         if (isLastInnerIteration && isLastIteration) {
-          changeBarsColor(bars[idxToInsertTo], INACTIVE_BAR_COLOR)
-          postSortAnimation(bars, ACTIVE_BAR_COLOR)
+          changeBarsColor(bars[idxToInsertTo], palette.inactive)
+          postSortAnimation(bars, palette.active)
           if (callback) callback()
         }
       }, i * sortingSpeed)
diff --git a/algorithms-helper/selection-sort.ts b/algorithms-helper/selection-sort.ts
@@ -1,5 +1,4 @@
-import { INACTIVE_BAR_COLOR, ACTIVE_BAR_COLOR } from "../constants"
-import { ActiveBar } from "../types"
+import { ActiveBar, AnimateFunctionParams } from "../types"
 import { changeBarsColor, getAllBars, makeBarsActive, postSortAnimation } from "../utils"
 
 const selectionSort = (inputArray: number[]) => {
@@ -44,11 +43,8 @@ const selectionSort = (inputArray: number[]) => {
   return [arrayState, animationSequence]
 }
 
-export const animateSelectionSort = (
-  barHeights: number[],
-  sortingSpeed: number,
-  callback?: () => void
-) => {
+export const animateSelectionSort = (params: AnimateFunctionParams) => {
+  const { barHeights, palette, sortingSpeed, callback } = params
   const [arrayStates, animationSequence] = selectionSort(barHeights)
   const bars = getAllBars()
 
@@ -81,23 +77,23 @@ export const animateSelectionSort = (
         let prevAnimationSequence = animationSequence[i - 1]
         let [prevBar1Idx, prevBar2Idx] = prevAnimationSequence
         let previousActiveBars = [bars[prevBar1Idx], bars[prevBar2Idx]]
-        changeBarsColor(previousActiveBars, INACTIVE_BAR_COLOR)
+        changeBarsColor(previousActiveBars, palette.inactive)
       }
 
-      makeBarsActive(barsToActiveBars)
+      makeBarsActive(barsToActiveBars, palette.active)
 
       if (lastIteration) {
         // Revert the last bar to an inactive bar
         setTimeout(() => {
           let lastBar = activeBar1
-          changeBarsColor(lastBar, INACTIVE_BAR_COLOR)
+          changeBarsColor(lastBar, palette.inactive)
 
           // Because this animate function executes asynchronous function (setTimeout)
           // if we wanted to do something right after this function is done running,
           // we have to put the code inside the last setTimeout.
           // Otherwise, the code will get executed without waiting for the setTimeouts
           // to get executed.
-          postSortAnimation(bars, ACTIVE_BAR_COLOR)
+          postSortAnimation(bars, palette.active)
           if (callback) callback()
         }, sortingSpeed)
       }
diff --git a/constants.ts b/constants.ts
@@ -1,7 +1,5 @@
 import { SortingAlgorithms, SortingSpeeds } from "./types"
 
-export const ACTIVE_BAR_COLOR = "#111"
-export const INACTIVE_BAR_COLOR = "#ff1a1a"
 export const ALGORITHMS_LIST: SortingAlgorithms[] = ["Selection", "Insertion", "Bubble"]
 export const sortingSpeedTable: SortingSpeeds = {
   slow: 160,
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -2,7 +2,13 @@
 import styles from "../styles/Home.module.scss"
 
 import React, { useEffect, useState } from "react"
-import { changeBarsColor, generateBarHeights, getAllBars, startAnimation } from "../utils"
+import {
+  changeBarsColor,
+  generateBarHeights,
+  getAllBars,
+  hexToRgb,
+  startAnimation,
+} from "../utils"
 import {
   AppTitle,
   AlgorithmSelector,
@@ -14,8 +20,8 @@ import {
   SortButton,
   SpeedControl,
 } from "../components"
-import { Spacer } from "@geist-ui/react"
-import { INACTIVE_BAR_COLOR, sortingSpeedTable } from "../constants"
+import { Spacer, useTheme } from "@geist-ui/react"
+import { sortingSpeedTable } from "../constants"
 import { SortingAlgorithms, SortingSpeeds, SortingState } from "../types"
 import { default as Head } from "next/head"
 import { AppStateContext } from "../contexts/app-state"
@@ -33,36 +39,44 @@ const getBarElementsFromBarHeights = (barHeights: number[]) => {
 }
 
 const Home: React.FC = () => {
+  const { palette: geistUIPalette } = useTheme()
+  const palette = {
+    active: geistUIPalette.foreground,
+    inactive: geistUIPalette.errorLight,
+  }
+
   const [barHeights, setBarHeights] = useState<number[]>([])
-  const [sortState, setSortState] = useState<SortingState>("Sort")
-  const [barLength, setBarLength] = useState(70)
+  const [sortingState, setSortingState] = useState<SortingState>("Sort")
+  const [arrayLength, setArrayLength] = useState(70)
   const [selectedAlgorithm, setSelectedAlgorithm] = useState<SortingAlgorithms>(
     "Selection"
   )
   const [sortingSpeed, setSortingSpeed] = useState<keyof SortingSpeeds>("normal")
 
-  useEffect(resetBars, [barLength])
+  useEffect(resetBars, [arrayLength])
   useEffect(resetBars, [selectedAlgorithm])
 
   function resetBars() {
-    const newBarHeights = generateBarHeights(barLength)
+    const newBarHeights = generateBarHeights(arrayLength)
     setBarHeights(newBarHeights)
-    setSortState("Sort")
+    setSortingState("Sort")
     requestAnimationFrame(() => {
       const barsDomEl = getAllBars()
-      if (barsDomEl[5].style.backgroundColor === "rgb(17, 17, 17)") {
-        changeBarsColor(barsDomEl, INACTIVE_BAR_COLOR)
+      const sampleBg = barsDomEl[5].style.backgroundColor
+      if (sampleBg === hexToRgb(palette.active)) {
+        changeBarsColor(barsDomEl, palette.inactive)
       }
     })
   }
 
   function triggerAnimation() {
-    setSortState("Sorting")
+    setSortingState("Sorting")
     startAnimation({
-      sortingAlgorithm: selectedAlgorithm,
       barHeights,
+      palette,
+      sortingAlgorithm: selectedAlgorithm,
       sortingSpeed: sortingSpeedTable[sortingSpeed],
-      callback: () => setSortState("Sorted"),
+      callback: () => setSortingState("Sorted"),
     })
   }
 
@@ -73,7 +87,7 @@ const Home: React.FC = () => {
       </Head>
 
       <div className={styles.container}>
-        <AppStateContext.Provider value={{ sortingState: sortState }}>
+        <AppStateContext.Provider value={{ sortingState }}>
           <div className={styles.sidebarContainer}>
             <Spacer y={1} />
             <AppTitle />
@@ -83,8 +97,8 @@ const Home: React.FC = () => {
               selectedAlgorithm={selectedAlgorithm}
             />
             <ArrayLengthModifier
-              onChange={(value) => setBarLength(value)}
-              value={barLength}
+              onChange={(value) => setArrayLength(value)}
+              value={arrayLength}
             />
             <Spacer y={0.5} />
             <SpeedControl
diff --git a/types.ts b/types.ts
@@ -6,3 +6,9 @@ export interface SortingSpeeds {
   normal: number
   fast: number
 }
+export interface AnimateFunctionParams {
+  barHeights: number[]
+  palette: { active: string; inactive: string }
+  sortingSpeed: number
+  callback?: () => void
+}
diff --git a/utils/index.ts b/utils/index.ts
@@ -1,8 +1,7 @@
 import { animateBubbleSort } from "../algorithms-helper/bubble-sort"
 import { animateInsertionSort } from "../algorithms-helper/insertion-sort"
 import { animateSelectionSort } from "../algorithms-helper/selection-sort"
-import { ACTIVE_BAR_COLOR } from "../constants"
-import { ActiveBar, SortingAlgorithms, SortingSpeeds } from "../types"
+import { ActiveBar, SortingAlgorithms } from "../types"
 
 export const generateARandomNumber = (min: number, max: number) => {
   min = Math.ceil(min)
@@ -47,9 +46,9 @@ export const changeBarsColor = (
   }
 }
 
-export const makeBarsActive = (bars: ActiveBar[]) => {
+export const makeBarsActive = (bars: ActiveBar[], activeBarColor: string) => {
   for (const bar of bars) {
-    changeBarsColor(bar.element, ACTIVE_BAR_COLOR)
+    changeBarsColor(bar.element, activeBarColor)
     bar.element.style.height = `${bar.height}%`
   }
 }
@@ -82,23 +81,46 @@ export const getNumberFromHeightString = (height: string) => {
 
 interface StartAnimationParams {
   barHeights: number[]
+  palette: { active: string; inactive: string }
   sortingAlgorithm: SortingAlgorithms
   sortingSpeed: number
   callback?: () => void
 }
 
 export const startAnimation = (params: StartAnimationParams) => {
-  const { barHeights, sortingAlgorithm, sortingSpeed, callback } = params
+  const { barHeights, palette, sortingAlgorithm, sortingSpeed, callback } = params
+  const animationParams = {
+    barHeights,
+    palette,
+    sortingSpeed,
+    callback,
+  }
 
   switch (sortingAlgorithm) {
     case "Selection":
-      animateSelectionSort(barHeights, sortingSpeed, callback)
+      animateSelectionSort(animationParams)
       break
     case "Insertion":
-      animateInsertionSort(barHeights, sortingSpeed, callback)
+      animateInsertionSort(animationParams)
       break
     case "Bubble":
-      animateBubbleSort(barHeights, sortingSpeed, callback)
+      animateBubbleSort(animationParams)
       break
   }
 }
+
+export const hexToRgb = (hex: string) => {
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+  hex = hex.replace(shorthandRegex, function (m, r, g, b) {
+    return r + r + g + g + b + b
+  })
+
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  const rgb = {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16),
+  }
+
+  return result ? `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` : null
+}
