Basic saimiar-english stuff working

CSS sucks

App.jsx

@@ -6,7 +6,7 @@ const backendUrl = "https://kucinakobackend.ichigo.everydayimshuflin.com";
 
 function makeRequest(queryString, jsonHandler) {
   const effectiveUrl = `${backendUrl}/${queryString}`
-  fetch(`${backendUrl}`)
+  fetch(`${effectiveUrl}`)
     .then((resp) => {
       return resp.json()
     })
@@ -20,34 +20,95 @@ function testHandler(json) {
   console.log(json);
 }
 
+class Results extends Component {
+  constructor(props) {
+    super(props);
+    this.content = this.content.bind(this);
+  }
+
+  content() {
+    const header = (
+      <div className="searchResultHeader">
+        Searched for <b>{ this.props.searchTerm }</b> search type: { this.props.searchType }
+      </div>);
+    const entries = this.props.searchResults.map((entry, idx) => {
+      return (<div className="searchResult" key={ entry.id }>
+        <b>{ entry.sai }</b> - { entry.eng }
+        <br />
+        <span className="synclass">{ entry.syn_category }</span>
+        <br />
+        Type: { entry.morph_type }
+      </div>);
+    });
+    return [header].concat(entries);
+  }
+
+  render() {
+    const results = this.props.searchResults;
+    return(
+      <div className='results'>
+        { results ? this.content() : "No results" } 
+      </div>
+    );
+  }
+}
+
 class App extends Component {
   constructor(props) {
     super(props);
     this.input = React.createRef();
-    this.handleSubmit = this.handleSubmit.bind(this);
+    this.searchEng = this.searchEng.bind(this);
+    this.searchSaimiar = this.searchSaimiar.bind(this);
+
+    this.state = {
+      searchResults: null,
+      searchType: null,
+      searchTerm: null
+    };
   }
 
-  handleSubmit(event) {
+  searchSaimiar(evt) {
-    const value = this.input.current.value;
+    const searchTerm = this.input.current.value;
-    console.log("handling submit with value: ", value);
+    const request = `saimiar?sai=like.*${searchTerm}*`
-    makeRequest("", testHandler);
+    makeRequest(request, (json) => {
+      const searchResults = json.length === 0 ? null : json;
+      this.setState({ searchResults, searchType: "saimiar", searchTerm });
+    });
+  }
+
+  searchEng(evt) {
+    const searchTerm = this.input.current.value;
+    const request = `saimiar?eng=like.*${searchTerm}*`
+    makeRequest(request, (json) => {
+      const searchResults = json.length === 0 ? null : json;
+      this.setState({ searchResults, searchType: "eng-saimiar", searchTerm });
+    });
   }
 
   render() {
     return(
       <main>
         <div className='container'>
-          <h1>Kucinako</h1>
+          <div className='search'>
-          <div className='textInput'>
+            <h1>Kucinako</h1>
-              <input className='textInput' type="text" ref={ this.input } />
+            <div className='textInput'>
+                <input className='textInput' type="text" ref={ this.input } />
+            </div>
+            <br/>
+            <button onClick={ this.searchSaimiar } className="searchButton">Saimiar</button>
+            <button onClick={ this.searchEng } className="searchButton">English</button>
           </div>
-          <br/>
-          <button onClick={ this.handleSubmit }>Saimiar</button>
-          <button onClick={ this.handleSubmit }>English</button>
         </div>
+        <Results
+          searchResults={ this.state.searchResults }
+          searchTerm= { this.state.searchTerm }
+          searchType={ this.state.searchType }
+        />
       </main>
     );
   }
 }
 
+
+
 export default App;

App.scss

@@ -20,3 +20,9 @@ div .textInput {
 input {
     width: 100%;
 }
+
+.searchButton {
+    padding: 5px;
+    margin: 10px;
+    font-dize: 22px;
+}