Skip to content

Commit

Permalink
Generate options for number input
Browse files Browse the repository at this point in the history
  • Loading branch information
Sadanand Pai committed Oct 2, 2023
1 parent 194e323 commit f1b8354
Show file tree
Hide file tree
Showing 58 changed files with 470 additions and 409 deletions.
13 changes: 13 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "always",
"proseWrap": "always",
"htmlWhitespaceSensitivity": "css"
}
26 changes: 13 additions & 13 deletions src/apps/sorting-visualizer/__tests__/helpers/array-helpers.spec.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import {
convertInputToArrayString,
getRndmNumInRange,
} from "@/apps/sorting-visualizer/helpers/array-helpers";
} from '@/apps/sorting-visualizer/helpers/array-helpers';

describe("getRndmNumInRange", () => {
it("should generates random number within range", () => {
describe('getRndmNumInRange', () => {
it('should generates random number within range', () => {
const lowerLimit = 10;
const upperLimit = 20;
const randomNumber = getRndmNumInRange(lowerLimit, upperLimit);
Expand All @@ -14,24 +14,24 @@ describe("getRndmNumInRange", () => {
});
});

describe("convertInputToArrayString", () => {
it("should convert input string to array string", () => {
const input = "1, 2, 3, 4, 5";
const expectedOutput = "1, 2, 3, 4, 5";
describe('convertInputToArrayString', () => {
it('should convert input string to array string', () => {
const input = '1, 2, 3, 4, 5';
const expectedOutput = '1, 2, 3, 4, 5';

expect(convertInputToArrayString(input)).toEqual(expectedOutput);
});

it("should remove whitespace", () => {
const input = "1 2 3";
const expectedOutput = "123";
it('should remove whitespace', () => {
const input = '1 2 3';
const expectedOutput = '123';

expect(convertInputToArrayString(input)).toEqual(expectedOutput);
});

it("should remove non-digit characters", () => {
const input = "1, ab2, 3, 5gh";
const expectedOutput = "1, 2, 3, 5";
it('should remove non-digit characters', () => {
const input = '1, ab2, 3, 5gh';
const expectedOutput = '1, 2, 3, 5';

expect(convertInputToArrayString(input)).toEqual(expectedOutput);
});
Expand Down
14 changes: 7 additions & 7 deletions src/apps/sorting-visualizer/components/bar/bar-ui.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
import { UIProps } from "@/apps/sorting-visualizer/models/interfaces";
import classes from "./bar.module.scss";
import { useMemo } from "react";
import { UIProps } from '@/apps/sorting-visualizer/models/interfaces';
import classes from './bar.module.scss';
import { useMemo } from 'react';

function BarUI({ array, sorts, highlights, pivot }: UIProps) {
const max = useMemo(() => Math.max(...array), [array]);

function getBarColor(idx: number) {
let cellClass = "";
let cellClass = '';

if (pivot === idx) {
cellClass = "pivot";
cellClass = 'pivot';
}

if (sorts.includes(idx)) {
cellClass = "sort";
cellClass = 'sort';
}

if (highlights.includes(idx)) {
cellClass = "highlight";
cellClass = 'highlight';
}

return cellClass;
Expand Down
2 changes: 1 addition & 1 deletion src/apps/sorting-visualizer/components/bar/bar.module.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@use "/src/apps/sorting-visualizer/styles/cell-colors";
@use '/src/apps/sorting-visualizer/styles/cell-colors';

.arrayContainer {
position: relative;
Expand Down
10 changes: 5 additions & 5 deletions src/apps/sorting-visualizer/components/cell/cell-ui.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import Cell from "@/apps/sorting-visualizer/components/cell/cell";
import MovingCell from "./moving-cell";
import SwappingCell from "@/apps/sorting-visualizer/components/cell/swapping-cell";
import { UIProps } from "@/apps/sorting-visualizer/models/interfaces";
import classes from "./cell.module.scss";
import Cell from '@/apps/sorting-visualizer/components/cell/cell';
import MovingCell from './moving-cell';
import SwappingCell from '@/apps/sorting-visualizer/components/cell/swapping-cell';
import { UIProps } from '@/apps/sorting-visualizer/models/interfaces';
import classes from './cell.module.scss';

const CellUI = function CellUI({
array,
Expand Down
4 changes: 2 additions & 2 deletions src/apps/sorting-visualizer/components/cell/cell.module.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@use "/src/styles/theme";
@use "/src/apps/sorting-visualizer/styles/cell-colors";
@use '/src/styles/theme';
@use '/src/apps/sorting-visualizer/styles/cell-colors';

.arrayContainer {
position: relative;
Expand Down
12 changes: 6 additions & 6 deletions src/apps/sorting-visualizer/components/cell/cell.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { CellProps } from "@/apps/sorting-visualizer/models/interfaces";
import classes from "./cell.module.scss";
import { CellProps } from '@/apps/sorting-visualizer/models/interfaces';
import classes from './cell.module.scss';

function Cell({
order,
Expand All @@ -9,18 +9,18 @@ function Cell({
isHighlighted = false,
isPivot = false,
}: CellProps) {
let cellClass = "";
let cellClass = '';

if (isPivot) {
cellClass = "pivot";
cellClass = 'pivot';
}

if (isSorted) {
cellClass = "sort";
cellClass = 'sort';
}

if (isHighlighted) {
cellClass = "highlight";
cellClass = 'highlight';
}

return (
Expand Down
8 changes: 4 additions & 4 deletions src/apps/sorting-visualizer/components/cell/moving-cell.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import {
getMovingAnimation,
getSwapAnimation,
} from "@/apps/sorting-visualizer/helpers/key-frames-helpers";
} from '@/apps/sorting-visualizer/helpers/key-frames-helpers';

import Cell from "@/apps/sorting-visualizer/components/cell/cell";
import { MovingCellProps } from "@/apps/sorting-visualizer/models/interfaces";
import { swapInterval } from "@/apps/sorting-visualizer/store/global.state";
import Cell from '@/apps/sorting-visualizer/components/cell/cell';
import { MovingCellProps } from '@/apps/sorting-visualizer/models/interfaces';
import { swapInterval } from '@/apps/sorting-visualizer/store/global.state';

function MovingCell({
originalOrder,
Expand Down
8 changes: 4 additions & 4 deletions src/apps/sorting-visualizer/components/cell/swapping-cell.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Cell from "@/apps/sorting-visualizer/components/cell/cell";
import { MovingCellProps } from "@/apps/sorting-visualizer/models/interfaces";
import { getSwapAnimation } from "@/apps/sorting-visualizer/helpers/key-frames-helpers";
import { swapInterval } from "@/apps/sorting-visualizer/store/global.state";
import Cell from '@/apps/sorting-visualizer/components/cell/cell';
import { MovingCellProps } from '@/apps/sorting-visualizer/models/interfaces';
import { getSwapAnimation } from '@/apps/sorting-visualizer/helpers/key-frames-helpers';
import { swapInterval } from '@/apps/sorting-visualizer/store/global.state';

function SwappingCell({
originalOrder,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import {
modifyAlgoSelection,
setReset,
} from "@/apps/sorting-visualizer/store/sorting-visualizer.slice";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
} from '@/apps/sorting-visualizer/store/sorting-visualizer.slice';
import { useAppDispatch, useAppSelector } from '@/store/hooks';

import { algoList } from "@/apps/sorting-visualizer/sorting-algorithms/algo-list";
import classes from "./controls.module.scss";
import { algoList } from '@/apps/sorting-visualizer/sorting-algorithms/algo-list';
import classes from './controls.module.scss';

function AlgoSelection() {
const dispatch = useAppDispatch();
Expand Down
106 changes: 31 additions & 75 deletions src/apps/sorting-visualizer/components/controller/array-input.tsx
Original file line number Diff line number Diff line change
@@ -1,93 +1,49 @@
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 React, { useEffect, useState } from 'react';
import {
convertArrayStringToArray,
convertInputToArrayString,
getRndmNumInRange,
sortArray
} from '@/apps/sorting-visualizer/helpers/array-helpers'

import classes from './controls.module.scss'
} 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';

type SortFunction = () => void
import NumberGenerator from './number-generator';
import classes from './controls.module.scss';

function ArrayInput () {
const dispatch = useAppDispatch()
const array = useAppSelector(state => state.sortViz.array)
const [input, setInput] = useState(array.join(', '))
// const [sortingOptionsVisible, setSortingOptionsVisible] = useState(false)
function ArrayInput() {
const dispatch = useAppDispatch();
const array = useAppSelector((state) => state.sortViz.array);
const [input, setInput] = useState(array.join(', '));

useEffect(() => {
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))
}

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 sortOptions: { [key: string]: SortFunction } = {
ascending: handleSortAscending,
descending: handleSortDescending
}
dispatch(setIsPlaying(false));
dispatch(setReset());
setInput(array.join(', '));
}, [array, dispatch]);

const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const inputAsStr = convertInputToArrayString(e.target.value);
setInput(inputAsStr);
const inputAsArray = convertArrayStringToArray(inputAsStr);
dispatch(setArray(inputAsArray));
};

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> */}
<NumberGenerator />

<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}
onChange={onInputChange}
/>
</div>
)
);
}

export default ArrayInput
export default ArrayInput;
16 changes: 8 additions & 8 deletions src/apps/sorting-visualizer/components/controller/controller.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import {
setIsPlaying,
setReset,
} from "@/apps/sorting-visualizer/store/sorting-visualizer.slice";
} from '@/apps/sorting-visualizer/store/sorting-visualizer.slice';

import ArrayInput from "./array-input";
import Execution from "./execution";
import TypeSwitch from "./type-switch";
import classes from "./controls.module.scss";
import { useAppDispatch } from "@/store/hooks";
import { useEffect } from "react";
import { useParams } from "react-router-dom";
import ArrayInput from './array-input';
import Execution from './execution';
import TypeSwitch from './type-switch';
import classes from './controls.module.scss';
import { useAppDispatch } from '@/store/hooks';
import { useEffect } from 'react';
import { useParams } from 'react-router-dom';

function Controller() {
const { algoName } = useParams();
Expand Down
Loading

0 comments on commit f1b8354

Please sign in to comment.