app.js

import React, { Component } from 'react';
import Search from './components/Search.js';
import './app.css';
import axios from 'axios';
import queryString from 'query-string';

const datasetId = 'dog_breed_information_20180809_010118_141';
const apiToken = '829fe134-388b-4aea-8ce3-edbe7a267958';

export const query = async query => {
	const url = `https://localhost:8080/api/query`;
	const params = queryString.stringify({
		apiToken,
		query,
		dataSets: datasetId,
		recordStyle: '2.2',
	});
	const allResults = await axios.get(`${url}?${params}`);

	// for now just log results to the console
	console.log(allResults);
	return allResults;
};

class App extends Component {
	constructor(props) {
		super(props);
		this.fetch = this.fetch.bind(this);
	}

	state = {
		results: {
			breed: null,
			heightHighInches: 0,
			heightLowInches: 0,
			weightHighLbs: 0,
			weightLowLbs: 0,
		},
	};

	async fetch(values) {
		const results = await query(values.query);
		this.setState({ results });
	}

	render() {
		console.log(this.state.results);
		return (
			<div className="root">
				<h1>Find a Breed</h1>
				<Search onSubmit={this.fetch} />
				{this.state.results.records ? <div>moo</div> : null}
			</div>
		);
	}
}

export default App;