Merge pull request #9 from danilhendrasr/refactoring

Refactored lots of code

Author: danilhendrasr

algorithms-helper/bubble-sort.ts

@@ -7,18 +7,18 @@ import {
   postSortAnimation,
 } from "../utils"
 
-const bubbleSort = (array: number[]): [number, number][] => {
+const bubbleSort = (array: number[]) => {
   let animaSeq: [number, number][] = []
-  let copyArray: number[] = [...array]
+  let copyArray = [...array]
 
-  let isSortingDone: boolean = false
+  let isSortingDone = false
   while (!isSortingDone) {
     for (let i = 0; i < copyArray.length - 1; i++) {
       const isInLastPosition = i === copyArray.length - 1
       if (isInLastPosition) break
 
-      const left: number = copyArray[i]
-      const right: number = copyArray[i + 1]
+      const left = copyArray[i]
+      const right = copyArray[i + 1]
 
       if (left > right) {
         const temp = right
@@ -28,10 +28,10 @@ const bubbleSort = (array: number[]): [number, number][] => {
       }
     }
 
-    let isArraySorted: boolean = true
+    let isArraySorted = true
     for (let j = 0; j < copyArray.length - 1; j++) {
-      const left: number = copyArray[j]
-      const right: number = copyArray[j + 1]
+      const left = copyArray[j]
+      const right = copyArray[j + 1]
 
       if (left > right) isArraySorted = false
     }
@@ -46,7 +46,7 @@ export const animateBubbleSort = (
   barHeights: number[],
   sortingSpeed: number,
   callback?: () => void
-): void => {
+) => {
   const animationSequence = bubbleSort(barHeights)
   const bars = getAllBars()
 

algorithms-helper/insertion-sort.ts

@@ -12,23 +12,23 @@ const insertionSort = (arrayToSort: number[]): InsertionAnimationSequence[] => {
   let sortedArray: number[] = []
 
   for (let i = 0; i < arrayToSort.length; i++) {
-    const currentItem: number = arrayToSort[i]
+    const currentItem = arrayToSort[i]
 
-    const isFirstIteration: boolean = i === 0
+    const isFirstIteration = i === 0
     if (isFirstIteration) {
       animaSeq.push({ idx: 0, moveFrom: i, shift: 0 })
       sortedArray.push(currentItem)
       continue
     }
 
     for (let j = sortedArray.length - 1; j >= 0; j--) {
-      const isLastInneriteration: boolean = j === 0
+      const isLastInneriteration = j === 0
 
-      const leftSide: number = isLastInneriteration ? -Infinity : sortedArray[j - 1]
-      const rightSide: number = sortedArray[j]
+      const leftSide = isLastInneriteration ? -Infinity : sortedArray[j - 1]
+      const rightSide = sortedArray[j]
 
-      const isLeftSideLesser: boolean = leftSide <= currentItem
-      const isRightSideGreater: boolean = currentItem <= rightSide
+      const isLeftSideLesser = leftSide <= currentItem
+      const isRightSideGreater = currentItem <= rightSide
 
       if (isLeftSideLesser && isRightSideGreater) {
         const aboveRightSide = sortedArray.splice(j)
@@ -56,7 +56,7 @@ export const animateInsertionSort = (
   barHeights: number[],
   sortingSpeed: number,
   callback?: () => void
-): void => {
+) => {
   const animationSequence = insertionSort(barHeights)
   const bars = getAllBars()
 

algorithms-helper/selection-sort.ts

@@ -1,8 +1,8 @@
-import { INACTIVE_BAR_COLOR, ACTIVE_BAR_COLOR, SORTING_SPEED } from "../constants"
+import { INACTIVE_BAR_COLOR, ACTIVE_BAR_COLOR } from "../constants"
 import { ActiveBar } from "../types"
 import { changeBarsColor, getAllBars, makeBarsActive, postSortAnimation } from "../utils"
 
-const selectionSort = (inputArray: number[]): [number[][], [number, number][]] => {
+const selectionSort = (inputArray: number[]) => {
   let animationSequence: [number, number][] = []
   let unsortedArray = [...inputArray]
   let arrayState: number[][] = []
@@ -13,7 +13,7 @@ const selectionSort = (inputArray: number[]): [number[][], [number, number][]] =
     let currentMinIdx = x
 
     // These indexes will be stored as an item in the animation sequence array
-    let selectedBars: [number, number] = [currentMinIdx, currentMinIdx]
+    let selectedBars = [currentMinIdx, currentMinIdx] as [number, number]
 
     for (let y = x + 1; y < unsortedArray.length; y++) {
       let currentItem = unsortedArray[y]
@@ -48,7 +48,7 @@ export const animateSelectionSort = (
   barHeights: number[],
   sortingSpeed: number,
   callback?: () => void
-): void => {
+) => {
   const [arrayStates, animationSequence] = selectionSort(barHeights)
   const bars = getAllBars()
 

components/AlgorithmSelector.tsx

@@ -1,35 +1,39 @@
-import { Select, Text, Spacer } from "@geist-ui/react"
-import { SortingAlgorithms } from "../types"
-
 // @ts-ignore
 import styles from "../styles/Home.module.scss"
 
-const algorithms: SortingAlgorithms[] = ["Selection", "Insertion", "Bubble"]
+import { Select, Text, Spacer } from "@geist-ui/react"
+import { SortingAlgorithms } from "../types"
+import { useControlsDisabled } from "../hooks"
+import { ALGORITHMS_LIST } from "../constants"
 
 interface Props {
-  disabled: boolean
-  selectedAlgorithm: string | string[]
-  onChangeHandler: (algorithm: string | string[]) => void
+  selectedAlgorithm: SortingAlgorithms
+  onChange: (algorithm: SortingAlgorithms) => void
 }
 
-export const AlgorithmSelector: React.FC<Props> = (props) => {
-  let { disabled, selectedAlgorithm, onChangeHandler } = props
-
-  const selectOptions = algorithms.map((algorithm, idx) => (
+const getSelectOptionsFromAlgorithmsList = (algorithmsList: SortingAlgorithms[]) => {
+  const selectOptions = algorithmsList.map((algorithm, idx) => (
     <Select.Option key={idx} value={algorithm}>
-      {`${algorithm} Sort`}
+      {`${algorithm} sort`}
     </Select.Option>
   ))
 
+  return selectOptions
+}
+
+export const AlgorithmSelector: React.FC<Props> = ({ selectedAlgorithm, onChange }) => {
+  const isControlsDisabled = useControlsDisabled()
+  const selectOptions = getSelectOptionsFromAlgorithmsList(ALGORITHMS_LIST)
+
   return (
     <div className={styles.sideBarInputContainer}>
       <Text>Select Algorithm</Text>
       <Spacer y={-0.4} />
       <Select
-        disabled={disabled}
-        value={selectedAlgorithm}
-        onChange={(algorithm) => onChangeHandler(algorithm)}
-        size="large">
+        disabled={isControlsDisabled}
+        onChange={(algorithm) => onChange(algorithm as SortingAlgorithms)}
+        size="large"
+        value={selectedAlgorithm}>
         {selectOptions}
       </Select>
     </div>

components/AppTitle.tsx

@@ -1,8 +1,8 @@
-import { Text } from "@geist-ui/react"
-
 // @ts-ignore
 import styles from "../styles/Home.module.scss"
 
+import { Text } from "@geist-ui/react"
+
 export const AppTitle: React.FC = () => {
   return (
     <Text h1 size="2em" className={styles.textCenter}>

components/ArrayLengthModifier.tsx

@@ -1,22 +1,22 @@
-import { Text, Slider } from "@geist-ui/react"
-
 // @ts-ignore
 import styles from "../styles/Home.module.scss"
 
+import { Text, Slider } from "@geist-ui/react"
+import { useControlsDisabled } from "../hooks"
+
 interface Props {
-  disabled: boolean
   value: number
   onChange: (value: number) => void
 }
 
-export const ArrayLengthModifier: React.FC<Props> = (props): JSX.Element => {
-  const { disabled, value, onChange } = props
+export const ArrayLengthModifier: React.FC<Props> = ({ value, onChange }) => {
+  const isControlsDisabled = useControlsDisabled()
 
   return (
     <div className={styles.sideBarInputContainer}>
       <Text>Length of array</Text>
       <Slider
-        disabled={disabled}
+        disabled={isControlsDisabled}
         max={100}
         min={10}
         onChange={onChange}

components/Bar.tsx

@@ -1,11 +1,11 @@
 import { useTheme } from "@geist-ui/react"
 
-export const Bar: React.FC<{
+interface Props {
   height: number
   width: number
-}> = (props) => {
-  const { height, width } = props
+}
 
+export const Bar: React.FC<Props> = ({ height, width }) => {
   const { palette } = useTheme()
 
   const barStylings: React.CSSProperties = {

components/LinkToRepo.tsx

@@ -1,9 +1,9 @@
-import { Github } from "@geist-ui/react-icons"
-
 // @ts-ignore
 import styles from "../styles/Home.module.scss"
 
-export const LinkToRepo: React.FC = (props) => {
+import { Github } from "@geist-ui/react-icons"
+
+export const LinkToRepo: React.FC = () => {
   return (
     <a
       className={styles.githubIconWrapper}

components/ResetButton.tsx

@@ -1,14 +1,15 @@
 import { Button } from "@geist-ui/react"
+import { useControlsDisabled } from "../hooks"
 
 interface Props {
-  disabled: boolean
   onClick: () => void
 }
 
-export const ResetButton: React.FC<Props> = (props) => {
-  const { disabled, onClick } = props
+export const ResetButton: React.FC<Props> = ({ onClick }) => {
+  const isControlsDisabled = useControlsDisabled()
+
   return (
-    <Button disabled={disabled} ghost onClick={onClick} type="error">
+    <Button disabled={isControlsDisabled} ghost onClick={onClick} type="error">
       Reset
     </Button>
   )

components/SortButton.tsx

@@ -1,43 +1,30 @@
-import { useEffect, useState } from "react"
+import { useContext } from "react"
 import { Button, Spacer } from "@geist-ui/react"
 import { Check, Play } from "@geist-ui/react-icons"
-import { SortingState } from "../types"
+import { AppStateContext } from "../contexts/app-state"
 
-interface SortButtonProps {
-  clickAction: () => void
-  sortState: SortingState
+interface Props {
+  onClick: () => void
 }
 
-export const SortButton: React.FC<SortButtonProps> = (props) => {
-  const { sortState, clickAction } = props
-  const [text, setText] = useState<SortingState>("Sort")
+export const SortButton: React.FC<Props> = ({ onClick }) => {
+  const sortingState = useContext(AppStateContext).sortingState
 
-  useEffect(() => {
-    if (sortState !== text) setText(sortState)
-  }, [sortState])
-
-  let isSorting = text === "Sorting"
-  let isSorted = text === "Sorted"
-  const onClick = () => {
-    if (isSorted) return
-    clickAction()
-  }
+  const isIdle = sortingState === "Sort"
+  const isSorting = sortingState === "Sorting"
+  const isSorted = sortingState === "Sorted"
 
   return (
     <Button
-      style={text === "Sorted" ? { pointerEvents: "none" } : undefined}
       loading={isSorting}
       onClick={onClick}
-      shadow={text === "Sort"}
+      shadow={isIdle}
+      style={isSorted ? { pointerEvents: "none" } : undefined}
       type="secondary">
-      {text === "Sort" && <Play size={15} />}
-      {isSorted && (
-        <>
-          <Check size={20} />
-        </>
-      )}
+      {isIdle && <Play size={15} />}
+      {isSorted && <Check size={20} />}
       <Spacer inline x={0.2} />
-      {text}
+      {sortingState}
     </Button>
   )
 }