import React, {useState} from 'react';
import TermInput from './TermInput.js';
import DiseaseGraph from './DiseaseGraph.js';
import {useAsync} from '../util.js';
import {
    diseasesBySymptoms,
    exploreSymptoms
} from '../data/mock';

const App = () =>
{
    const [query, setQuery] = useState([]);

    const diseases = useAsync([], diseasesBySymptoms, query);
    const terms = useAsync([], exploreSymptoms, diseases);

    return (
        <div className="App">
            <TermInput
                query={query}
                setQuery={setQuery}
                availableTerms={terms}
            />
            <DiseaseGraph
                terms={terms}
                query={query}
                setQuery={setQuery}
            />
        </div>
    );
};

export default App;