import React, { Component } from 'react';
//import Link from 'react-router';
//import './css/Documents.css';

class FiltrableDocumentsTable extends Component {

  componentDidMount() {
    this.loadDocuments();
  }

  constructor(props) {
    super(props);
    let query = this.props.location.query;
    this.state = {
      documents: null,
      errText: null,
      filter : {
        displayName: query.displayName?query.displayName: '',
        showDeleted: false
      }
    };
  }
  checkStatus(response) {
    if (response.status >= 200 && response.status < 300) {
      return response;
    } else {
      var error = new Error(response.statusText);
      error.response = response;
      throw error;
    }
  }
  /**
   *  Загрузка данных о документах
   */
  loadDocuments() {
    var url = "/jparestresource-web/web/documents";
    if (this.state.filter.displayName) {
      url += "?filter=displayName==" + this.state.filter.displayName;
    }
    console.log("fetch url:" + url);

    fetch(url, {
      method: "GET",
      credentials: 'same-origin',
      headers: {
        "Accept": "application/json"
      }
    })
      .then(this.checkStatus)
      .then((response) => {
        return response.json();
      })
      .then((response) => {
        if (response !== undefined && response.document !== undefined) {
          this.setState({documents: response.document, errText: null});
        }

        return;
      })
      .catch((ex) => {

        if (ex.response !== undefined) {
          ex.response.text().then((errorMsg) => {
            this.setState({errText: errorMsg});
          });
        } else {
          this.setState({errText: ex.message});
        }
      });
  }
  render() {
    //console.log(this.state.documents);
    return (
      <div>
          <SearchBar
              filter={this.state.filter}
              />    
          {this.state.documents &&
              <DocumentsTable
                  documents={this.state.documents}
                  />
          }
          {this.state.errText &&
              <div className="ui red message">Ошибка запроса списка документов: {this.state.errText}</div>
          }
      
      </div>
      );
  }
}

class SearchBar extends React.Component {
  render() {
    return (
      <form>
          <input
              type="text"
              name="displayName"
              placeholder="Search, may use * and ?..."
              defaultValue={this.props.filter.displayName}
              />
          <button type="submit">Submit</button>
          <p>
              <input
                  type="checkbox"
                  defaultChecked={this.props.filter.showDeleted}
                  />
              {' '}
              Show deleted documents
          </p>
      </form>
      );
  }
}

class DocumentsTable extends Component {
  render() {
    const documents = this.props.documents;
    return (
      <div className="DocumentsTable">
          <table className="ui celled table">
              <caption>List of Documents</caption>
              <thead>
                  <tr>
                      <th>Date</th>
                      <th>Name</th>
                  </tr>
              </thead>
              <tbody>
                  {documents.map((document, index) => (
                  <tr key={index}>
                      <td>
                          {document.docDate.split('-').reverse().join('.')}
                      </td>
                      <td>
                          {document.displayName}
                      </td>
                  </tr>
                          ))}
              </tbody>
          </table>
      </div>
      );
  }
}

export default FiltrableDocumentsTable;

@@ -368,17 +368,16 @@
   filter
- 
 : %7B%0A    
@@ -410,17 +410,19 @@
 playName
-?
+ ? 
 query.di
@@ -430,16 +430,17 @@
 playName
+ 
 : '',%0A  
@@ -2204,21 +2204,24 @@
 %0A  %7D%0A%7D%0A%0A
-class
+function
  SearchB
@@ -2226,50 +2226,18 @@
 hBar
- extends React.Component %7B%0A  render(
+(props
 ) %7B%0A
-  
   re
@@ -2239,26 +2239,24 @@
 %0A  return (%0A
-  
     %3Cform%3E%0A 
@@ -2258,35 +2258,31 @@
 rm%3E%0A        
-  
 %3Cinput%0A
-  
             
@@ -2293,18 +2293,16 @@
 =%22text%22%0A
-  
         
@@ -2336,18 +2336,16 @@
         
-  
 placehol
@@ -2385,26 +2385,24 @@
             
-  
 defaultValue
@@ -2403,21 +2403,16 @@
 tValue=%7B
-this.
 props.fi
@@ -2421,34 +2421,32 @@
 er.displayName%7D%0A
-  
             /%3E%0A 
@@ -2452,18 +2452,16 @@
         
-  
 %3Cbutton 
@@ -2502,16 +2502,12 @@
     
-  
 %3Cp%3E%0A
-  
     
@@ -2533,26 +2533,24 @@
             
-  
 type=%22checkb
@@ -2553,18 +2553,16 @@
 eckbox%22%0A
-  
         
@@ -2585,21 +2585,16 @@
 hecked=%7B
-this.
 props.fi
@@ -2619,34 +2619,32 @@
                 
-  
 /%3E%0A             
@@ -2646,18 +2646,14 @@
     
- 
- 
 %7B' '%7D%0A
-  
     
@@ -2683,18 +2683,16 @@
 cuments%0A
-  
         
@@ -2700,18 +2700,16 @@
 /p%3E%0A    
-  
 %3C/form%3E%0A
@@ -2716,25 +2716,22 @@
     
-  
 );%0A
-  %7D%0A%7D%0A%0Aclass
+%7D%0A%0Afunction
  Doc
@@ -2746,84 +2746,17 @@
 ble 
-extends Component %7B%0A  render() %7B%0A    const documents = this.props.documents;
+(props) %7B
 %0A   
@@ -3098,32 +3098,38 @@
                %7B
+props.
 documents.map((d
@@ -3537,20 +3537,16 @@
      );%0A
-  %7D%0A
 %7D%0A%0Aexpor

replace components with functions