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 [terms, setTerms] = useState([]);

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

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

export default App;