Merge pull request #13 from sadanandpai/feature/sort

Added sort functionality

src/apps/sorting-visualizer/components/controller/array-input.tsx

@@ -1,56 +1,93 @@
+import React, { useState, useEffect } from 'react'
+import {
+  setArray,
+  setIsPlaying,
+  setReset
+} from '@/apps/sorting-visualizer/store/sorting-visualizer.slice'
+import { useAppDispatch, useAppSelector } from '@/store/hooks'
 import {
   convertArrayStringToArray,
   convertInputToArrayString,
   getRndmNumInRange,
-} from "@/apps/sorting-visualizer/helpers/array-helpers";
-import {
-  setArray,
-  setIsPlaying,
-  setReset,
-} from "@/apps/sorting-visualizer/store/sorting-visualizer.slice";
-import { useAppDispatch, useAppSelector } from "@/store/hooks";
-import { useEffect, useState } from "react";
+  sortArray
+} from '@/apps/sorting-visualizer/helpers/array-helpers'
 
-import classes from "./controls.module.scss";
+import classes from './controls.module.scss'
 
-function ArrayInput() {
-  const dispatch = useAppDispatch();
-  const array = useAppSelector((state) => state.sortViz.array);
-  const [input, setInput] = useState(array.join(", "));
+type SortFunction = () => void
+
+function ArrayInput () {
+  const dispatch = useAppDispatch()
+  const array = useAppSelector(state => state.sortViz.array)
+  const [input, setInput] = useState(array.join(', '))
+  // const [sortingOptionsVisible, setSortingOptionsVisible] = useState(false)
 
   useEffect(() => {
-    dispatch(setIsPlaying(false));
-    dispatch(setReset());
-  }, [array, dispatch]);
+    dispatch(setIsPlaying(false))
+    dispatch(setReset())
+  }, [array, dispatch])
 
   const onRandomize = () => {
     const newInput = Array.from(new Array(getRndmNumInRange(10, 40)), () =>
       getRndmNumInRange()
-    );
-    setInput(newInput.join(", "));
-    dispatch(setArray(newInput));
-  };
+    )
+    setInput(newInput.join(', '))
+    dispatch(setArray(newInput))
+  }
+
+  const handleSortAscending = () => {
+    const sortedAscending = sortArray(input, 'asc');
+    setInput(sortedAscending.join(', '));
+    dispatch(setArray(sortedAscending));
+  }
+
+  const handleSortDescending = () => {
+    const sortedDescending = sortArray(input, 'desc');
+    setInput(sortedDescending.join(', '));
+    dispatch(setArray(sortedDescending));
+  }
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const inputAsStr = convertInputToArrayString(e.target.value);
-    setInput(inputAsStr);
-    dispatch(setArray(convertArrayStringToArray(inputAsStr)));
-  };
+    const inputAsStr = convertInputToArrayString(e.target.value)
+    setInput(inputAsStr)
+    dispatch(setArray(convertArrayStringToArray(inputAsStr)))
+  }
+
+  const sortOptions: { [key: string]: SortFunction } = {
+    ascending: handleSortAscending,
+    descending: handleSortDescending
+  }
 
   return (
     <div className={classes.numbers}>
       <button className={classes.rndmBtn} onClick={onRandomize}>
         Randomize
       </button>
+      {/* <div className={classes.buttonContainer}> */}
+          <select
+            className={classes.buttonContainer}
+            onChange={e => {
+              let sortOption = e.target.value
+              if (sortOptions[sortOption]) {
+                sortOptions[sortOption]()
+              }
+            }}
+          >
+            <option value=''>Sort </option>
+            <option value='ascending'>Ascending</option>
+            <option value='descending'>Descending</option>
+          </select>
+      {/* </div> */}
+
       <input
         className={classes.arrayInput}
-        type="text"
-        placeholder="Numbers to sort (comma separate - max 3 digits)"
+        type='text'
+        placeholder='Numbers to sort (comma separate - max 3 digits)'
         value={input}
         onChange={onChange}
       />
     </div>
-  );
+  )
 }
 
-export default ArrayInput;
+export default ArrayInput

src/apps/sorting-visualizer/components/controller/controls.module.scss

@@ -9,11 +9,12 @@
     margin-bottom: 20px;
 
     .numbers {
-      display: flex;
-      flex-basis: 75%;
-      gap: 16px;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 15px;      
 
       .arrayInput {
+        grid-column: span 2;
         flex: 1;
         width: 100%;
         padding: 5px;
@@ -27,6 +28,11 @@
         border: 1px solid transparent;
         outline: 2px solid theme.$error;
       }
+
+      .buttonContainer {
+        display: grid;
+        place-content: center;
+      }
 
       .rndmBtn {
         padding: 5px 10px;
@@ -99,6 +105,12 @@
   .controllerWrapper .controller {
     display: flex;
 
+    .numbers {
+      display: flex;
+      flex-basis: 75%;
+      gap: 16px;
+    }
+
     .controls {
       margin-top: 0;
     }
@@ -110,4 +122,4 @@
   .controllerWrapper img {
     filter: invert(1);
   }
-}
+}

src/apps/sorting-visualizer/helpers/array-helpers.ts

@@ -18,3 +18,12 @@ export function convertArrayStringToArray(input: string) {
 export function getRndmNumInRange(lowerLimit = 0, upperLimit = 999) {
   return Math.floor(Math.random() * (upperLimit - lowerLimit)) + lowerLimit;
 }
+
+export const sortArray = (input: string, order: 'asc' | 'desc'): number[] => {
+  const sortedArray: number[] = input
+    .split(', ')
+    .map(num => parseInt(num, 10))
+    .sort((a, b) => (order === 'asc' ? a - b : b - a));
+  return sortedArray;
+};
+