search refactoring

src/ts/containers/test/Probes.tsx

@@ -26,7 +26,7 @@ export class Probes extends React.Component<any, any> {
         "domain": {
           "name": "asus"
         },
-        "probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
+        "probeKey": "1AGBLKDFJ2452ASDGFL2KWJLKSDJ",
         "description": "description1111111111",
       },
       {
@@ -37,7 +37,7 @@ export class Probes extends React.Component<any, any> {
         "domain": {
           "name": "ottugi"
         },
-        "probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
+        "probeKey": "2AGBLKDFJ2452ASDGFL2KWJLKSDJ",
         "description": "description22222222",
       },
       {
@@ -48,7 +48,7 @@ export class Probes extends React.Component<any, any> {
         "domain": {
           "name": "lg"
         },
-        "probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
+        "probeKey": "3AGBLKDFJ2452ASDGFL2KWJLKSDJ",
         "description": "description33333",
       },
       {
@@ -59,7 +59,7 @@ export class Probes extends React.Component<any, any> {
         "domain": {
           "name": "apple"
         },
-        "probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
+        "probeKey": "4AGBLKDFJ2452ASDGFL2KWJLKSDJ",
         "description": "description4444",
       },
     ];
@@ -82,17 +82,9 @@ export class Probes extends React.Component<any, any> {
     });
   }
 
-  handleSearch(searchWord: string) {
-    let founds = new Array();
-    for (let probe of this.data) {
-      if (probe.domain.name.toLowerCase().indexOf(searchWord) !== -1
-        || probe.description.toLowerCase().indexOf(searchWord) !== -1
-        || probe.metaProbeStatus.name.toLowerCase().indexOf(searchWord) !== -1) {
-        founds.push(probe);
-      }
-    }
+  handleSearch(result: object[]) {
     this.setState({
-      list: founds,
+      list: result,
     });
   }
 
@@ -115,7 +107,7 @@ export class Probes extends React.Component<any, any> {
   }
 
   renderRows() {
-    if(this.state.list.length === 0) {
+    if (this.state.list.length === 0) {
       return <Table.Row error >
         <Table.Cell textAlign='center' colSpan='5'>No results found.</Table.Cell>
       </Table.Row>;
@@ -131,6 +123,7 @@ export class Probes extends React.Component<any, any> {
     ));
   }
 
+
   render() {
     if (this.state.isDetail) {
       return <ProbeDetails probe={this.state.selected} onBack={() => this.setState({ isDetail: false })} />;
@@ -157,8 +150,9 @@ export class Probes extends React.Component<any, any> {
     return (
       <ListContainer
         contents={probeList}
-        filter={<ProbeFilter data={this.data} onFilter={this.handleFilter.bind(this)} />}
+        data={this.data}
         onSearch={this.handleSearch.bind(this)}
+        filter={<ProbeFilter onFilter={this.handleFilter.bind(this)} />}
       />
     );
   }

src/ts/containers/test/commons/ListContainer.tsx

@@ -1,26 +1,67 @@
 import * as React from 'react';
-import { Grid, Input, Form, Checkbox, Divider, Button } from 'semantic-ui-react';
+import { Grid, Input, Form, Checkbox, Divider } from 'semantic-ui-react';
 
 export class ListContainer extends React.Component<any, any> {
 
-  private data: any = null;
+  private found: boolean = false;
 
   constructor(props: any, context: any) {
     super(props, context);
     this.state = {
     };
+
   }
 
   handleSearch(e: any, data: any) {
-    this.props.onSearch(data.value.toLowerCase());
+    let searchWord = data.value;
+    let items: object[];
+    items = this.props.data;
+    let item: any;
+
+    let result = new Array();
+    for (item of items) {
+      this.search(item, searchWord);
+      if (this.found) {
+        result.push(item);
+      }
+      this.found = false;
+    }
+
+    this.props.onSearch(result);
+  }
+
+  handleSearchInput(e: any, data: any) {
+    this.setState({
+      searchWord: data.value,
+    });
+  }
+
+  search(item: any, searchWord: string) {
+    let key: any;
+    for (key in item) {
+      if (this.isString(item[key])) {
+        if (item[key].toLowerCase().indexOf(searchWord.toLowerCase()) !== -1) {
+          this.found = true;
+        }
+      } else {
+        this.search(item[key], searchWord);
+      }
+    }
+  }
+
+  isString(val: any): boolean {
+    if (typeof val === 'string') {
+      return true;
+    }
+    return false;
   }
 
   render() {
     return (
       <Grid>
         <Grid.Column width={4}>
-          <Input icon='search' placeholder='Search...' onChange={this.handleSearch.bind(this)} fluid />
-          {/*filter  */}
+          <Input icon='search' label={{ icon: 'asterisk' }}
+            labelPosition='left corner' placeholder='Search...' onChange={this.handleSearch.bind(this)} fluid/>
           <Divider />
           {this.props.filter}
         </Grid.Column>