import React, { Component } from "react";

const backendUrl = "https://kucinakobackend.ichigo.everydayimshuflin.com";

function makeRequest(queryString, jsonHandler) {
  const effectiveUrl = `${backendUrl}/${queryString}`
  fetch(`${backendUrl}`)
    .then((resp) => {
      return resp.json()
    })
    .then((json) => {
      jsonHandler(json);
    });
}

function testHandler(json) {
  console.log("JSON");
  console.log(json);
}

class App extends Component {
  constructor(props) {
    super(props);
    this.input = React.createRef();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    const value = this.input.current.value;
    console.log("handling submit with value: ", value);
    makeRequest("", testHandler);
  }

  render() {
    return(
      <div>
      <h1>Kucinako</h1>
      <label>Search
        <input type="text" ref={ this.input } />
      </label>
      <button onClick={ this.handleSubmit }>Make request</button>
      </div>
    );
  }
}

export default App;