Implv/125 Selective batch deletion in search result page

* Fixed the error which occurs in click an available checkbox.
* Implementation is not perfect yet...

resource/js/components/SearchPage/SearchResult.js

@@ -11,7 +11,9 @@ export default class SearchResult extends React.Component {
     super(props);
     this.state = {
       deletionMode : false,
+      selectedPages : new Set(),
     }
+    this.toggleCheckbox = this.toggleCheckbox.bind(this);
   }
 
   isNotSearchedYet() {
@@ -29,23 +31,11 @@ export default class SearchResult extends React.Component {
     return false;
   }
 
-  componentWillMount() {
-    this.selectedCheckboxes = new Set();
-  }
-
   toggleCheckbox(page) {
-    if (this.selectedCheckboxes.has(page)) {
-      this.selectedCheckboxes.delete(page);
+    if (this.state.selectedPages.has(page)) {
+      this.state.selectedPages.delete(page);
     } else {
-      this.selectedCheckboxes.add(page);
-    }
-  }
-
-  handleFormSubmit(formSubmitEvent) {
-    formSubmitEvent.preventDefault();
-
-    for (const checkbox of this.selectedCheckboxes) {
-      console.log(checkbox, 'is selected.');
+      this.state.selectedPages.add(page);
     }
   }
 
@@ -108,7 +98,7 @@ export default class SearchResult extends React.Component {
           excludePathString={excludePathString}
           >
           <SearchResultInput
-            selectablePage={page}
+            page={page}
             deletionMode={this.state.deletionMode}
             handleCheckboxChange={this.toggleCheckbox}/>
           <div className="page-list-option">

resource/js/components/SearchPage/SearchResultInput.js

@@ -7,10 +7,11 @@ export default class SearchResultInput extends React.Component {
     this.state = {
       isChecked: false,
     }
+    this.toggleCheckboxChange = this.toggleCheckboxChange.bind(this);
   }
 
   toggleCheckboxChange() {
-    const { handleCheckboxChange, selectablePage } = this.props;
+    const { handleCheckboxChange, page } = this.props;
 
     this.setState(({ isChecked }) => (
       {
@@ -18,12 +19,12 @@ export default class SearchResultInput extends React.Component {
       }
     ));
 
-    handleCheckboxChange(selectablePage);
+    this.props.handleCheckboxChange(page);
   }
 
   render() {
     let deletionMode = this.props.deletionMode;
-    let pageId = this.props.selectablePage.id;
+    let pageId = this.props.page.id;
     const { isChecked } = this.state;
 
     const checkBoxInput = deletionMode ? (
@@ -42,7 +43,7 @@ export default class SearchResultInput extends React.Component {
 }
 
 SearchResultInput.propTypes = {
-  selectablePage: PropTypes.object.isRequired,
+  page: PropTypes.object.isRequired,
   deletionMode: PropTypes.bool.isRequired,
   handleCheckboxChange: PropTypes.func.isRequired,
 };