Added heap, merge sort, Fixed Single sort issue

Author: TamimEhsan

README.md

@@ -11,6 +11,20 @@ So far there are 6 segemets
 - Convex Hull
 - Binary Search Game
 
-I have implemented a total of 11 algorithms so far. And will try to add more later.  
+I have implemented a total of 13 algorithms so far. And will try to add more later.  
+ALgorithms implemented yet so far are
+- DFS
+- BFS
+- Djsktra
+- Recursive Maze Creation
+- Bubble sort
+- Selection sort
+- Insertion sort
+- Heap sort
+- Merge sort
+- Sieve of Eratosthenes
+- N Queen Backtracking
+- Graham Scan for Convex Hull
+- Binary Search
 I am not sure if anyone would like to contribute to this project or not. But any kind of contributions are welcomes. Also if you like this please star this repo. It keeps me motivated.
 

src/App.js

@@ -7,7 +7,7 @@ import Sort from "./sortComponents/sort";
 import Queen from "./queenComponents/queen";
 import ConvexHull from "./convexHullComponents/convexHull";
 import BinarySearch from "./binarySearchComponent/binarySearch";
-
+import RecursiveSort from "./recursiveSortComponents/recursiveSort";
 class App extends Component {
     constructor() {
         super();
@@ -26,6 +26,7 @@ class App extends Component {
                     <Route path='/nqueen' component={Queen}/>
                     <Route path='/convexhull' component={ConvexHull}/>
                     <Route path='/binarysearch' component={BinarySearch}/>
+                    <Route path='/recursivesort' component={RecursiveSort}/>
                     <Route path='/' component={Home}/>
                 </Switch>
             </Router>

src/algorithms/heapSort.js

@@ -0,0 +1,57 @@
+let values = [];
+export default function HeapSort(rects2){
+    let rects = rects2.slice();
+    values = [];
+    let sz = rects2.length;
+   // sz = sz-1;
+    heapSort(rects,sz);
+    return values;
+}
+function heapify(rects,n,i){
+    let largest = i; // Initialize largest as root
+    let l = 2 * i + 1; // left = 2*i + 1
+    let r = 2 * i + 2; // right = 2*i + 2
+
+    // If left child is larger than root
+    if (l < n && rects[l].width > rects[largest].width)
+        largest = l;
+
+    // If right child is larger than largest so far
+    if (r < n && rects[r].width > rects[largest].width)
+        largest = r;
+
+    // If largest is not root
+    if (largest != i) {
+        let temp = rects[i];
+        rects[i] = rects[largest];
+        rects[largest] = temp;
+        let value = {
+            left:i,
+            right:largest,
+            sorted: false
+        }
+        values.push(value);
+        // Recursively heapify the affected sub-tree
+        heapify(rects, n, largest);
+    }
+}
+function heapSort(rects,n){
+    for(let i = Math.floor(n/2)-1;i>=0;i--){
+      //  console.log("heap ",n," ",i);
+        heapify(rects,n,i);
+    }
+    for (let i = n-1 ; i > 0; i--) {
+        // Move current root to end
+        let temp = rects[i];
+        rects[i] = rects[0];
+        rects[0] = temp;
+        let value = {
+            left:i,
+            right:0,
+            sorted:true
+        }
+        values.push(value);
+        // call max heapify on the reduced heap
+        heapify(rects, i, 0);
+    }
+}

src/algorithms/mergeSort.js

@@ -0,0 +1,62 @@
+let values = [];
+export default function mergeSort(rects2){
+    let rects = rects2.slice();
+    values = [];
+    let sz = rects2.length;
+   // console.log( "fdsfsd",sz );
+    sz = sz-1;
+    mergeS(rects,0,sz);
+    return values;
+}
+
+function merge(rects, l, m, r){
+  //  console.log(l," ",r);
+    let n1 = m-l+1;
+    let n2 = r-m;
+
+    const L = rects.slice(l, m+1);
+    const R = rects.slice(m+1,r+1);
+    let i = 0;
+    let j = 0;
+    let k = l;
+    while(i<n1 && j<n2){
+        if( L[i].width <= R[j].width ){
+            rects[k] = L[i];
+            i++;
+        } else{
+            rects[k] = R[j];
+            j++;
+        }
+        k++;
+    }
+    while (i < n1) {
+        rects[k] = L[i];
+        i++;
+        k++;
+    }
+    while (j < n2) {
+        rects[k] = R[j];
+        j++;
+        k++;
+    }
+
+}
+
+function mergeS(rects,l,r){
+
+    if( l>=r ) return;
+    let m = l+ (r-l)/2;
+    m = Math.floor(m);
+   // console.log("iiiiiiiiiiiiiiiiiiiiiiiii ",m);
+    mergeS(rects,l,m);
+    mergeS(rects,m+1,r);
+    merge(rects,l,m,r);
+    let rectsCopy = rects.slice(l,r+1);
+    let value = {
+        left:l,
+        right:r,
+        mid:m,
+        val:rectsCopy
+    }
+    values.push(value);
+}

src/homeComponents/cardDetails.js

@@ -29,6 +29,13 @@ export function getDetails(){
            route:"/sort",
            img:sort
        },
+       {
+           id:9,
+           title:"Recursive Sorting",
+           description:"Compare different recursive sorting algorithms",
+           route:"/recursivesort",
+           img:sort
+       },
        {
            id:4,
            title:"N Queen",
@@ -65,5 +72,6 @@ export function getDetails(){
            route:"/",
            img:puzzle
        }
+
    ]
 }

src/recursiveSortComponents/airBnbSlider.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, makeStyles } from '@material-ui/core/styles';
+import Slider from '@material-ui/core/Slider';
+import Typography from '@material-ui/core/Typography';
+import Tooltip from '@material-ui/core/Tooltip';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        width: 300 + theme.spacing(3) * 2,
+    },
+    margin: {
+        height: theme.spacing(3),
+    },
+}));
+
+function ValueLabelComponent(props) {
+    const { children, open, value } = props;
+
+    return (
+        <Tooltip open={open} enterTouchDelay={0} placement="top" title={value}>
+            {children}
+        </Tooltip>
+    );
+}
+
+ValueLabelComponent.propTypes = {
+    children: PropTypes.element.isRequired,
+    open: PropTypes.bool.isRequired,
+    value: PropTypes.number.isRequired,
+};
+
+
+
+
+const AirbnbSlider = withStyles({
+    root: {
+        color: '#3a8589',
+        height: 3,
+        padding: '13px 0',
+    },
+    thumb: {
+        height: 27,
+        width: 27,
+        backgroundColor: '#fff',
+        border: '1px solid currentColor',
+        marginTop: -12,
+        marginLeft: -13,
+        boxShadow: '#ebebeb 0 2px 2px',
+        '&:focus, &:hover, &$active': {
+            boxShadow: '#ccc 0 2px 3px 1px',
+        },
+        '& .bar': {
+            // display: inline-block !important;
+            height: 9,
+            width: 1,
+            backgroundColor: 'currentColor',
+            marginLeft: 1,
+            marginRight: 1,
+        },
+    },
+    active: {},
+    track: {
+        height: 3,
+    },
+    rail: {
+        color: '#ffffff',
+        opacity: 1,
+        height: 3,
+    },
+})(Slider);
+
+function AirbnbThumbComponent(props) {
+    return (
+        <span {...props}>
+      <span className="bar" />
+      <span className="bar" />
+      <span className="bar" />
+    </span>
+    );
+}
+
+export default function CustomizedSlider() {
+    const classes = useStyles();
+
+    return (
+        <div className={classes.root}>
+            <Typography gutterBottom>Airbnb</Typography>
+            <AirbnbSlider
+                ThumbComponent={AirbnbThumbComponent}
+                getAriaLabel={(index) => (index === 0 ? 'Minimum price' : 'Maximum price')}
+                defaultValue={[20, 40]}
+                valueLabelDisplay="on"
+            />
+        </div>
+    );
+}

