Removed hard coded values of stage items

Author: josinho101

public/index.html

@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Sorting visualizer" />
     <link
       rel="stylesheet"
       href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"

src/appsettings.js

@@ -0,0 +1,11 @@
+var settings = {
+  itemWidth: {
+    // default, min and max are index of [2, 4, 5, 10, 20, 40, 50] '
+    // which are item width in pixel
+    default: 4,
+    min: 1,
+    max: 7,
+  },
+};
+
+export default settings;

src/components/stage/itemcontainer.tsx

@@ -3,14 +3,18 @@ import React from "react";
 interface Props {
   items: number[];
   maxHeight: number;
+  itemWidth: number;
 }
 
 const ItemContainer: React.SFC<Props> = (props) => {
-  const { maxHeight, items } = props;
+  const { maxHeight, items, itemWidth } = props;
 
   /** render each sortable item */
   const renderItem = (item: number) => {
-    let style: React.CSSProperties = { marginTop: maxHeight - item };
+    let style: React.CSSProperties = {
+      marginTop: maxHeight - item,
+      width: itemWidth,
+    };
     return <div style={style}></div>;
   };
 

src/components/stage/stage.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import StageControls from "./stagecontrols";
 import ItemContainer from "./itemcontainer";
 import SortingHelper from "../../helpers/sortinghelper";
+import settings from "../../appsettings";
 
 interface State {
   renderedOn: number;
@@ -13,12 +14,28 @@ class Stage extends React.Component<Props, State> {
   // array to sort
   private arrayToSort: number[] = [];
 
+  // original array
+  private rawArray: number[] = [];
+
+  // width of an item in stage
+  private itemWidth = 0;
+
+  // total items to sort
+  private itemCount = 0;
+
+  // width of stage
+  private stageWidth = 800;
+
+  // height of stage
+  private stageHeight = 400;
+
   /**
    * constructor of stage
    */
   constructor(props: Props, state: State) {
     super(props, state);
-    this.arrayToSort = SortingHelper.generateRandomArray(80, 400);
+    this.setItemWidth();
+    this.generateRandomArray();
   }
 
   /**
@@ -33,7 +50,11 @@ class Stage extends React.Component<Props, State> {
           resetArray={this.resetArray}
           onItemWidthChange={this.onItemWidthChange}
         />
-        <ItemContainer items={this.arrayToSort} maxHeight={400} />
+        <ItemContainer
+          items={this.arrayToSort}
+          maxHeight={this.stageHeight}
+          itemWidth={this.itemWidth}
+        />
       </div>
     );
   }
@@ -56,7 +77,7 @@ class Stage extends React.Component<Props, State> {
    * reset array for sorting
    */
   private resetArray = (e: React.MouseEvent<HTMLElement>) => {
-    this.arrayToSort = SortingHelper.generateRandomArray(80, 400);
+    this.generateRandomArray();
     this.setState({ renderedOn: Date.now() });
   };
 
@@ -65,7 +86,29 @@ class Stage extends React.Component<Props, State> {
    */
   private onItemWidthChange = (e: React.ChangeEvent<HTMLElement>) => {
     let target: any = e.target;
-    console.log(`Current item width ${target.value}`);
+    this.itemWidth = SortingHelper.getItemWidth(parseInt(target.value));
+    this.setItemWidth();
+    this.arrayToSort = this.rawArray.slice(0, this.itemCount);
+    this.setState({ renderedOn: Date.now() });
+  };
+
+  /**
+   * set width of item
+   */
+  private setItemWidth = () => {
+    if (this.itemCount === 0) {
+      this.itemWidth = SortingHelper.getItemWidth(settings.itemWidth.default);
+    }
+    this.itemCount = this.stageWidth / (this.itemWidth + 1);
+  };
+
+  /**
+   * generate random array
+   */
+  private generateRandomArray = () => {
+    this.rawArray = SortingHelper.generateRandomArray(400, this.stageHeight);
+    this.arrayToSort = [...this.rawArray];
+    this.arrayToSort = this.rawArray.slice(0, this.itemCount);
   };
 }
 

src/components/stage/stagecontrols.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { RangeOptions } from "./typings/rangeoptions";
+import settings from "../../appsettings";
 
 interface Props {
   resetArray: (event: React.MouseEvent<HTMLElement>) => void;
@@ -10,9 +11,9 @@ interface Props {
 
 const StageControls: React.SFC<Props> = (props) => {
   const itemWidthRangeOptions: RangeOptions = {
-    default: 10,
-    min: 1,
-    max: 50,
+    default: settings.itemWidth.default,
+    min: settings.itemWidth.min,
+    max: settings.itemWidth.max,
   };
 
   return (

src/helpers/sortinghelper.ts

@@ -10,6 +10,20 @@ class SortingHelper {
       () => Math.floor(Math.random() * max)
     );
   };
+
+  /**
+   * return item width in pixel
+   */
+  public static getItemWidth = (weight: number): number => {
+    // width of each item will be the value + 1px margin
+    // example if width is 3 then item width will be 49 + 1 = 4
+    let itemWidth = [1, 3, 4, 9, 19, 39, 49];
+    if (weight > itemWidth.length) {
+      throw Error("Weight not valid for item width");
+    }
+
+    return itemWidth[weight - 1];
+  };
 }
 
 export default SortingHelper;

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -19,7 +15,5 @@
     "jsx": "react",
     "isolatedModules": true
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src", "public/appsettings.js"]
 }