Assessment for Tophat

App.js

import React, { Component } from 'react';
import { imageSearch } from './api';
import './App.css';

const AppContext = React.createContext();
let timeOutId = 0;

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      query: '',
      image: '',
    }
  }
  onInput(e) {
    // clear the previous setTimeout
    clearTimeout(timeOutId);
    this.setState(prevState => {
      return { query: e };
  });
  timeOutId = setTimeout(
      () => imageSearch(this.state.query, (result, uri) => {
        console.log('uri: ', uri)
        this.setState(prevState => {
          return { image: uri }
        });
        // handle debouncing
        // if typing stopped,
      }),
      300
    )

  }
  render() {
    return (
      <div className="App">
        {/* <AppContext.Provider value={this.state}> */}
          {this.props.children}
        {/* </AppContext.Provider> */}
        <form
          className="search-bar"
          onChange={e => this.onInput(e.target.value)}
          placeholder={this.state.query}
          >
          <input type='search' value={this.state.query}></input>
        </form>
        <img src={this.state.image}></img>
      </div>
    );
  }
}