src/recursiveSortComponents/doubleSlider.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import {makeStyles, withStyles} from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/core/Slider';
+
+const useStyles = makeStyles({
+    root: {
+        width: 200,
+    },
+});
+
+
+const CSlider = withStyles({
+    root: {
+       // color: "#ffffff",
+        height: 3,
+        padding: "13px 0",
+    },
+    track: {
+        height: 4,
+        borderRadius: 2,
+    },
+    thumb: {
+        backgroundColor: "#fff",
+        //color: "#fff",
+    },
+})(Slider);
+
+function valuetext(value) {
+    return `${value}`;
+}
+
+
+
+export default function RangeSlider(props) {
+    const classes = useStyles();
+    const [value, setValue] = React.useState([20, 37]);
+
+    const handleChange = (event, newValue) => {
+        setValue(newValue);
+
+    };
+    const handleCommit = (event, newValue) => {
+        console.log(newValue);
+    };
+
+    return (
+        <div className={classes.root}>
+            <CSlider
+                disabled={props.disable}
+                value={value}
+                onChange={handleChange}
+                onChangeCommitted={handleCommit}
+                valueLabelDisplay="auto"
+                aria-labelledby="range-slider"
+                getAriaValueText={valuetext}
+                valueLabelDisplay="off"
+            />
+            <Typography id="range-slider" gutterBottom>
+                Value range
+            </Typography>
+        </div>
+    );
+}

src/recursiveSortComponents/formControlLabel.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
+
+export default function SwitchLabels(props) {
+    const [state, setState] = React.useState({
+        checkedA: false,
+    });
+
+    const handleChange = (event) => {
+        setState({ ...state, [event.target.name]: event.target.checked });
+        props.onDoubleChange(event.target.checked);
+    };
+
+    return (
+        <FormGroup row>
+            <FormControlLabel
+                control={<Switch checked={state.checkedA} onChange={handleChange} name="checkedA" />}
+                label="Duo"
+                disabled={props.disable}
+            />
+
+        </FormGroup>
+    );
+}