added search option and fixed sorting issue

Author: TamimEhsan

src/homeComponents/cards.jsx

@@ -9,31 +9,45 @@ import sort from "./sort.png"
 import queen from './images/queen.PNG'
 import binSearch from './images/binaryTree.png'
 import {getDetails} from "./cardDetails";
+import TextField from "@material-ui/core/TextField";
 class Cards extends Component {
 
     state = {
-        cards:[]
+        cards:[],
+        filter:""
     }
 
     componentDidMount() {
         this.setState({cards:getDetails()});
     }
-
+    getData = (e)=>{
+        console.log(e.target.value);
+        this.setState({filter:e.target.value});
+    }
     render() {
         return (
-            <div className="d-flex flex-wrap justify-content-center Cards p-lg-5" >
-                {
-                    this.state.cards.map(card=>(
-                        <div>
-                            <ImgMediaCard2
-                                className="d-flex flex-wrap"
-                                key={card.id}
-                                card={card}/>
-                        </div>
-                    ))
-                }
+           <React.Fragment>
+               <div className="d-flex justify-content-end Cards">
+                   <TextField
+                       id="standard-basic" label="Search"
+                       color="secondary"
+                       onChange={this.getData}
+                   />
+               </div>
+               <div className="d-flex flex-wrap justify-content-center Cards p-lg-5" >
+                   {
+                       this.state.cards.filter((card) => card.title.toLowerCase().includes(this.state.filter.toLowerCase())||card.description.toLowerCase().includes(this.state.filter.toLowerCase())).map(card=>(
+                           <div>
+                               <ImgMediaCard2
+                                   className="d-flex flex-wrap"
+                                   key={card.id}
+                                   card={card}/>
+                           </div>
+                       ))
+                   }
 
-            </div>
+               </div>
+           </React.Fragment>
         );
     }
 }

src/homeComponents/searchText.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        '& > *': {
+            margin: theme.spacing(1),
+            width: '25ch',
+        },
+    },
+}));
+
+export default function BasicTextFields() {
+    const classes = useStyles();
+
+    return (
+        <form className={classes.root} noValidate autoComplete="off">
+            <TextField id="standard-basic" label="Search" />
+        </form>
+    );
+}

src/sortComponents/sort.js

@@ -106,7 +106,7 @@ class Sort extends Component {
               steps1 = bubbleSort(this.state.rects);
               break;
       }
-      this.handleFirst(steps1);
+
       if( this.state.doubles ){
           let steps2;
           switch (this.state.algo2){
@@ -123,6 +123,7 @@ class Sort extends Component {
                   steps2 = bubbleSort(this.state.rects2);
                   break;
           }
+          this.handleFirst(steps1);
           this.handleSecond(steps2);
       }
   }
@@ -168,12 +169,12 @@ class Sort extends Component {
          // },i*speed);
       }
   }
-    handleSecond = (steps) =>{
+    handleSecond = async (steps) =>{
         const {speed} = this.state;
         this.setState({isRunning2:true});
         const prevRect = this.state.rects2;
         for(let i = 0;i<steps.length;i++){
-            setTimeout(()=>{
+         //   setTimeout(()=>{
                 if( i!==0 ){
                     prevRect[steps[i-1].xx] = { ...prevRect[steps[i-1].xx],isSorting:false };
                     prevRect[steps[i-1].yy] = { ...prevRect[steps[i-1].yy],isSorting:false };
@@ -204,7 +205,8 @@ class Sort extends Component {
                     }
                 }*/
                 this.setState({rects2:prevRect});
-            },i*speed);
+                await sleep(this.state.speed);
+           // },i*speed);
         }
     }